Fenster zu Anker scrollen lassen

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #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
    Tags: None
  • #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>

    Comment

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

      Comment

      Previous template Next
      Working...
      X