11540 sujets

JavaScript, DOM et API Web HTML5

Div coulissante jquery

Pages :
Bonjour,

Je pensais m'en sortir seul mais je sèche sur un sujet qui ne doit pourtant pas être trop sorcier...
J'aimerai trouver un script réalisant le même effet que ce site lorsque l'on clique sur le menu.

http://rouxatparliamentsquare.co.uk/

Le contenu s'affiche en coulissant de la gauche vers la droite et change selon l'élément cliqué.
J'ai cherché du coté de Jquery mais je n'ai pas trouvé mon bonheur.

Je suis preneur de toute bonne idée pour arriver à mes fins !

Merci à tous et bonne fin de week-end Smiley smile ,

Emmanuel
Alors, j'ai passé un bon bout de la journée à m'arracher les cheveux.

Pour résumer, j'ai un menu et j'aimerai que pour chaque élément de celui ci le slide affiche un contenu différent.

Le slide marche très bien pour le premier élément du menu et ne marche plus pour les autres.
Voici mon code en version simplifié :

le menu :

<div class="underlinemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" rel="panel">Présentation</a></li>
<li><a href="#" rel="panel2">Le club</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>


et plus bas sur la même page les div :
<div id="panel" class="cb_slide_panel">test1</div>
<div id="panel2" class="cb_slide_panel">test2</div>


J'espère que ce sera clair, en réalité mon code est un peu plus chargé, j'ai simplifié pour l'exemple.

Merci de votre aide Smiley confused
J'ai oublié de préciser que j'ai également un petit bout de javascript, à mon avis c'est là qu'il faut modifier quelque chose :

<script type="text/javascript">
$(document).ready(
function(){
$('#panel').codebomber_Panel();
}
);
       </script>


J'ai tenté de mettre une ligne "panel2" mais ça ne fonctionne pas non plus :

<script type="text/javascript">
$(document).ready(
function(){
$('#panel').codebomber_Panel();
$('#panel2').codebomber_Panel();
}
);
       </script>



Bonne journée Smiley smile
Alors en fait, moi je verrai la chose de cette manière. Deux solutions en étape 2.

1. tu créé ton conteneur qui est le fameux panneau qui va s'afficher a gauche et contenir tout tes textes. Tu lui donnes un ID.

2a. tu créé des div avec des ID dans ton conteneur. Ces div vont contenir le texte relatif à chaque rubrique. Tu vas ensuite les masquer ou les afficher avec display:none/display:block, ( .css(); ) selon les liens cliqués.

2b. Lorsqu'on cliques sur un lien, tu appelles ton contenu ( .load(); ) qui est stocké à l'extérieur dans des fichiers type php ou html, et tu le charges dans ton conteneur.

3. tu attribue des fonctions à tes liens puis tu les défini de façon à leur faire exécuter ce que tu veux. A savoir l'affichage des contenu dans ton conteneur.
Modifié par Klesk (16 Oct 2012 - 17:42)
Salut Emmanuel,

Moi aussi je cherche à faire un slide avec un contenu qui change.
Idéalement j'aimerai que le contenu soit chargé via des div que l'on appelle un peu comme dans ton exemple.
Tient moi au courant si tu trouves la solution. Je mouline dans le vide!

Merci d'avance!

Ciao

JB
Bonjour Klesk,

Merci de ton aide Smiley smile

Je comprends bien la logique de ton explication etla solution 2a me convient parfaitement.
En revanche je bloque un peu sur l'étape 3, comment attribuer les fonctions à mes liens ?

Bonne fin de journée !

Emmanuel
Voici un exemple concernant l'affichage des contenu dans le conteneur, je n'ai pas mis le JS concernant l'affichage du conteneur en revanche, donc là on considère que le conteneur est déjà affiché et on e concentre sur les actions liées aux liens :

CSS :

#contenu1{display:none}
#contenu2{display:none}
#contenu3{display:none}


HTML :

<a id="lien1">lien 1</a>
<a id="lien2">lien 2</a>
<a id="lien3">lien 3</a>

<div id="conteneur">
	<div id="contenu1">blablabla</div>
	<div id="contenu2">blablabla</div>
	<div id="contenu3">blablabla</div>
</div>


Javascript avec JQuery :

$('#lien1').click(function(){ /* on sélectionne notre premier lien via son id et on lui applique un onclick via jQuery. on attribu ensuite une action au click*/
	$('#conteneur div').css('display','none'); /* on sélectionne tous les div contenu dans #conteneur et on s'assure qu'ils ont bien un display:none, car lorsqu'on aura cliqué sur un premier lien, il faudra ensuite le masquer pour afficher le suivant */
	$('contenu1').css('display','block'); /* on applique le display:block au div contenu1 */
});

$('#lien2').click(function(){
	$('#conteneur div').css('display','none');
	$('contenu2').css('display','block');
});

$('#lien3').click(function(){
	$('#conteneur div').css('display','none'); 
	$('contenu3').css('display','block');
});


Libre à toi ensuite d'appliquer des effets JQuery pour afficher les div en question. J'ai utilisé le css avec display dans l'exemple, mais tu pourrai aussi bien utiliser .fadeIn(); et .fadeOut(); de JQuery. Ce qui donnerait :


$('#lien3').click(function(){
	$('#conteneur div').fadeOut(function(){
                $('contenu3').fadeIn();
        }); /* on inclus notre fadeIn dans el callback du fadeOut de façon à déclencher le fadeIn une fois le fadeOut terminé*/
	
});

Modifié par Klesk (17 Oct 2012 - 09:45)
Waou ça à l'air beau, malheureusement un néophyte comme moi ne saisi jamais tout du premier coup Smiley langue

Je résume la situation :

dans le head de mon html j'ai ce bout de javascript :
<script type="text/javascript">
$(document).ready(
function(){
$('#panel').codebomber_Panel();
}
);
</script>


Dans le corps de mon html j'ai le menu :
<div class="underlinemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" rel="panel">Présentation</a></li>
<li><a href="#" rel="panel2">Le club</a></li>
<li><a href="#" rel="panel3">Contact</a></li>
</ul>
</div>


Puis j'ai mes div encore un peu plus bas :
<div id="panel" class="cb_slide_panel">
<a class="close" href="#">Close</a>
<div class="description">
bla bla 1
</div>
</div>


<div id="panel2" class="cb_slide_panel">
<a class="close" href="#">Close</a>
<div class="description">
bla bla 2
</div>
</div>


<div id="panel3" class="cb_slide_panel">
<a class="close" href="#">Close</a>
<div class="description">
bla bla 3
</div>
</div>


Du coté de mon css correspondant j'ai bien un display none :
.cb_slide_panel {
			background-color:#1E1E1E ;
			width: 330px;
			position: fixed;
			z-index: 65000;
			display: none;


Donc à priori je ne suis pas trop loin du but Smiley smile

Mes questions sont :

- Ok il faut que j'ajoute un conteneur à mes div et des ID aux liens de menu mais faut-il que je laisse le "rel" ?

- Où dois-je placer le javascript que tu me donnes en exemple ? A la suite du miens ?

J'ai tenté quelques essais mais peu concluant.

Merci encore de ton aide, je suis navré de paraitre aussi assisté Smiley confused

Bonne journée,

Emmanuel
Apriori d'après ce que je vois tu utilises un bout de script que tu as chopé mais je pense qu'il en manque parce que en gros dans ton code $('#panel').codebomber_Panel(); défini une fonction sur #panel. Hors cette fonction n'est nulle part dans le code que tu m'as indiqué. As-tu un fichier .js que tu charges dans ton header ou footer ?

Les rel sont en fait là pour servir de la même manière que les id de mon code d'exemple. Donc si tu met un id tu peux virer le rel, sauf si tu veux utiliser le code que tu a chopé car ce code doit utiliser les rel lui Smiley smile .

Si tu n'as pas de fichier .js genre codebomber.js ou autre, le plus simple est que tu partes de mon code Smiley smile .

EDIT : Apriori ton code est relatif au plugin JQuery dont il est question ICI. Donc tu dois avoir forcément ça dans ton header ou ton footer -> 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.codebomber.panel.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.codebomber.panel.css">


La première ligne charge JQuery depuis le site de google, la seconde charge le plugin codebomber.panel dont tu as besoin et la dernière charge les css associés au plugin.

EDIT2 : Le code JQuery ou JS peut être chargé à n'importe quel endroit d'une page html. Dans la pratique on le chargera plutôt dans un fichier séparé par exemple fonctions.js que tu chargeras dans ton footer pour ne pas bloquer le chargement de la page.

EDIT3 : Ton slide panel fonctionne actuellement ou pas ? Si c'est le cas on va adapter ton code pour faire ce que tu veux. Tiens moi au courant.
Modifié par Klesk (17 Oct 2012 - 15:31)
Oui, effectivement, j'ai oublié de préciser que j'appelle bien le JS du panel, mais n'y connaissant rien au javascript je n'ai même pas ouvert le fichier... A priori j'aurai du Smiley langue

Mon slide fonctionne très bien mais que sur un seul élément du menu ce qui est tout de même moins pratique !
le codebomber.js donne ça :

/*!
 * Codebomber SlidePanel
 *  http://codebomber.com/jquery/slidepanel
 
 *
 * Copyright 2012, William Golden
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * 
 *
 * Requires jQuery
 *  http://jquery.com/
 
 * Copyright 2011, John Resig
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Date: Wed Jan 25 23:27:00 2011 -0600
 */
(function($){
    if(!$.Codebomber){
        $.Codebomber = new Object();
    };
    
    $.Codebomber.Panel = function(el, options){
		
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;
        
        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;
        
        // Add a reverse reference to the DOM object
        base.$el.data("Codebomber.Panel", base);
        
		//store if an ajax request has already been made
		base.loaded = false;
        
		base.init = function(){
            //Combine default options with constructor options
			base.options = $.extend({},$.Codebomber.Panel.defaultOptions, options);
            
			//set current trigger link to false for the current panel
			base.$el.data('current', false);
			
			//hide the panel and set orientation class for display
			base.$el.hide().addClass('panel_' + base.options.orientation);
			
			//reset any defined a positions
			base.$el.css('left', '').css('right', '').css('top', '').css('bottom', '');
			//set a default top value for left and right orientations
			//and set the starting position based on element width
			if(base.options.orientation == 'left' || base.options.orientation == 'right') {
				var options = {};
				options['top'] = 0;
				options[base.options.orientation] = -base.$el.width();
				base.$el.css(options);
			}
			//set a default left value for top and bottom orientations
			//and set the starting position based on element height
			if(base.options.orientation == 'top' || base.options.orientation == 'bottom') {
				var options = {};
				options['left'] = 0;
				options[base.options.orientation] = -base.$el.height();
				base.$el.css(options);
			}
			
			//bind click event to trigger ajax load of html content
			//and panel display to any elements that have the attribute rel="panel"
			$('a[rel=panel]').live('click', function(e) {
				e.preventDefault();
				base.load({element: this});
			});
			
			//bind a click event to any element with class .close that is inside of the panel
			$('.close', base.$el).click(function(e) {
				e.preventDefault();
				base.collapse();
			});
        };
        
        //return html from an external source
        base.load = function(paramaters){
			//if the current trigger element is the element that just triggered a load
			//collapse the current panel
         	if(base.$el.data('current') == paramaters.element) {
				base.collapse();
				return;
			} else {
				base.expand();
				//if ajax content has not already been loaded
				//load the content based on the href attribute of the triggering link
				if(!base.loaded){
					$('.inner .wrapper', base.$el).html('').load($(paramaters.element).attr('href'), function() {
						base.$el.removeClass('loading');
						base.loaded = true;
					});
				} else {
					base.$el.removeClass('loading');
				}
			}
			base.$el.data('current', paramaters.element);
        };
		
		//expand the target panel based on orientation
		base.expand = function() {
			var options = {
				'visible' : 'show'
			};
			options[base.options.orientation] = 0;
			base.$el.addClass('loading').animate(options, 250, function() {
				$('.close', base.$el).fadeIn(250);
			});
		};
		
		//collapse panel
		base.collapse = function() {
			$('.close', base.$el).hide();

			var options = {
				'visible' : 'hide'
			};
			options[base.options.orientation] = -(base.$el.width() + 40);
			base.$el.animate(options, 250).data('current', false);
		}
        
        // Run initializer
        base.init();
    };
    
	//set default options
    $.Codebomber.Panel.defaultOptions = {
        orientation: "left"
    };
    
	//main plugin entry point
    $.fn.codebomber_Panel = function(options){
		//if no matching selectors found
		//create a new element based on html template
		if(this.length == 0){
			var panel_html = '<div id="panel"><div class="wrapper"><a href="#" class="close">Close</a><div class="inner"><div class="wrapper"></div></div></div></div>';
			var element = $(panel_html).hide().appendTo($('body'));
			return (new $.Codebomber.Panel(element, options));
		} else {
			return this.each(function(){
				(new $.Codebomber.Panel(this, options));
			});
		}
    };
    
})(jQuery);


Effectivement il a l'air de souvent parler de "panel" ... j'imagine que c'est dans ce coin qu'il doit y avoir quelque chose à jouer Smiley smile
Oki, alors l'affichage de ton contenu tu veux le faire comment ?

1. On clique sur un lien, ça ouvre le panel, puis lorsqu'on clique sur un autre lien ça remplace le contenu du panel

2. On clique sur un lien, ça ouvre le panel, puis lorsqu'on clique sur un autre lien, ça ferme le panel et ça le rouvre avec le nouveau contenu

Laquelle des deux solutions correspond à ton besoin ?
Eheh, la seconde solution me semble bien plus coquette !
Il y a beaucoup de modif à apporter ou le plus gros du travail est fait ?
SuperMerguez a écrit :
J'aurais fait un simple ciblage par ID pour afficher tel ou tel contenu... pas forcément besoin de plugin


C'est le script que je proposait dans ma deuxième réponse Smiley smile .
Modifié par Klesk (18 Oct 2012 - 17:43)
emmanuel.mg a écrit :
Eheh, la seconde solution me semble bien plus coquette !
Il y a beaucoup de modif à apporter ou le plus gros du travail est fait ?


Faut que je regarde l'api du plugin pour voir quels actions sont proposées pour ouvrir ou fermer le panel. Mais pour rebondir sur ce qui a été dit, nulle besoin d'un plugin pour faire ça Smiley smile . Après tout dépend de la taille du plugin aussi. S'il est minuscule on s'en fou, si en revanche il est énorme et qu'on en utilise 5%, autant le faire de A à Z.
Modifié par Klesk (18 Oct 2012 - 17:45)
A vrai dire j'ai fait ça avec ce que j'ai trouvé mais sans plugin si le résultat est le même et que c'est plus simple je veux bien apprendre cette solution
Pages :
Sujet clos
Aller à