rulu ruru

post Tooltip, hovertip - prostě přejížděčky s Prototype / script.aculo.us

January 6th, 2009

Filed under: javascript — starenka @ 01:18
Tags: , , ,

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% [?]

post Scriptaculous - BlindLeft and BlindRight effects

August 11th, 2008

Filed under: javascript — starenka @ 21:20
Tags: , , ,

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% [?]

post Easy image slider with scriptaculous and lightbox

August 11th, 2008

Filed under: javascript — starenka @ 00:07
Tags: , , ,

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% [?]

post Externí odkazy do nového okna a s vlastním stylem - JavaScript & Prototype

May 31st, 2008

Filed under: javascript — starenka @ 21:27
Tags: ,

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% [?]

post Disabling HTML entities in FCKEditor

December 25th, 2007

Filed under: javascript — starenka @ 13:56
Tags: , , , ,

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 &scaron; .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 »
ruldrurd
© starenka 2oo7, cute alien monster by noizcut, original theme by Laurentiu Piron - customized by starenka | proudly powered by WordPress