SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accordion script in portlet

    I'm trying to incorporate an accordion script (I've tried various) into a websphere portlet. The scripts work fine on their own, but once I try putting it inside a portlet, then it will not work at all. Any suggestions? I'm working in IE6.

  2. #2
    SitePoint Enthusiast Chris Webb's Avatar
    Join Date
    Oct 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We'll need a lot more detail than that.

    Does the accordion work on a websphere page but not within a portlet? can you edit it into a template?

    Put some alert() statements in the accordion javascript to see if it's firing.
    Chris Webb | twitter/tgnwg
    Visit TheGoodNamesWereGone.com for
    free Javascript goodness, help with your Website and more


  3. #3
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried an alert statement and it works fine in an html file within the portal. My problem arises when the html file is placed in a portlet itself. Then it doesn't work at all. Not sure what else you need...let me know.

  4. #4
    SitePoint Enthusiast Chris Webb's Avatar
    Join Date
    Oct 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you provide a link to it?
    Chris Webb | twitter/tgnwg
    Visit TheGoodNamesWereGone.com for
    free Javascript goodness, help with your Website and more


  5. #5
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, no, it's in our intranet, but here's the code...

    <link rel="stylesheet" type="text/css" href="css/accordion.css" />
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js"></script>
    <script type="text/javascript" src="js/accordion.js"></script>
    <script language="Javascript">

    <!--
    // please keep these lines on when you copy the source
    // made by: Nicolas - http://www.javascript-page.com

    alert ("This is a Javascript Alert")
    //-->

    </script>
    </head>

    <body>

    <div id="test-accordion" class="accordion">
    <div class="accordion-toggle">Monday</div>
    <div class="accordion-content">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse malesuada mi vel risus. Nulla ipsum risus, malesuada gravida, dapibus et, dapibus rhoncus, orci. Quisque suscipit.</p>
    </div>
    <div class="accordion-toggle">Tuesday</div>
    <div class="accordion-content">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel justo. Integer ornare dignissim lectus. Nunc tellus. Donec pharetra aliquam neque. Vestibulum ornare tincidunt mauris. Duis ut felis et ipsum feugiat faucibus. Phasellus enim magna, sodales id, mollis vel, fringilla et, felis. Integer placerat, tortor eu blandit eleifend, elit leo fringilla orci, quis tristique leo justo ut quam. Aenean dolor. Donec tempus. Ut dapibus odio vitae ligula. </p>
    </div>
    <div class="accordion-toggle">Wednesday</div>
    <div class="accordion-content">
    <p>
    In posuere velit sit amet tortor. Donec elementum ipsum at ante luctus elementum. Duis varius dolor a tortor. Donec mi. Phasellus posuere. Mauris enim erat, commodo et, porta quis, consequat quis, nibh. Maecenas convallis eleifend ante. Phasellus metus metus, tempor sed, rhoncus ac, feugiat a, ante. Morbi sit amet ipsum. Cras eu leo quis pede condimentum tempor. Curabitur dictum elit sed lacus. </p>
    </div>
    <div class="accordion-toggle">Thursday</div>
    <div class="accordion-content">
    <p>
    Nulla eget ante. In luctus nunc eu nisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse lectus sem, commodo vitae, scelerisque eget, varius vitae, neque. Maecenas sed risus. Pellentesque erat. </p>
    </div>
    </div>

    </body>
    </html>

  6. #6
    SitePoint Enthusiast Chris Webb's Avatar
    Join Date
    Oct 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We'll need your accordian.js script as well, and the css file. Is there ANY other HTML on the page apart form this?
    Chris Webb | twitter/tgnwg
    Visit TheGoodNamesWereGone.com for
    free Javascript goodness, help with your Website and more


  7. #7
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    // accordion.js v2.0
    //
    // Copyright (c) 2007 stickmanlabs
    // Author: Kevin P Miller | http://www.stickmanlabs.com
    //
    // Accordion is freely distributable under the terms of an MIT-style license.
    //
    // I don't care what you think about the file size...
    // Be a pro:
    // http://www.thinkvitamin.com/features...avascript-fast
    // http://rakaz.nl/item/make_your_pages..._and_css_files
    //

    /*-----------------------------------------------------------------------------------------------*/

    if (typeof Effect == 'undefined')
    throw("accordion.js requires including script.aculo.us' effects.js library!");

    var accordion = Class.create();
    accordion.prototype = {

    //
    // Setup the Variables
    //
    showAccordion : null,
    currentAccordion : null,
    duration : null,
    effects : [],
    animating : false,

    //
    // Initialize the accordions
    //
    initialize: function(container, options) {
    if (!$(container)) {
    throw(container+" doesn't exist!");
    return false;
    }

    this.options = Object.extend({
    resizeSpeed : 8,
    classNames : {
    toggle : 'accordion_toggle',
    toggleActive : 'accordion_toggle_active',
    content : 'accordion_content'
    },
    defaultSize : {
    height : null,
    width : null
    },
    direction : 'vertical',
    onEvent : 'click'
    }, options || {});

    this.duration = ((11-this.options.resizeSpeed)*0.15);

    var accordions = $$('#'+container+' .'+this.options.classNames.toggle);
    accordions.each(function(accordion) {
    Event.observe(accordion, this.options.onEvent, this.activate.bind(this, accordion), false);
    if (this.options.onEvent == 'click') {
    accordion.onclick = function() {return false;};
    }

    if (this.options.direction == 'horizontal') {
    var options = $H({width: '0px'});
    } else {
    var options = $H({height: '0px'});
    }
    options.merge({display: 'none'});

    this.currentAccordion = $(accordion.next(0)).setStyle(options);
    }.bind(this));
    },

    //
    // Activate an accordion
    //
    activate : function(accordion) {
    if (this.animating) {
    return false;
    }

    this.effects = [];

    this.currentAccordion = $(accordion.next(0));
    this.currentAccordion.setStyle({
    display: 'block'
    });

    this.currentAccordion.previous(0).addClassName(this.options.classNames.toggleActive);

    if (this.options.direction == 'horizontal') {
    this.scaling = $H({
    scaleX: true,
    scaleY: false
    });
    } else {
    this.scaling = $H({
    scaleX: false,
    scaleY: true
    });
    }

    if (this.currentAccordion == this.showAccordion) {
    this.deactivate();
    } else {
    this._handleAccordion();
    }
    },
    //
    // Deactivate an active accordion
    //
    deactivate : function() {
    var options = $H({
    duration: this.duration,
    scaleContent: false,
    transition: Effect.Transitions.sinoidal,
    queue: {
    position: 'end',
    scope: 'accordionAnimation'
    },
    scaleMode: {
    originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
    originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
    },
    afterFinish: function() {
    this.showAccordion.setStyle({
    height: 'auto',
    display: 'none'
    });
    this.showAccordion = null;
    this.animating = false;
    }.bind(this)
    });
    options.merge(this.scaling);

    this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);

    new Effect.Scale(this.showAccordion, 0, options);
    },

    //
    // Handle the open/close actions of the accordion
    //
    _handleAccordion : function() {
    var options = $H({
    sync: true,
    scaleFrom: 0,
    scaleContent: false,
    transition: Effect.Transitions.sinoidal,
    scaleMode: {
    originalHeight: this.options.defaultSize.height ? this.options.defaultSize.height : this.currentAccordion.scrollHeight,
    originalWidth: this.options.defaultSize.width ? this.options.defaultSize.width : this.currentAccordion.scrollWidth
    }
    });
    options.merge(this.scaling);

    this.effects.push(
    new Effect.Scale(this.currentAccordion, 100, options)
    );

    if (this.showAccordion) {
    this.showAccordion.previous(0).removeClassName(this.options.classNames.toggleActive);

    options = $H({
    sync: true,
    scaleContent: false,
    transition: Effect.Transitions.sinoidal
    });
    options.merge(this.scaling);

    this.effects.push(
    new Effect.Scale(this.showAccordion, 0, options)
    );
    }

    new Effect.Parallel(this.effects, {
    duration: this.duration,
    queue: {
    position: 'end',
    scope: 'accordionAnimation'
    },
    beforeStart: function() {
    this.animating = true;
    }.bind(this),
    afterFinish: function() {
    if (this.showAccordion) {
    this.showAccordion.setStyle({
    display: 'none'
    });
    }
    $(this.currentAccordion).setStyle({
    height: 'auto'
    });
    this.showAccordion = this.currentAccordion;
    this.animating = false;
    }.bind(this)
    });
    }
    }



    CSS
    div#test-accordion{
    margin: 10px;
    border: 1px solid #aaa;
    }

    div.accordion {
    position: relative; /* required for bounding */
    }

    div.accordion-toggle{
    position: relative; /* required for effect */
    z-index: 10; /* required for effect */
    background: #eee;
    cursor: pointer;
    }

    div.accordion-toggle-active{
    background: #fff;
    }

    div.accordion-content{
    overflow: hidden; /* required for effect */
    background: #aaa;
    }

  8. #8
    SitePoint Member
    Join Date
    Jun 2005
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is no other HTML in the portlet or included in the file.


Bookmarks

Posting Permissions

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