Editer

Ajax :



function X() { //création d'un objet pour XMLHttpRequest var xhr; try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e2) { try { xhr = new XMLHttpRequest(); } catch (e3) { xhr = false; } } } xhr.onreadystatechange = function() { if(xhr.readyState == 4) { if(xhr.status == 200){ //si on a récupéré quelque chose on l'affiche dans une alert alert(xhr.responseText); } else{ document.ajax.dyn="Error code " + xhr.status; } } }; //demande quelque chose à la page XXX.php xhr.open( "GET", "XXXX.php", true); xhr.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"); xhr.send(null); }



Récupérer les coordonnés de la souris :


e.clientX avec firefox, event.clientX avec IE.

<script language="JavaScript1.2"> //on assigne la fonction getMouseXY si la souris est bougé sur le document document.onmousemove = getMouseXY; function getMouseXY(e) { mouseX=0; mouseY=0; if(e){ //si argument passé, pas IE mouseX=e.clientX ; mouseY=e.clientY ; } else { //sinon, ie, donc event mouseX=event.clientX ; mouseY=event.clientY ; } document.getElementById('vaisseau').style.top=mouseY ; document.getElementById('vaisseau').style.left=mouseX ; } </script> //l'image qui suit la souris <img src="vaisseau.jpg" id="vaisseau" style="position:absolute;">


document.onclick


"document.onclick = fonction;" Signifie que si on clique, on fera le contenu de fonction.

"document.onclick = fonction();" Signifie que si on clique, on fera la fonction retournée par "fonction".

Pour passer un argument, ça sera :

document.onclick = function (evt) { fonction('arg'); };

document.write


Pose problème quand est appelé une fois la page chargé, il efface tout.
Il existe document.body.insertAdjacentHTML('beforeEnd',"Hello"); comme alternative.

document.body.insertAdjacentHTML

Soustraire une seconde à une date UTC


var e=new Date();
var e = new Date(new Date().getTime() -60000);
document.write(e.toUTCString());


Taille de l'écran


function largeur() { return screen.width } function hauteur() { return screen.height }


Script au démarrage


Pour lancer le script au tout début du chargement de la page, il suffit de l'appeler directement.

Mais souvent on a besoin que la page soit chargée, surtout pour récupérer des éléments :

window.onload = function() { alert(document.getElementById("monElement")); };


Un pop in en html


Mais autant utiliser prompt() en javascript....

#divFondPopIn{ position:fixed; padding:0; margin:0; top:0; left:0; width: 100%; height: 100%; background:#000000; opacity:.70; filter: alpha(opacity=70); } #divCadrePopIn{ background:#FFFFFF; padding:1em; position:fixed; top:40%; left:40%; } #boutonsOkAnnulerPopIn{ float:right; }



<div id="divFondPopIn"></div> <div id="divCadrePopIn"> <form action="action_page.php"> Nom du nouvel écran ?:<br> <input type="text" name="nom_ecran" value="Ecran"><br> <br> <span id="boutonsOkAnnulerPopIn"><input type="submit" value=" Créer l'écran "> <input type="button" value=" Annuler "></span> </form> </div>


Redimensionner des iframes selon leur contenu


Il faut déjà s'assurer que la page qu'on va appeler dans l'iframe se redimensionne correctement lorsqu'on change la taille du navigateur.
Pour ça, ne pas oublier de définir des tailles pour tous les éléments parents (body, html, puis les div jusqu'au div qu'on veut redimensionner, car si on demande "20%" à un div en position relative dont le parent n'a pas de taille définie, il ne saura pas faire).


window.onload = function() { var tableau_iframe_element = document.getElementsByClassName("iframe_element"); for(var i = 0; i < tableau_iframe_element.length; i++) { tableau_iframe_element[i].style.height = (tableau_iframe_element[i].parentNode.offsetHeight * (100-8))/100+'px'; tableau_iframe_element[i].style.width = (tableau_iframe_element[i].parentNode.offsetWidth * (100-1))/100+'px'; tableau_iframe_element[i].contentWindow.location.reload(true); } };


setTimeout avec argument



setTimeout(function() { redimensionner_iframe('iframe'+event.target.id.substring(3)); }, 500);


Envoyer du JSON en Ajax avec Jquery



$.ajax({ type: 'POST', url: 'index.php?sauver_affichage_ecran_num=<?=$page_actuelle->get_id_ecran() ?>', data: {elements_que_l_on_veut_envoyer:mon_super_json}, success: function(msg) { alert(msg); } });


Augmenter la police d'un select



.contactselect option:checked { background: #ffb7b7; /* WebKit/Blink Browsers */ font-size:4em; }