 |
|
 |
|
| |
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: 20% [?]
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: 25% [?]
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: 27% [?]
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% [?]
December 25th, 2007
What drives me crazy about FCKEditor is the fact, that by default it transforms characters to entities. For example š is in the source code represented as š .This sucks most when you are editing the source of the post previously written in WYSIWYG mode. It’s really hard to navigate thru such hordes of &s and it makes you pull your hair (if any).
Here’s a simple fix, tho. Locate your config file fckconfig.js in your FCK directory (if you’re using Wordpress with Dean’s FCKEditor For Wordpress it should be something like /wp-content/plugins/fckeditor_for_wordpress/fckeditor/fckconfig.js) and change these lines to:
FCKConfig.ProcessHTMLEntities = false ;
FCKConfig.IncludeLatinEntities = false ;
FCKConfig.IncludeGreekEntities = false ;
Popularity: 45% [?]
Next Page » |
| |
 | |  |
|
|
|
Tooltip, hovertip - prostě přejížděčky s Prototype / script.aculo.us
