For nblogr I wanted to provice a way to upload multiple files but just display one input field at a time.  So I worked out the following javascript class.

Usage :

new NBlogr.MultiSelector( element(id), maxNumberOfFiles or -1 for unlimited );

The MultiSelector class:

NBlogr.MultiSelector = Class.create();
NBlogr.MultiSelector.prototype = {
    initialize : function(file, max){
        this.options = {
            max : -1,
            container:null,            file:null        };

        this.options.file = $(file);        this.id = 0;
        this.count=0;
        this.initializeContainer();
        if(max){
            this.options.max = max;
        }
        else{
            this.options.max = -1;
        }
    },
    initializeContainer : function(){
        if(this.options.file){
            var ele = this.options.file;
            this.options.container = Builder.node('div',{id:ele.id + '_container',
                style:'background:transparent;display:inline;width:250px;font-size:small'});

            ele.parentNode.insertBefore(this.options.container,ele);
            this.options.container.appendChild(ele);

            if(!this.list){
                this.list = Builder.node('div',{id:ele.id+'_list',style:'display:block'});
            }
            this.options.container.appendChild(this.list);
            this.initializeFile(ele);
        }
    },
    initializeFile:function(element){        

        if( element && element.tagName == 'INPUT' && element.type == 'file' ){
            element.name = 'file_' + element.id;
            element.id = 'file_' + element.id++;

            Event.observe(element,'change',this.addFile.bindAsEventListener(this));

            if( this.max != -1 && this.count >= this.max ){
                element.disabled = true;
            };
            this.count++;
        } else {
            alert( 'Error: not a file input element' );
        };
    },
    addFile:function(ev){
        var ele = Event.element(ev);

        var new_element = document.createElement( 'input' );
        new_element.type = 'file';
        ele.parentNode.insertBefore( new_element, ele );
        this.initializeFile( new_element );
        this.addListRow( ele );
        ele.style.position = 'absolute';
        ele.style.left = '-1000px';

        if(ev) Event.stop(ev);
    },
    removeFile:function(ev){
        var ele = Event.element(ev); 

        ele.parentNode.parentNode.removeChild( ele.parentNode );
        this.options.file.disabled = false;
        this.count--;        

        if(ev) Event.stop(ev);
    },
    addListRow : function( element ){
        var new_row_button = Builder.node('a',{href:'javascript:;;',
            title:'Remove this file from the list'},'Remove');
        var new_row = Builder.node('div',{element:element},[$F(element) + ' | ', new_row_button]);
        Event.observe(new_row_button,'click',this.removeFile.bindAsEventListener(this));
        this.list.appendChild( new_row );

    }
};

Today I needed an accordion widget. I searched the internet but didn’t really find one that was based  on scriptaculous and did what i wanted it to do and how i wanted.

You need scriptaculous for this widget. Example markup is shown in the comments. Just add the javascript to a page and it will find the accordion just fine.

I thought I’d share the code:

/**
 * @author Ivan Porto Carrero
 *
 *
 * Styles:
 * *******
 * .accordeon{
 *         border: 1px solid #1F669B;

 *        font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
 *        font-size: 11px;
 *        overflow:auto;
 *    }
 * h5 {
 *     font-size:12px;
 *    padding: 3px 5px 3px 5px;
 *     margin: 0;
 *     border-style: solid none solid none;
 *     border-top-color:#BDC7E7;
 *     border-bottom-color:#a1bbe4;
 *    border-width: 1px 0px 1px 0px;
 *    color:#fff;
 *    background-color: #63699C;
 *    cursor:pointer;
 * }
 * .panel_header{
 *     color:#878285;
 *     background-color: #63699C;
 *     background:url(images/shade.gif) 0 0 repeat-x;
 * }
 * .panel{
 *     margin: 0;
 *    padding-bottom:0;
 *    border: none;
 * }
 * .panel_body{padding:5px;}
 *
 *
 * Markup:
 * *******
 *
 *

 *

 *
Accordian 1 Title

 *

 *
Content goes here

 *        

 *    

 *

 *
Accordian 2 Title

 *

 *
Content goes here

 *        

 *    

 *

 *
Accordian 3 Title

 *

 *
Content goes here

 *        

 *    

 *

 *
Accordian 4 Title

 *

 *
Content goes here

 *        

 *    

 * 

 */
Accordeon = Class.create();
Accordeon.prototype = {
    initialize:function(element, options){
        this.options = {
            onBeforeSwitch:null,
            onAfterSwitch:null,
            activePanel:null,
            panelClass:'panel',
            headerClass:'panel_header',
            bodyClass: 'panel_body',
            activePanelClass:'active',
            showAnim:false
        };
        Object.extend(this.options,options||{});        

        this.accordeon = $(element);
        this.accordeon.panels = new Array();
        var pnls = $A(this.accordeon.childNodes);
        pnls.each(
            function(pnl){

                var ele = $(pnl);

                var headers = ele.getElementsByClassName(this.options.headerClass);
                if(headers.length > 0){
                    var header = headers[0];
                    ele.header = header;
                    Event.observe(header,'click', this.onChange.bindAsEventListener(this))
                }

                var bodies = ele.getElementsByClassName(this.options.bodyClass);
                if(bodies.length > 0){
                    var body = bodies[0];
                    ele.body = body;
                    body.hide();
                }

                if(ele.tagName.toLowerCase() == 'div' && Element.hasClassName(ele,this.options.panelClass)){
                    this.accordeon.panels.push(ele);
                }
            }.bind(this)
        );
        this.setActivePanel(pnls[0],false);

    },
    onChange:function(ev){
        var ele = Event.element(ev);
        var parents = ele.ancestors();
        var panel;

        parents.each(
            function(elm){
                var obj = $(elm);
                if(obj.hasClassName(this.options.panelClass)){
                    panel = obj;
                    return;
                }                

            }.bind(this)
        );
        this.setActivePanel(panel,true);
    },
    setActivePanel:function(panel,showAnim){
        if(this.onBeforeSwitch)
            this.onBeforeSwitch();

        if(this.activePanel && this.activePanel.id != panel.id ){
            var hideAnim = null;
            if(this.options.showAnim)
                new Effect.toggle(this.activePanel.body,'blind',{duration:0.3});
            else
                this.activePanel.body.hide();
            this._activatePanel(panel,showAnim,hideAnim);
        }
        else if (!this.activePanel){
            this._activatePanel(panel,showAnim);
        }
        if(this.onAfterSwitch)
            this.onAfterSwitch();

    },
    _activatePanel:function(panel,showAnim,panelToHide){
        panel.body.addClassName(this.options.activePanelClass);
        if(showAnim && this.options.showAnim){
            new Effect.toggle(panel.body,'blind',{duration:0.3});
        }
        else{
            panel.body.show();
        }
        this.activePanel = panel;
    }
};

Accordeon.Widget = Class.create();
Accordeon.Widget.prototype = {
    initialize:function(options){
        this.options={
            containerClass:null
        };
        Object.extend(this.options,options||{});

        this.accordeons = new Array();
        $$('.' + this.options.containerClass).each(
            function(accordeon){
                this.accordeons.push(new Accordeon(accordeon,this.options));
            }.bind(this)
        );

    }
};

Event.observe(window,'load',function(){
    var options = {

            panelClass:'panel',
            headerClass:'panel_header',
            bodyClass: 'panel_body',
            activePanelClass:'active',
            showAnim:true,
            containerClass:'accordeon'
        };
    new Accordeon.Widget(options);
}.bindAsEventListener(this));

Yet another fix for transparent png images. This one is based on prototype and doesn’t need any external image to force the transparency.

To use it give the image elements that contain a transparent png a class name of png and it should fix it up.

function fixPng(img)
{
    try {
        var arVersion = navigator.appVersion.split(“MSIE”);
        var version = parseFloat(arVersion[1]);
        if ((version >= 5.5) && (version < 7) && (document.body.filters)){
            var pngImage = $(img);
            var visible = pngImage.visible();
            if(!visible) pngImage.show();
            var width = pngImage.getWidth();
            var height = pngImage.getHeight();
            if(!visible) pngImage.hide();
            var imgId = pngImage.id ? “id=’” + pngImage.id + “‘ “ : “”;
            var imgClass = pngImage.className ? “class=’” + pngImage.className + “‘ “ : “”;
            var imgTitle = pngImage.title ? “title=’” + pngImage.title    + “‘ “ : “title=’” + pngImage.alt + “‘ “;
            var imgStyle = “display:inline-block;” + pngImage.style.cssText;
            var replacement = “ + imgId + imgClass + imgTitle
                                    + ” style=\”" + “width:” + width
                                    + “px; height:” + height
                                    + “px;” + imgStyle + “;”
                                    + “filter:progid:DXImageTransform.Microsoft.AlphaImageLoader”
                                    + “(src=\’” + myImage.src + “\’, sizingMethod=’scale’);\”>“;
            pngImage.outerHTML = replacement;
        }
    } catch(e) {}
};
Event.observe(window,‘load’,function(){$$(‘img.png’).each(function(png){fixPng(png)}});
//Event.onDOMReady(function(){$$(‘img.png’).each(function(png){fixPng(png)});});

Sorry for spamming your readers today. But this is an absolute must see

http://ajaxian.com/archives/douglas-crockford-video-advanced-javascript

One of my best friends is joining Microsoft in belgium.

He has a blog concerning marketing and advertising campaigns.

You can read all about it here : View his blog post…