dotNETportal.cz

Dobrý den,

nevím jestli jsem idiot, nebo jestli se můj pc zbláznil, ale nechápu jednu věc. Tohle se netýká tak úplně ASP.NET, i když následující kód je vnořen do stránky psané v ASP.NET.

Problém je následující: Ve stránce mám nějak formátovaný HTML kód:

<div class="squarebox"><div

     class="squareboxgradientcaption"

     

     onclick="togglePannelAnimatedStatus(this.nextSibling,50,50)"><div>Title goes here...</div><div><img src="../images/collapse.gif" width="13" height="14" border="0" alt="Show/Hide" title="Show/Hide" /></div>

        </div><div class="squareboxcontent">

            <img width="150" height="100"

             src="../images/sample_photo.jpg"

             alt="This is an image" title="This is an image" /><br />

             Content goes here...

        </div>

    </div>

Kód funguje (je spjatý s javascriptem). Když dám ale Advacent > Format document, vznikne mi tohle:

<div class="squarebox">
                <div class="squareboxgradientcaption" onclick="togglePannelAnimatedStatus(this.nextSibling,50,50)">
                    <div>
                        Title goes here...</div>
                    <div>
                        <img src="../images/collapse.gif" width="13" height="14" border="0" alt="Show/Hide"
                            title="Show/Hide" /></div>
                </div>
                <div class="squareboxcontent">
                    <img width="150" height="100" src="../images/sample_photo.jpg" alt="This is an image"
                        title="This is an image" /><br />
                    Content goes here...
                </div>
            </div>

Nemusíte to ani zkoumat, prozradím vám, že HTML je mimo whilespace zcela totožné. Již ale nefunguje.

Je to možné? Co s tím?

Díky moc

Co znamená, že nefunguje? A jak vypadá ten javascript?

Nemáme přece křišťálovou kouli...

JavaScript to nebude jelikož to nefunguje i když zformátuju jen to HTML.

Ale pro úplnost:

<script type="text/javascript">
    // not animated collapse/expand
    function togglePannelStatus(content) {
        var expand = (content.style.display == "none");
        content.style.display = (expand ? "block" : "none");
        toggleChevronIcon(content);
    }

    // current animated collapsible panel content
    var currentContent = null;

    function togglePannelAnimatedStatus(content, interval, step) {
        // wait for another animated expand/collapse action to end
        if (currentContent == null) {
            currentContent = content;
            var expand = (content.style.display == "none");
            if (expand)
                content.style.display = "block";
            var max_height = content.offsetHeight;

            var step_height = step + (expand ? 0 : -max_height);
            toggleChevronIcon(content);

            // schedule first animated collapse/expand event
            content.style.height = Math.abs(step_height) + "px";
            setTimeout("togglePannelAnimatingStatus("
            + interval + "," + step
            + "," + max_height + "," + step_height + ")", interval);
        }
    }

    function togglePannelAnimatingStatus(interval,
    step, max_height, step_height) {
        var step_height_abs = Math.abs(step_height);

        // schedule next animated collapse/expand event
        if (step_height_abs >= step && step_height_abs <= (max_height - step)) {
            step_height += step;
            currentContent.style.height = Math.abs(step_height) + "px";
            setTimeout("togglePannelAnimatingStatus("
            + interval + "," + step
            + "," + max_height + "," + step_height + ")", interval);
        }
        // animated expand/collapse done
        else {
            if (step_height_abs < step)
                currentContent.style.display = "none";
            currentContent.style.height = "";
            currentContent = null;
        }
    }

    // change chevron icon into either collapse or expand
    function toggleChevronIcon(content) {
        var chevron = content.parentNode
        .firstChild.childNodes[1].childNodes[0];
        var expand = (chevron.src.indexOf("expand.gif") > 0);
        chevron.src = chevron.src
        .split(expand ? "expand.gif" : "collapse.gif")
        .join(expand ? "collapse.gif" : "expand.gif");
    }
    
    </script>

Pokud to s jedním HTML formátováním jde a s druhým ne, tak bude chyba určitě v javascriptu:

Mrkněte do té funkce toggleChevronIcon - to bude nejspíš ono, ten první řádek - volání parentNode.firstChild.childNodes[1].childNodes[0].

Ujistěte se, že tenhle výraz funguje - vymazáním některých mezer totiž mohly některé nodes zmizet.

Btw snadnější je dělat animace přes jQuery, to co tady máte na 50 řádků vyjde s jQuery na 10.

Tak tady problém nebude.

Když funkce smažu a odstraním volání z ostatních funkcí vše funguje. Po zformátování zase nic :-(

Proboha - co to znamená "nefunguje"? Nezobrazí se nic? Po kliknutí to nic neudělá? Vyběhne chybová hláška? Objeví se žlutý sněhulák?

Nic znamená, že se má schovat/objevit - tohle nefunguje. Nezobrazuje se a neschovává at klikám jak chci

A nehlásí prohlížeč žádnou chybu javascriptu? Zkuste použít nějaký javascript debugger (teoreticky by to mělo jít i ve Visual Studiu, pokud to budete prohlížet v IE).

Odkrokujte si, co se stane po kliknutí.

Řekl bych,že jste si odpověděl sám již v zadání ;-))

Jak píše p.Herceg,buďto si v rámci browseru spusťte debugger nebo si vše odkrokujte již ve VS.

V MSIE 8 funguje i z formátovaný kód, nefunguje v jiných prohlížečích. Proč nevím, ale nejspíš při události onclik nedostane java skript "this.nextSibling" do "content" a vznikne (neohlašovaná) chyba v "var expand = (content.style.display == "none");"