Il existe de nombreuses solutions sur le net pour compenser avec jQuery l'absence d'attribut CSS quand on n'utilise pas de tableau, mais toutes celles que j'ai trouvé on un bug dans certaines conditions : position: absolute risque de faire sortir le texte du cadre, margin-top fait descendre aussi le conteneur parent, problème avec le padding dans certaines configurations css, …

D'où pastel-vAlign, que j'ai testé dans de très nombreuses situations.

Le code du plugin jQuery

    $.fn.vAlign = function() {
        return this.each(function(i){
            $(this).children().wrapAll('<div class="pastel-vAlign" style="position:relative; margin: 0; padding: 0;"></div>');
            var jWrap = $(this).children('div.pastel-vAlign');
            var ph = $(this).innerHeight();
            var dh = jWrap.height();
            var mh = Math.round((ph - dh) / 2);
            jWrap.css('top', mh);
        });
    };

Utilisation

$('#element').vAlign();


#element doit avoir la hauteur de la zone dans laquelle on veut centrer l'élément enfant qui est dedans. L'élément enfant, lui, ne doit pas avoir de hauteur définie.


Donc le css doit être du type :

#element {height: 100px}

et pas "#element * {height: 100px}" par exemple

Demo

Voir la démo de pastel-vAlign

Principe

Ce script permet d'intégrer dans votre site internet un moteur de recherche de noms de domaine libres ou pas.

Réalisé en ajax, il évite de recharger la page à chaque recherche.

Affichage du whois pour les noms de domaines non disponibles.

Possibilité de rechercher jusqu'à 35 extensions à la fois, dont les françaises. Ces extensions sont définies dans le fichier whois-server-list.php, donc vous pouvez en modifier la liste.

Le script est gratuit, et libre à vous de vous le customiser. N'hésitez pas à poster ici vos éventuelles contributions.

Exemple d'intégration

whois.pastel.pro et www.pastel.pro

Téléchargement

Pastel Whois version 1.2

Utilisation

Téléchargez, décompressez et uploadez sur votre serveur.

Le fichier index.php est utilisable directement pour comprendre le fonctionnement.

N'hésitez pas à poster pour me demander ce que vous ne comprenez pas.

Voir la démo

Télécharger

Le script jQuery permet :

• de conserver le style du hover (ici fond bleu dégradé) une fois qu'on a pris le focus, même si la souris n'est plus au-dessus et de la libérer quand on perd le focus
• d'effacer la valeur "Chercher …" quand on prend le focus, et de le réafficher si l'utilisateur a laissé le champ vide

Source remaniée

  Transformez n'importe quelle balise HTML en bouton, comme celui-ci :   

Fonctionne avec toutes les balises HTML, en sachant que les balises <button>, <a> et <input type="submit"> sont transformées en <span>, puis est appliqué un javascript permettant de reproduire l'action de la balise.

Télécharger Pastel Button v1.1

Attention : pour activer le hack CSS3 sur IE qui permet d'avoir les ombrages et les coins arrondis, il faut éditer le fichier javascript et adapter la variable pastelButtonAbsolutePath.

Chargement du plugin

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="pastelbutton.min.js"></script>

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="pastelbutton.css" />

Utilisations par l'exemple

<button class="pastelButton">Mon bouton de test 1</button>
<span class="pastelButton">Mon bouton de test 2</span>
<a href="monlien.html" class="pastelButton">Mon bouton de test 3</a>
<form action="macible.php"><input type="submit" class="pastelButton" value="Mon bouton de test 4" /></form>

<script type="text/javascript">
    jQuery('.pastelButton').pastelButton();
</script>


Embellir avec CSS

Augmenter la hauteur du bouton

.pastelButton {
    height: 100px;
}

Aligner le bouton au milieu

.pastelButton {

    margin: auto;

    width: 200px; /* largeur à  adapter en fonction du texte */

}

Changer la couleur de fond et ajouter une image

.pastelButton {

    background-color: #80D9F9; /* En attendant le chargement de pastelButton : doit être plus foncé que  .pastelButton .level1 */

}

.pastelButton .level1 { 

    background-color: #85DFFF;

}

.pastelButton .level2 {

    background: url("monimage.png") no-repeat scroll 8px 8px;

}

Modifier la police

.pastelButton * {

    font-size: 16px;

    font-weight: bold;

}

Démo

Voir le site pastel.pro

Pour charger un fichier css spécifique à un fichier ajax chargé par exemple dans une floatbox (boîte modale), comme l'en-tête a déjà été envoyée, il faut rajouter le lien vers ce fichier css dans l'en-tête existante.

Code à ajouter dans le fichier html ou php appelé en ajax

<script type="text/javascript">
    if (!($('#ajaxCss').length)) { // vérifie s'il a déjà été chargé
        $("head").append("<link>");
        $("head").children(":last").attr({
          id:   "ajaxCss",
          rel:  "stylesheet",
          type: "text/css",
          href: "./votre-fichier.css"
        });
    }
</script>

Pour attendre la fin du chargement du fichier css pour afficher le contenu du fichier ajax

Incluez votre code html dans une balise :

<div id="ajaxMainFrame" style="visibility: hidden;"></div>


Et rajoutez dans le fichier css :

#ajaxMainFrame {
    visibility : visible !important;
}


Pastel Shadow est un plugin jquery permettant d'afficher un ombrage des textes sur internet explorer (version < 9 car cette propriété est enfin intégrée), similaire à l'ombrage text-shadow css3.

Principe de fonctionnement

lorsqu'on applique le plugin à un élément (ex : <span>mon texte</span>), si on est sur IE < v9 on clone ce texte et on affiche son clone dessous, dans une position décalée et de façon floue (propriété DXImageTransform.Microsoft.Blur) ; pour les autres navigateurs, on ne fait qu'ajouter la propriété text-shadow à cet élément.

Utilisation

<html><body>
    <p class="pastelShadow">mon texte ombré</p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="PastelShadow.js"></script>
    
    <script type="text/javascript">
        jQuery(window).ready(function(){
            jQuery(".pastelShadow").PastelShadow(
                {
                    x: 3,
                    y: 3,
                    blur: 5,
                    color: "#333"
                }
            );
        });
    </script>
</html></body>

Exemple

Téléchargement

Télécharger le plugin PastelShadow.js

Compatibilité

Tous les navigateurs sauf Safari version < 2, Opera version < 9.4 et Firefox version < 3.0

Image Flow

Inspiré du cover flow d'apple. Gère les touches clavier et la molette.

Space Gallery

Passe à l'image suivante en cliquant dessus avec un fondu et agrandissement.

Gallery View

Nombreux paramètres, plusieurs affichages possibles :

caroussel

lighbox

Easy Slider

Une seule transition : glissement de l'image.

Très simple, configurable par css

Jquery Cycle

De nombreuses transitions entre les photos, assez originales.
On ne voit qu'une photo à la fois.

SuperSized

Plein écran

JQZoom

Zoom en déplaçant la souris

CrossSlide

Déplacements par zoom dans l'image ou kenburn + transitions par fondus

HighSlide

Ouvre la galerie dans une boite modale en cliquant sur une image. Possibilité de lancer un slideshow.

Très nombreux paramétrages : voir l'éditeur.

Gère aussi toutes sortes de boite modale pour y afficher de l'innerHTML, ajax, iframe et flash.

Photo Stack

Affiche des catégories d'images, et quand on clique sur une ça ouvre le "paquet" d'images correspondante. Transitions sympa entre les catégories et entre les images.

Voir la démo

Thumbnail-Scroller

Les images défilent horizontalement ou verticalement, en fonction de la localisation du curseur de la sourie et de façon progressive.

Pas de gestion d'agrandissement de la photo, il faut rajouter une floatbox.

Voir la démo

Full Page Image Gallery

Comme SuperSized, cette galerie affiche les photos en plein écran.

Mais en plus, les miniatures sont affichées en bas.

Ici, les photos sont affichées dans leur taille maximale, et on se déplace dans la photo (qui est plus grande que l'écran) en bougeant la souris.

SideWays

Un peu comme Full Page Image Gallery, sauf que la taille des images s'adapte à la résolution de l'écran.

Les miniatures sont à gauche et le panneau se rétracte pour afficher la photo en grand.

Ajax-Zoom (propriétaire)

Barre d'outils très complète pour pouvoir zoomer sur une photo.

Peut s'intégrer dans un CMS de boutique en ligne.

Pas 100% gratuit (voir conditions sur leur site).

Polaroid Photobar Gallery

Gestion de plusieurs albums photos, présentés comme ci-dessus avec des miniatures pêle-mêles, qui tournent et se soulèvent au passage de la souris.

Slider Gallery

Les miniatures sont affichées horizontalement. On peut scroller et cliquer sur les images pour les agrandir.

Slides

Pas de thumbnail, juste des images qui défilent de façon très simple avec possibilité de passer de l'une à l'autre. Peu d'effets disponibles.