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
//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
<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
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