SnippetVamp

Parce que yen a marre de chercher ses bouts de code partout...



TODO 1 ajax 3 astuce 66 auto_ 2 bash 1 bootstrap 14 conversion 2 crossbrowser 3 css 48 debug 10 dothtaccess 1 effets 1 erreurs 1 evenements 2 fallback 1 fichiers 27 filter 1 fonctions 73 form 1 graphisme 11 html 39 javascript 39 jquery 26 lib 2 mail 1 markdown 2 mobile 2 parser 13 php 88 pluXML 4 python 10 responsive 8 securite 16 social 1 texte 16 vanilla 4

.

vanilla

get asynchrone avec retour (avec les promises)

function getHTTP(url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.onload = function() {
            if (this.status >= 200 && this.status < 300) {
                resolve(xhr.response);
            }
        };
        xhr.open("GET", url);
        xhr.send();
    });
}

getHTTP("https://www.google.fr")
.then(function (response) {
    // On récupère le resultat de la requête dans la varible "response"
    console.log(response)
})

ajax fonctions javascript vanilla

https://www.supinfo.com/articles/single/5640-programmation-asynchrone-javascript

<iframe width="100%" height="524" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5a13c4468e73d" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 21/11/2017

Drag & drop pour poser un objet où on veut sur la page

//JS 
function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData(
        "text/plain",
          (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' 
        + (parseInt(style.getPropertyValue("top"),10) - event.clientY)+','
        + event.target.id
    );

} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 


on('dragstart','[draggable]',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',function(event){
    var offset = event.dataTransfer.getData("text/plain").split(',');
    
    icon                 =document.getElementById(offset[2]);console.log(icon);
    //icon.style.position ="absolute";
    icon.style.left     =(event.clientX + parseInt(offset[0],10)) + 'px';
    icon.style.top         =(event.clientY + parseInt(offset[1],10)) + 'px';
    event.preventDefault();
    return false;
},false); 


/*CSS*/

[draggable]{
    width:65px;
    height:65px;
    
    z-index: 999;
    position:relative;
}

html javascript vanilla

<iframe width="100%" height="902" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=5937c60aa0610" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 07/06/2017

un switcher d'image à base de target trick

<div id="slider">

      <!-- Slide Images -->
    <img id="slide-1" src="img1.jpg" alt="img description"/>
      <img id="slide-2" src="img2.jpg" alt="img description"/>
      <img id="slide-3" src="img3.jpg" alt="img description"/>
      <img id="slide-4" src="img4.jpg" alt="img description"/>
    
    <!-- Navigation for the slides -->
    <ul>
        <li><a href="#slide-1">1</a></li>
        <li><a href="#slide-2">2</a></li>
        <li><a href="#slide-3">3</a></li>
        <li><a href="#slide-4">4</a></li>
    </ul>
</div>
SCSS
#slider {
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    
    &:target {
      transition: all .5s ease-in-out;
    }
    
    &:not(:target), 
    &:target ~ img#slide-4  {
      position: relative;
      opacity: 0;
    }

    // set initially visible
    &#slide-4 {
      position: absolute;
      opacity: 1;
     }
  }
}

astuce css html vanilla

http://youmightnotneedjs.com/

<iframe width="100%" height="938" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=57fff05088ed4" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 13/10/2016

fonction trigger pour déclencher un évènement

       if (typeof obj=='string'){obj=document.getElementById(obj);}
            if (window.CustomEvent) {
              var event = new CustomEvent(ev, {detail: {some: 'data'}})
            } else {
              var event = document.createEvent('CustomEvent')
              event.initCustomEvent('ev', true, true, {some: 'data'})
            }

            obj.dispatchEvent(event)
        }

vanilla evenements javascript

http://warriordudimanche.net

<iframe width="100%" height="362" src="http://snippetvamp.warriordudimanche.net/snippetvamp.php?embed=55a65d257c490" type="text/html"></iframe>

Texte seul - Permalink - Snippet public posté le 15/07/2015

Flux RSS de cette page


SnippetVamp 1.84 par Bronco - Page générée en 0.063 s