WebCssDesign » firefox

FireQuery plugin jQuery pour Firebug et Firefox

Admin — Mon, 02 Nov 2009 10:39:45 +0000

Voici un petit module complémentaire pour Firefox venant compléter le célèbre Firebug outil indispensable pour tout développeur Web

FireQuery ajoute des fonctionnalités à l’onglet HTML de Firebug et vous autorise à visualiser les données et événements ajoutées via jQuery. Il vous permet aussi d’ajouter jQuery à une page qui ne l’a pas installé et ainsi permettre des actions ou d’extraire des données d’une page sans jQuery comme le montre le screencast ci-dessous.

Les expressions jQuery sont présentées dans la console Firebug + DOM inspecteur et surlignées au survol de la souris.
Voir le screencast:

Compatibilité : Firebug 1.3+
Site Web : http://firequery.binaryage.com/
Téléchargement : https://addons.mozilla.org/en-US/firefox/addon/12632
Voir le screencast : http://screenr.com/bC7

Firebug disponible pour Firefox 3

Admin — Wed, 27 Aug 2008 16:22:19 +0000

Nous l’attendions tous depuis la sortie de Firefox 3 le 17 Juin, l’équipe de Firebug l’a fait enfin. Débogueur pour HTML, CSS et JavaScript, outre la compatibilité Firefox 3, la liste de bugs corrigés pour cette version 1.2 est importante et l’on de nombreuses améliorations.

Plus de d’infos sur Firebug 1.2 disponibles dans un billet publié par John Resig, un membre de l’équipe de développement.

L’extension peut être téléchargée ici.

Et le site officiel du plugin Firebug 1.2.
Adresse du support http://groups.google.com/group/firebug/topics

Internet Explorer 8 pour 2008

Admin — Fri, 25 Jul 2008 11:47:38 +0000

Internet Explorer 8 verra le jour en 2008, a récemment confirmé Bill Veghte, vice président en charge de la division Windows chez Microsoft dont les propos sont rapportés par la journaliste Mary-Jo Foley.

Jusqu’ici, l’éditeur s’était toujours montré relativement vague quant à la date de sortie de la future version de son naviagteur Web, qui reste à l’heure actuelle le plus utilisé au monde, en dépit des progrès continus enregistrés par son grand concurrent Firefox, qui détient désormais 30% des parts de marché en Europe.

Après une première version bêta distribuée en mars dernier, essentiellement destinée aux développeurs, Microsoft devrait mettre en ligne dans le courant du mois d’août une seconde version de test d’Internet Explorer 8. Bien plus proche de la mouture finale, celle-ci devrait être accessible aux utilisateurs finaux, et donner un bon aperçu des nouveautés implémentées par Microsoft. Alors que la bêta 1 avait été restreinte à quelques langues (anglais, puis allemand et chinois), la bêta 2 sera traduite dans plus de vingt langues, dont le français.

L’équipe en charge du développement d’Internet Explorer 8 rappelle que cette nouvelle version devrait se montrer plus respectueuse des standards que les précédentes, et que le rendu des pages Web pourrait se révéler différent entre IE7 et IE8.

3000 Icones gratuites de haute qualité

Admin — Wed, 04 Jun 2008 14:51:56 +0000

Avec cette offre massive, vous trouverez votre bonheur pour vos sites et applications!!! Allant de types de fichiers à des gadgets, des icônes pour Mac Firefox orbes, flux RSS et même des voitures de course. Et chacun d’entre eux sont gratuits.

De plus, les avantages pour vous, c’est qu’ils ont tous été soigneusement organisé. Chaque ensemble contient seulement la plus grande taille disponible pour son icône particulier et porte l’étiquette avec le nom du paquet et un lien vers le site de l’auteur que vous pouvez consulter pour plus de détails.

Une dernière note: chacune de ces icônes sont au format. Jpg.

Alors pour tous ceux que çela intéresse, rendez vous sur cette page neerdbusiness

8 astuces Css

Admin — Wed, 14 May 2008 00:23:17 +0000

Les meilleures solutions sont souvent les plus simples. Voici une liste de 8 astuces contenant seulement une propriété CSS.

En espérant que cela puisse vous aider.

1. Alignement vertical avec la propriété line-height

#bloc { line-height:24px;}

Quand vous avez un container avec une hauteur fixe, vous pouvez utiliser un line-height pour aligner verticalement le contenu.

2. Prévient le débordement entre les blocs

#bloc { overflow:hidden; }

Quand un container est trop grand par rapport aux autres blocs il peut ‘déborder » et ainsi casser votre structure de page. Pour éviter cela, utiliser l’overflow : hidden permet de cacher ce débordement.

3. Previens la coupure des liens sur 2 lignes

a{ white-space:nowrap; }

Avec de longs textes on peu se retrouver avec des liens couper sur 2 lignes, cette astuce évite cela.

4. Laisse afficher la scrollbar firefox

html{ overflow:-moz-scrollbars-vertical; }

Firefox cache par défault sa scrollbar verticale. Ce code laisse toujours affiché la scrollbar.

5. Centrer horizontalement les blocs

margin:0 auto;

Cette ligne CSS permet de centrer un élément simplement.

6. Supprime la scrollbar d’un textarea dans IE

textarea{ overflow:auto; }

Avec IE les scrollbar des textareas sont visibles par défault. Cette astuce CSS permet de les supprimer.

7. Forcer le saut de page quand vous imprimer vos documents

h2{ page-break-before:always; }

Avec cette ligne vous pouvez définir où vous voulez placer vos sauts de page.

8. Supprime les bords pointillés sur les liens actifs

a:active, a:focus{ outline:none; }

Coins arrondis avec jQuery CSS et une seule image

Admin — Mon, 14 Apr 2008 18:58:38 +0000

L’idée est donc de pouvoir faire un cadre arrondi à n’importe quel élément d’une page sans répéter son code, en utilisant la librairie jQuery et en utilisant une seule image pour les quatres coins.

Tout d’abord, on va simplement attribuer une classe “rounded” aux éléments que l’on désire styler. Par exemple le cadre ci-dessous :



 Ce cadre tout simple utilise jQuery et a de jolis coins arrondis...

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vitae diam egestas felis

 pellentesque bibendum. Proin posuere felis id tellus. Phasellus eu felis. Nullam lacus ante,

 pellentesque vitae, tristique eu, commodo nec, mauris.

Maintenant, on ajoute un peu de javascript (pensez bien à inclure la librairie jQuery avant dans votre page !). Ce code nous permettra de générer dynamiquement les balises nécessaires pour styler nos cadres de chaque élément utilisant la classe “rounded” dans la page :

$(document).ready(function(){

 $('div.rounded').wrap('');

 $('div.cadre').prepend('
');

 $('div.cadre').append('
');

});

Je vous laisse utiliser votre éditeur d’images favori pour créer l’arrondi que vous désirez, pour ma part j’ai créer l’image de 22px/22px suivante :

Le fait de n’utiliser qu’une seule image va nous permettre de réduire considérablement le “poids” du cadre. À titre indicatif, l’image que j’utilise pèse 387 octets et la même découpée en 4 pour chaque coin amène un poids total de 953 octets.

Voilà, plus qu’à rajouter une pincée de CSS pour donner corps à nos cadres. Vous noterez que j’ai donné une dimension de 11px à chacun des coins du cadre et qu’ensuite je me suis contenté de décaler horizontalement et verticalement l’image de fond pour donner l’illusion d’un cadre arrondi.

.cadre{

 background-color: #bdb194;

 width: 30%;

}.cadre_hg, .cadre_hd,

.cadre_bg, .cadre_bd{

 width: 11px;

 height: 11px;

 background-repeat: no-repeat;

 font-size: 1px;

}

.cadre_hg{

 background: url('cadre_rounded.png') 0 0;

}

.cadre_hd{

 background: url('cadre_rounded.png') 11px 0;

 float: right;

}

.cadre_bg{

 background: url('cadre_rounded.png') 0 11px;

}

.cadre_bd{

 background: url('cadre_rounded.png') 11px 11px;

 float: right;

}

Testé sur :

Firefox 2 sous Windows XP, Linux et Mac
Safari sous Windows et Mac
IE 7

Télécharger le tuto_coins_arrondis_jquery.zip (17.5Ko) contenant les fichiers de démo.

Mediabox, un lightbox polyvalent gratuit

Admin — Fri, 04 Apr 2008 11:35:56 +0000

Utilisation de la librairie javascript MooTools, Mediabox vous permet d’ouvrir le flash, vidéo, et html contenu dans une variable « album » style fenêtre.

Vidéo
Mediabox liront normale Youtube, Google Video, Metacafe et liens automatiquement par leur traduction en code d’intégration et l’insertion de la vidéo dans le style de l’album.

play YouTube »

video.google.com »>play GoogleVideo »

jouer MetaCafe »

Pour insérer un DailyMotion la vidéo, vous devez utiliser le lien donné dans le code d’intégration:

play DailyMotion video »

SWF
Si le lien est spécifique à un. Swf et n’est pas de l’un de ces sites de partage de vidéos, il est incorporé directement (le fichier ci-dessous est de HomestarRunner.com).

flash animation »>play flash animation »

FLV
Si le média est un être inséré. Flv (flash vidéo) fichier, il sera inclus en utilisant Jeroen Wiering’s Mediaplayer ou FLVplayer (vous pouvez définir dans les options qui mediabox.js celui que vous souhaitez utiliser). Le lecteur flash contrôles sont cachés jusqu’au souris de l’utilisateur sur le contenu. Cela donne non seulement un aspect plus propre et plus dramatique pour la présentation de la vidéo étant intégrées, mais corrige des erreurs d’affichage dans Firefox Mac.

flash video »>play flash video »

Quicktime
Quicktime contenu joue maintenant correctement dans la plupart des navigateurs, y compris Safari 1.5/2.0 (qui exigeait de codage supplémentaire pour arrêter la lecture lors de la fermeture de la couche). La hauteur du contrôleur (16 pixels) est automatiquement ajouté à la hauteur des médias si le contrôleur option est mise à true dans le javascript (depuis la version 0.6.7).

play quicktime movie»

Windows Media Video
Les fichiers WMV sont que partiellement pris en charge pour le moment. Ne fonctionne pas bien sous Windows, et pas du tout dans Safari ou Opera 9 pour Windows 3.

jouer wmv »

Contenu Web

Si le lien passés au script ne correspond pas à l’un de ces types de médias, il sera ouvert dans une zone de contenu iFrame. Tout iFrame utilisation n’est pas aussi flashy comme AJAX, il vous permet d’intégrer des formulaires, des pages, des sites, etc et sans conflits de scripts ou de style.
open Yahoo Movies »

Javascript
Une Mediabox superposition peut également être ouvertes à l’aide de javascript:

Cliquez ici

Gardez à l’esprit que l’aide provoquera la page pour sauter vers le haut, tout en laissant la fenêtre Mediabox derrière au clic d’origine, en raison de la nature des liens d’ancrage. Il est déconseillé d’utiliser javascript appels d’un simple lien de toute façon, car cette fonctionnalité est intégrée Mediabox. Cependant, le direct appel javascript peut être très utile dans d’autres situations; Mediabox de charger une fenêtre de la page de chargement, vous pouvez utiliser la fonction onload = »… » dans votre balise .

Vous pouvez également fermer la superposition Mediabox à partir d’une ouverture en utilisant iFrame parent.Mediabox.close ();

Flash
Fichiers Flash peuvent accéder Mediabox superpositions en javascript ainsi. Il est important de noter que les liens, bien que correctement mis en forme, ne fonctionnent pas si tiré à partir d’un fichier XML.

Javascript: Mediabox.open ( ‘url’, ‘titre’, ‘mediabox [largeur hauteur]‘);

Frames
Lorsque le site est destinée à des cadres, des liens ouvre automatiquement la fenêtre de leur Mediabox intérieur du cadre dans lequel le lien est cliqué. Il n’existe aucun moyen de savoir de faire ce travail avec les liens détecté automatiquement, sauf si je devais réécrire Mediabox à reconnaître target = « parent », et même alors, il est suspecte.

Cependant, vous pouvez envoyer un appel javascript au parent cadre. Tant que le parent a le bon cadre javascripts liées, et en cours d’exécution (Mootools, Mediabox, etc), il devrait fonctionner correctement.

Javascript: parent.Mediabox.open ( ‘url’, ‘titre’, ‘mediabox [largeur hauteur]‘);

Télécharger
mediabox68.js version 0.6.8 Beta (about 14kb)
mediabox.css CSS
mediaboxImages.zip

Mootools
SWFobject
JW Mediaplayer ou JW FLVplayer

Facultatif
Mediabox est conçu pour travailler aux côtés de Slimbox, un album d’images et de script pour des groupes d’images. Non seulement le lien formats sont très similaires, mais le formatage CSS est exactement le même, vous permettant d’utiliser un seul fichier CSS à la fois le style de scripts.

Une note sur le réglage de la CSS (et cela vaut pour les deux Slimbox et Mediabox), si d’autres éléments sur la page utiliser z-index paramètres, ils apparaîtront en haut de la superposition et la boîte de contenu. Cela peut être corrigé en ajoutant z-index: 50; d’# lbOverlay, et z-index: 51; à lbCenter #, # lbBottomeContainer dans le fichier CSS (vous pouvez utiliser n’importe quelle des valeurs qui sont plus grands que les autres éléments sur la page) .

Installation
Mediabox.js, mediabox.css, mootools.js et swfobject.js devrions tous être chargé dans la page. Si vous êtes également Slimbox l’installation, vous n’avez besoin que d’une copie du code CSS, soit slimbox.css (avec le style par défaut de blanc et de gris) ou mediabox.css (avec un thème noir).

… …
href= »/css/mediabox.css »
… …
src= »/js/mootools.v1.11.js » src= »/js/swfobject.js » src= »/js/mediabox.js »