Sujet Précédent Sujet Suivant

Faire slider les div ouvertes lors du slide d'une autre...!

Résolu/Fermé
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013 - Modifié par unker le 6/08/2013 à 17:00
 bobkely - 27 avril 2015 à 19:25
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>













A voir également:

23 réponses

  • 1
  • 2
Réponse 1 / 23
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 7/08/2013 à 15:01
Je sais pas comment t'as construit ton site, mais voici un petit exemple simple pour que tu comprennes : 

<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
1
Réponse 2 / 23
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
7 août 2013 à 15:35
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

1
Réponse 3 / 23
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
7 août 2013 à 17:02 
<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 !


1
Réponse 4 / 23
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
7 août 2013 à 09:16
Salut !

T'as essayé de cacher le contenu, et ensuite de slider le nouveau contenu ?

Tu utilises jQuery ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 23
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
7 août 2013 à 11:59
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?
0
Réponse 6 / 23
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
7 août 2013 à 13:57
"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 ?
0
Réponse 7 / 23
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
7 août 2013 à 14:11
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.
0
Réponse 8 / 23
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 7/08/2013 à 14:24
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
0
Réponse 9 / 23
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
7 août 2013 à 14:39
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.
0
Réponse 10 / 23
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
7 août 2013 à 15:11
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?
0
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
7 août 2013 à 15:12
ps: j'ai bien penser a rajouter le lien de jquery dans en script.
0
Réponse 11 / 23
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
7 août 2013 à 15:50
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.
0
Réponse 12 / 23
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
7 août 2013 à 15:56
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 ?
0
Réponse 13 / 23
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
7 août 2013 à 15:58
Déjà petite faute de ma part :
if((this).is(':visible')) $(this).hide("slide", { direction: "right" }, 1000);
0
Réponse 14 / 23
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
7 août 2013 à 16:00
Hum ok c'est corrigé mais toujours pas,

Voici la page test ! :

http://lesatelierskontakt.com/slidetest.html#
0
Réponse 15 / 23
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
7 août 2013 à 16:02
Importe jquery ui aussi ;-)

Et enlève le css sur .contenu#1 aussi pour voir pcq il ne marche pas.
0
Réponse 16 / 23
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
7 août 2013 à 16:10
Voila qui est fait ( pour le jquery ui et le css ) mais rien de nouveau ;) !
0
Réponse 17 / 23
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
7 août 2013 à 17:08
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. :/
0
Réponse 18 / 23
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
7 août 2013 à 17:09
J'y ai pensé oui, je vais réglé ca ;-)
0
Réponse 19 / 23
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
7 août 2013 à 17:38 
<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)
0
bobkely
27 avril 2015 à 19:25
ajouter position:absolute dans style de contenu
0
Réponse 20 / 23
unker Messages postés 61 Date d'inscription vendredi 17 mai 2013 Statut Membre Dernière intervention 7 octobre 2013
7 août 2013 à 17:44
Ah oui ok et bien c'est presque ca!

Il faut par contre que les div apparaissent par la droite et disparaissent par la droite aussi, mais je pense qu'il suffit juste que je change les direction: "right" ou "left" ?
0
jeremy.s Messages postés 1226 Date d'inscription lundi 28 mars 2011 Statut Membre Dernière intervention 2 septembre 2013 79
7 août 2013 à 18:25
Oui ;-)
0

Discussions similaires

Pdf frauduleux
Martine -
loisou17 -

17 réponses
Problème de transfert slider qui ne veut plus se charger
On3x -
On3x -

13 réponses
comment remplacer un #div/0! par une cellule vide
zara70 -
Vaucluse -

3 réponses
Je vois pas les applications ouverte !
Guteck -
Guteck -

3 réponses
erreur (#DIV/0) formule MOYENNE.SI.ENS
sara-87 -
sara-87 -

5 réponses