Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using images within <div class="accordion-toggle">

    Heyas,

    I finally decided to use prototype instead of jquery! The problem I'm having now is the seeming inability to use images inside the <div class="accordion-toggle"> tags instead of text. Has anybody experienced this before and/or know a solution? The reason I want to replace it with an image is the font to be used is non-standard.

    Thanks!

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    what accordion are you using?

  • #3
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    /* Simple Accordion Script 
     * Requires Prototype and Script.aculo.us Libraries
     * By: Brian Crescimanno <brian.crescimanno@gmail.com>
     * http://briancrescimanno.com
     * This work is licensed under the Creative Commons Attribution-Share Alike 3.0
     * http://creativecommons.org/licenses/by-sa/3.0/us/
     */
    
    if (typeof Effect == 'undefined')
      throw("You must have the script.aculo.us library to use this accordion");
    
    var Accordion = Class.create({
    
        initialize: function(id, defaultExpandedCount) {
            if(!$(id)) throw("Attempted to initalize accordion with id: "+ id + " which was not found.");
            this.accordion = $(id);
            this.options = {
                toggleClass: "accordion-toggle",
                toggleActive: "accordion-toggle-active",
                contentClass: "accordion-content"
            }
            this.contents = this.accordion.select('div.'+this.options.contentClass);
            this.isAnimating = false;
            this.maxHeight = 0;
            this.current = defaultExpandedCount ? this.contents[defaultExpandedCount-1] : this.contents[0];
            this.toExpand = null;
    
            this.checkMaxHeight();
            this.initialHide();
            this.attachInitialMaxHeight();
    
            var clickHandler =  this.clickHandler.bindAsEventListener(this);
            this.accordion.observe('click', clickHandler);
        },
    
        expand: function(el) {
            this.toExpand = el.next('div.'+this.options.contentClass);
            if(this.current != this.toExpand){
    			this.toExpand.show();
                this.animate();
            }
        },
    
        checkMaxHeight: function() {
            for(var i=0; i<this.contents.length; i++) {
                if(this.contents[i].getHeight() > this.maxHeight) {
                    this.maxHeight = this.contents[i].getHeight();
                }
            }
        },
    
        attachInitialMaxHeight: function() {
    		this.current.previous('div.'+this.options.toggleClass).addClassName(this.options.toggleActive);
            if(this.current.getHeight() != this.maxHeight) this.current.setStyle({height: this.maxHeight+"px"});
        },
    
        clickHandler: function(e) {
            var el = e.element();
            if(el.hasClassName(this.options.toggleClass) && !this.isAnimating) {
                this.expand(el);
            }
        },
    
        initialHide: function(){
            for(var i=0; i<this.contents.length; i++){
                if(this.contents[i] != this.current) {
                    this.contents[i].hide();
                    this.contents[i].setStyle({height: 0});
                }
            }
        },
    
        animate: function() {
            var effects = new Array();
            var options = {
                sync: true,
                scaleFrom: 0,
                scaleContent: false,
                transition: Effect.Transitions.sinoidal,
                scaleMode: {
                    originalHeight: this.maxHeight,
                    originalWidth: this.accordion.getWidth()
                },
                scaleX: false,
                scaleY: true
            };
    
            effects.push(new Effect.Scale(this.toExpand, 100, options));
    
            options = {
                sync: true,
                scaleContent: false,
                transition: Effect.Transitions.sinoidal,
                scaleX: false,
                scaleY: true
            };
    
            effects.push(new Effect.Scale(this.current, 0, options));
    
            var myDuration = 0.45;
    
            new Effect.Parallel(effects, {
                duration: myDuration,
                fps: 35,
                queue: {
                    position: 'end',
                    scope: 'accordion'
                },
                beforeStart: function() {
                    this.isAnimating = true;
                    this.current.previous('div.'+this.options.toggleClass).removeClassName(this.options.toggleActive);
                    this.toExpand.previous('div.'+this.options.toggleClass).addClassName(this.options.toggleActive);
                }.bind(this),
                afterFinish: function() {
                    this.current.hide();
                    this.toExpand.setStyle({ height: this.maxHeight+"px" });
                    this.current = this.toExpand;
                    this.isAnimating = false;
                }.bind(this)
            });
        }
    
    });
    
    document.observe("dom:loaded", function(){
        accordion = new Accordion("test-accordion", 2);
    })
    Sorry, didn't even think!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •