Java

[Aide] Input + Submit vers ancre

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Aide] Input + Submit vers ancre

pito2901

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 :

<style>
.numero-page{
position:fixed;
padding:0 15px;
background-color:#262626;
left:169px;
top:640px;
width:186px;
color:white;
}
.titre-numero-page{
border:1px solid black;
font: normal bold 10px Syncopate;
margin:0 -15px;
padding:.6em 15px .5em;
}
</style>
<div class="numero-page">
<div class="titre-numero-page">menu pages</div>
<div class="titre-numero-page">
<input name="search" id="search" type="text" placeholder="Indiquer un numéro" size="16"/>
<input type="submit" value="Go !">
</div>
</div>

Ce qui donne ceci: lien.

Ensuite pour une page, j'aurai:

Code :

<div id="page_1">
blabla...
</div>
<div id="page_2">
blabla...
</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

Publicité

torwood3

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

pito2901

Justement que faut-il mettre en javascript ???

torwood3

Oki

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

pito2901

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...

torwood3

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

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

pito2901

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.

torwood3

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.

pito2901

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.

torwood3

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>

Publicité

pito2901

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

Code :

<div class="numero-page">
<div class="titre-numero-page">menu pages</div>
<div class="titre-numero-page">
<input name="search" id="search" type="text" placeholder="Indiquer un numéro" size="16"/>
<input type="submit" value="Go !">
</div>
</div>
<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>
<div id="page_1">
<div class="page">
...

As tu une solution ?

torwood3

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>

pito2901

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 :

<div class="numero-page">
<div class="titre-numero-page">menu pages</div>
<div class="titre-numero-page">
<input name="search" id="search" type="text" placeholder="Indiquer un numéro" size="16"/>
<input id="goTo" type="submit" value="Go !">
</div>
</div>
<script>
var goTo = function(){
var numero = document.getElementById("search" ).value;
if(isFinite(numero)){
self.location.href = "#page_" + numero;
windows.location = "#page_" + numero;
document.location = "#page_" + numero;
}else{
alert("On veut un nombre" );
}
}
document.getElementById("goTo" ).onclick = goTo;
</script>
<div id="page_1">
<div class="page">
...

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

torwood3

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

pito2901

Merci ! Merci ! Merci !

Sujet résolu.

@+

pito2901

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.

torwood3

Bonjour,

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

pito2901

Ce code ne fonctionne pas:

Code :

<div id="draggable" class="numero-page">
<div class="titre-numero-page">menu pages</div>
<div class="titre-numero-page">
<input name="search" id="search" type="text" placeholder=" Indiquer un numéro" size="16"/>
<input id="goTo" type="submit" value="Go !">
</div>
</div>
<script>
$(function() {
$("#draggable" ).draggable();
});
var goTo = function(){
var numero = document.getElementById("search" ).value;
if(isFinite(numero) && numero <= 11 && numero >= 1){
self.location.href = "#page_" + numero;
windows.location = "#page_" + numero;
document.location = "#page_" + numero;
}else{
alert("Saisir un numéro de page existant" );
}
}
document.getElementById("goTo" ).onclick = goTo;
</script>

Faut-il importer le jquery ? Comment ?

torwood3

Oui faut importer

Regarde dans download ? la faut juste regarder sur le site ^^'

pito2901

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

torwood3

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 ^^"

pito2901

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

Code :

<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>
<div id="draggable" class="numero-page">
<div class="titre-numero-page">menu pages</div>
<div class="titre-numero-page">
<input name="search" id="search" type="text" placeholder=" Indiquer un numéro" size="16"/>
<input id="goTo" type="submit" value="Go !">
</div>
</div>
<script>
$(function() {
$("#draggable" ).draggable();
});
var goTo = function(){
var numero = document.getElementById("search" ).value;
if(isFinite(numero) && numero <= 11 && numero >= 1){
self.location.href = "#page_" + numero;
windows.location = "#page_" + numero;
document.location = "#page_" + numero;
}else{
alert("Saisir un numéro de page existant" );
}
}
document.getElementById("goTo" ).onclick = goTo;
</script>

torwood3

pito2901

Merci ça marche du feu de dieu !

Publicité

FORUM HardWare.fr

Programmation

Java

[Aide] Input + Submit vers ancre

Sujets relatifs
[perl]Aide pour l'installation d'un logiciel permettant le perl (noob)	Aide choix langage
Besoin d'aide sur codage Arduino	Besoin d'aide pour fichier gestion absence en VBA
faire lien vers un html en javascript, en clickant sur une forme	Aide exercice VB
[Résolu] A l'aide ! (C++ IA)	diagramme de classe vers Java
Aide assembleur 8086
Plus de sujets relatifs à : [Aide] Input + Submit vers ancre

Page générée en 0.128 secondes