Fenster zu Anker scrollen lassen

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Fenster zu Anker scrollen lassen

    Hi, ich habe folgenden Link:
    PHP-Code:
    <a href="#addcomment" onclick="hideshow('addcomment', 1);"> 
    Die JS - Funktion sieht so aus:
    PHP-Code:
    function hideshow(id,sec)
    {
        if (    document.getElementById(id).style.display == 'none')
            new     Effect.Appear(id,{duration:sec, from:0, to:1});    
        else
            new     Effect.Fade(id,{duration:sec, from:1, to:0});
    } 
    Für die Effekte benutze ich scriptaculous.

    Wenn man nun auf den Link klickt soll das Fenster zum Anker springen und der div sollte erscheinen.
    Das Problem ist, dass das Fenster einfach den Anker zu ignorieren scheint.
    Seltsamerweise springt es jedoch zu ihm wenn man ein zweites mal auf den Link klickt und der div wieder verschwindet, so als würde Effect.Appear den Anker blocken.
    Kennt ihr vielleicht noch eine andere Methode um zum Element zu springen?

    Ein Formularelement per focus() fokussieren hat nichts gebracht und ich kann scrrollTo() nicht benutzen da die Höhe variabel ist.

    Vielen Dank im Vorraus
    Dulla_Po
    Stichworte: -
  • #2
    Es kann angesprungen werden, was auch sichtbar ist. Wenn das <a name="addcomment" /> oder ein Parent davon display:none gesetzt ist, weiß der Browser nicht, wo er hinspringen soll.

    Teste mal dieses Beispiel - der einzige Unterschied zw. #foo und #bar ist ihr display-Wert.
    Code:
    <html>
<head><title>foo bar</title></head>
<body>
<p style="margin-bottom:200em;">
	<a name="top" />
	<a href="#foo">foo</a>
	<a href="#bar">bar</a>
</p>
<div style="display:block;">
	<a name="foo" />
	<a href="#top">top</a>
</div>
<div style="display:none;">
	<a name="bar" />
	<a href="#top">top</a>
</div>
</body>
</html>
    Wenn dein Problem auch damit zusammenhängt, ist die Lösung einfach. Aus

    <div id="addcomment"><a name="addcomment" />...</div>

    mach

    <a name="addcomment" /><div id="addcomment">...</div>

    Kommentar

    • #3
      Ja, hatte an dem display Wert gelegen!
      Vielen Dank!

      Kommentar

      Vorherige template Weiter
      Lädt...
      X