[{"ID":"0D1406AB-78BF-40DE-A758-28013ADB40A8","title":"filtrer les caract\u00e9res interdits pour un fichier","tags":"astuce fonctions javascript vanilla","date":"28\/11\/2025","timestamp":"1764324086","rss_date":"Thu, 01 Jan 1970 01:00:00 +0100","status":"public","dependency":"VanillaJS","source":"","content":"\/\/ filtre tous les inputs ayant l'attribut alphanum-only\r\n\r\n\ton(\"input\",\"[alphanum-only]\",function(e){\r\n\t\tlet obj=e.target;\r\n\t\tlet cursor_position=obj.selectionStart;\r\n\t\tobj.value=obj.value.replace(new RegExp(\/[^a-zA-z0-9\\-_ ]\/g), \"\");\r\n\t\tobj.selectionStart=cursor_position;\r\n\t\tobj.selectionEnd=cursor_position;\r\n\t});"},{"ID":"0CF35A88-E847-40E5-B248-2F1C0C2616AC","title":"get asynchrone avec retour (avec les promises)","tags":"ajax fonctions javascript vanilla","date":"21\/11\/2017","timestamp":"1511244874","rss_date":"Tue, 21 Nov 2017 07:14:34 +0100","status":"public","dependency":"","source":"https:\/\/www.supinfo.com\/articles\/single\/5640-programmation-asynchrone-javascript","content":"function getHTTP(url) {\r\n    return new Promise(function (resolve, reject) {\r\n        var xhr = new XMLHttpRequest();\r\n        xhr.open(\"GET\", url);\r\n        xhr.onload = function() {\r\n            if (this.status >= 200 && this.status < 300) {\r\n                resolve(xhr.response);\r\n            }\r\n        };\r\n        xhr.open(\"GET\", url);\r\n        xhr.send();\r\n    });\r\n}\r\n\r\ngetHTTP(\"https:\/\/www.google.fr\")\r\n.then(function (response) {\r\n    \/\/ On r\u00e9cup\u00e8re le resultat de la requ\u00eate dans la varible \"response\"\r\n    console.log(response)\r\n})"},{"ID":"D05351FA-7E24-4FF7-BCBD-2914D040453E","title":"Drag & drop pour poser un objet o\u00f9 on veut sur la page","tags":"html javascript vanilla","date":"07\/06\/2017","timestamp":"1496827544","rss_date":"Wed, 07 Jun 2017 11:25:44 +0200","status":"public","dependency":"","source":"","content":"\/\/JS \r\nfunction drag_start(event) {\r\n    var style = window.getComputedStyle(event.target, null);\r\n    event.dataTransfer.setData(\r\n    \t\"text\/plain\",\r\n    \t  (parseInt(style.getPropertyValue(\"left\"),10) - event.clientX) + ',' \r\n    \t+ (parseInt(style.getPropertyValue(\"top\"),10) - event.clientY)+','\r\n    \t+ event.target.id\r\n    );\r\n\r\n} \r\nfunction drag_over(event) { \r\n    event.preventDefault(); \r\n    return false; \r\n} \r\n\r\n\r\non('dragstart','[draggable]',drag_start,false); \r\ndocument.body.addEventListener('dragover',drag_over,false); \r\ndocument.body.addEventListener('drop',function(event){\r\n\tvar offset = event.dataTransfer.getData(\"text\/plain\").split(',');\r\n    \r\n    icon \t\t\t\t=document.getElementById(offset[2]);console.log(icon);\r\n    \/\/icon.style.position =\"absolute\";\r\n    icon.style.left \t=(event.clientX + parseInt(offset[0],10)) + 'px';\r\n    icon.style.top \t\t=(event.clientY + parseInt(offset[1],10)) + 'px';\r\n    event.preventDefault();\r\n    return false;\r\n},false); \r\n\r\n\r\n\/*CSS*\/\r\n\r\n[draggable]{\r\n\twidth:65px;\r\n\theight:65px;\r\n\t\r\n\tz-index: 999;\r\n\tposition:relative;\r\n}"},{"ID":"29EDA837-8AE1-4CE8-B34E-CAEAC2DFD4BA","title":"un switcher d'image \u00e0 base de target trick","tags":"astuce css html vanilla","date":"13\/10\/2016","timestamp":"1476391052","rss_date":"Thu, 13 Oct 2016 22:37:32 +0200","status":"public","dependency":"","source":"http:\/\/youmightnotneedjs.com\/","content":"<div id=\"slider\">\r\n\r\n  \t<!-- Slide Images -->\r\n\t<img id=\"slide-1\" src=\"img1.jpg\" alt=\"img description\"\/>\r\n  \t<img id=\"slide-2\" src=\"img2.jpg\" alt=\"img description\"\/>\r\n  \t<img id=\"slide-3\" src=\"img3.jpg\" alt=\"img description\"\/>\r\n  \t<img id=\"slide-4\" src=\"img4.jpg\" alt=\"img description\"\/>\r\n\t\r\n\t<!-- Navigation for the slides -->\r\n\t<ul>\r\n\t\t<li><a href=\"#slide-1\">1<\/a><\/li>\r\n\t\t<li><a href=\"#slide-2\">2<\/a><\/li>\r\n\t\t<li><a href=\"#slide-3\">3<\/a><\/li>\r\n\t\t<li><a href=\"#slide-4\">4<\/a><\/li>\r\n\t<\/ul>\r\n<\/div>\r\nSCSS\r\n#slider {\r\n  img {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 300px;\r\n    height: 200px;\r\n    \r\n    &:target {\r\n      transition: all .5s ease-in-out;\r\n    }\r\n    \r\n    &:not(:target), \r\n    &:target ~ img#slide-4  {\r\n      position: relative;\r\n      opacity: 0;\r\n    }\r\n\r\n    \/\/ set initially visible\r\n    &#slide-4 {\r\n      position: absolute;\r\n      opacity: 1;\r\n     }\r\n  }\r\n}"},{"ID":"6B1C034A-121C-47C4-A156-BED6E9CBBEDB","title":"fonction trigger pour d\u00e9clencher un \u00e9v\u00e8nement","tags":"vanilla evenements javascript","date":"15\/07\/2015","timestamp":"1436966360","rss_date":"Wed, 15 Jul 2015 15:19:20 +0200","status":"public","dependency":"","source":"http:\/\/warriordudimanche.net","content":"       if (typeof obj=='string'){obj=document.getElementById(obj);}\r\n            if (window.CustomEvent) {\r\n              var event = new CustomEvent(ev, {detail: {some: 'data'}})\r\n            } else {\r\n              var event = document.createEvent('CustomEvent')\r\n              event.initCustomEvent('ev', true, true, {some: 'data'})\r\n            }\r\n\r\n            obj.dispatchEvent(event)\r\n        }"}]