Gagnez de la place sur vos sites Internet

C’est la fête au jus de fruit aujourd’hui puisque voici un deuxième plugin jQuery qui va vous permettre une bien jolie chose.
Enfin, jolie, cela ne tiendra qu’à vous d’en personnaliser l’aspect !

Quoi qu’il en soit il aura au moins le mérite d’être pratique, puisqu’il va vous offrir un nouvel aménagement sur votre site Internet.
Ne vous est-il jamais arrivé de vous dire qu’un petit tiroir pour ranger un élément pas trop important de votre site vous serez bien arrangeant ?
Et bien le voilà. Je l’ai nommé SlideBox.

Il s’agit du deuxième plugin de ma conception, donc, comme pour le premier, il pourrait arriver que celui-ci manque de cohérence pour certaines utilisations. En effet étant tout seul à travailler dessus je n’ai pas le recul ni le temps nécessaire pour tester le plugin à fond.

Je compte donc sur vous pour le tester tout en l’utilisant, il ne pourra qu’être plus performant grâce à vos retours !

Merci et enjoy 😉

Source :
– http://jq.creativejuiz.fr/plugins-jquery/slidebox.php

$(document).ready(function() { $("#the_link").click(function(){ var voila="Une petite languette est apparue dans le coin haut gauche de votre écran..."; /* un message */ $("#the_link").after(voila); /* ajouter le message après le lien */ $("#the_link").remove(); /* remove pour retirer le lien */ $("#aside").juizSlideBox({'boxBorderRadius' : "5px", 'boxShadow' : "1px 1px 6px #444" }); /* on exécute la fonction sur #aside, à toi d'adapter */ return false; }); });

Aucun commentaire pour “Gagnez de la place sur vos sites Internet”

Christian dit : 2 juin 2010

L’idée est sympathique.
Pourquoi ne pas proposer à l’utilisateur de choisir la position de sa box ?

++
Son site web Son Twitter Son Dribbble Son Github

Geoffrey dit : 5 juin 2010

Bonjour Christian,

Oui en effet ce serait réalisable. Je l’implémenterai dans une prochaine mise à jour.

Merci pour cette suggestion.
Au plaisir.
Son site web

SckyzO dit : 8 octobre 2010

Dis, les images que tu hébergeais ne sont plus disponible sur la démo.
Du coup ton script ne « marche » plus 😛
- Son site web Son Twitter Son Dribbble Son Github
  
  Geoffrey dit : 8 octobre 2010
  
  J’avais oublié ce point de détail :s
  Je vais régler ça.
  Merci pour ce signalement !
Son site web

SckyzO dit : 8 octobre 2010

Ya pas de quoi.
Zadig dit : 10 février 2011

Bonsoir ! Très bon script, merci beaucoup !
Je me demandais simplement… Comment fonctionnait l’appel fait dans la démo ? (La slidebox qui ne s’ouvre que via un certain lien ?) Son utilisation me serait utile en fait =)
- Son site web Son Twitter Son Dribbble Son Github
  Geoffrey dit : 10 février 2011
  Bonjour,
  
  Ravis que ce code t’intéresse 🙂
  Voici celui que j’utilise directement sur la page de démonstration.
  
  Il te faut un lien :
  
  <a href="#" id="the_link">iClic</a>
  
  Et le tronçon de javascript :
  
  $(document).ready(function() { $("#the_link").click(function(){ var voila="Une petite languette est apparue dans le coin haut gauche de votre écran..."; /* un message */ $("#the_link").after(voila); /* ajouter le message après le lien */ $("#the_link").remove(); /* remove pour retirer le lien */ $("#aside").juizSlideBox({'boxBorderRadius' : "5px", 'boxShadow' : "1px 1px 6px #444" }); /* on exécute la fonction sur #aside, à toi d'adapter */ return false; }); });
  
  En réalité ce n’est pas tout à fait le même code, mais l’adaptation devrait mieux fonctionner.
  J’espère que les commentaires suffiront pour cet exemple, mais en cas de difficulté n’hésite pas à me demander précision.
  
  Bonne journée
Zadig dit : 10 février 2011

Merci beaucoup, ça fonctionne parfaitement =) Vu que j’écume tes scripts, j’aurais d’autres questions ailleurs.
Bonne journée et félicitation pour ton travail !
- Son site web Son Twitter Son Dribbble Son Github
  
  Geoffrey dit : 12 février 2011
  
  Bonsoir,
  Merci Zadig.
  
  Bonne continuation 😉
Solomon dit : 22 mars 2011
Bonjour !

J’ai parfaitement mis en place ce système sur un forumactif en passant – pour ne pas héberger le script ailleurs – par mes pages HTML. Ce qui me donne au final dans mon template :
```
$(document).ready(function()  {
   $("#chatbox_top").juizSlideBox();   
});
```
Mais pour la suite impossible de réussir à personnaliser visuellement.

Pourriez-vous m’aider ?
- Son site web Son Twitter Son Dribbble Son Github
  Geoffrey dit : 22 mars 2011
  Bonsoir,
  
  Ok pour l’aide, seulement si tu me tutoies 🙂
  
  Ton code est bon, il ne manque plus que les informations à personnaliser en effet, voici une syntaxe type, il te faudra voir quelles options sont disponibles sur la page du plugin :
  
  $(document).ready(function() { $("#chatbox_top").juizSlideBox({ 'variable1' : 'valeur1', 'variable2' : 'valeur2' }); });
  
  Ne jamais mettre de virgule en fin de ligne lorsque tu déclares ta dernière valeur car il s’agit de la fin de la liste/tableau (c’est comme une phrase, tu ne mets jamais de virgule à la fin ^^)
  
  J’espère que c’est bien ce que tu me demandais.
  
  Bien joué pour ton intégration à un Forum-Actif, bonne continuation 😉
Solomon dit : 23 mars 2011

Ça marche, je te tutoie avec plaisir !

Je commence à comprendre ma bourde, déjà la virgule en fin, je la mettais. Par contre je dois faire une autre erreur, parce que ma personnalisation ne fonctionne pas, vois-tu ma bourde ? peut-être les espaces manquant/en trop ?

$(document).ready(function() {
$(« #chatbox_top »).juizSlideBox() ({
‘boxBg’ : ‘transparent url(http://i69.servimg.com/u/f69/16/29/91/40/——13.jpg) repeat’,
‘boxBorder’ : ‘2px solid #A4B7B8’,
‘boxBorderRadius’ : ’30px 100px 30px 100px’,
‘boxShadow’ : ‘0px 4px 5px #000’,
‘boxWidth’ : ‘700px’
});
});

J’ai tâtonné pour arriver à l’intégration, j’ai dû faire plus compliqué qu’il ne le fallait 😆

Merci beaucoup en tout cas de prendre un peu de temps pour moi ! C’est vraiment sympa !

Et pour créditer ton travail, tu préfères que je cite ton cite, ton blog ou bien tout simplement toi ?
- Son site web Son Twitter Son Dribbble Son Github
  
  Geoffrey dit : 23 mars 2011
  
  Re,
  
  Oui je vois ton erreur, ce n’est pas grand chose mais c’est fatal, ici :
  .juizSlideBox() ({
  tu dois écrire plutôt :
  .juizSlideBox({
  
  Tu ouvres la parenthèse, puis l’accolade, puis tu rentres les info, puis tu fermes tout (comme c’est déjà le cas).
  Voilà, c’était juste ça, le reste de ton code me semble ok.
  
  Bon courage 😉
Solomon dit : 24 mars 2011

Merci beaucoup! C’est parfait !
Son site web

Fajy de apprentiphotographe.ch dit : 7 décembre 2011

Salut Geoffrey,

L’idée est très sympa.

as-tu fait une version où on peut choisir l’endroit ou cette boite peut apparaitre ?

Fajy
- Son site web Son Twitter Son Dribbble Son Github
  
  Geoffrey dit : 7 décembre 2011
  
  Bonjour Fajy,
  
  Oui le plugin a été mis à jour pour offrir le choix entre gauche et droite, mais toujours en haut de fenêtre.
  Logiquement l’ajout du choix haut et bas ne devrait pas être plus compliqué à ajouter par mes soins, au besoin.
  http://jq.creativejuiz.fr/plugins-jquery/slidebox.php
  
  Bonne soirée 😉
Son site web

Robiins dit : 11 décembre 2011

Bonjour,

Bien je souhaiterais savoir si ça serais possible que se SlideBox s’ouvre tout seul à l’arriver sur la page ? une fonction spéciale ? comment faire ..
Est-ce possible ?

Merci bien 🙂
- Son site web Son Twitter Son Dribbble Son Github
  Geoffrey dit : 11 décembre 2011
  Bonjour,
  
  Il est possible de simuler un clic ou un autre événement grâce à la fonction trigger() de jQuery.
  Ici il faudrait placer ce code après initialisation de la fonction sur l’élément à placer en SlideBox :
  
  $(".juiz_open juiz_action").trigger("click");
  
  donc à placer après :
  
  $("#aside").juizSlideBox();
  
  Amuse-toi bien 😉
Son site web

Brice dit : 18 avril 2013

Très sympa ce code! Seul soucis: sous Chrome, ça marche la première fois que tu cliques, mais pas la deuxième. J’ai testé sous Mac et sous Linux: même résultat. Tu as le soucis chez toi aussi ou pas ?
- Son site web Son Twitter Son Dribbble Son Github
  
  Geoffrey dit : 21 avril 2013
  
  Hello Brice,
  Je n’ai pas le souci sous Chrome PC, et je n’ai hélas pas de quoi tester sous Mac et Linux.
  Mais ce code commence doucement à dater :p
Son site web

Brice dit : 21 avril 2013

Ca vient êut-être du $(« .juiz_open juiz_action »).trigger(« click »); :-/

Articles proches

Commentaires de l'article

Laisser un commentaire sur cet article ?

Aucun commentaire pour “Gagnez de la place sur vos sites Internet”