Catégorie : JavaScript

jQuery et WordPress

fb Laisser un commentaire

Pour utiliser jQuery dans un thème WordPress, on peut :

– Soit activer la bibliothèque jQuery intégrée à WordPress, si elle n’est pas déjà activée dans le thème utilisé, avec la commande suivante :
wp_enqueue_script('jquery');
puis utiliser le sélecteur jQuery au lieu de $ (du fait de l’activation du mode « noConflict » dans la bibliothèque jQuery de WordPress) (v. un exemple ici).

– Soit appeler jQuery depuis une autre source en ligne ou sur une installation personnelle (p. ex. dans le thème personnalisé – v. cet article d’Alsacréations).

PNG transparent – problèmes avec Internet Explorer

fb Laisser un commentaire

Les PNG transparents sont normalement reconnus par IE7 et IE8. Si un problème d’affichage survient (la couche Alpha étant couverte par un aplat noir ou gris, comme avec IE6) il faut vérifier si un attribut CSS d’opacité n’est pas appliqué à l’image. Tout attibut/filtre d’opacité (filter: alpha(opacity = 100)) doit être supprimé.

Attention : l’attribut d’opacité peut provenir d’un script JavaScript.

Il existe une méthode pour corriger ce problème : www.jacklmoore.com/notes/ie-transparency-problems

 

Lancement d’un script à la fin du chargement de la page

fb Laisser un commentaire

Pour qu’un script soit exécuté après le chargement complet d’une page HTML, il faut utiliser window.onload plutôt que <body onload="….

Exemple de script :

window.onload = function() {
function foo() {
alert("test");
}
setInterval(foo, 500);
}

Source (utile !) : http://stackoverflow.com/questions/2162267/setinterval-and-window-onload-problem

Remarque : window.onload ne peut être appelé qu’un seule fois, mais des solutions (JQuery…) permettent de lancer plusieurs scripts.

Des exemples (non testés) :

Mention spéciale : selfhtml.org

fb Laisser un commentaire

Il y a des ouvrages comme ça qui deviennent incontournables, qui deviennent des références.

Il ne me semble pas que selfhtml.org soit aussi souvent cité qu’il le mériterait, et pourtant… Je tenais en tout cas à rédiger cette petite mention spéciale pour le site selfhtml.org.

Ce site est une mine, notamment  pour l’apprentissage de JavaScript et des CSS mais aussi du HTML et de quelques autres domaines techniques. Le travail de Stefan Münz et Serge François est colossal et d’autant plus remarquable que totalement bénévole. Un grand merci à eux (à titre posthume hélas pour Serge François).

Le site est en outre téléchargeable est consultable en local – très pratique – et c’est pour moi une documentation essentielle, toujours à portée de clic, depuis quelques années et qui le restera encore longtemps je pense. Je dirais que 90 % de ce que j’ai appris de JavaScript et des CSS provient de selfhtml.org.

Variables globales et locales

fb

référence : http://fr.selfhtml.org/javascript/langage/variables.htm#definir

variables locales : ne sont disponibles que dans la fonction courante

variables globales : sont disponibles pour toute la page et pour toutes les fonctions

  • Une variable déclarée par var à l’intérieur d’une fonction est une variable locale ; elle ne sera disponible que dans la fonction dans laquelle elle a été déclarée.
  • Une variable non déclarée par var à l’intérieur d’une fonction sera globale.
  • Une variable déclarée (précédée ou non de var) à l’extérieur d’une fonction sera toujours globale.

remarque : une variable non déclarée par var peut perturber/bloquer un script si aucune valeur ne lui est assignée

exemple :

<script type="text/javascript">
var nord_est;
sud_est = "suret";

function question() {
var sud_ouest;
nord_ouest = "noroît";

reponse = prompt("Ça souffle du nord-est, c'est le… ?","");
if(reponse == "nordet") { alert("exact"); } else { alert("Êtes-vous bien sûr ?… Une autre réponse était attendue."); }
}
</script>
  • Les variables nord_est, sud_est, nord_ouest et reponse sont globales ; la variable sud_ouest est locale.
  • Les variables sud_est et nord_ouest ont une valeur pré-définie, sans quoi le script risque de ne pas fonctionner correctement.

Texte défilant

fb Laisser un commentaire

voir ou générer un script sur www.editeurjavascript.com

Attention : le script brut de sortie peut être à nettoyer  ! (vérifier quotes, syntaxe, balises…)

un exemple du code généré :


<style type="text/css">
.ejs_scroll {
font-size:11px;
font-family:Verdana;
color:#000000;
text-decoration:none
}
</syle>

<script type="text/javascript">

/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/

ejs_scroll_largeur = 400;
ejs_scroll_hauteur = 200;
ejs_scroll_bgcolor = '#FFFFFF';
/* Mettre ici le chemin de l'image de fond */
ejs_scroll_background = "";
/* Mettre ici le temps en secondes */
ejs_scroll_pause_seconde = 5;

ejs_scroll_message = new Array;

ejs_scroll_message[0]='<a class="ejs_scroll" href="http://www.fb-graphic.com">Lien vers un site</a>'
ejs_scroll_message[1]='<a class="ejs_scroll" href="http://www.fb-graphic.fr">Un autre site</a>';
function d(texte)
{
document.write(texte);
}

d('<div id="ejs_scroll_relativ" style="position:relative;width:'+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+ejs_scroll_bgcolor+';background-image:url('+ejs_scroll_background+'">');
d('<div id="ejs_scroll_cadre" style="position:absolute;width:'+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">');
d('<div id="ejs_scroller_1" class="ejs_scroll" style="position: absolute; left: 0pt; top: 0pt;">'+ejs_scroll_message[0]+'</div>');
d('<div id="ejs_scroller_2" class="ejs_scroll" style="position: absolute; left: 0pt;">'+ejs_scroll_message[1]+'</div>');
d('</div></div>');

ejs_scroll_mode =1;
ejs_scroll_actuel = 0;

function ejs_scroll_start()
{
if(ejs_scroll_mode == 1)
{
ejs_scroller_haut = "ejs_scroller_1";
ejs_scroller_bas = "ejs_scroller_2";
ejs_scroll_mode = 0;
}
else
{
ejs_scroller_bas = "ejs_scroller_1";
ejs_scroller_haut = "ejs_scroller_2";
ejs_scroll_mode = 1;
}
ejs_scroll_nb_message = ejs_scroll_message.length-1;
if(ejs_scroll_actuel == ejs_scroll_nb_message)
ejs_scroll_suivant = 0;
else
ejs_scroll_suivant = ejs_scroll_actuel+1;
if(document.getElementById)
document.getElementById(ejs_scroller_bas).innerHTML = ejs_scroll_message[ejs_scroll_suivant];
ejs_scroll_top = 0;
if(document.getElementById)
setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)
}

function ejs_scroll_action()
{
ejs_scroll_top -= 1;
document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
setTimeout("ejs_scroll_action()",10)
else
ejs_scroll_stop()
}

function ejs_scroll_stop()
{
ejs_scroll_actuel = ejs_scroll_suivant;
ejs_scroll_start()
}

window.onload = ejs_scroll_start;
</script>