JAVASCRIPT « Blog Shivato Web

1avr/11

[Astuce] Réduire la taille des widgets jQuery UI

Vous n'avez jamais remarqué que sur le site de démo de jQuery UI les widgets sont toujours plus petits que quand on les insère dans nos pages.

A l'époque où je recherchais pour réduire leur taille, dans le code source de la page de démo on pouvait voir qu'il y avait un font-size:80% sur le body.
Pas très pratique si on veut que 80% sur le widget.
Pour cela, une simple ligne suffit :

$('#search').autocomplete('widget').css({ fontSize:'80%' });

Cela fonctionne sur :

datepicker
autocomplete
accordion (pour celui là, à 80% on peut obtenir des scrolls sur certains navigateurs, le mieux est de le définir à 90%)

Je n'ai pas testé sur les autres widgets, mais ça devrait fonctionner également.

Taggé comme: javascript, jQuery, jQuery UI 1 commentaire

11juil/10

[BUG] Flux vidéo + Facebox sous Internet Explorer

Si vous utilisez le plug-in jQuery facebox (version 1.2) pour y mettre des flux vidéo (dailymotion, youtube…), lorsque vous fermerez la lightbox avant la fin de la lecture de la vidéo, le son de celle-ci continuera d’être joué sous Internet Explorer.

En effet le plug-in se contente de ne plus afficher la lightbox sans prendre la peine de supprimer son contenu. Pour y remédier, il suffit d’ajouter 1 ligne de code à la fin du fichier facebox.js :

$(document).bind('close.facebox', function() {
   $(document).unbind('keydown.facebox')
   $('#facebox').fadeOut(function() {
      $('#facebox .content').empty() //ligne à ajouter
      $('#facebox .content').removeClass().addClass('content')
      hideOverlay()
      $('#facebox .loading').remove()
   })
})

Taggé comme: BUG, facebox, Internet Explorer, javascript, jQuery, Vidéo 3 Commentaires

26juin/10

[BUG] Colorpicker jQuery + Chrome 5

Au cours du développement d'un projet client, j'ai dû mettre en place un colorpicker.
Mon choix s'est orienté sur le colorpicker jQuery de www.eyecon.ro/colorpicker/ (version du 23.05.2009) qui est plutôt complet.

Au passage de la version 5 de Chrome, le submit des formulaires avec le colorpicker ne fonctionnait plus, au lieu d'envoyer le formulaire Chrome sélectionne le premier input de la couleur hsb qui contient un nombre décimal.

Ce sont les décimaux des couleurs hsb qui posent donc problème, mais vous ne verrez pas de décimaux tout le temps, ça se produit à 2 moments :

à l'initialisation du colorpicker si on définit une couleur en rgb ou hexa
quand on change les couleurs rgb ou hexa dans leurs champs input

J'ai testé sur différents navigateurs (Chrome 4, Firefox, Safari, IE et Opera) et bizarrement il n'y a que sur Chrome 5 (Windows et Linux) que le bug apparaît.

Si vous ne voulez pas modifier le code source du colorpicker, voilà une solution possible, il suffit de prendre les valeurs hsb, les arrondir et les remettre à leur place.
Ca sera plus clair avec du code :

$(document).ready(function(){
var divColorpicker=jQuery('#divColorpicker');
//fonction qui arrondi le hsb
var roundHsb=function(hsb){
var h=jQuery('.colorpicker_hsb_h input',divColorpicker);
var s=jQuery('.colorpicker_hsb_s input',divColorpicker);
var b=jQuery('.colorpicker_hsb_b input',divColorpicker);
h.val(Math.round(h.val()));
s.val(Math.round(s.val()));
b.val(Math.round(b.val()));
}
//initialisation du colorpicker
divColorpicker.ColorPicker({
flat:true,
color:'78AD78',
onChange:function(){
//on arrondi à chaque changement de couleur
roundHsb();
}
});
//on arrondi la couleur mise à l'initialisation
roundHsb();
});

Petite astuce bonus :
Si vous voulez passer du colorpicker noir au gris, ouvrez le fichier colorpicker.css et modifier le chemin des images :

/* Remplacer ces chemins */
background: url(../images/colorpicker_background.png);
background: url(../images/colorpicker_select.gif);
background: url(../images/colorpicker_indic.gif) left top;
background: url(../images/colorpicker_hex.png) top;
background-image: url(../images/colorpicker_rgb_r.png);
background-image: url(../images/colorpicker_rgb_g.png);
background-image: url(../images/colorpicker_rgb_b.png);
background-image: url(../images/colorpicker_hsb_h.png);
background-image: url(../images/colorpicker_hsb_s.png);
background-image: url(../images/colorpicker_hsb_b.png);
background: url(../images/colorpicker_submit.png) top;

/* par */
background: url(../images/custom_background.png);
background: url(../images/custom_select.gif);
background: url(../images/custom_indic.gif) left top;
background: url(../images/custom_hex.png) top;
background-image: url(../images/custom_rgb_r.png);
background-image: url(../images/custom_rgb_g.png);
background-image: url(../images/custom_rgb_b.png);
background-image: url(../images/custom_hsb_h.png);
background-image: url(../images/custom_hsb_s.png);
background-image: url(../images/custom_hsb_b.png);
background: url(../images/custom_submit.png) top;

/* sauf celui là, sinon vous n'aurez plus le carré principal des dégradés */
background: url(../images/colorpicker_overlay.png);

Taggé comme: BUG, Chrome, colorpicker, CSS, javascript, jQuery 1 commentaire