vanilla

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

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/

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

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