Défiler des div avec boutons
Résolu/Fermé
octani
Messages postés
22
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
28 juillet 2013
-
15 janv. 2012 à 17:36
Opium59000 Messages postés 30 Date d'inscription dimanche 15 janvier 2012 Statut Membre Dernière intervention 3 août 2012 - 15 janv. 2012 à 23:22
Opium59000 Messages postés 30 Date d'inscription dimanche 15 janvier 2012 Statut Membre Dernière intervention 3 août 2012 - 15 janv. 2012 à 23:22
A voir également:
- Défiler des div avec boutons
- Div c++ - Télécharger - Langages
- Comment réinitialiser un téléphone avec les boutons - Guide
- Application pour reconnaître les boutons - Guide
- Programmer télécommande came 4 boutons ✓ - Forum Téléviseurs
- Excel moyenne sans div/0 ✓ - Forum Excel
8 réponses
Opium59000
Messages postés
30
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
3 août 2012
4
15 janv. 2012 à 23:12
15 janv. 2012 à 23:12
Alors ça fait longtemps que je n'utilise plus le javascript de cette manière (j'utilise JQuery), mais de souvenir il me semble que dans ton cas tes sélecteurs ne sont pas bons.
Ils devraient être de la forme:
document.getElementById('question1').style.display = 'none';
Ils devraient être de la forme:
document.getElementById('question1').style.display = 'none';
Opium59000
Messages postés
30
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
3 août 2012
4
15 janv. 2012 à 20:42
15 janv. 2012 à 20:42
Une solution assez simple est d'utiliser le JQuery avec l'outil JQueryTools. Tu trouveras comment faire très facilement sur le site officiel.
http://flowplayer.org/tools/scrollable/index.html
http://flowplayer.org/tools/scrollable/index.html
octani
Messages postés
22
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
28 juillet 2013
15 janv. 2012 à 22:08
15 janv. 2012 à 22:08
Merci bien Opium59000 pour le lien , c'est gentil . J'essayerai cet outil .
octani
Messages postés
22
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
28 juillet 2013
15 janv. 2012 à 22:41
15 janv. 2012 à 22:41
Enfin c'est un slideshow jquery , mais même si il est manuel il est en rotation des images sans cession avec un delai .
Ce que je veux c'est creer un diaporama de textes non d'images et avec un bouton next .
J'ai essayé avec javascript à l'aide de style.display='none' ou 'block', mais c'est très dur pour moi en manipulant plus de 3 div contenant des textes . (pour deux div c'est facile).
Merci.
Ce que je veux c'est creer un diaporama de textes non d'images et avec un bouton next .
J'ai essayé avec javascript à l'aide de style.display='none' ou 'block', mais c'est très dur pour moi en manipulant plus de 3 div contenant des textes . (pour deux div c'est facile).
Merci.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Opium59000
Messages postés
30
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
3 août 2012
4
15 janv. 2012 à 22:51
15 janv. 2012 à 22:51
Il y a une option à mettre à "false" pour supprimer le défilement automatique. De plus tu mets ce que tu veux dans tes div (uniquement du texte dans ton cas).
Si tu ne veux vraiment pas utiliser JQuery Tools tu peux me montrer ton code si tu veux que j'y jette un oeil ;)
Si tu ne veux vraiment pas utiliser JQuery Tools tu peux me montrer ton code si tu veux que j'y jette un oeil ;)
octani
Messages postés
22
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
28 juillet 2013
15 janv. 2012 à 23:03
15 janv. 2012 à 23:03
Merci,
mes connaissances très bornées me laisse essayer ce code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>titre</title>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<script type="text/javascript">
<!-- etant donner question1 affichée star2() la cache et affiche question2 -->
function star2()
{
document.form.question1.style.display = 'none';
document.form.question2.style.display = 'block';
document.form.button2.style.display = 'none';
document.form.button3.style.display = 'block';
}
<!-- etant donner question2 affichée star3() la cache et affiche question3 -->
function star3()
{
document.form.question2.style.display = 'none';
document.form.question3.style.display = 'block';
document.form.button3.style.display = 'none';
document.form.button4.style.display = 'block';
}
</script>
</head>
<body>
<form id="form">
<!-- ici 4 questions toutes cachées sauf la première -->
<div id="question1" class="slide" style="display:block;">question1</div>
<div id="question2" class="slide" style="display:none;">question2</div>
<div id="question3" class="slide" style="display:none;">question3</div>
<div id="question4" class="slide" style="display:none;">question4</div>
<!-- ici 3 boutons tous cachés sauf le premier -->
<input type="button" id="button2" value="question2" style="display:block;" onClick="star2();">
<input type="button" id="button3" value="question3" style="display:none;" onClick="star3();">
<input type="button" id="button4" value="question4" style="display:none;" onClick="star4();">
</form>
</body>
</html>
qui ne marche plus !
mes connaissances très bornées me laisse essayer ce code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>titre</title>
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<script type="text/javascript">
<!-- etant donner question1 affichée star2() la cache et affiche question2 -->
function star2()
{
document.form.question1.style.display = 'none';
document.form.question2.style.display = 'block';
document.form.button2.style.display = 'none';
document.form.button3.style.display = 'block';
}
<!-- etant donner question2 affichée star3() la cache et affiche question3 -->
function star3()
{
document.form.question2.style.display = 'none';
document.form.question3.style.display = 'block';
document.form.button3.style.display = 'none';
document.form.button4.style.display = 'block';
}
</script>
</head>
<body>
<form id="form">
<!-- ici 4 questions toutes cachées sauf la première -->
<div id="question1" class="slide" style="display:block;">question1</div>
<div id="question2" class="slide" style="display:none;">question2</div>
<div id="question3" class="slide" style="display:none;">question3</div>
<div id="question4" class="slide" style="display:none;">question4</div>
<!-- ici 3 boutons tous cachés sauf le premier -->
<input type="button" id="button2" value="question2" style="display:block;" onClick="star2();">
<input type="button" id="button3" value="question3" style="display:none;" onClick="star3();">
<input type="button" id="button4" value="question4" style="display:none;" onClick="star4();">
</form>
</body>
</html>
qui ne marche plus !
octani
Messages postés
22
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
28 juillet 2013
15 janv. 2012 à 23:20
15 janv. 2012 à 23:20
Mes remerciements à vous pour la grande aide ; ca marche très bien .
J'essayerai de développer ce code pour créer un qcm .
J'essayerai de développer ce code pour créer un qcm .
Opium59000
Messages postés
30
Date d'inscription
dimanche 15 janvier 2012
Statut
Membre
Dernière intervention
3 août 2012
4
15 janv. 2012 à 23:22
15 janv. 2012 à 23:22
Pas de problème ;)
Bon courage pour la suite
Bon courage pour la suite
