11499 sujets

JavaScript, DOM et API Web HTML5

Probleme sur Slider en JQuery responsive homemade

Bonjour =)

J'essaie de creer un slider responsive. Tout marche sauf un detail...
En gros :
on a un "menu" avec 3 elements.
Ensuite un container pour fixer une taille maximum. Dans ce container, une div qui fait 3 fois la taille de son parent. Dans ce sous container, 3 div en float left.
Le premier container ne laisse l'espace que pour une seule div. Lorsque l'on clique sur le premier lien du menu, on positionne le sous container en left 0. Si on clique sur le 2e lien, alors on met une valeur negative a son left correspondant a la taille du container. Si on clique sur le 3e lien, alors on recule de deux fois la taille du container.
Avec des tailles fixes, ca marche, mais en responsive, un detail ne marche pas : le left n'est pas dynamique (quand je redimmensionne la fenetre, ca decale tout).

Mes codes :
<div class="container-mini">
	<div class="menu">
		<div class="menu-element"><a href="#" id="menuWeb" title="Web"></a></div>
		<div class="menu-element"><a href="#" id="menuGraphics" title="Graphics"></a></div>
		<div class="menu-element"><a href="#" id="menuFormations" title="Formations"></a></div>
	</div>
</div>
<div class="main-content">
	<div class="container-mini">
		<div class="container-parts">
			<div class="website-part part-1">
				contenu
			</div>
			<div class="website-part part-2">
				contenu
			</div>
			<div class="website-part part-3">
				contenu
			</div>
		</div>
	</div>
</div>


.menu { width: 100%; }
.menu-element { width: 33.33%; line-height: 1.6rem; float: left; text-align: center; text-transform: uppercase; }
.menu a { display: block; width: 100%; }

.main { position: relative; padding-bottom: 200px; }
.container-mini { max-width: 1280px; position: relative; margin: 0 auto; padding: 0 10px; overflow: hidden; }

.container-parts { transition: left 1s ease-in-out; position: relative; }

.website-part { float: left; }


var websiteWidth, containerPartsWidth, websitePartWidth;

	function responsiveSliding() {
		websiteWidth = $('.container-mini').outerWidth();
		containerPartsWidth = $('.container-parts').width(websiteWidth * 3);
		websitePartWidth = $('.website-part').width(websiteWidth);
		$('#menuWeb').click(function() {
			$('.container-parts').css('left', '0');
		});
		$('#menuGraphics').click(function() {
			$('.container-parts').css('left', -websiteWidth + "px");
		});
		$('#menuFormations').click(function() {
			$('.container-parts').css('left', -(2 * websiteWidth) + "px");
		});
		// */
	}
	responsiveSliding();
	$(window).resize(responsiveSliding);


En gros, j'ai l'impression que la valeur websiteWidth dans l'event click n'est pas mise a jour.
J'aimerais bien mettre un truc du genre $(window).resize(websiteWidth)...

Comment faire ? Merci Smiley smile
Modifié par LightBen (23 Oct 2013 - 14:11)
J'ai cree un fiddle (premiere fois...)

old fiddle

Si vous cliquez, magique, tout bouge, mais si vous redimmensionnez la fenetre, probleme sur la position du left. Si apres ce decalage vous cliquez, hop tout est recalculé. Donc il faut que le left (ou la largeur qui est incluse dans le css left) soit mise a jour si on redimmensionne la fenetre...

Edit : bon ben j'ai trouve...
J'ai cree (de rage apres tant d'heures sur le probleme) la fonction suivante
	function zebi() {
		$('.activated-web').css('left', '0');
		$('.activated-graphics').css('left', -websiteWidth + "px");
		$('.activated-formations').css('left', -(2 * websiteWidth) + "px");
	}
	zebi();
	$(window).resize(zebi);

Et j'ai ajoute a la fonction precedente que lors d'un clic, on ajoute la classe correspondante (activated-web, etc)

Par contre, je me suis retrouve a un truc un peu moche :
		$('#menuWeb').click(function() {
			if ($('.container-parts').hasClass('activated-graphics')) {
				$('.container-parts').removeClass('activated-graphics')
			} else if ($('.container-parts').hasClass('activated-formations')) {
				$('.container-parts').removeClass('activated-formations')
			}
			$('.container-parts').addClass('activated-web');
			$('.container-parts').css('left', '0');
		});

Il b'y a pas moyen de dire "si cet element a une classe contenant le mot "activated" alors enlever cette classe contenant activated" ?
Modifié par LightBen (23 Oct 2013 - 16:05)
Sujet clos
Aller à