[HTML] Ancre et onglet js

Ancre et onglet js [HTML] - HTML/CSS - Programmation

Marsh Posté le 13-01-2012 à 11:54:03    

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
Reply

Marsh Posté le 13-01-2012 à 11:54:03   

Reply

Marsh Posté le 14-01-2012 à 11:21:39    

Up! :


---------------
L'annuaire des serveurs Discord Hardware.fr Aidez nous à le compléter ! | Mes ventes
Reply

Marsh Posté le 14-01-2012 à 14:50:30    

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


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
Reply

Marsh Posté le 14-01-2012 à 19:57:39    

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
Reply

Marsh Posté le 15-01-2012 à 00:07:37    

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
Reply

Marsh Posté le 15-01-2012 à 12:21:43    

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
Reply

Marsh Posté le 15-01-2012 à 16:40:19    

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.


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
Reply

Marsh Posté le 15-01-2012 à 17:35:13    

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
Reply

Marsh Posté le 15-01-2012 à 18:13:00    

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 :)


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
Reply

Marsh Posté le 15-01-2012 à 18:22:17    

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
Reply

Marsh Posté le 15-01-2012 à 18:22:17   

Reply

Marsh Posté le 15-01-2012 à 19:38:17    

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
Reply

Marsh Posté le 16-01-2012 à 12:34:00    

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

---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
Reply

Marsh Posté le 16-01-2012 à 13:54:24    

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
Reply

Marsh Posté le 16-01-2012 à 14:01:31    

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


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
Reply

Marsh Posté le 16-01-2012 à 15:00:01    

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
Reply

Marsh Posté le 16-01-2012 à 15:25:26    

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'));


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
Reply

Marsh Posté le 16-01-2012 à 16:00:54    

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
Reply

Marsh Posté le 16-01-2012 à 16:06:13    

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.


---------------
[VDS] rail vesa, bras ecran, support TV / [ACH] des machins
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed