SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Accordion Hickups

    I wrote a simple function for a Scriptaculous & Prototype accordion. Problem is...it doesn't slide smoothly. I've tried just about everything I can think of. Removed Parallel effects, padding on elements, etc...

    Here is my code :
    Code javascript:
    <script type="text/javascript">
    function accordion(el, panel, panelBody) {
    	var apanels = document.getElementsByClassName(panel, el.parentNode.parentNode);
     
    	for (var i = 0; i < apanels.length; i++) {		
    		if (Element.hasClassName(apanels[i].id + '-body', 'visible')) {
    			var elUp = apanels[i].id + '-body';
    			Element.removeClassName(elUp, 'visible');
    			new Effect.Parallel([new Effect.BlindUp(elUp), new Effect.Fade(elUp)]);
    		}
    	}
     
    	var elDown = el.id + '-body';
    	new Effect.Parallel([new Effect.BlindDown(elDown), new Effect.Appear(elDown)]);
    	Element.addClassName(elDown, 'visible');
    }
    </script>

    The content from which the accordion function is called looks something like this :

    Code html:
    <dl id="panel">
        <dt><a href="#void" id="panel1" class="panel" onclick="accordion(this, 'panel', 'panel-body');">
            <dd style="display:none;" class="panel-body" id="panel1-body">
                content here...
            </dd>
        </dt>
        <dt><a href="#void" id="panel2" class="panel" onclick="accordion(this, 'panel', 'panel-body');">
            <dd style="display:none;" class="panel-body" id="panel2-body">
                content here...
            </dd>
        </dt>
    </dl>

    Do you have any idea why it would cause this?
    I can post a URL to the page if needed.
    I'm using this same accordion function on another site without problems.

    Thanks for your help
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  2. #2
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Basically...it starts sliding and then all of a sudden jumps to the bottom of the element. It's very "un"-smooth. I have a feeling it's got something to do with the margin or padding of a specific element. I can post a URL here, but I'm not sure if I should.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software

  3. #3
    Working on it... Contrid's Avatar
    Join Date
    Apr 2006
    Location
    Online
    Posts
    955
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I found the problem.
    Hopefully someone can help me sort it out.

    The content (html) inside the DD has another floating div inside of it most of the time. See this example :

    Code html:
    <div style="float:left;"><a href="#"><img /></a>and more text here...</div>

    So the floating element has a link inside of it. The link is an image.
    It seem that, whenever the other text outside of the floating element wraps around the floating div, I have these hickups.

    Would it be better to just go without the floating element and rather specify something like this :

    Code html:
    <img align="left" />

    Let me know what you think.
    And so I got lost in code...completely asphyxiated by it...

    Premium WordPress plugins - Tribulant Software


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
  •