repositionnement de page

JanKristof · 26/06/2009, 18h15

Bonjour

J'utilise jquery.tabs.pack.js sur mon site mais je ne connais rien au javascript.

Je voudrais savoir si on peut faire en sorte que lorsqu'on clique sur un des 10 titres d'articles sous l'article mis à la une, la page reste à l'endroit où elle est sans "sauter" pour se repositionner.

Espérant avoir été assez clair.

Merci de vos réponses.

SpaceFrog · 26/06/2009, 20h10

quel est l'intéret du lien hypertexte alors ???

JanKristof · 27/06/2009, 09h59

Arf, je savais que j'étais pas très clair ...

En gros j'ai 11 articles à la une, 1 pris au hasard est mis en exergue et les 10 autres dessous. Le lien permet de changer l'article en exergue avec son résumé et son lien lire la suite.

Lorsqu'on arrive en page d'accueil, on a le bandeau visible, les 2 onglets Les derniers articles... et ...et les autres, l'article en exergue et les 10 autres. C'est bien.

Mais si on clique sur l'un des 10 articles, la page "saute" pour positionner en haut de page le haut de l'article en exergue et on ne voit plus le bandeau et les onglets. C'est pas bien.

Donc je voudrais faire en sorte que la page ne saute plus, voilà.

Bovino · 27/06/2009, 10h32

Dans l'idée, il faut annuler l'action du href avec un return false après la fonction qui met à jour ta page pour éviter d'aller se positionner au niveau de l'ancre.

JanKristof · 27/06/2009, 12h09

Ok, je comprends bien l'idée mais comme sorti du HTML et du CSS, je suis une bille, je ne vois pas comment réaliser la chose.

Bovino · 27/06/2009, 12h11

Montres-nous le code d'appel de ta fonction

JanKristof · 27/06/2009, 15h22

Le fichier .js est appelé dans le head de façon classique

Ensuite c'est un jeu de css : les articles sont dans un div
<div id="section-#ID_ARTICLE" class="fragment"> où seul le premier est montré et les autres cachés

puis les articles sont de nouveau appelés dans une liste

Code :

<ul class="anchors">
    <li>
      <a href="#section-#ID_ARTICLE" tabindex="#ID_ARTICLE">
...

SpaceFrog · 27/06/2009, 18h45

Code :

<a href="#" tabindex="#ID_ARTICLE">

JanKristof · 27/06/2009, 20h08

Raté !

J'avais essayé aussi avec

Code :

 
<a href="#top" tabindex="#ID_ARTICLE">

et un id=top pour le body

Mais dans les 2 cas, si l'affichage ne "saute" plus, l'article en exergue disparait au réaffichage.

Bovino · 28/06/2009, 09h39

A priori, jQuery faisant appel aux eventListeners pour la gestion de événements, si tu plugin est bien codé un

Code :

<a href="#" onclick="return false" tabindex="#ID_ARTICLE">

devrait suffire.

JanKristof · 28/06/2009, 10h54

Eh ben non !

Et ce n'est pas un plugin, c'est juste un script jquery.tabs.pack.js appelé dans le head.

Et quand je fais ce que tu dis, le bloc de l'article en exergue se replie mais ne se déplie pas avec le nouvel article demandé.

JanKristof · 29/06/2009, 08h47

C'est bon, j'ai trouvé !

Code :

 
<a href="adressedusite#section-#ID_ARTICLE" tabindex="#ID_ARTICLE">

Merci beaucoup pour l'aide et d'avoir mis le doigt sur l'endroit où ça coinçait.

26/06/2009, 18h15	#1 (permalink)
JanKristof Invité de passage Date d'inscription: juin 2009 Messages: 7	repositionnement de page Bonjour J'utilise jquery.tabs.pack.js sur mon site mais je ne connais rien au javascript. Je voudrais savoir si on peut faire en sorte que lorsqu'on clique sur un des 10 titres d'articles sous l'article mis à la une, la page reste à l'endroit où elle est sans "sauter" pour se repositionner. Espérant avoir été assez clair. Merci de vos réponses.

27/06/2009, 10h32	#4 (permalink)
Bovino Responsable Développement Web Date d'inscription: juin 2008 Localisation: Bordeaux Âge: 39 Messages: 6 693	Dans l'idée, il faut annuler l'action du href avec un return false après la fonction qui met à jour ta page pour éviter d'aller se positionner au niveau de l'ancre. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !

27/06/2009, 12h11	#6 (permalink)
Bovino Responsable Développement Web Date d'inscription: juin 2008 Localisation: Bordeaux Âge: 39 Messages: 6 693	Montres-nous le code d'appel de ta fonction __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !

27/06/2009, 15h22	#7 (permalink)
JanKristof Invité de passage Date d'inscription: juin 2009 Messages: 7	Le fichier .js est appelé dans le head de façon classique Ensuite c'est un jeu de css : les articles sont dans un div <div id="section-#ID_ARTICLE" class="fragment"> où seul le premier est montré et les autres cachés puis les articles sont de nouveau appelés dans une liste Code : <ul class="anchors"> <li> <a href="#section-#ID_ARTICLE" tabindex="#ID_ARTICLE"> ... Dernière modification par SpaceFrog ; 27/06/2009 à 18h45.

27/06/2009, 20h08	#9 (permalink)
JanKristof Invité de passage Date d'inscription: juin 2009 Messages: 7	Raté ! J'avais essayé aussi avec Code : <a href="#top" tabindex="#ID_ARTICLE"> et un id=top pour le body Mais dans les 2 cas, si l'affichage ne "saute" plus, l'article en exergue disparait au réaffichage.

27/06/2009, 09h59	#3 (permalink)
JanKristof Invité de passage Date d'inscription: juin 2009 Messages: 7	Arf, je savais que j'étais pas très clair ... En gros j'ai 11 articles à la une, 1 pris au hasard est mis en exergue et les 10 autres dessous. Le lien permet de changer l'article en exergue avec son résumé et son lien lire la suite. Lorsqu'on arrive en page d'accueil, on a le bandeau visible, les 2 onglets Les derniers articles... et ...et les autres, l'article en exergue et les 10 autres. C'est bien. Mais si on clique sur l'un des 10 articles, la page "saute" pour positionner en haut de page le haut de l'article en exergue et on ne voit plus le bandeau et les onglets. C'est pas bien. Donc je voudrais faire en sorte que la page ne saute plus, voilà.

27/06/2009, 12h09	#5 (permalink)
JanKristof Invité de passage Date d'inscription: juin 2009 Messages: 7	Ok, je comprends bien l'idée mais comme sorti du HTML et du CSS, je suis une bille, je ne vois pas comment réaliser la chose.

28/06/2009, 09h39	#10 (permalink)
Bovino Responsable Développement Web Date d'inscription: juin 2008 Localisation: Bordeaux Âge: 39 Messages: 6 693	A priori, jQuery faisant appel aux eventListeners pour la gestion de événements, si tu plugin est bien codé un Code : <a href="#" onclick="return false" tabindex="#ID_ARTICLE"> devrait suffire. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !

28/06/2009, 10h54	#11 (permalink)
JanKristof Invité de passage Date d'inscription: juin 2009 Messages: 7	Eh ben non ! Et ce n'est pas un plugin, c'est juste un script jquery.tabs.pack.js appelé dans le head. Et quand je fais ce que tu dis, le bloc de l'article en exergue se replie mais ne se déplie pas avec le nouvel article demandé.

29/06/2009, 08h47	#12 (permalink)
JanKristof Invité de passage Date d'inscription: juin 2009 Messages: 7	C'est bon, j'ai trouvé ! Code : <a href="adressedusite#section-#ID_ARTICLE" tabindex="#ID_ARTICLE"> Merci beaucoup pour l'aide et d'avoir mis le doigt sur l'endroit où ça coinçait.

		Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
repositionnement de page

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email