PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr (https://www.php-resource.de/forum/)
-   HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/)
-   -   Fenster zu Anker scrollen lassen (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/88801-fenster-zu-anker-scrollen-lassen.html)

Dulla_Po 09-12-2007 13:16

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:secfrom:0to:1});    
    else
        new 
Effect.Fade(id,{duration:secfrom:1to: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

onemorenerd 09-12-2007 14:18

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>

Dulla_Po 10-12-2007 19:10

Ja, hatte an dem display Wert gelegen!
Vielen Dank!


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:26 Uhr.

Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
[c] ebiz-consult GmbH & Co. KG