Friendsnippets

1. Création d'éléments HTML en JavaScript

   view plain - save this

   Création d'éléments HTML en JavaScript. Je viens de me rendre compte qu'on ne peux pas créer des objets avec l'"eventListener" en utilisant une boucle for par exemple et en récupérant un identifiant suivant la valeur de l'incrément de la boucle. Il faut obligatoirement récupérer l'identifiant du déclenchement avec "event", sinon il garde la dernière valeure de l'incrément de la boucle.

    1 /**
    2  * Ajouter un Evénement JS à un élément
    3  *
    4  * @access public
    5  * @return void
    6  **/
    7 function eventListener( elem, event, action ){
    8   if( elem.addEventListener ) {
    9     elem.addEventListener( event, action, false) ;
   10   } else if( elem.attachEvent ) {
   11     elem.attachEvent( "on" + event, action );
   12   } else { alert( 'Erreur de chargement.\nVotre navigateur n\'est pas supporté.' ); }
   13 }
   14 
   15 /**
   16  * Création d'un élément <IMG>
   17  */
   18 var elemImgExemple = document.createElement("img");
   19 elemImgExemple.id = "img1";
   20 elemImgExemple.alt = "Image exemple";
   21 elemImgExemple.src = "picture.png";
   22 elemImgExemple.style.width = "50px";
   23 elemImgExemple.style.height = "80px";
   24 elemImgExemple.setAttribute( "useMap", "#mapImg" );
   25 
   26 eventListener(elemImgExemple, "mouseover", function() { alert( 'hello world!' ); }
   27 eventListener(elemImgExemple, "mouseout", functionImage } // appel de la fonction functionImage();
   28 eventListener(elemImgExemple, "click", function(event) { idName = (document.all) ? event.srcElement.id : event.target.id; alert( idName ); }
   29 
   30 document.getElementById( 'elemParent' ).appendChild( elemImgExemple );
   

   first posted by cedeber to javascript event listener element ... saved by 2 persons ... 0 comments ... 1 year, 2 months

2. Coordonnées de la souris

   view plain - save this

   Coordonnées de la souris

    1 /**
    2  * Coordonnées de la souris
    3  */
    4 
    5 if( document.captureEvents && Event.MOUSEMOVE ) {
    6   //remove this part if you do not need Netscape 4 to work
    7   document.captureEvents( Event.MOUSEMOVE );
    8   document.captureEvents( Event.MOUSEOVER );
    9 }
   10 document.onmousemove = mouseCoord;
   11 
   12 var calque;
   13 var mousePosX = 0;
   14 var mousePosY = 0;
   15 
   16 function mouseCoord(e) {
   17   if( !e ) {
   18     if( window.event ) {
   19       //Internet Explorer
   20       e = window.event;
   21     } else {
   22       //total failure, we have no way of referencing the event
   23       return;
   24     }
   25   }
   26   if( typeof( e.pageX ) == 'number' ) {
   27     //most browsers
   28     var xcoord = e.pageX;
   29     var ycoord = e.pageY;
   30   } else if( typeof( e.clientX ) == 'number' ) {
   31     //Internet Explorer and older browsers
   32     //other browsers provide this, but follow the pageX/Y branch
   33     var xcoord = e.clientX;
   34     var ycoord = e.clientY;
   35     var badOldBrowser = ( window.navigator.userAgent.indexOf( 'Opera' ) + 1 ) ||
   36      ( window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1 ) ||
   37      ( navigator.vendor == 'KDE' )
   38     if( !badOldBrowser ) {
   39       if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
   40         //IE 4, 5 & 6 (in non-standards compliant mode)
   41         xcoord += document.body.scrollLeft;
   42         ycoord += document.body.scrollTop;
   43       } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
   44         //IE 6 (in standards compliant mode)
   45         xcoord += document.documentElement.scrollLeft;
   46         ycoord += document.documentElement.scrollTop;
   47       }
   48     }
   49   } else {
   50     //total failure, we have no way of obtaining the mouse coordinates
   51     return;
   52   }
   53   mousePosX = xcoord;
   54   mousePosY = ycoord;
   55 }
   

   first posted by cedeber to javascript mouse position ... saved by 2 persons ... 0 comments ... 1 year, 2 months

3. Requète AJAX et encodage JSON

   view plain - save this

   Requète AJAX. Encodage JSON en PHP

    1 /**
    2  * Script AJAX, traitement asynchrone
    3  */
    4 try {
    5   var request = new XMLHttpRequest();
    6   var url = uneurl.php?valeur=valeur1;
    7 
    8   request.open("GET", url, true);
    9   request.onreadystatechange = function () {
   10     if ((request.readyState == 4) && (request.status == 200)) {
   11       eval(request.responseText.toString());
   12       alert('Réponse : ' + result.reponse);
   13     }
   14   }
   15   request.send(null);
   16 } catch (e) { alert(e.message); }
   17 
   18 /**
   19  * Page PHP appelée par le JS
   20  */
   21 <?php
   22 $val = array("reponse" => 'hello world!',
   23   );
   24 
   25 echo "result = " . json_encode($val) . ";";
   26 ?>
   

   first posted by cedeber to javascript+php ajax json ... saved by 1 person ... 0 comments ... 1 year, 2 months

4. Défini les objets pour l'AJAX suivant les navigateurs.

   view plain - save this

   Défini les objets pour l'AJAX suivant les navigateurs.

    1 /**
    2  * Défini les objets pour l'AJAX suivant les navigateurs.
    3  **/
    4 if ((!window.XMLHttpRequest && window.ActiveXObject)) {
    5   window.XMLHttpRequest = function() {
    6     var result = null;
    7     try {
    8       result = new ActiveXObject("Msxml2.XMLHTTP");
    9     } catch (exc) {
   10       try {
   11         result = new ActiveXObject("Microsoft.XMLHTTP");
   12       } catch (exc) {}
   13     }
   14     return result;
   15   }
   16 }
   

   first posted by cedeber to javascript ajax xmlhttp ... saved by 1 person ... 0 comments ... 1 year, 2 months

5. Détection de la taille écran et défilement de la page.

   view plain - save this

   Pratique pour savoir le défilement de la page pour l'affichage de "calques" en DHTML.

    1 /**
    2  * Détecte la taille de l'écran
    3  *
    4  * @access public
    5  * @return void
    6  **/
    7 function getScreenSize() {
    8   var myWidth = 0, myHeight = 0;
    9   if( typeof( window.innerWidth ) == 'number' ) {
   10     //Non-IE
   11     myWidth = window.innerWidth;
   12     myHeight = window.innerHeight;
   13   } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
   14     //IE 6+ in 'standards compliant mode'
   15     myWidth = document.documentElement.clientWidth;
   16     myHeight = document.documentElement.clientHeight;
   17   } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
   18     //IE 4 compatible
   19     myWidth = document.body.clientWidth;
   20     myHeight = document.body.clientHeight;
   21   }
   22   return [myWidth, myHeight];
   23 }
   24 
   25 /**
   26  * Déplacement du défilement horizontal et vertical
   27  *
   28  * @access public
   29  * @return void
   30  **/
   31 function getScrollXY() {
   32   var scrOfX = 0, scrOfY = 0;
   33   if( typeof( window.pageYOffset ) == 'number' ) {
   34     //Netscape compliant
   35     scrOfY = window.pageYOffset;
   36     scrOfX = window.pageXOffset;
   37   } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
   38     //DOM compliant
   39     scrOfY = document.body.scrollTop;
   40     scrOfX = document.body.scrollLeft;
   41     } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
   42     //IE6 standards compliant mode
   43     scrOfY = document.documentElement.scrollTop;
   44     scrOfX = document.documentElement.scrollLeft;
   45   }
   46   return [ scrOfX, scrOfY ];
   47 }
   48 
   49 /**
   50  * Taille de la page avec le défilement
   51  *
   52  * @access public
   53  * @return void
   54  **/
   55 function getPageSizeWithScroll(){
   56   if (window.innerHeight && window.scrollMaxY) {// Firefox
   57     var yWithScroll = window.innerHeight + window.scrollMaxY;
   58     var xWithScroll = window.innerWidth + window.scrollMaxX;
   59   } else if (document.body.scrollHeight > document.body.offsetHeight){
   60     // all but Explorer Mac
   61     var yWithScroll = document.body.scrollHeight;
   62     var xWithScroll = document.body.scrollWidth;
   63   } else {
   64     // works in Explorer 6 Strict, Mozilla (not FF) and Safari
   65     var yWithScroll = document.body.offsetHeight;
   66     var xWithScroll = document.body.offsetWidth;
   67   }
   68   var arrayPageSizeWithScroll = new Array(xWithScroll,yWithScroll);
   69   return arrayPageSizeWithScroll;
   70 }
   

   first posted by cedeber to javascript scroll height ... saved by 1 person ... 0 comments ... 1 year, 2 months

Pages : 1