Faire slider les div ouvertes lors du slide d'une autre...!
Résolu
unker
Messages postés
67
Statut
Membre
-
bobkely -
bobkely -
Bonjour à tous,
Je créer actuellement un site web pour une association de sérigraphie à titre gracieux et je bloque sur un petit point!
J'ai trouvé un script pour faire slider mes div de contenus suivant l'onglet cliqué ( a gauche ).
Cependant, celles-ci reste à leur point d'arrivée, ce qui fait que lorsqu'on clique sur un autre onglet, les div se superposent!
C'est peut être pas bien compliqué à faire mais je suis en pleine bourre, ça doit être terminé d'ici 2 semaines et je suis plutôt noob en javascript pour l'instant.
Je vous donne le liens pour un aperçus: ( cliquez sur le 1er menu a gauche, puis sur le 2ème, les div se superposent ...! ) .
http://lesatelierskontakt.com/presentation.php#
Je vous poste des petits bouts de codes si besoin est.
Merci à tous en tout cas!
Ps: je vous occupez pas des nombreuses autres erreurs ( du style les en-tête dans la page etc...) je règle tout ça au fur et à mesure.
:D
Html:
<div class="slidediv">
<div class="inner"><?php include('testrequete.php');?></div>
<div class="inner2"><?php include('contenuscolaire.php');?></div>
</div>
</div>
CSS:
.slide {
position: relative;
}
.slidediv {
width: 86%;
height: 600px;
position: relative;
overflow: hidden;
float: right;
}
.kontakt {
z-index: 90;
position: absolute;
top: 21px;
height: 150px;
left: 24px;
width: 349px;
}
/*menu*/
.slidediv .inner {
overflow:auto;
left: 60px;
bottom: 0;
position: absolute;
width: 100%;
height: 90%;
display: block;
background-image: url(Template/backgroundgreyrepeat.png);
}
.slidediv .inner2 {
left: 60px;
bottom: 0;
position: absolute;
width: 100%;
height: 90%;
display: block;
background-image: url(Template/backgroundgreyrepeat.png);
}
.js .slidediv .inner {
display: none;
}
Et enfin et surtout le Javascript!
<script type="text/javascript">
$(document).ready(function() {
var $marginLefty = $('div.inner');
$marginLefty.css({
marginLeft: $marginLefty.outerWidth() + 'px',
display: 'block'
});
$('#slidemarginleft').click(function() {
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var $marginLefty = $('div.inner2');
$marginLefty.css({
marginLeft: $marginLefty.outerWidth() + 'px',
display: 'block'
});
$('#slidemarginleft2').click(function() {
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
});
});
});
</script>
Je créer actuellement un site web pour une association de sérigraphie à titre gracieux et je bloque sur un petit point!
J'ai trouvé un script pour faire slider mes div de contenus suivant l'onglet cliqué ( a gauche ).
Cependant, celles-ci reste à leur point d'arrivée, ce qui fait que lorsqu'on clique sur un autre onglet, les div se superposent!
C'est peut être pas bien compliqué à faire mais je suis en pleine bourre, ça doit être terminé d'ici 2 semaines et je suis plutôt noob en javascript pour l'instant.
Je vous donne le liens pour un aperçus: ( cliquez sur le 1er menu a gauche, puis sur le 2ème, les div se superposent ...! ) .
http://lesatelierskontakt.com/presentation.php#
Je vous poste des petits bouts de codes si besoin est.
Merci à tous en tout cas!
Ps: je vous occupez pas des nombreuses autres erreurs ( du style les en-tête dans la page etc...) je règle tout ça au fur et à mesure.
:D
Html:
<div class="slidediv">
<div class="inner"><?php include('testrequete.php');?></div>
<div class="inner2"><?php include('contenuscolaire.php');?></div>
</div>
</div>
CSS:
.slide {
position: relative;
}
.slidediv {
width: 86%;
height: 600px;
position: relative;
overflow: hidden;
float: right;
}
.kontakt {
z-index: 90;
position: absolute;
top: 21px;
height: 150px;
left: 24px;
width: 349px;
}
/*menu*/
.slidediv .inner {
overflow:auto;
left: 60px;
bottom: 0;
position: absolute;
width: 100%;
height: 90%;
display: block;
background-image: url(Template/backgroundgreyrepeat.png);
}
.slidediv .inner2 {
left: 60px;
bottom: 0;
position: absolute;
width: 100%;
height: 90%;
display: block;
background-image: url(Template/backgroundgreyrepeat.png);
}
.js .slidediv .inner {
display: none;
}
Et enfin et surtout le Javascript!
<script type="text/javascript">
$(document).ready(function() {
var $marginLefty = $('div.inner');
$marginLefty.css({
marginLeft: $marginLefty.outerWidth() + 'px',
display: 'block'
});
$('#slidemarginleft').click(function() {
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var $marginLefty = $('div.inner2');
$marginLefty.css({
marginLeft: $marginLefty.outerWidth() + 'px',
display: 'block'
});
$('#slidemarginleft2').click(function() {
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
$marginLefty.outerWidth() : 0
});
});
});
</script>
A voir également:
- Faire slider les div ouvertes lors du slide d'une autre...!
- Wow slider - Télécharger - Présentation
- Cette action ne peut pas être réalisée car le fichier est ouvert dans un autre programme - Guide
- Div c++ - Télécharger - Langages
- Afficher toutes les fenetres ouvertes windows - Guide
- Comment savoir si mon facebook est ouvert sur un autre appareil - Guide
23 réponses
Je sais pas comment t'as construit ton site, mais voici un petit exemple simple pour que tu comprennes :
Jérémy
<body>
<ul id="nav">
<li class="page" value="1">Page 1</li>
<li class="page" value="2">Page 2</li>
<li class="page" value="3">Page 3</li>
<li class="page" value="4">Page 4</li>
</ul>
<div id="content">
<div class="contenu" id="1">Contenu de la page 1</div>
<div class="contenu" id="2">Contenu de la page 2</div>
<div class="contenu" id="3">Contenu de la page 3</div>
<div class="contenu" id="4">Contenu de la page 4</div>
</div>
</body>
<script>
jQuery(function($){
$('.page').click(function(){
// On cache d'abord le contenu actuellement sur la page
$('.contenu').each(function(){
if((this).is(':visible')) $(this).show("slide", { direction: "right" }, 1000);
});
// On affiche le contenu souhaité
$('#'+(this).val()).show("slide", { direction: "left" }, 1000);
});
});
</script>
Jérémy
Oui il faut à défaut caché .contenu et affichier la premier aussi je pense
Donc :
.contenu{
display:none;
}
.contenu#1{
display:block;
}
/* Tu peux essayé .contenu:not(#1){display:none;} mais je suis pas sur pour la syntaxe du not
Donc :
.contenu{
display:none;
}
.contenu#1{
display:block;
}
/* Tu peux essayé .contenu:not(#1){display:none;} mais je suis pas sur pour la syntaxe du not
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <style> .contenu{ display:none; width:200px; height:100px; } #content1{ display: inline-block; } </style> </head> <body> <ul id="nav"> <li class="page" value="1"><a href="#">Page 1</a> </li> <li class="page" value="2"><a href="#">Page 2</a> </li> <li class="page" value="3"><a href="#">Page 3</a> </li> <li class="page" value="4"><a href="#">Page 4</a> </li> </ul> <div id="content"> <div id="content1" class="contenu">Contenu de la page 1</div> <div id="content2" class="contenu">Contenu de la page 2</div> <div id="content3" class="contenu">Contenu de la page 3</div> <div id="content4" class="contenu">Contenu de la page 4</div> </div> </body> <script> jQuery(function($){ $('.page').click(function(){ // On cache d'abord le contenu actuellement sur la page $('.contenu').each(function(){ if($(this).is(':visible')) $(this).hide("slide", { direction: "right" }, 500); }); // On affiche le contenu souhaité $('#content'+$(this).attr('value')).show("slide", { direction: "left" }, 1000); }); }); </script> </html>
Voila la ca marche :)
Ya juste un petit soucis les slide se superpose donc je vais voir pour régler ca !
Salut !
T'as essayé de cacher le contenu, et ensuite de slider le nouveau contenu ?
Tu utilises jQuery ?
T'as essayé de cacher le contenu, et ensuite de slider le nouveau contenu ?
Tu utilises jQuery ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Salut,
Oui on peut utiliser du jQuery,
Je ne peux pas cacher le contenu et slider le nouveau car du coup on se retrouve avec une ancienne div cachée pendant que l'autre est active, mais si tu veux refaire slider la 1ère, ça ne va pas fonctionner vus qu'elle sera juste cachée à son point d'arrivée non?
Oui on peut utiliser du jQuery,
Je ne peux pas cacher le contenu et slider le nouveau car du coup on se retrouve avec une ancienne div cachée pendant que l'autre est active, mais si tu veux refaire slider la 1ère, ça ne va pas fonctionner vus qu'elle sera juste cachée à son point d'arrivée non?
"une ancienne div cachée pendant que l'autre est active"
C'est justement pas le but ?
T'as ton contenu, tu veux afficher une autre partie du site, tu clique sur ton lien sur ton menu, tu enlève le contenu actuel, et tu slide le contenu que tu veux ?
C'est justement pas le but ?
T'as ton contenu, tu veux afficher une autre partie du site, tu clique sur ton lien sur ton menu, tu enlève le contenu actuel, et tu slide le contenu que tu veux ?
Oui c'est bien cela mais il faut que la div précédente slide sur le coté et laisse place à la prochaine, elle ne peux pas disparaitre à l'endroit ou elle a finis sa course, elle doit revenir au point de départ.
Bah tu slide l'ancienne, puis tu slide la nouvelle ... ? Non ?
EDIT : J'ai compris enfaite !
Enfaite il faut que quand tu cliques sur un lien dans ton menu pour changer le contenu, tu slide (pour enlever) AUTOMATIQUEMENT le contenu actuel, puis tu slide (pour faire apparaitre) le nouveau contenu
Jérémy
EDIT : J'ai compris enfaite !
Enfaite il faut que quand tu cliques sur un lien dans ton menu pour changer le contenu, tu slide (pour enlever) AUTOMATIQUEMENT le contenu actuel, puis tu slide (pour faire apparaitre) le nouveau contenu
Jérémy
Oui quelque chose du genre!
Mais le soucis c'est comment dire: dé-slider uniquement la div ouverte actuellement et slider la nouvel ?
Je suis vraiment pas doué en javascript et il faut que ça soit fini d'ici une semaine.
Avec le script que j'ai là, il a peut être qu'une ou 2 ligne a rajouter mais je vois vraiment pas quoi...
J'ai trouvé celui-ci qui correspond bien à ce que je voudrais faire :http://test.learningjquery.com/tab-slides/
Mais du coup comment adapter tout ça ?
Merci à toi en tout cas.
Mais le soucis c'est comment dire: dé-slider uniquement la div ouverte actuellement et slider la nouvel ?
Je suis vraiment pas doué en javascript et il faut que ça soit fini d'ici une semaine.
Avec le script que j'ai là, il a peut être qu'une ou 2 ligne a rajouter mais je vois vraiment pas quoi...
J'ai trouvé celui-ci qui correspond bien à ce que je voudrais faire :http://test.learningjquery.com/tab-slides/
Mais du coup comment adapter tout ça ?
Merci à toi en tout cas.
Super!
J'ai bien compris le principe ! Merci!
Par contre ça ne fonctionne pas :), mais je sais pas si sa vient du script ou du fait qu'il n'y est pas de CSS par exemple?
J'ai bien compris le principe ! Merci!
Par contre ça ne fonctionne pas :), mais je sais pas si sa vient du script ou du fait qu'il n'y est pas de CSS par exemple?
D'accord,
Hum mais ça ne fonctionne toujours pas, je me disais que $('.page').click(function() n'était peut être pas correct car les élément de menus ne sont pas définis par une classe page mais un id , donc '#page' ?
Mais ça ne fonctionne pas non plus.
Hum mais ça ne fonctionne toujours pas, je me disais que $('.page').click(function() n'était peut être pas correct car les élément de menus ne sont pas définis par une classe page mais un id , donc '#page' ?
Mais ça ne fonctionne pas non plus.
Mmh non j'ai mis <li class="page"> et un id aussi donc je pense pas
Tu l'as en ligne pour que je puisse voir ?
Tu l'as en ligne pour que je puisse voir ?
Déjà petite faute de ma part :
if((this).is(':visible')) $(this).hide("slide", { direction: "right" }, 1000);
if((this).is(':visible')) $(this).hide("slide", { direction: "right" }, 1000);
Hum ok c'est corrigé mais toujours pas,
Voici la page test ! :
http://lesatelierskontakt.com/slidetest.html#
Voici la page test ! :
http://lesatelierskontakt.com/slidetest.html#
Merci bien!
C'est pas mal oui, on est sur la bonne voie!
Par contre il faudrait qu'on puisse par exemple cliquer sur la div 2 et qu'elle reste et qu'on puisse l'enlever, qu'il n'y est plus rien d'affiché, car quand on clique là ça reslide la même div du coup. :/
C'est pas mal oui, on est sur la bonne voie!
Par contre il faudrait qu'on puisse par exemple cliquer sur la div 2 et qu'elle reste et qu'on puisse l'enlever, qu'il n'y est plus rien d'affiché, car quand on clique là ça reslide la même div du coup. :/
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <style> .contenu:not(#content1){ display:none; } .contenu{ width:400px; height:100px; } </style> </head> <body> <ul id="nav"> <li class="page" value="1"><a href="#">Page 1</a> </li> <li class="page" value="2"><a href="#">Page 2</a> </li> <li class="page" value="3"><a href="#">Page 3</a> </li> <li class="page" value="4"><a href="#">Page 4</a> </li> </ul> <div id="content"> <div id="content1" class="contenu">Contenu de la page 1</div> <div id="content2" class="contenu">Contenu de la page 2</div> <div id="content3" class="contenu">Contenu de la page 3</div> <div id="content4" class="contenu">Contenu de la page 4</div> </div> </body> <script> jQuery(function($){ //$('#content1').show(); $('.page').click(function(){ if(!($('#content'+$(this).attr('value')).is(':visible'))){ // On cache d'abord le contenu actuellement sur la page $('.contenu').each(function(){ if($(this).is(':visible')) $(this).hide("slide", { direction: "right" }, 500); else $(this).hide(); }); // On affiche le contenu souhaité $('#content'+$(this).attr('value')).show("slide", { direction: "left" }, 1000); } else $('#content'+$(this).attr('value')).hide("slide", { direction: "right" }, 500); }); }); </script> </html>
Bon il manque encore le ptit bug de css quand on clique sur un page plus petite que l'actuelle (genre de la 3 à la 2)
