Archive pour la catégorie ‘css’

Comment charger un fichier css en ajax avec jquery ?

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 : plugin jquery pour afficher un ombrage de texte (css3 text-shadow) sur internet explorer

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

mon texte ombré


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

Retourner au début

Blog Pastel.pro

Ce blog est destiné à partager notre expérience sur la conception de sites web (programmation, design, référencement, ...) aux webmasters. Chaque sujet présente l'essentiel, avec un minimum de texte.

Partager ce blog