Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1766 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML] Ancre et onglet js

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[HTML] Ancre et onglet js

n°2121159
wazany
Posté le 13-01-2012 à 11:54:03  profilanswer
 

Salut,
 
voilà j'ai une page index sur lesquels j'ai des liens qui devrait m'amener sur une autre page qui contient plusieurs onglet avec du contenu à l’intérieur donc voilà le code de la page index.html :
 

Code :
  1. <div id="miacc"><a href="groupe.html#Mi"><img src="img/mi.jpg" alt="loic" /></a></div>
  2.         <div id="vincacc"><a href="groupe.html#Vinc"><img src="img/vinc.jpg" alt="vinc" /></a></div>
  3.         <div id="dimacc"><a href="groupe.html#Dim"><img src="img/dim.jpg" alt="Dim" /></a></div>
  4.         <div id="antoiacc"><a href="groupe.html#Loic"><img src="img/loic.jpg" alt="loic" /></a></div>
  5.         <div id="loicacc"><a href="groupe.html#Ant"><img src="img/ant.jpg" alt="ant" /></a></div>


et la page groupe.html  
 

Code :
  1. <div id="contenu">
  2.    
  3.       <div id="TabbedPanels1" class="TabbedPanels">
  4.         <ul class="TabbedPanelsTabGroup">
  5.           <li class="TabbedPanelsTab" tabindex="0" >Le groupe</li>
  6.           <li class="TabbedPanelsTab" tabindex="1" id="#Mi">Mi </li>
  7.           <li class="TabbedPanelsTab" tabindex="2" id="#Dim">Dimitri </li>
  8.           <li class="TabbedPanelsTab" tabindex="3" id="#Loic">Loic </li>
  9.           <li class="TabbedPanelsTab" tabindex="4" id="#Ant">Onglet 5</li>
  10.           <li class="TabbedPanelsTab" tabindex="5" id="#Vinc">Onglet 6</li>
  11.         </ul>
  12.         <div class="TabbedPanelsContentGroup">
  13.               <div class="TabbedPanelsContent">
  14.                 <div id="Groupe"> 
  15.                     <img src="img/migroupe.jpg" />
  16.                     <div class="ContenuG"> blablabla </div>
  17.                     <div class="ContenuD">
  18.                     </div>
  19.                 </div>
  20.             </div>
  21.             <div class="TabbedPanelsContent">
  22.                 <div> 
  23.                     <img src="img/migroupe.jpg" />       
  24.                     <div class="ContenuG"> blablabla </div>
  25.                     <div class="ContenuD">
  26.                     </div>
  27.                 </div>
  28.             </div>
  29.             <div class="TabbedPanelsContent">
  30.                 <div id="Dim"> 
  31.                     <img src="img/dimgroupe.jpg" />
  32.                     <div class="ContenuG"> blablabla </div>
  33.                     <div class="ContenuD">
  34.                     </div>
  35.                </div>
  36.             </div>
  37.             <div class="TabbedPanelsContent">
  38.                 <div id="Loic"> 
  39.                     <img src="img/loicgroupe.jpg" />
  40.                     <div class="ContenuG"> blablabla </div>
  41.                     <div class="ContenuD">
  42.                     </div>
  43.                 </div>
  44.             </div>
  45.             <div class="TabbedPanelsContent">
  46.                 <div id="Vincent"> 
  47.                     <img src="img/vincentgroupe.jpg" />
  48.                     <div class="ContenuG"> blablabla </div>
  49.                     <div class="ContenuD">
  50.                     </div>
  51.                 </div>
  52.             </div>
  53.             <div class="TabbedPanelsContent">
  54.                 <div id="Antoine"> 
  55.                     <img src="img/migroupe.jpg" />
  56.                     <div class="ContenuG"> blablabla </div>
  57.                     <div class="ContenuD">
  58. blabla
  59.                     </div>
  60.                 </div>
  61.             </div>
  62.       </div>
  63. </div>


Mais ça me met juste que le premier onglet   [:wark0]


---------------
L'annuaire des serveurs Discord Hardware.fr Aidez nous à le compléter ! | Mes ventes
mood
Publicité
Posté le 13-01-2012 à 11:54:03  profilanswer
 

n°2121299
wazany
Posté le 14-01-2012 à 11:21:39  profilanswer
 

Up! :


---------------
L'annuaire des serveurs Discord Hardware.fr Aidez nous à le compléter ! | Mes ventes
n°2121324
pop-pan
yay!
Posté le 14-01-2012 à 14:50:30  profilanswer
 

sans savoir ce que tu utilises comme script pour ton tabbedpanel on va pas aller loin pour t'aider.


---------------
Plop !
n°2121382
aideinfo
Posté le 14-01-2012 à 19:57:39  profilanswer
 

Bah normal, tu utilises les prénoms complets dans les DIV, mais des prénoms réduits dans les liens....


---------------
http://www.aideinfo.com/  Whois adresses IP/domaines le plus évolué !!  FAQ Free Mobile
n°2121411
wazany
Posté le 15-01-2012 à 00:07:37  profilanswer
 

pop-pan a écrit :

sans savoir ce que tu utilises comme script pour ton tabbedpanel on va pas aller loin pour t'aider.


 
ben a vrai dire j ai utilise le script de dreamweaver
 

aideinfo a écrit :

Bah normal, tu utilises les prénoms complets dans les DIV, mais des prénoms réduits dans les liens....


 
oui je vien de voir que mes id etait bien dans tous les sens  pense tu qu il vaux mieux le mettre dans les onglets dans tabedpannel ou tabbedgroupe??


---------------
L'annuaire des serveurs Discord Hardware.fr Aidez nous à le compléter ! | Mes ventes
n°2121433
aideinfo
Posté le 15-01-2012 à 12:21:43  profilanswer
 

JE ne sais pas vu que je ne connais pas le script, ni son rendu. Mais si tu utilises des mauvais ID dans tes liens, c'est normal que ça ne marche pas. Donc commence par corriger ces erreurs


---------------
http://www.aideinfo.com/  Whois adresses IP/domaines le plus évolué !!  FAQ Free Mobile
n°2121462
pop-pan
yay!
Posté le 15-01-2012 à 16:40:19  profilanswer
 

c'est normal et tes liens sont "corrects", il faut renvoyer vers les id du TabbedPanelsTab et pas des TabbedPanelsContent  
 
tu regardes dans la lib dreamweaver comment les evenements sont liés a tes tabbedPanelsTab, tu cherche la fonction appelée pour afficher les bon contents lorsqu'on clique sur un tab.
 
tu recupere un script qui parse l'url pour retrouver ce qu'il y a apres '#' (google "querystring" ) et tu appelle la fonction dreamweaver.
 
 
Juste pour info tu ne PEUX PAS declencher l'evenement "click" via script, c'est pourquoi tu dois appeller la fonction correspondante et pas l'evenement.
 
je connais pas les nouvelles libs DW donc sans ca je peux rien te dire de plus.


---------------
Plop !
n°2121468
wazany
Posté le 15-01-2012 à 17:35:13  profilanswer
 

Merci pop je doit utilisé un script du genre ça? http://www.asp-php.net/tutorial/as [...] php?page=2 ! Si ça peut nous aider je vous post la page avec le js car je débute vraiment dans ce domaine et on va dire que c'est un peut tendu :p


---------------
L'annuaire des serveurs Discord Hardware.fr Aidez nous à le compléter ! | Mes ventes
n°2121476
pop-pan
yay!
Posté le 15-01-2012 à 18:13:00  profilanswer
 

si t'as la page hebergée quelque part c'est effectivemment plus pratique.
sinon pour recupere les infos de l'irl je pensait plutot a le faire en javascript et pas en php/asp :)


---------------
Plop !
n°2121478
wazany
Posté le 15-01-2012 à 18:22:17  profilanswer
 

http://195.83.128.55/~src11c09/yllimor/ Voilou :) mais c'est vrai en js ça serais plus simple :)  
 
( j'ai aussi un beug une fois en ligne je n'ai pas le même rendu sur la page groupe que sur mon fixe directement c'est bizarre )


---------------
L'annuaire des serveurs Discord Hardware.fr Aidez nous à le compléter ! | Mes ventes
mood
Publicité
Posté le 15-01-2012 à 18:22:17  profilanswer
 

n°2121485
wazany
Posté le 15-01-2012 à 19:38:17  profilanswer
 

Ca ne vien pas que de ça j'ai changé tout des qu'on me la dit ;)


---------------
L'annuaire des serveurs Discord Hardware.fr Aidez nous à le compléter ! | Mes ventes
n°2121618
pop-pan
yay!
Posté le 16-01-2012 à 12:34:00  profilanswer
 

http://labs.adobe.com/technologies [...] sample.htm
 
=> TabbedPanels1.showPanel(1);
c'est la fonction/methode a appeler pour ouvrir le second panel (pour ouvrir le 1er c'est showpanel(0))
l'index dont tu as besoin est donc un attribut de l'element avec l'id correspondant a ton lien.
 
sinon j'avais mal lu et tes IDs sont mal nommée, tu dois enlever les "# dedans" et SURTOUT ne les utiliser qu'une fois.
 
i.e. tu ne peux/dois pas avoir plusieurs elements avec id="Dim" dans ta page. renomme ceux de tes contenus ou enleve les directement.
 

Code :
  1. <div id="TabbedPanels1" class="TabbedPanels">
  2.     <ul class="TabbedPanelsTabGroup">
  3.           <li class="TabbedPanelsTab" tabindex="0" id="Groupe">Le groupe</li>
  4.           <li class="TabbedPanelsTab" tabindex="1" id="Mi">Mi </li>
  5.     </ul>
  6.     <div class="TabbedPanelsContentGroup">
  7.         <div class="TabbedPanelsContent">
  8.             <img src="img/migroupe.jpg" />
  9.             <div class="ContenuG">panel 0/1</div>
  10.             <div class="ContenuD"></div>
  11.         </div>
  12.         <div class="TabbedPanelsContent">
  13.             <img src="img/migroupe.jpg" />
  14.             <div class="ContenuG">panel 1/2</div>
  15.             <div class="ContenuD"></div>
  16.         </div>
  17.     </div>
  18. </div>
  19. <script>
  20. // recupere tout ce qu se trouve apres l'url a proprement parler
  21. // si tu as des ?/& apres ca recupere aussi donc a toi de nettoyer
  22. // dans le cas de http://siteurl#machin => machin
  23. // dans le cas de http://siteurl#machin?toto=prout => machin?toto=prout
  24. var targetId = unescape(self.document.location.hash.substring(1));
  25. // recupere l'element qui correspond a l'id si il y en a un
  26. var targetEl = document.getElementById(targetId);
  27. // si un element correspondant a l'id existe
  28. // que cet element est bien un tabbedPanelsTab
  29. // qu'il est bien dans deux element (qu'il a un parent de niv -2)
  30. // que ce dernier parent est bien un tabbedPanel
  31. if (targetEl
  32.     && targetEl.className.indexOf('TabbedPanelsTab')!=-1
  33.     && targetEl.getAttribute('tabindex') != null
  34.     && targetEl.parentNode.parentNode
  35.     && targetEl.parentNode.parentNode.className.indexOf('TabbedPanels') != -1
  36.     ){
  37.     targetEl.parentNode.parentNode.showPanel(targetEl.getAttribute('tabindex'));
  38.     // si ca marche pas essaye plutot ca car je suis pas familier du code DW et de la facon dont il fonctionne
  39.     eval(targetEl.parentNode.parentNode.id +".showPanel("+ targetEl.getAttribute('tabindex') +" );" )
  40.    
  41. }
  42. </script>


Message édité par pop-pan le 16-01-2012 à 12:37:05

---------------
Plop !
n°2121624
wazany
Posté le 16-01-2012 à 13:54:24  profilanswer
 

Merci pour ton aide mais ça ne fonctionne pas sur ce que j'ai fait :/  
 
http://195.83.128.55/~src11c09/yllimor/index.html


---------------
L'annuaire des serveurs Discord Hardware.fr Aidez nous à le compléter ! | Mes ventes
n°2121626
pop-pan
yay!
Posté le 16-01-2012 à 14:01:31  profilanswer
 

faut lire la derniere ligne de commentaire.
si le targetEl.parentNode... marche pas tu l'enleve et tu garde la ligne apres.


---------------
Plop !
n°2121640
wazany
Posté le 16-01-2012 à 15:00:01  profilanswer
 

hum j'avais pas compris mais ça persiste toujours, je sent que je vais le jarter va pas être compliqué je te remercie pour ton aide


---------------
L'annuaire des serveurs Discord Hardware.fr Aidez nous à le compléter ! | Mes ventes
n°2121652
pop-pan
yay!
Posté le 16-01-2012 à 15:25:26  profilanswer
 

ca marche tres bien je viens de tester l'appel sur ton site.
il faut supprimer la ligne
targetEl.parentNode.parentNode.showPanel(targetEl.getAttribute('tabindex'));


---------------
Plop !
n°2121664
wazany
Posté le 16-01-2012 à 16:00:54  profilanswer
 

je l'ai commenté et retiré et je n'ai aucune réaction :/
 
Merci bien pour l'aide fourni


---------------
L'annuaire des serveurs Discord Hardware.fr Aidez nous à le compléter ! | Mes ventes
n°2121665
pop-pan
yay!
Posté le 16-01-2012 à 16:06:13  profilanswer
 

normal qe ca ne fasse rien.
le widget tabbedPanel ne se charge qu'apres.
 
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1" );
</script>
 
il faut mettre ce code avant l'autre.


---------------
Plop !

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML] Ancre et onglet js

 

Sujets relatifs
Vérifier l'existence d'une ancre[HTML] Peut on mettre une balise h1 dans du li ?
[HTML] ne pas mettre de h1 (ou en mettre plusieurs)[HTML] forcer le téléchargement de fichier
[HTML/JS/FLASH] integration flash dans window.open() sur chromehelp : HTML mise à jour automatique dewplayer
classeur excel / onglet excelFaire un espace entre 2 images en html
Exécuter un script si presse Entréerelier un texte en html
Plus de sujets relatifs à : [HTML] Ancre et onglet js


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR