Positie scrollbalk vasthouden (anchors?)
Het klikken van de link laadt dezelfde pagina opnieuw maar re scrollbalk moet uiteraard op dezelfde plek blijven. Ik gebruik hiervoor anchors. In IE werkt dat prima, maar FF gaat er erg raar mee om.
Hier een stukje php:
Code (php)
Ik heb geprobeer de anchor voor, na en in de link te zetten maar niks helpt.
Stel je klikt de bovenste link aan (scrollbalk bovenin), dan blijft de scrollbalk in IE netjes bovenin, maar bij FF schiet hij een stuk naar beneden.
Iemand enig idee hoe dit op te lossen of dat er andere oplossingen zijn om de scrollbalk te locken of het betreffende plaatje/link gecentreerd te houden.
Gr,
Robert
Gewijzigd op 01/01/1970 01:00:00 door Robert Hamers
http://demos.mootools.net/Fx.Slide
of deze:
http://demos.mootools.net/Tips
Is er geen manier om de positie van de scrollbar vast te zetten? Dat is eigenlijk alles wat ik wil.
Om een idee te krijgen van de website, check www.suggestgraphics.nl/TDG. Rechts zie je de plaatjes, als je erop klikt moeten de details in het midden van de site verschijnen. Uiteraard moet het plaatje waarop geklikt is in beeld blijven.
1. Frames, dit heeft niet de voorkeur, omdat het eigenlijk een beetje verouderd is.
2. Javascript, hiermee zou je een div een id kunnen geven, om vervolgens deze div te vullen wanneer men op een plaatje klikt, klein voorbeeldje:
Code (php)
1
2
3
4
5
2
3
4
5
<a href="#" onclick="document.getElementById('beschrijving').innerHTML = 'U heeft zojuist op link 1 geklikt'; return false;">Link 1</a>
<a href="#" onclick="document.getElementById('beschrijving').innerHTML = 'U heeft zojuist op link 2 geklikt'; return false;">Link 2</a>
<div id="beschrijving">
Klik eerst een link aan
</div>
<a href="#" onclick="document.getElementById('beschrijving').innerHTML = 'U heeft zojuist op link 2 geklikt'; return false;">Link 2</a>
<div id="beschrijving">
Klik eerst een link aan
</div>
Let erop dat je een \ plaatst voor zowel " als een ', voorbeeld:
Code (php)
1
2
3
4
5
2
3
4
5
<a href="#" onclick="document.getElementById('beschrijving').innerHTML = 'U heeft zojuist op \'link 1\' geklikt'; return false;">Link 1</a>
<a href="#" onclick="document.getElementById('beschrijving').innerHTML = 'U heeft zojuist op \"link 2\" geklikt'; return false;">Link 2</a>
<div id="beschrijving">
Klik eerst een link aan
</div>
<a href="#" onclick="document.getElementById('beschrijving').innerHTML = 'U heeft zojuist op \"link 2\" geklikt'; return false;">Link 2</a>
<div id="beschrijving">
Klik eerst een link aan
</div>
Met document.getElementById('beschrijving').innerHTML "vul" je het HTML element met het id beschrijving, de return false; zorgt ervoor dat je niet naar de link in href= gaat, dit is dus prima te combineren, het volgende voorbeeldje zorgt ervoor dat de gebruiker een aparte pagina krijgt als Javascript uitstaat:
Code (php)
1
2
3
4
5
2
3
4
5
<a href="beschrijving.php?link=1" onclick="document.getElementById('beschrijving').innerHTML = 'U heeft zojuist op link 1 geklikt'; return false;">Link 1</a>
<a href="beschrijving.php?link=1" onclick="document.getElementById('beschrijving').innerHTML = 'U heeft zojuist op link 2 geklikt'; return false;">Link 2</a>
<div id="beschrijving">
Klik eerst een link aan
</div>
<a href="beschrijving.php?link=1" onclick="document.getElementById('beschrijving').innerHTML = 'U heeft zojuist op link 2 geklikt'; return false;">Link 2</a>
<div id="beschrijving">
Klik eerst een link aan
</div>
Denk er dus om dat je ook een pagina maakt voor mensen die een browser gebruiken die geen Javascript ondersteund, of uitgeschakeld hebben, dit is ook gelijk handig voor zoekmachines. (Ongeveer 10% van je bezoekers zal Javascript uit hebben staan).
Experimenteer maar wat ;)
Edit:
Omdat je Javascript gebruikt, zou de browser niet te hoeven herladen, en zal je pagina dus gelijk blijven (en de positie van de scrollbalk), alleen de innerHTML van de div wordt gewijzigd.
Omdat je Javascript gebruikt, zou de browser niet te hoeven herladen, en zal je pagina dus gelijk blijven (en de positie van de scrollbalk), alleen de innerHTML van de div wordt gewijzigd.
Gewijzigd op 01/01/1970 01:00:00 door Andries Louw Wolthuizen