Tutoriel Mootools 1.0 : Slider pour changer largeur interface

Comme promis voila le ptit tuto qui vous permettra d’avoir un slider comme celui que vous pouvez voir a droite et qui vous permet de controller la largeur de l’interface du site.

Pour une fois je vous ai meme fait un fichier à part pour vous montrer le resultat final du tutoriel qui ne contient que le strict nécessaire et que je vous laisse décortiquez par vous meme en regardant les sources. (bouton droit -> voir les sources)

Verifié avec IE6, IE7, Safari, Firefox ~~et Opera. Nan j’deconne m’en fout d’Opera.~~

Si tu debutes dans Mootools, va plutot la avant sinon tu vas rien capter.

Billets en relation

Cet article a été publié le Vendredi 9 mars 2007 à 18:30 et est classé dans Technique, Tutoriel. Vous pouvez suivre les réponses reçues par cet article grâce au fil RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre site.

8 réponses à “Tutoriel Mootools 1.0 : Slider pour changer largeur interface”

Salut , tout d’abord félicitation pour tous ces tutos mootools
J’aurai néanmoin une tite question de noob :p
En effet je cherche à redimensionner mon site avec mootools mais j’ai un souci.
Pour des tailles fixes cela ne me pose pas de problèmes mais je souhaite avoir la possibilité de mettre un pourcentage. En gros je voudrai avoir 3 possibiltés : Une taille Mini fixe , Une taille Maxi fixe et une taille adaptée en %.
Apparement il faut changer l’option Unit de ‘px’ vers ‘%’ mais je ne sais comment faire… xD
Pour exemple voici un site qui fait exactement ce que je cherche :
http://www.yootheme.com/templates.html

Merci de bien vouloir m’éclairer :p

A bientot et félicitations encore !!!

Damien le 4 juin 2007 14:23 |

Salut,

la page d’exemple ne marche pas.

Pour ton besoin , tu peux connaitre la largeur totale de la page, tu n’a donc pas besoin de %. Tu peux la calculer toi meme en pixel.

Cet exemple te sera utile :
http://demos.mootools.net/Fx.Elements

Allez, on y croit

Fardeen le 7 juin 2007 2:25 |

Bon, je me suis sérieusement penché sur mootools, et un effet me manque… : l’effet de “glissé” quand on clique sur un lien vers une ancre interne à la page, qui fait défiler doucement jusqu’à la cible. tu vois ce que je veux dire ? sinon vas là : http://docs.mootools.net/Plugi.....Properties et cliques sur “Properties” par exemple.

Si tu peux m’aider, je t’en serai gré !

Philippe.

Philippe le 10 juin 2007 12:50 |

oups j’ai trouvé, même si pour ce coup là, je ne vois pas très bien comment il fonctionne…. l’essentiel c’est que ça marche, au final !

Philippe.

Philippe le 10 juin 2007 12:57 |

Peux-t-on imaginer le même principe mais que l’utilisateur puisse réduire la fenêtre et non l’agrandir.

Que le curseur du slider soit sur un position centrale et que l’utilisateur puisse aller vers la droite ou vers la gauche ?

Merci beaucoup pour ce tutorial et pour votre réponse !
Niko

Niko le 4 juillet 2007 20:23 |

desole pour la reponse tardive mais je suis en vacances ;)

Pour repondre a ta question, bien entendu il est possible de le faire sans aucun souci.

Il suffit de modifier cette ligne :

VOIR LA VERSION TEXTE

JavaScript:

largeur_page.start(largeur_page_actuelle, largeur_depart + parseInt(pos * 100));

Fardeen le 7 juillet 2007 18:05 |

Salut Fardeen,

J'essaye désespérément de mettre en place un slider pour changer la largeur de l'interface sur un mon thème ithème 1.1.

Je passe peut être et même surement à côté de quelque chose, je ne parviens pas à faire fonctionner le tout.

Si tu as un moment à m'accorder pour m'éclairer.

Par avance merci, et tout mes compliments pour ton site.

Gringoh

Gringoh le 21 septembre 2007 15:43 |

bonjour,
je vient de mettre en place sur mon site web le slider dans un premier temps j aimerai avoir quelque informations lorsque le slider augmente passe de 0 a 1 peut effectuer le changement d une image de fond je mexplique j ai mis en place sur mon site un design avec coin arrondis gere par image lorsque j augmente la taille evidemment l image nest plus a la bonne dimmension.pouriez vous m indiquez si cela est possible ou non et si oui comment faire(enfin une piste)
merci par avance

cordialement stouky

stouky le 11 octobre 2007 21:00 |

Fardeen GHULAM

Table des matieres (X)