[Aide] Input + Submit vers ancre

Input + Submit vers ancre [Aide] - Java - Programmation

Marsh Posté le 08-02-2014 à 18:32:24    

Bonjour à tous !
 
Je souhaiterai faire une page dans laquelle je mets plusieurs ancres à l'aide de id, exemple: page_1 pour la page 1, page_2 pour la page 2...
 
Voici le site en question: http://tpe-foils.blogspot.fr/p/dossier-en-francais.html
 
J'aimerai utiliser les fameux <input>:
 

Code :
  1. <style>
  2. .numero-page{
  3. position:fixed;
  4. padding:0 15px;
  5. background-color:#262626;
  6. left:169px;
  7. top:640px;
  8. width:186px;
  9. color:white;
  10. }
  11. .titre-numero-page{
  12. border:1px solid black;
  13. font: normal bold 10px Syncopate;
  14. margin:0 -15px;
  15. padding:.6em 15px .5em;
  16. }
  17. </style>
  18. <div class="numero-page">
  19. <div class="titre-numero-page">menu pages</div>
  20. <div class="titre-numero-page">
  21.    <input name="search" id="search" type="text" placeholder="Indiquer un numéro" size="16"/>
  22.    <input type="submit" value="Go !">
  23. </div>
  24. </div>


Ce qui donne ceci: lien.
 
Ensuite pour une page, j'aurai:

Code :
  1. <div id="page_1">
  2. blabla...
  3. </div>
  4. <div id="page_2">
  5. blabla...
  6. </div>


L'utilisateur rentre le chiffre 1 dans le premier input puis clique sur go pour accéder à la page 1 (page_1) ou le chiffre 2 pour accéder à 2 (j'ai plusieurs pages)
 
Si je ne suis pas assez clair, dites le moi.
 
Je vous remercie d'avance.
 
Pito2901


Message édité par pito2901 le 08-02-2014 à 18:33:27
Reply

Marsh Posté le 08-02-2014 à 18:32:24   

Reply

Marsh Posté le 09-02-2014 à 16:04:54    

Bonjour,

 

Ton code devrait fonctionner. Ou est le probleme ?

 

Il te manque juste la partie javascript... ^^'


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 09-02-2014 à 18:16:46    

Justement que faut-il mettre en javascript ???

Reply

Marsh Posté le 09-02-2014 à 18:50:47    

Oki :p
 
Alors, regarde du coté de Element.display="none" ou Element.display=""
Le premier cache un element, le second l'affiche.
 
Exemple :
document.getElementById("page_1" ).display="none";  
Ceci cachera ta div #page_1 :p


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 09-02-2014 à 20:36:14    

Mais je ne veux pas la cacher...
 
Je souhaite entrer le numéro 1, cliquer sur Go ! et avec le code javascript, ça m'amène à la page 1...

Reply

Marsh Posté le 10-02-2014 à 03:20:33    

Ouai en gros tu veux faire comme pour les pdf...  
 
Bref, dans ce cas tu dois générer l'ancre
après quand on appuie sur go, ca ira à l'ancre :p
 
Edit : je t'ai rajouté du javascript dans ton codepen, dit moi si ca fonctionne sur ton site.
 
You're welcome


Message édité par torwood3 le 10-02-2014 à 03:37:42

---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 10-02-2014 à 17:18:28    

C'est tout a fait ça ! Merci ! ! !
 
Malheureusement je n'ai pas accès au codepen, il faut que tu clique sur "save" et qu tu me donnes le lien...
 
Merci d'avance.

Reply

Marsh Posté le 10-02-2014 à 18:27:47    

Non ? oO

 

Oh putain... l'echec de 4h du mat' ...

 

Bon bah .... sniff lol

 

L'idee est que au click du bouton. Tu recup (et test) la valeur de ton input puis tu fais un self.location.href = "#page_" + la valeur du input.

 

Apres si tu veux tu peux gerer un scroll qui y va progressivement...

 

Mais tu utilises un framework/bibliotheque sur ton site ?

 

Regarde du cote de jquery et/ou angularjs.
Ca pourrait te faciliter la tache.


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 10-02-2014 à 18:32:42    

J'ai l'impression que tu me parles en chinois, je débute dans la programmation et encore plus dans le javascript, te rappelles-tu de ton code ?
 
Sinon je ne sais pas ce qu'est "framework/bibliotheque"...
 
Merci encore.

Reply

Marsh Posté le 10-02-2014 à 19:19:15    

met ca juste avant </body>
 
 
<script>
var goTo = function(){
  var numero = document.getElementById("search" ).value;
  if(isFinite(numero)){
    self.loaction.href = "#page_" + numero;
    //windows.location = "#page_" + numero;
    //document.location = "#page_" + numero;
  }else{
    alert("On veut un nombre" );  
  }
}    
 
document.getElementById("goTo" ).onclick = goTo;
</script>


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 10-02-2014 à 19:19:15   

Reply

Marsh Posté le 10-02-2014 à 19:23:59    

Bien, en mettant ce code, il ne passe rien...
 

Code :
  1. <!-- Input numéro page - Début -->
  2. <div class="numero-page">
  3. <div class="titre-numero-page">menu pages</div>
  4. <div class="titre-numero-page">
  5.    <input name="search" id="search" type="text" placeholder="Indiquer un numéro" size="16"/>
  6.    <input type="submit" value="Go !">
  7. </div>
  8. </div>
  9. <script>
  10. var goTo = function(){
  11.   var numero = document.getElementById("search" ).value;
  12.   if(isFinite(numero)){
  13.     self.loaction.href = "#page_" + numero;
  14.     windows.location = "#page_" + numero;
  15.     document.location = "#page_" + numero;
  16.   }else{
  17.     alert("On veut un nombre" ); 
  18.   }
  19. }   
  21. document.getElementById("goTo" ).onclick = goTo;
  22. </script>
  23. <!-- Input numéro page - Fin -->
  24. <!-- Page 1 - Couverture - Début -->
  25. <div id="page_1">
  26. <div class="page">
  27. ...


 
As tu une solution ?

Reply

Marsh Posté le 10-02-2014 à 19:25:13    

Avec cet html ^^"
 
 
<div class="numero-page">
<div class="titre-numero-page">menu pages</div>
<div class="titre-numero-page">
  <form>
   <input name="search" id="search" type="text" placeholder="Indiquer un numéro" size="16"/>  
   <input type="submit" value="Go !" id="goTo">  
   </form>
  </div>
</div>


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 10-02-2014 à 19:28:01    

Finalement j'ai trouvé tes erreurs, tu as mis  self.loaction.href et il manquait l'id "goTo" au input "Go !"
EDIT: je n'avais pas vu ton ancien post pour le goTo
 
Ce qui donne:

Code :
  1. <!-- Input numéro page - Début -->
  2. <div class="numero-page">
  3. <div class="titre-numero-page">menu pages</div>
  4. <div class="titre-numero-page">
  5.    <input name="search" id="search" type="text" placeholder="Indiquer un numéro" size="16"/>
  6.    <input id="goTo" type="submit" value="Go !">
  7. </div>
  8. </div>
  9. <script>
  10. var goTo = function(){
  11.   var numero = document.getElementById("search" ).value;
  12.   if(isFinite(numero)){
  13.     self.location.href = "#page_" + numero;
  14.     windows.location = "#page_" + numero;
  15.     document.location = "#page_" + numero;
  16.   }else{
  17.     alert("On veut un nombre" ); 
  18.   }
  19. }   
  21. document.getElementById("goTo" ).onclick = goTo;
  22. </script>
  23. <!-- Input numéro page - Fin -->
  24. <!-- Page 1 - Couverture - Début -->
  25. <div id="page_1">
  26. <div class="page">
  27. ...


 
Je te remercie énormément pour ton travail, cependant j'aurai une dernière question, es-tu capable d'adapter ce code afin de ne rentrer qu'un numéro (de page) allant de 1 à 12 ?


Message édité par pito2901 le 10-02-2014 à 19:29:08
Reply

Marsh Posté le 10-02-2014 à 19:29:38    

 if(isFinite(numero) && numero <= 12 && numero >= 0){


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 10-02-2014 à 21:13:16    

Merci ! Merci ! Merci !
 
Sujet résolu.
 
@+

Reply

Marsh Posté le 14-02-2014 à 19:24:26    

Je reviens sur ce topic car c'est toujours pour le même code, or j'aimerai s'il est possible de bouger cette div n'importe où sur la page en sélectionnant la partie la plus haute qui contient "menu pages" (comme une fenêtre sur windows...), sachant que le z-index est de 2000 pour que cette div reste au premier plan.
 
Merci de votre aide.

Reply

Marsh Posté le 16-02-2014 à 00:25:36    

Bonjour,
 
le plus simple : http://jqueryui.com/draggable/#default


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 16-02-2014 à 09:51:12    

Ce code ne fonctionne pas:
 

Code :
  1. <div id="draggable" class="numero-page">
  2. <div class="titre-numero-page">menu pages</div>
  3. <div class="titre-numero-page">
  4.    <input name="search" id="search" type="text" placeholder=" Indiquer un numéro" size="16"/>
  5.    <input id="goTo" type="submit" value="Go !">
  6. </div>
  7. </div>
  8. <script>
  9. $(function() {
  10.     $("#draggable" ).draggable();
  11.   });
  12. var goTo = function(){
  13.   var numero = document.getElementById("search" ).value;
  14.   if(isFinite(numero) && numero <= 11 && numero >= 1){
  15.     self.location.href = "#page_" + numero;
  16.     windows.location = "#page_" + numero;
  17.     document.location = "#page_" + numero;
  18.   }else{
  19.     alert("Saisir un numéro de page existant" ); 
  20.   }
  21. }   
  22. document.getElementById("goTo" ).onclick = goTo;
  23. </script>


 
Faut-il importer le jquery ? Comment ?

Reply

Marsh Posté le 16-02-2014 à 16:59:54    

Oui faut importer :p
 
Regarde dans download ? la faut juste regarder sur le site ^^'


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 16-02-2014 à 21:07:30    

Bah j'ai beau chercher en tenter des trucs, rien ne fonctionne... As tu le code ?

Reply

Marsh Posté le 16-02-2014 à 22:17:22    

Hum...
 
 <link rel="stylesheet" href="code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="code.jquery.com/jquery-1.9.1.js"></script>
<script src="code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 
Pas plus dur que ca ^^"


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 17-02-2014 à 17:10:14    

Je mets ça, et ce n'est pas mieux...
 

Code :
  1. <link rel="stylesheet" href="code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  2. <script src="code.jquery.com/jquery-1.9.1.js"></script>
  3. <script src="code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  4. <div id="draggable" class="numero-page">
  5. <div class="titre-numero-page">menu pages</div>
  6. <div class="titre-numero-page">
  7.    <input name="search" id="search" type="text" placeholder=" Indiquer un numéro" size="16"/>
  8.    <input id="goTo" type="submit" value="Go !">
  9. </div>
  10. </div>
  11. <script>
  12. $(function() {
  13.     $("#draggable" ).draggable();
  14.   });
  15. var goTo = function(){
  16.   var numero = document.getElementById("search" ).value;
  17.   if(isFinite(numero) && numero <= 11 && numero >= 1){
  18.     self.location.href = "#page_" + numero;
  19.     windows.location = "#page_" + numero;
  20.     document.location = "#page_" + numero;
  21.   }else{
  22.     alert("Saisir un numéro de page existant" );
  23.   }
  24. } 
  25. document.getElementById("goTo" ).onclick = goTo;
  26. </script>

Reply

Marsh Posté le 17-02-2014 à 20:13:40    

   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 17-02-2014 à 20:53:45    

Merci ça marche du feu de dieu !

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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