 |
|
 |
|
| |
January 6th, 2009
Potřeboval jsem nutně “tuhletu přejížděčku” a nechtělo se mi guuuglovat a guuglovat. Není to samozřejmě nic extra, ale za deset minut jsem nebyl schopnej spáchat nic lepšího. Tipy se zobrazují u všech elementů se třídou tip a s atributem alt, který je textem tipu. Tip cca klonuje pozici prvku, ke kterému patří a taky přebírá jeho šířku. Pokud to není žádoucí, navrhuju prostudovat volání metody clonePosition().
JavaScript:
document. observe(‘dom:loaded’, function() {
$$(‘*.tip[alt]’).each(function(el){
el.observe(‘mouseover’, show_tip.bindAsEventListener(el))
}, this);
$$(‘*.tip[alt]’).each(function(el){
el.observe(‘mouseout’, hide_tip.bindAsEventListener(el))
}, this);
});
function show_tip(ev)
{
var tip = Builder.node(‘div’, {
style: ‘display:none;position:absolute;’,
id: ‘tip’
},Builder.node(‘p’,this.readAttribute(‘alt’)));
$(‘wrap’).appendChild(tip);
Element.clonePosition(tip,this,{ offsetTop:20, setHeight: false});
new Effect.SlideDown(tip,{duration:0.1});
ev.stop();
}
function hide_tip(ev)
{
new Effect.SlideUp(‘tip’,{duration:0.1});
ev.stop();
Element.remove(‘tip’);
} Trošku CSS:
#tip { border: 1px solid #B38E5F; background: #FFCB87; }
#tip p { padding: 3px;}
Popularity: 18% [?]
August 11th, 2008
This is a simple ripoff of standard BlindUp and BlindDown effects known from script.aculo.us javascript framework. To use these effects simply download the source file and link the file after scriptacolous library. Effects are accesible as usual new Effect.BlindLeft(element);. Cheerz.
Effect. BlindRight = function(element ) {
element = $ (element );
var elementDimensions = element. getDimensions();
return new Effect. Scale(element, 100, Object. extend({
scaleContent: false,
scaleY: false,
scaleFrom: 0,
scaleMode: {originalHeight: elementDimensions. height, originalWidth: elementDimensions. width},
restoreAfterFinish: true,
afterSetup: function(effect ) {
effect. element. makeClipping(). setStyle({width: ‘0px’}). show();
},
afterFinishInternal: function(effect ) {
effect. element. undoClipping();
}
}, arguments [1] || { }));
};
Effect.BlindLeft = function(element) {
element = $(element);
element.makeClipping();
return new Effect.Scale(element, 0,
Object.extend({ scaleContent: false,
scaleY: false,
restoreAfterFinish: true,
afterFinishInternal: function(effect) {
effect.element.hide().undoClipping();
}
}, arguments[1] || { })
);
}; Popularity: 22% [?]
August 11th, 2008
One lame image slider I made while ago. It just slides images with slight transition effect and shows lightboxed hi-res ones when clicked. See demo here, get example source overe here. Have fun!
JavaScript:
document. observe(‘dom:loaded’, function()
{
l1 = new Slider (‘gal-left’, ‘left-gal-left’, ‘left-gal-right’);
r1 = new Slider (‘gal-right’, ‘right-gal-left’, ‘right-gal-right’);
});
function Slider(ele,left,right)
{
this.current = 0;
this.items = $(ele).getElementsByTagName(‘li’);
this.count = this.items.length;
for(i=0;i<this.count;i++)
if(i!=0) this.items[i].style.display = ‘none’;
this.slide = function(direction)
{
Effect.Fade(this.items[this.current]);
if(direction == ‘fw’)
if (this.current == (this.count-1)) { this.current = 0; } else { this.current++; }
else
if (this.current == 0) { this.current = (this.count-1); } else { this.current–; }
Effect.Appear(this.items[this.current]);
};
$(right).observe(‘click’,this.slide.bindAsEventListener(this,‘fw’));
$(left).observe(‘click’,this.slide.bindAsEventListener(this,‘prev’));
}
Popularity: 23% [?]
|
| |
 | |  |
|
|
|
Tooltip, hovertip - prostě přejížděčky s Prototype / script.aculo.us
