gerer les ancres dynamiquement

gerer les ancres dynamiquement - PHP - Programmation

Marsh Posté le 01-06-2006 à 14:49:05    

slt tlm, j'aimerais gerer les ancres de manière dynamique , cad j'affiche des tables via une boucle et j'ai mis devant chaque table une ancre.
j'ai 2 boutons et je souhaite qu'ils me permettent d'avancer d'une ancre ou de reculer d'une ancre.
j'avais pensé incrementer une variable ou la decrementer mais cela ne marche que pour le 1er coup ...


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 01-06-2006 à 14:49:05   

Reply

Marsh Posté le 01-06-2006 à 17:16:30    

??? J'ai pas vraiment compris cke tu veux faire

Reply

Marsh Posté le 01-06-2006 à 17:34:10    

c'est pas en php mais en js qu'il faut que tu le fasses.
 
En gros je ferais ça en js

Code :
  1. var aNodes = document.getElementsByTagName('a');
  2. var anchorNodes = new Array();
  3. for (var i = 0; i<aNodes.length; i++){
  4.   if ( aNodes.getAttribute('href').substring(0,1) == '#'){
  5.     anchorNodes.push(aNodes[i]);
  6.   }
  7. }
  8. var currentAnchorNode = 0;
  9. function chgAnchor(way){
  10.   if(way == 'next'){
  11.     currentAnchorNode++;
  12.   } else  if (way =='previous'){
  13.     currentAnchorNode--;
  14.   }
  15.   if ( anchorNodes[currentAnchorNode] != undefined ){
  16.     document.location = anchorNodes[currentAnchorNode].getAttribute('href');
  17.     return true;
  18.   } else {
  19.     return false;
  20.   }
  21. }


Et tes deux boutons doivent ressembler à ça

Code :
  1. <input type="button" value="next" onclick="chgAnchor('next')/>
  2. <input type="button" value="previous" onclick="chgAnchor('previous')/>


note: ce code est entièrement fait de tête, ça doit surement planter à 2/3 endroits mais tu as l'idée!

Message cité 2 fois
Reply

Marsh Posté le 01-06-2006 à 22:21:48    

anapajari a écrit :

c'est pas en php mais en js qu'il faut que tu le fasses.
 
En gros je ferais ça en js

Code :
  1. var aNodes = document.getElementsByTagName('a');
  2. var anchorNodes = new Array();
  3. for (var i = 0; i<aNodes.length; i++){
  4.   if ( aNodes.getAttribute('href').substring(0,1) == '#'){
  5.     anchorNodes.push(aNodes[i]);
  6.   }
  7. }
  8. var currentAnchorNode = 0;
  9. function chgAnchor(way){
  10.   if(way == 'next'){
  11.     currentAnchorNode++;
  12.   } else  if (way =='previous'){
  13.     currentAnchorNode--;
  14.   }
  15.   if ( anchorNodes[currentAnchorNode] != undefined ){
  16.     document.location = anchorNodes[currentAnchorNode].getAttribute('href');
  17.     return true;
  18.   } else {
  19.     return false;
  20.   }
  21. }


Et tes deux boutons doivent ressembler à ça

Code :
  1. <input type="button" value="next" onclick="chgAnchor('next')/>
  2. <input type="button" value="previous" onclick="chgAnchor('previous')/>


note: ce code est entièrement fait de tête, ça doit surement planter à 2/3 endroits mais tu as l'idée!


merci je vais m'en inspirer !!


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 02-06-2006 à 02:34:11    

anapajari a écrit :

c'est pas en php mais en js qu'il faut que tu le fasses.

Code :
  1. <input type="button" value="next" onclick="chgAnchor('next')/>
  2. <input type="button" value="previous" onclick="chgAnchor('previous')/>


note: ce code est entièrement fait de tête, ça doit surement planter à 2/3 endroits mais tu as l'idée!


 
Ba déjà sur que ça plante à deux endroits :
...onclick="chgAnchor('next')/>... >> Manque un "
...onclick="chgAnchor('previous')/>... >> De même
 
Et ça reste faisable avec du PHP! Mais ça implique le rechargement de la page...
[:chenaillou]


Message édité par dwogsi le 02-06-2006 à 02:34:45
Reply

Marsh Posté le 02-06-2006 à 10:04:56    

peux tu m'expliquer ce passage :

var aNodes = document.getElementsByTagName('a');var anchorNodes = new Array();for (var i = 0; i<aNodes.length; i++){  if ( aNodes.getAttribute('href').substring(0,1) == '#'){    anchorNodes.push(aNodes[i]);  }}


je ne le comprends pas et je ne sais pas où le mettre


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 02-06-2006 à 10:17:41    

huum j'avais pas réfléchi a un truc à mon avis tu peux pas le mettre directement entre tes balises scripts, tu vas être obligé de mettre ça dans un fonction lancé au onload de ta page.
en gros ça donne ça:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Exemple</title>
  7.   <style type="text/css">
  8.   </style>
  9.   <script type="text/javascript">
  10.   var anchorNodes = new Array();
  11.   var currentAnchorNode = 0;
  12.   function init(){
  13.     /***on recupères tous les liens ( tag = a ) de la page ***/
  14.     var aNodes = document.getElementsByTagName('a');
  15.     /*** on les parcours un par un ***/
  16.     for (var i = 0; i<aNodes.length; i++){ 
  17.       /*** on vérifie si ce sont des ancres ( leur attribut href commence par # ***/
  18.       if ( aNodes.getAttribute('href').substring(0,1) == '#'){
  19.         /*** si c'est le cas on les mets dans le tableau anchorNodes ( qui est une variable 'globale' de ta page et donc utilisable partout ***/ 
  20.         anchorNodes.push(aNodes[i]); 
  21.       }
  22.     }
  23.     return true;
  24.   }
  25.   function chgAnchor(way){
  26.   ...
  27.   }
  28. </script>
  29. </head>
  30. <body onload="init();">
  31. ...
  32. </body>
  33. </html>


 

Reply

Marsh Posté le 02-06-2006 à 10:33:25    

je rencontre une erreur sur cette ligne :

     if ( aNodes.getAttribute('href').substring(0,1) == '#')


le message d'erreur:

cet objet ne gère pas cette propriété ou cette méthode


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 02-06-2006 à 10:49:02    

manque le crochet pour indiqué quel element du tableau est encours de traitement

Code :
  1. if ( aNodes[i].getAttribute('href').substring(0,1) == '#')

Message cité 1 fois
Reply

Marsh Posté le 02-06-2006 à 11:04:12    

anapajari a écrit :

manque le crochet pour indiqué quel element du tableau est encours de traitement

Code :
  1. if ( aNodes[i].getAttribute('href').substring(0,1) == '#')



bon j'ai plus d'erreurs mais cela ne prouduit rien ....
j'ai mis mes ancres comme ceci :  

<a href="#"></a>


comme je suis sur un script php y a un echo devant et une variable pour le nom.


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 02-06-2006 à 11:04:12   

Reply

Marsh Posté le 02-06-2006 à 11:10:22    

balourdes tout le code de ta page ...

Reply

Marsh Posté le 02-06-2006 à 11:10:59    

Code :
  1. <html>
  2. <head>
  3. <link type="text/css" rel="stylesheet" href="sites.css">
  4. <link type="text/css" rel="stylesheet" href="stylelien.css">
  5. <script language="JavaScript" src="images.js">
  6. </script>
  7. <script type="text/javascript">
  8. var anchorNodes = new Array();
  9. var currentAnchorNode = 0; 
  10. function init()
  11. {    /***on recupères tous les liens ( tag = a ) de la page ***/   
  12. var aNodes = document.getElementsByTagName('a');
  13.     /*** on les parcours un par un ***/   
  14.     for (var i = 0; i<aNodes.length; i++)
  15.     {
  16.       /*** on vérifie si ce sont des ancres ( leur attribut href commence par # ***/
  17.   if ( aNodes[i].getAttribute('href').substring(0,1) == '#')
  18.       {       
  19.         /*** si c'est le cas on les mets dans le tableau anchorNodes ( qui est une variable 'globale' de ta page et donc utilisable partout ***/
  20.       anchorNodes.push(aNodes[i]);     
  21.        }   
  22.        }    return true;
  23.       }
  27. function chgAnchor(way)
  28. {
  30.    if(way == 'next')
  31.    {   
  32.      currentAnchorNode++;
  33.    }
  34.    else if (way =='previous')
  35.    {
  36.      currentAnchorNode--; 
  37.    } 
  38.    if ( anchorNodes[currentAnchorNode] != undefined )
  39.    {   
  40.      document.location = anchorNodes[currentAnchorNode].getAttribute('href');
  41.      return true;
  42.    }
  43.    else
  44.    {   
  45.      return false;
  46.    }
  47. }
  52. function cat()
  53. {
  55. alert(document.forms.form1.categorie.selectedItem);
  56. if(document.forms.form1.categorie.selectedItem=="catégorie" )
  57.    {
  58.    document.forms.form1.categorie.style.display="none";
  59.    document.forms.form1.mot.style.display="block";
  60.         }
  61. else
  62. {
  63.    document.forms.form1.categorie.style.display="block";
  64.    document.forms.form1.mot.style.display="none";
  65.     }
  66. }
  68. </script>
  70. </head>
  73. <body onload="init();">
  74. .....
  75. while ($row = mysql_fetch_array($result, MYSQL_BOTH))
  76. {
  77. echo '<a name='.$ancre.' href="#'.$ancre.'"></a>';
  78. $ancre++;
  79. ....
  80.   echo'<td style="vertical-align: middle;"><img style="border: 0px solid ; width: 35px; height: 35 px; " alt="" ;onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage (\'pp1\',\'\',\'boutonbasehautp2.gif\',1)" name="pp1" src="boutonbasehautp1.gif" ></a>';
  81.   echo'<img style="border: 0px solid ; width: 35px; height: 35 px;" alt="" onclick="chgAnchor(\'previous\')"; onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage (\'pp\',\'\',\'boutonbasehaut2.gif\',1)" name="pp" src="boutonbasehaut1.gif" ></td>';
  83. echo'<td style="vertical-align: middle;"><img style="border: 0px solid ; width: 35px; height: 35px;" alt="" onclick="chgAnchor(\'next\')"; onmousedown=""; onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage (\'ps\',\'\',\'boutonbasebas2.gif\',1)" name="ps" src="boutonbasebas1.gif">';
  84. echo'<img style="border: 0px solid ; width: 35px; height: 35px;" alt="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage (\'ps1\',\'\',\'boutonbasebasp2.gif\',1)" name="ps1" src="boutonbasebasp1.gif"></a></td>';
  87. <?PHP


Message édité par carot0 le 02-06-2006 à 11:19:08

---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 06-06-2006 à 11:13:54    

[:atreyu]


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 06-06-2006 à 11:50:30    

t'es bien gentil mais j'interprete pas le php, donc si on pouvais avoir le code HTML ça serait mieux :o

Message cité 1 fois
Reply

Marsh Posté le 06-06-2006 à 14:00:52    

anapajari a écrit :

t'es bien gentil mais j'interprete pas le php, donc si on pouvais avoir le code HTML ça serait mieux :o


en fait le code html se trouve derriere les echo
mais je vais essayer de dépoussierer ca pour que ca soit plus compréhensible.

Message cité 1 fois

---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 06-06-2006 à 14:29:12    

carot0 a écrit :

en fait le code html se trouve derriere les echo


Aaaaah c'est comme ça que ça marche ...  :o  

carot0 a écrit :

mais je vais essayer de dépoussierer ca pour que ca soit plus compréhensible.


En fait c'est même pas sur que cela soit plus compréhensible vu la beauté du code HTML que tu semble générer.
 
Donc voici une petit P.O.C., j'ai touché à rien, c'est exactement le code que tu as mis ( moins ce qui servait pas):

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Ancres</title>
  7.   <script type="text/javascript">
  8.   var anchorNodes = new Array();
  9.   var currentAnchorNode = 0; 
  10. function init() {   
  11.   /***on recupères tous les liens ( tag = a ) de la page ***/   
  12.   var aNodes = document.getElementsByTagName('a');
  13.   /*** on les parcours un par un ***/   
  14.   for (var i = 0; i<aNodes.length; i++) {
  15.     /*** on vérifie si ce sont des ancres ( leur attribut href commence par # ***/
  16.     if ( aNodes[i].getAttribute('href').substring(0,1) == '#') {       
  17.       /*** si c'est le cas on les mets dans le tableau anchorNodes ( qui est une variable 'globale' de ta page et donc utilisable partout ***/
  18.       anchorNodes.push(aNodes[i]);     
  19.     }   
  20.   }    return true;
  21. }
  23. function chgAnchor(way) {
  24.   if(way == 'next') {   
  25.     currentAnchorNode++;
  26.   } else if (way =='previous') {
  27.     currentAnchorNode--; 
  28.   } 
  29.   if ( anchorNodes[currentAnchorNode] != undefined ) {   
  30.     document.location = anchorNodes[currentAnchorNode].getAttribute('href');
  31.     return true;
  32.   } else {   
  33.     return false;
  34.   }
  35. }
  36.   </script>
  37. </head>
  38. <body onload="init()">
  39. <input type="button" value="next" onclick="chgAnchor('next')"/>
  41. <input type="button" value="previous" onclick="chgAnchor('previous')"/>
  42. <br/>
  43. <a name='A' href="#A">AAA</a>
  44. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  45. <a name='B' href="#B">BBB</a>
  46. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  47. <a name='C' href="#C">CCC</a>
  48. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  49. <a name='D' href="#D">DDD</a>
  50. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  51. <a name='E' href="#E">EEE</a>
  52. </body>
  54. </html>


Message cité 1 fois
Reply

Marsh Posté le 06-06-2006 à 14:57:44    

anapajari a écrit :

Aaaaah c'est comme ça que ça marche ...  :o  
 
En fait c'est même pas sur que cela soit plus compréhensible vu la beauté du code HTML que tu semble générer.
 
Donc voici une petit P.O.C., j'ai touché à rien, c'est exactement le code que tu as mis ( moins ce qui servait pas):

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Ancres</title>
  7.   <script type="text/javascript">
  8.   var anchorNodes = new Array();
  9.   var currentAnchorNode = 0; 
  10. function init() {   
  11.   /***on recupères tous les liens ( tag = a ) de la page ***/   
  12.   var aNodes = document.getElementsByTagName('a');
  13.   /*** on les parcours un par un ***/   
  14.   for (var i = 0; i<aNodes.length; i++) {
  15.     /*** on vérifie si ce sont des ancres ( leur attribut href commence par # ***/
  16.     if ( aNodes[i].getAttribute('href').substring(0,1) == '#') {       
  17.       /*** si c'est le cas on les mets dans le tableau anchorNodes ( qui est une variable 'globale' de ta page et donc utilisable partout ***/
  18.       anchorNodes.push(aNodes[i]);     
  19.     }   
  20.   }    return true;
  21. }
  23. function chgAnchor(way) {
  24.   if(way == 'next') {   
  25.     currentAnchorNode++;
  26.   } else if (way =='previous') {
  27.     currentAnchorNode--; 
  28.   } 
  29.   if ( anchorNodes[currentAnchorNode] != undefined ) {   
  30.     document.location = anchorNodes[currentAnchorNode].getAttribute('href');
  31.     return true;
  32.   } else {   
  33.     return false;
  34.   }
  35. }
  36.   </script>
  37. </head>
  38. <body onload="init()">
  39. <input type="button" value="next" onclick="chgAnchor('next')"/>
  41. <input type="button" value="previous" onclick="chgAnchor('previous')"/>
  42. <br/>
  43. <a name='A' href="#A">AAA</a>
  44. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  45. <a name='B' href="#B">BBB</a>
  46. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  47. <a name='C' href="#C">CCC</a>
  48. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  49. <a name='D' href="#D">DDD</a>
  50. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  51. <a name='E' href="#E">EEE</a>
  52. </body>
  54. </html>



je vais essayer comme çà merci !
 
edit : si tu as des conseil pour que mon html soit plus "propre" je suis preneur  :)
 
edit 2 : j'ai mis ton code dans un *.html et les bouton next et previous ne marchent pas ....


Message édité par carot0 le 07-06-2006 à 10:00:04

---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 07-06-2006 à 10:58:58    

j'ai fait un alert (aNodes[i].getAttribute('href').substring(0,1));
et j'ai pu constaté que les lien avec une ancre était en fait da la forme : adresse-serveur/page.php# donc le if n'est jamais valable car la chaine ne commence jamais pas un # mais par h..


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 07-06-2006 à 11:13:54    

remplace:

Code :
  1. if ( aNodes[i].getAttribute('href').substring(0,1) == '#') {


par

Code :
  1. if ( aNodes[i].getAttribute('href').indexOf('#') >= 0) {

Message cité 1 fois
Reply

Marsh Posté le 07-06-2006 à 11:37:05    

anapajari a écrit :

remplace:

Code :
  1. if ( aNodes[i].getAttribute('href').substring(0,1) == '#') {


par

Code :
  1. if ( aNodes[i].getAttribute('href').indexOf('#') >= 0) {



j'ai fait un truc dans le genre mais si dans ma page je propose des liens vers d'autre pages comportant des ancre elle seront rescensé elles aussi... comment eviter cela ?


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le 07-06-2006 à 11:40:16    

Bin tu testes si ton lien va bien sur ton serveur [:spamafote]
 
note: il n'est pas interdit de réfléchir tout seul

Message cité 1 fois
Reply

Marsh Posté le 07-06-2006 à 11:50:12    

anapajari a écrit :

Bin tu testes si ton lien va bien sur ton serveur [:spamafote]
 
note: il n'est pas interdit de réfléchir tout seul


merci pour tes reponse et dsl pour les questions "con" j'ai perdu le man de mon brain  :D


---------------
In a world without walls and fences, who needs Windows and Gates
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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