Page 1 sur 1
Empêcher le navigateur de scroller vers une ancre
Publié : 29 janv. 2009, 16:11
par Conrad
Bonjour,
je suis actuellement confronté à un problème que je n'arrive pas à résoudre :
afin de garder la possibilité d'utiliser l'historique des navigateurs tout en exécutant de l'Ajax, j'utilise les ancres pour modifier la barre d'adresse.
Le problème est donc le suivant :
lorsque le navigateur change la barre d'adresse en ajoutant une ancre, il remonte la page automatiquement en haut, si l'ancre n'existe pas réellement.
Par exemple j'appelle
http://www.test.com/script.html, puis une fonction Javascript appelle l'URL
http://www.test.com/script.html#couleur:bleu
Aucun élément d'id "couleur:bleu" n'existe, le navigateur remonte la page au début.
J'ai d'abord pensé à utiliser une astuce avec la fonction scrollTo de Scriptaculous, qui permet de naviguer de façon fluide vers une ancre (au lieu de sauter vers celle-ci), puis de lui mettre une durée d'exécution énorme, qui donne l'impression que la page ne bouge pas. Ça fonctionne un peu trop bien, car la page ne bouge pas, mais il est impossible de scroller ensuite.
J'ai ensuite pensé à utiliser l'option "offset" de la fonction scrollTo, pour faire revenir le navigateur au pixel où à cliqué l'utilisateur. Mais ça donne une désagréable impression que la page remonte puis redescend en une fraction de seconde.
___________
Y-a-t'il un moyen pour empêcher le navigateur de scroller vers le haut de la page, si l'ancre n'existe pas ?
Merci d'avance !
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Publié : 29 janv. 2009, 17:24
par calimo
Tu as regardé
http://www.deviantart.com/ ? Il ne me semble pas qu'on remonte en haut (mais je ne suis pas 100% sur)
Publié : 29 janv. 2009, 19:50
par Conrad
Merci du lien, j'ai cherché sur plusieurs pages s'il y avait des appel en ancre, mais à par un système qui permet de voter, je n'en ai pas vu (et la page remonte après le vote).
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Publié : 30 janv. 2009, 08:42
par calimo
D'habitude j'y accède depuis chez moi, avec un plus grand écran où tout tient dans un seul écran... effectivement depuis un écran plus petit on remonte.
En fait je pensais par exemple aux galleries des utilisateurs, p.ex au bol :
http://hibbary.deviantart.com/gallery/#_featured--2
On remonte mais pas tout en haut. Mais l'ancre doit probablement exister.
Pourquoi ne pas créer ces ancres ? Ca ne doit pas être très compliqué en javascript, avant d'appeler l'ajax...
Publié : 01 févr. 2009, 20:32
par Conrad
Bon, à force de me creuser la tête, j'ai trouvé une solution.
Déjà il faut savoir que le problème de retour au haut de la page ne se pose pas avec IE6 et 7 (Internet Explorer semble se foutre que l'on change l'url de toute façon).
La correction n'est donc à effectuer que pour les navigateurs Webkit (Safari, Chrome, Opera) et Gecko (Firefox).
Le principe c'est de faire flotter une div invisible en permanence en haut de l'écran. Lorsque l'url est modifié, on enregistre la position de cette div, puis on demande à la page de scroller à l'ancienne position de la div.
Avec cette méthode on retourne bien à la position d'origine, mais on peu observer un léger clignotement (vu que la page remonte puis redescend en une fraction de seconde). C'est le mieux que j'ai réussi à faire malheureusement, et ce "clignotement" est presque indiscernable sur Firefox et Safari, et carrément inexistant sur Opera et Chrome.
L'exemple : http://conradsonblog.appspot.com/test/ancres_test.html
Exemple de code :
Code : Tout sélectionner
<div id="hash_position" style="position:absolute;"></div>
<script type="text/javascript">
// pour garder une div toujours en haut de la page, si on est pas sur IE
if (!document.all) { setInterval("positionHash()",100); }
function positionHash(){
var hashTop = pageYOffset;
hash_position.style.top = hashTop+"px";
}
// on modifie le "hash", puis on repositionne la fenêtre
window.location.hash = color_line;
current_hash = window.location.hash;
if (!document.all) {
window.scrollBy(0,ypox);
}
</script>
Publié : 01 févr. 2009, 21:13
par ra-mon
Salut,
La correction n'est donc à effectuer que pour les navigateurs Webkit (Safari, Chrome, Opera)
Opera n'utilise pas le moteur de rendu Webkit. Il utilise son propre Presto "fait maison" dont le nom figure désormais dans le User-Agent de la bête.
@+
--
Pierre
Message envoyé avec : Opera/10.00 (Windows NT 5.1; U; fr) Presto/2.2.0
Publié : 04 févr. 2009, 08:54
par calimo
Ca c'est malin comme technique !
Conrad a écrit :Avec cette méthode on retourne bien à la position d'origine, mais on peu observer un léger clignotement (vu que la page remonte puis redescend en une fraction de seconde).
On dirait en effet que ça remonte en haut. Je pense qu'il s'agit d'un bug (vu mes connaissances en javascript, je n'en suis pas sûr). Étant donné que tu as un exemple minimum, ça pourrait être utile de le soumettre sur
Bugzilla (vérifie qu'il n'existe pas déjà).
Publié : 04 févr. 2009, 13:00
par bormat
c'est assez satisfaisant je trouve on ne vois que aller en bas 1/5 de seconde à peine
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5
Publié : 19 févr. 2009, 09:00
par bormat
la page à disparu et je me demander comment faire pour faire des ancre comme celle-ci
je croyais que les ancre amené à une partie de la page et la celon #blue #red
on avait un e page différente
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6
Publié : 19 févr. 2009, 09:37
par calimo
bormat a écrit :la page à disparu et je me demander comment faire pour faire des ancre comme celle-ci
je croyais que les ancre amené à une partie de la page et la celon #blue #red
on avait un e page différente
On
a la même page, simplement l'ancre provoque un appel ajax qui fait que son contenu est changé dynamiquement !
Publié : 19 févr. 2009, 11:24
par bormat
calimo a écrit :bormat a écrit :la page à disparu et je me demander comment faire pour faire des ancre comme celle-ci
je croyais que les ancre amené à une partie de la page et la celon #blue #red
on avait un e page différente
On
a la même page, simplement l'ancre provoque un appel ajax qui fait que son contenu est changé dynamiquement !
salut merci ,ok c'est de l'ajax je ne suis pas encore à là
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6