 |
|
 |
|
| |
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: 21% [?]
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: 26% [?]
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: 28% [?]
May 31st, 2008
Samozřejmě nic nového pod sluncem. Éra, kdy každý musel mít ikonku u externího odkazu taky vyšuměla, nicméně občas je to stále třeba. Komentář naopak zřejmě netřeba.
document. observe(‘dom:loaded’, function() {
$$(‘a’).each(function(el) {
if(el.readAttribute(‘href’).include(document.domain) == false)
{
el.setAttribute(‘target’,‘_blank’);
el.addClassName(‘external’);
}
}, this);
}); Popularity: 15% [?]
February 16th, 2008
Málo kdo se na českém internetu snaží vecpat někomu “svoji kvalitní službu” tak jako webhosting Banán.cz v čele s Radovanem Kalužou. Tato bizarní postavička flam(e)ující, nadávající a spamující kde se dá, taky stojí mimo jiném za stránkou owebu.cz. Smysl stránky, grafické pojetí, UI a vůbec technickou stránku věci radši posuzovat nebudu, zato je zde jedna unikátní fíčura: injectovaný javascript je spuštěn hned devětkrát….
%22%3E%3Cscript%20type=%22text/javascript%22%3Ealert(‘Plantae - Magnoliophyta - Liliopsida - Zingiberales - Musaceae - Musa’)%3C/script%3E%3CMETA%20content=%22
… string je totiž bez jakéhokoiliv ošetření nacpán do meta hlaviček. Stačí je jen šikovně prerušit. Nakonec i chybová hláška PHP leccos napoví (třeba, že se s uvozkovkama u banánu nikdo nemaže) a kromě XSS, by se zřejmě dalo pohrát i s SQL. Tak to je teda bumerang.
Za polechtání stojí taktéž našláplý eshop a samozřejmě nemůžu nezmínit Radovanův blogísek.
Popularity: 24% [?]
Next Page » |
| |
 | |  |
|
|
|
Tooltip, hovertip - prostě přejížděčky s Prototype / script.aculo.us
