Sahid Ferdjaoui Blog - Funraill Foundation Bienvenue, Log in - thème 2007 RC1

Powered by OpenSource Softwares

Outil de déboggage colaborative
reduire

Les selecteurs d’attribut en CSS3

le 16 septembre 2007 par sahid

Utiliser les sélecteurs en CSS pour embellir vos liens

Les sélecteurs de sous-chaine dans la valeur d’un attribut en CSS est une fonctionnalité particuliÚrement intéressant pour donner à vos liens ou autres éléments des styles particuliers sans pour autant avoir à utiliser une classe.

Syntaxe

  • element[att^=”chaine”] La valeur de l’attribut att commence par chaine
  • element[att$=”chaine”] La valeur de l’attribut att termine par chaine
  • element[att*=”chaine”] La valeur de l’attribut att contient au moins une fois chaine

Exemple d’utilisation

Voyons comment les sélecteurs peuvent être utiles pour vos liens

  1. a {
  2.         color:#444;
  3.         font-size:16px;
  4.         padding: 6px 0px  6px 36px;
  5. }
  6. /* liens vers … */
  7. a[href*=“php.net”] {
  8.         background:url(‘php.png’) no-repeat 0 50%;
  9. }
  10. a[href*=“wikipedia.org”] {
  11.         background:url(‘wikipedia.png’) no-repeat 0 50%;
  12. }
  13. /* images, videos etc…*/
  14. a[href$=“avi”], a[href$=“mpg”] {
  15.         background:url(‘video.png’) no-repeat 0 50%;
  16. }
  17. a[href$=“png”], a[href$=“jpg”] {
  18.         background:url(‘image.png’) no-repeat 0 50%;
  19. }
  20. /* mail */
  21. a[href^=“mailto:”]{
  22.         background:url(‘mail.png’) no-repeat 0 50%;
  23. }
  1. <a href=“http://fr.php.net/”>php.net</a> <!– etc … –>

CSS selectors

Bien sûr vous pouvez utiliser tous types d’attribut, src, alt, rel, title etc…
Pour une utilisation avancée des sélecteurs, vous pouvez vous réferer
au site de la W3C

les icones sont tirées du projet Freedesktop Tango

Tableau de bord

reduire

Formulaire en CSS la proprieté focus

le 7 mars 2007 par sahid

CSS et la proprietée focus

Bon, peut etre que je vais rien n’apprendre à personne, mais je me suis souvent demandé comment fesait certains sites pour changer le style de leurs balises CSS au moment ou le focus etait dessus…
d’apres moi ça venait d’un Javascript, alors j’ai donc cherché à me faire mon petit script…

input:focus, select:focus, textarea:focus …

En fait, pas besoin de scrypt JS, les balises CSS admettent la proprieté “focus”
et la tout c eclairé ( : …

Exemple d’un petit formulaire css

Style utilisé :

  1. <style type=“text/css”>
  2.         input, select, textarea {
  3.                 border-top:1px solid #666;
  4.                 border-left:1px solid #666;
  5.                 border-bottom:1px solid #ccc;
  6.                 border-right:1px solid #ccc;
  7.                
  8.         }
  9.         input:focus, select:focus, textarea:focus {
  10.                 background-color: #cddefd;
  11.                 border:1px solid #248;
  12.                 color:#f00;
  13.         }
  14.         </style>

Tableau de bord

reduire

Javascript/CSS Afficher ou masquer un element HTML avec GetElementByID

le 17 avril 2006 par sahid

Introdution à GetElementById

Le formulaire html, est un des seuls moyen d’intéractivité entre le visiteur et votre site internet, l’heure du Web 2.0 et de l’objet XMLHttpRequest est au rendez vous pour rendre vos formulaires attratifs, Mais avec de simples petits scripts on peut s’amuser à rendre notre formulaire plus fonctionnel.

Afficher un Element ou le masquer à partir d’une liste

Voir l’exemple “Afficher ou masquer un element HTML avec GetElementByID”

Code HTML

  1. <label>Que voulez-vous faire ?<br/>
  2.                 <select style=“width:265px;” id=“choix” onchange=“change()”>
  3.                         <option value=“affiche”>Afficher</option>
  4.                         <option value=“affiche_pas” selected=“selected”>Ne pas afficher</option>
  5.                 </select>
  6.         </label>
  7.         <label id=“hello” style=“display:none”>Tu affiches<br/>
  8.                 <input type=“text” value=“Hello World !” size=“40″/>
  9.         </label>

Pour cet exemple on se sert de la balise

  1. <label>

à laquelle on donne un id et un style css

  1. display:none

(on aurait bien pu utiliser n’importe quelle balise qui admet un atribut id), le style css

  1. display:none

permet de cacher l’élément

  1. <label>

.
Pour changer le style css de notre label portant l’id “hello”, on va créer une simple fonction javascript, et pour lancer cette fonction, on va utiliser la méthode

onchange

sur une simple liste html portant id “choix”.

Notre fonction javascript

  1. <script type=“text/javascript”>
  2. function change(){           
  3.         var choix = document.getElementById(‘choix’);
  4.         if(choix.value == ‘affiche_pas’){
  5.                 document.getElementById(‘hello’).style.display = ‘none’;
  6.         }
  7.         if(choix.value == ‘affiche’){
  8.                 document.getElementById(‘hello’).style.display = ‘block’;
  9.         }
  10. }
  11. </script>

En premier on récupÚre la valeur envoyée par notre liste, on la compare.
Si la valeur envoyée est égale à “afficher”, on change le style de notre label portant l’id “hello” à la volée en utilisant une fois de plus GetElementById

  1. document.getElementById(‘hello’).style.display = ‘block’;

Ceci n’est qu’un simple exemple, on pourrait valider les champs de nos formulaires en affichant une image “valide” Ã chaque champs rempli correctement, ou encore changer le style de la balise

  1. input

, quand celle-ci est remplie correctement.

Tableau de bord