11498 sujets

JavaScript, DOM et API Web HTML5

Modification dynamique d'un plug-in

Bonjour les gens,

j'ai installé un plug-in Jquery qui structure ma page web sous forme de panneaux avec contrôle du scoll :

http://luke.sno.wden.co.uk/full-screen-vertical-scroll#fsvs-initial-setup

Tout fonctionne très bien, j'ai même put le personnaliser un peu avec mes petites connaissances basique en Jquery (oui je maîtrise le HTML/CSS mais pas du tout le java Smiley decu )

J'ai une nav off-canvas en pure CSS : http://krissdeschamps.fr/fullscroll/# (ne faite pas attention au design je test la structure pour le moment).

Elle s'ouvre et se ferme avec un addClass :


$('.nav_trigger, .nav_off').click(function(){
	$('.nav_off').toggleClass('nav_off_open');
	$('#fsvs-body').toggleClass('content_shifted');				
});


Lorsque la nav est ouverte, je souhaite que le scroll du contenu en dessous soit bloqué. Je ne peux pas le faire avec l'overflow il faut que ce soit les options du plug-in qui soit modifiées.
Dans ces options il y a : 


var fsvs = $.fn.fsvs({
	speed : 300,
	mouseWheelEvents : true,
	touchEvents : true,
	arrowKeyEvents : true
});


En résumé, je souhaite que les valeurs 'true' passe à 'false' quand la nav est ouverte et inversement.
Le hic c'est que je n'ai pas la moindre idée de comment faire Smiley bawling
Est-ce possible ?

Merci d'avance !
Administrateur
Il faudra probablement modifier le plugin. La plupart ne prévoient pas de modification à le volée de leur paramètres d'initialisation.
Bonjour,

Je vais répondre un peu à côté, mais histoire de faire quand même avancer le truc, je pense que tu devrais essayer de chercher un plugin dans le même genre, mais qui offre la possibilité de jouer avec l'API (ce qui n'est pas le cas ici), vois peut-être fullpage.js
Les méthodes setAllowScrolling et setKeyboardScrolling semblent correspondre à ce que tu souhaites faire.
Ce plugin est parfait, Merci SolidSnake.
J'arrive à faire à peu près ce que je veux avec à l'exception d'un truc.

Par défaut, l'autoScrolling est activé. C'est à dire que lorsque l'utilisateur scroll, il passe d'une section fullpage à une autre de façon automatique.

On peut le désactiver avec cette option :


$('#fullpage').fullpage({
     autoScrolling: false
})


Moi, j'ai besoin de désactivé cette option uniquement lorsque la largeur du viewport passe en dessous de 250px.

Dans le plugin, il existe une fonction qui permet d'effectuer des actions après le resize :


$('#fullpage').fullpage({
     afterResize: function(){
     }
})


N'y connaissant pas des masses en java, j'ai testé :


$('#fullpage').fullpage({
     afterResize: function(){
          if ($(document).width() < 240) {
               autoScrolling: false
          };
     }
})


Et là, ce que savent, se marre et me disent bah non ça ne pas marcher ... Smiley confused

Du coup, je ne sais pas comment faire. Quelqu'un pourrait-il éclairer ma lanterne obscure ?

Merci
Modifié par LocNar75 (30 Oct 2015 - 09:18)
Je viens de trouver une solution, je test la largeur du doc au chargement de la page et je charge le plug in avec l'option en fonction de cette largeur.

if ($(document).width() > 240) {
	$('#fullpage').fullpage({		
		autoScrolling: true
	});
};

if ($(document).width() < 240) {
	$('#fullpage').fullpage({		
		autoScrolling: false		
	});
};

Modifié par LocNar75 (30 Oct 2015 - 09:29)
Sujet clos
Aller à