[script.aculo.us] Raar gedrag Effect.SlideDown - Softwareontwikkeling

vrijdag 4 april 2008 14:01

Acties:

Design-by-buzzword fanatic

Topicstarter

Hoi,

Ik ben bezig met het maken van een accordion met script.aculo.us. Alles goed en wel, alleen gedraagt het effect: SlideDown zich nogal vreemd.

De structuur is als volgt: een overkoepelende div, met per paneel een sub div. daarin staat dan een h3 en een ul:

code:

[div#accordion]
  [div#panel]
    [h3]title[/h3]
    [ul] een stel LI's met linkjes[/ul]
  [/div]
[/div]

Als ik het effect draai, blijven alle LI's staan, behalve de eerste. Die beweegt mee met het effect, zoals het hoort. De rest blijft staan, zoals bij een BlindDown effect.

Ik heb de code zover mogelijk gestript, maar het effect treedt nog steeds op. Dit is wat ervan is overgebleven:

HTML:

<html>
<head>
    <style>
        .panelBody {
            background-color: #eee;
        }
    </style>
    <script type="text/javascript" src="js/prototype-1.6.0.2.js"></script>
    <script type="text/javascript" src="js/scriptaculous-js-1.8.1/effects.js"></script>
    <script type="text/javascript">
        function accordion(event) {
            var el = $(Event.element(event));

            var acc = el.up("div.accordion");

            var eldown = el.next(".panelBody");
            new Effect.SlideDown(eldown, {
                queue: "end",
                duration: 0.75
            });

        }
        Event.observe(window, "load", function() {
            var panel = $("panel");
            panel.observe("click", accordion);
        });
    </script>
</head>
<body>
    <div class="accordion">
        <div class="panel">
            <h3 id="panel">Panel 3</h3>
            <ul class="panelBody" style="display: none;">
                <li><a href="#">- a</a></li>
                <li><a href="#">- b</a></li>
                <li><a href="#">- c</a></li>
                <li><a href="#">- d</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

Ik heb geen idee wat nu precies het probleem is, maar het treedt zowel in IE7 als in FF2+3 op. Ook lijken alleen elementen er last van te hebben. Als ik de UL in een DIV verander en vol gooi met lorem ipsum, werkt het ook goed, maar bij LI's, A's en IMG's krijg ik dit rare effect.

Iemand een idee?

Fat Pizza's pizza, they are big and they are cheezy

vrijdag 4 april 2008 14:27

Acties:

JKVA

Design-by-buzzword fanatic

Topicstarter

Er kan een slotje op. De oplossing was vrij eenvoudig (dankzij de documentatie

).

"You must include a second DIV element, wrapping the contents of the outer DIV. So, if you call new Effect.SlideDown('x'), your element must look like this:"

Ofwel, hij pakt standaard het eerste child element in zijn animatie mee en de rest blijft stilstaan.

Dit is de nieuwe HTML.

HTML:

<html>
<head>
    <style>
        .panelBody {
            background-color: #eee;
        }
    </style>
    <script type="text/javascript" src="js/prototype-1.6.0.2.js"></script>
    <script type="text/javascript" src="js/scriptaculous-js-1.8.1/effects.js"></script>
    <script type="text/javascript">
        function accordion(event) {
            var el = $(Event.element(event));

            var acc = el.up("div.accordion");

            var eldown = el.next(".panelBody");
            new Effect.SlideDown(eldown, {
                queue: "end",
                duration: 0.75
            });

        }
        Event.observe(window, "load", function() {
            var panel = $("panel");
            panel.observe("click", accordion);
        });
    </script>
</head>
<body>
    <div class="accordion">
        <div class="panel">
            <h3 id="panel">Panel 3</h3>
            <div class="panelBody">
                <ul style="display: none;">
                    <li><a href="#">- a</a></li>
                    <li><a href="#">- b</a></li>
                    <li><a href="#">- c</a></li>
                    <li><a href="#">- d</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

Fat Pizza's pizza, they are big and they are cheezy

Reageer