Faire défiler des pages php dans la même page avec un clic
Fermé
unker
-
15 mai 2013 à 18:06
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013 - 19 mai 2013 à 23:21
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013 - 19 mai 2013 à 23:21
A voir également:
- Faire défiler des pages php dans la même page avec un clic
- Supprimer une page word - Guide
- Traduire la page - Guide
- Comment imprimer un tableau excel sur une seule page - Guide
- Word numéro de page 1/2 - Guide
- Mettre google en page d'accueil - Guide
30 réponses
Et bien au final, comment on fait pour rendre une div visible ou hidden avec un onclik en java du coup ?
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
17 mai 2013 à 00:37
17 mai 2013 à 00:37
Avec la structure :
<div id="tenues"
<button class="precedent" value="0">Precedent</button>
<div id="tenue01">
Tenue 01 ...
...
</div>
<div id="tenue02">
Tenue 02 ...
...
</div>
<div id="tenue03">
Tenue 03 ...
...
</div>
<div id="tenue04">
Tenue 04 ...
...
</div>
<button id="suivant" value="2">Suivant</button>
</div>
Il faut en css que à défaut tu caches toutes les tenues :
#tenues > div:not('#tenue01') {display:none;}
Ensuite avec jquery ca donnerait un truc du genre :
$('#predecent').click(function(){
var i = $(this).val();
if(i == 0){
$('#tenue'+(i++)).fadeOut();
$('#tenue'+i).fadeIn();
$(this).attr('value', i--);
$('#suivant').attr('value', i--);
}
});
Un peu pareil pour le suivant.
Code fait à l'arrache ! Jsais pas du tout si ca marche !
<div id="tenues"
<button class="precedent" value="0">Precedent</button>
<div id="tenue01">
Tenue 01 ...
...
</div>
<div id="tenue02">
Tenue 02 ...
...
</div>
<div id="tenue03">
Tenue 03 ...
...
</div>
<div id="tenue04">
Tenue 04 ...
...
</div>
<button id="suivant" value="2">Suivant</button>
</div>
Il faut en css que à défaut tu caches toutes les tenues :
#tenues > div:not('#tenue01') {display:none;}
Ensuite avec jquery ca donnerait un truc du genre :
$('#predecent').click(function(){
var i = $(this).val();
if(i == 0){
$('#tenue'+(i++)).fadeOut();
$('#tenue'+i).fadeIn();
$(this).attr('value', i--);
$('#suivant').attr('value', i--);
}
});
Un peu pareil pour le suivant.
Code fait à l'arrache ! Jsais pas du tout si ca marche !
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
Modifié par Alain_42 le 17/05/2013 à 10:35
Modifié par Alain_42 le 17/05/2013 à 10:35
en complément a mon précédent exemple:
il faut bien dès la premier chargement de la page afficher la première tenue, donc
après par ajax suite au click sur les flèches ça viendra "écraser" cette première image
mais je ne comprend pas, tu as aussi dans les images des tenues des zones cliquables pour afficher plus de détails ?
il faut aussi penser a faire un code qui s'adapte, c'est à dire que tu puisses rajouter des tenues sans avoir à modifier ta page.
juste en rajoutant un fichier tenue_x dans le rep_tenues
il faut bien dès la premier chargement de la page afficher la première tenue, donc
<div id="affichage">
<?php
include('rep_tenues/tenue_1');
?>
</div>
après par ajax suite au click sur les flèches ça viendra "écraser" cette première image
mais je ne comprend pas, tu as aussi dans les images des tenues des zones cliquables pour afficher plus de détails ?
il faut aussi penser a faire un code qui s'adapte, c'est à dire que tu puisses rajouter des tenues sans avoir à modifier ta page.
juste en rajoutant un fichier tenue_x dans le rep_tenues
Merci pour votre aide!
Alors oui, sur chaque tenue il y a des zone cliquable qui affiche la description de l'équipement dans le cadre noir au centre. De fait, il faut que quand on clique sur une flèche, tout change. C'est à dire que la tenue change, mais aussi le contenu du cadre et même le titre de la tenue en haut de fait.
Du coup, il faut qu'une div contenant quasiment l'intégralité de la page se change à chaque clic sur un flèche. Suis-je suffisamment clair sur mes propos...? Mais je pense que ça change pas grand chose au final, c'est juste une plus grande div qui change.
Alors oui, sur chaque tenue il y a des zone cliquable qui affiche la description de l'équipement dans le cadre noir au centre. De fait, il faut que quand on clique sur une flèche, tout change. C'est à dire que la tenue change, mais aussi le contenu du cadre et même le titre de la tenue en haut de fait.
Du coup, il faut qu'une div contenant quasiment l'intégralité de la page se change à chaque clic sur un flèche. Suis-je suffisamment clair sur mes propos...? Mais je pense que ça change pas grand chose au final, c'est juste une plus grande div qui change.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
Modifié par Alain_42 le 17/05/2013 à 14:18
Modifié par Alain_42 le 17/05/2013 à 14:18
ok en fait le div id="affichage" doit contenir plusieurs div:
un pour la tenue, l'autre pour le détail
c'est le script php de réponse a ajax qui va contenir ces deux div
on peut même faire de l'ajax pour écrire le détail en fct de la zone cliquée
es tu ok pour le fait que tes tenues soient dans un rep_tenues ?
ou utilises tu une bdd qui contient les infos
question subsidiaire pourquoi ne t'es tu pas inscrit sur le site CCM ?
un pour la tenue, l'autre pour le détail
c'est le script php de réponse a ajax qui va contenir ces deux div
on peut même faire de l'ajax pour écrire le détail en fct de la zone cliquée
es tu ok pour le fait que tes tenues soient dans un rep_tenues ?
ou utilises tu une bdd qui contient les infos
question subsidiaire pourquoi ne t'es tu pas inscrit sur le site CCM ?
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
17 mai 2013 à 14:52
17 mai 2013 à 14:52
Moi je dis : faisons de l'ajax !
Il faut donc comme Alain l'a dit, afficher la première tenue sur ta page dans une div qui servira de contenant (c'est dans cette div que l'on va charger et enlever la tenue)
Donc par exemple :
<body>
<header>
<?php Menu::afficheMenu(); ?>
</header>
<h1> Les tenues</h1>
<div id="container">
<button id="predecent" value="0">Precedent</button>
<div id="tenues">
<?php controllerTenues::affichePremiere(); // On affiche la premiere tenue ?>
</div>
<button id="suivant" value="1">Suivant</button>
</div>
<footer>
...
</footer>
</body>
Pour le suivant :
<script>
jQuery(function($){
$('#suivant').click(function(){
var t = $(this).val();
$.ajax({
type:"POST",
url:"afficheTenue.php",
data:{tenue:t}
}).done(function(data){
$('#tenues').fateOut(); // On fait disparaitre la tenue actuelle
$('#tenues').html(data); // On la remplace par la suivant
$('#tenues').fateIn(); // On l'affiche
$('#suivant').val(t++); // On met à jour la suivante et la precedente
$('#precedent').val(t++);
});
});
});
</script>
Il faut donc comme Alain l'a dit, afficher la première tenue sur ta page dans une div qui servira de contenant (c'est dans cette div que l'on va charger et enlever la tenue)
Donc par exemple :
<body>
<header>
<?php Menu::afficheMenu(); ?>
</header>
<h1> Les tenues</h1>
<div id="container">
<button id="predecent" value="0">Precedent</button>
<div id="tenues">
<?php controllerTenues::affichePremiere(); // On affiche la premiere tenue ?>
</div>
<button id="suivant" value="1">Suivant</button>
</div>
<footer>
...
</footer>
</body>
Pour le suivant :
<script>
jQuery(function($){
$('#suivant').click(function(){
var t = $(this).val();
$.ajax({
type:"POST",
url:"afficheTenue.php",
data:{tenue:t}
}).done(function(data){
$('#tenues').fateOut(); // On fait disparaitre la tenue actuelle
$('#tenues').html(data); // On la remplace par la suivant
$('#tenues').fateIn(); // On l'affiche
$('#suivant').val(t++); // On met à jour la suivante et la precedente
$('#precedent').val(t++);
});
});
});
</script>
unker
Messages postés
61
Date d'inscription
vendredi 17 mai 2013
Statut
Membre
Dernière intervention
7 octobre 2013
17 mai 2013 à 17:18
17 mai 2013 à 17:18
Pour répondre à Alain, voila qui est fait! Je me suis inscrit sur le site, je n'y avais jamais vraiment pensé bien que je l'utilise souvent...!
A la base je pensais faire appel à une BDD pour enregistrer les infos à afficher lors de clics sur les équipements, comme ça je créais un espace admin qui permet de modifier les pages PHP par tout le monde si besoin.
Comme j'ai commencer à regarder le cours du site du zéro mais que je ne suis pas encore bien avec l'AJAX...ça change quoi que ça soit une réponse Ajax plutôt qu'un script Php ? Ou n'est-ce pas là ton propos Alain? Je ne sais pas s'il serait plus simple de faire appel à de l'Ajax pour les zone cliquables plutôt que du Js basic?
Pour ta méthode Jeremy ça me semble être bien cela qu'il me faut! Je ne peu tester pour le moment par contre.
Juste une idée... est-il possible de rendre des effets de glissements G-D ou inversement avec cette méthode ? Impossible sans flash non?
Merci en tout cas!
A la base je pensais faire appel à une BDD pour enregistrer les infos à afficher lors de clics sur les équipements, comme ça je créais un espace admin qui permet de modifier les pages PHP par tout le monde si besoin.
Comme j'ai commencer à regarder le cours du site du zéro mais que je ne suis pas encore bien avec l'AJAX...ça change quoi que ça soit une réponse Ajax plutôt qu'un script Php ? Ou n'est-ce pas là ton propos Alain? Je ne sais pas s'il serait plus simple de faire appel à de l'Ajax pour les zone cliquables plutôt que du Js basic?
Pour ta méthode Jeremy ça me semble être bien cela qu'il me faut! Je ne peu tester pour le moment par contre.
Juste une idée... est-il possible de rendre des effets de glissements G-D ou inversement avec cette méthode ? Impossible sans flash non?
Merci en tout cas!
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
17 mai 2013 à 22:38
17 mai 2013 à 22:38
ça change quoi que ça soit une réponse Ajax plutôt qu'un script Php ?
le click sur une des fleches lance la fonction Ajax qui appele le script php sur le serveur en lui passant une valeur le script php reçoit cette valeur et genere une réponse (une tenue_x) et la réponse du script php est "ecrite" dans le div "affichage"
le click sur une des fleches lance la fonction Ajax qui appele le script php sur le serveur en lui passant une valeur le script php reçoit cette valeur et genere une réponse (une tenue_x) et la réponse du script php est "ecrite" dans le div "affichage"
Alain_42
Messages postés
5361
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
894
18 mai 2013 à 10:10
18 mai 2013 à 10:10
le tout sans recharger la page, ça donne une navigation plus "fluide"
donc tu peux faire de l'ajax pour changer les tenues et aussi afficher les détails suite au click dans une zone
donc tu peux faire de l'ajax pour changer les tenues et aussi afficher les détails suite au click dans une zone
unker
Messages postés
61
Date d'inscription
vendredi 17 mai 2013
Statut
Membre
Dernière intervention
7 octobre 2013
18 mai 2013 à 13:08
18 mai 2013 à 13:08
Ok merci! Alors il faut que je regarde tout ça en m'aidant de vos réponses et du cours du zéro, j'espère que ça va rendre bien!
jeremy.s
Messages postés
1226
Date d'inscription
lundi 28 mars 2011
Statut
Membre
Dernière intervention
2 septembre 2013
79
Modifié par jeremy.s le 17/05/2013 à 17:28
Modifié par jeremy.s le 17/05/2013 à 17:28
Tu pouras tester quand tu auras déjà plus compris l'ajax (pour completer afficheTenue.php par exemple, et débuger)
Avec jQuery il n'y a que slideUp et slideDown (de base), mais tu peux trouvé des plugins jquery ou code js pour faire les fonctions slideLeft et slideRight
EDIT : C'est possible $('#elementToSlide').show("slide", { direction: "left" }, 1000);
Jérémy
Avec jQuery il n'y a que slideUp et slideDown (de base), mais tu peux trouvé des plugins jquery ou code js pour faire les fonctions slideLeft et slideRight
EDIT : C'est possible $('#elementToSlide').show("slide", { direction: "left" }, 1000);
Jérémy
unker
Messages postés
61
Date d'inscription
vendredi 17 mai 2013
Statut
Membre
Dernière intervention
7 octobre 2013
18 mai 2013 à 13:08
18 mai 2013 à 13:08
Ah sympa si c'est faisable avec les fonctions de bases alors.
Merci!
Merci!
unker
Messages postés
61
Date d'inscription
vendredi 17 mai 2013
Statut
Membre
Dernière intervention
7 octobre 2013
19 mai 2013 à 23:21
19 mai 2013 à 23:21
J'ai regardé je cours du zéro, j'ai bien compris tout ça et je pense pouvoir me débrouiller!
Par contre dans ce que tu me propose jeremy, je ne comprend pas ça... :
<?php controllerTenues::affichePremiere(); // On affiche la premiere tenue ?>
Pourquoi ne pas afficher une page du style: affichetenue?id=1.php
Et ensuite quelque chose du style:
.load('http:/affichetenue.php',param); dans l'AJAX ? Car je ne comprend pas non plus ce url:"afficheTenue.php", data:{tenue:t} que tu m'indiques.
Merci pour ton aide!
A+
Par contre dans ce que tu me propose jeremy, je ne comprend pas ça... :
<?php controllerTenues::affichePremiere(); // On affiche la premiere tenue ?>
Pourquoi ne pas afficher une page du style: affichetenue?id=1.php
Et ensuite quelque chose du style:
.load('http:/affichetenue.php',param); dans l'AJAX ? Car je ne comprend pas non plus ce url:"afficheTenue.php", data:{tenue:t} que tu m'indiques.
Merci pour ton aide!
A+