12 résultats taggé js

Invidio.us bookmarklet

Redirects a youtube page to an invidio.us one. Copy and paste this into the url field of a browser bookmark.

javascript:(window.location.href.includes("www.youtube"))?location.href=window.location.href.replace("www.youtube.com","www.invidio.us"):console.log('not a youtube page')

Chargement dynamique d'un Javascript en fonction de l'existence d'une classe dans le DOM

function isAnyClassOutThere(class,tag){
   // On transforme le string passé en paramètre en une expression régulière
   //(sans cela, test() ne retournera rien)
   var regExpClass = new RegExp(class);

   // S'il n'y avait pas de tag passé en paramètre, on considère que l'on regarde
   // tous les tags
   var tag = tag || "all";
   var elm = (tag == "all") ? document.all : document.getElementsByTagName(tag);

   var result = false;

   // Pour chaque élément que l'on a récupéré dans elm
   for(var i=0; i < elm.length; i++){

      // On test la correspondance
      if(regExpClass.test(elm[i].className)){
         result = true;

         // On sort de la boucle (pas très joli, mais évite de faire un return 
         // dans une boucle)
         i+=elm.length;
       }
   }

return result;
}
function loadJS(url){
   // On crée un élément script
   var elm=document.createElement("script");

   // On lui attribue une url
   elm.setAttribute("src", url);

   // On renseigne le type
   elm.setAttribute("type", "text/javascript");

   // Enfin, on l'ajoute en temps qu'enfant de l'élément head
   document.getElementsByTagName("head")[0].appendChild(elm);
}
window.onload=function(){
   if(isAnyClassOutThere("galerie", "ul")){
      loadJS("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
      loadJS("./gallery.js");
   }
}

Oubliez votre lien d'administration avec Javascript !

Appuyer 3 fois sur Entrée mènera au lien d'administration :

function keyboardAuth(redirection) {
    var enterCount = 0;

    //$(document).keypress(function(event){
    document.addEventListener("keypress", function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13'){
            enterCount++;
            if(enterCount >= 3){
                enterCount = 0;
                window.location = redirection;
            }
        setTimeout(function(){ enterCount = 0; },2000);
        }

    });
}

Scrolling doux vers une ancre

$('a[href*=#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 700); });

Un lien « Retour en haut » dynamique

<div class="relative">
    <div class="toTop">
        <a href="#top" title="Retour en haut">
            Retour en haut
        </a>
    </div>
</div>
<footer id="footer">
…
</footer>
.relative {
    position:relative;
}

.toTop {
    display:none;
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:1000;
}
function toTop(element,footer){
    var scroll = $(window).scrollTop();
    var maxScroll = $(window).height() * 0.4;

    if(scroll > maxScroll)
        $(element).show();
    else
        $(element).hide();

    if($(element).offset().top + $(element).height() >= $(footer).offset().top - 10)
        $(element).css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight < $(footer).offset().top)
        $(element).css('position', 'fixed');
}   

$(window).scroll(function() {
    toTop('.toTop',"#footer");
});

$(window).resize(function() {
    toTop('.toTop',"#footer");
});

Effet parallax avec jQuery

/*
* Adds a parallax effect to a background image
* (position:fixed;no-repeat;background-size:42%;)
*
* element : the element with a background image
* percent : percent of the background-size (0.42)
* height : height of the background image
* width : width of the background image
* factor : factor of speed (the lower the faster)
* reference : the element bottom-placed to get the total
*             height of the page
*
* author : Guillaume Litaudon  <guillaume.litaudon@gmail.com>
*/

function parallax(element,percent,height,width,factor,reference){
    var winWidth = $(window).width();
    var winHeight = $(window).height();

    var sizePercent = percent == 1 ? height : ((winWidth*percent)/width)*height;

    var maxScroll = -(sizePercent - winHeight);
    var speed = factor*($(reference).offset().top / winHeight);
    var yPos = -($(window).scrollTop() / speed);
    yPos = yPos >= 0 ? 0 : yPos;
    yPos = yPos >= maxScroll ? yPos : maxScroll;
    var coords = '0 '+ yPos + 'px';

    $(element).css({ backgroundPosition: coords });
}

function goGoParallaxEffect(){
    /* La taille dépend de si l'on est en-dessous
    * de pictureWidth ou non
    */
    var pictureHeight = 1080;
    var pictureWidth = 388;

    if($(window).width() > pictureWidth)
        parallax('#page',0.42,pictureWidth,pictureHeight,5,footer);
    else
        parallax('#page',1,pictureWidth,pictureHeight,5,footer);
}

$(window).scroll(function() {
    goGoParallaxEffect();
});

$(window).resize(function() {
    goGoParallaxEffect();
}); 

The Perfect URL Regular Expression

%^(?:(?:https?|ftp)://)(?:\S+(?::\S*)?@|\d{1,3}(?:\.\d{1,3}){3}|(?:(?:[a-z\d\x{00a1}-\x{ffff}]+-?)*[a-z\d\x{00a1}-\x{ffff}]+)(?:\.(?:[a-z\d\x{00a1}-\x{ffff}]+-?)*[a-z\d\x{00a1}-\x{ffff}]+)*(?:\.[a-z\x{00a1}-\x{ffff}]{2,6}))(?::\d+)?(?:[^\s]*)?$%iu
/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/
<‍input type="url" /‍>
SELECT field FROM table 
WHERE field 
REGEXP "^(https?://|www\\.)[\.A-Za-z0-9\-]+\\.[a-zA-Z]{2,4}

Snippets for Vanilla JS Coding

When coding in VanillaJS, I usually create shortcuts:

const D = document
const $ = D.querySelector.bind(D)
const $$ = (selector, elem = D) => elem.querySelectorAll(selector)

With that dollar functions, you can already use a syntax that is similar to jQuery:

$('#button').onclick = () => {
alert('You clicked me!')
}
$$('.button').map(btn => {
btn.style.backgroundColor = 'red'
})

When it comes to event handling, having an on method can be useful:

Array.prototype.on = function(type, listener, options) {
this.map(el => {
if (el instanceof Element) {
el.addEventListener(type, listener, options)
}
})
return this // for chaining
}
$$('.button').on('click', e => {
const btn = e.target
alert('You clicked ' + btn.textContent)
}).on('mouseover', e => {
const btn = e.target
btn.style.backgroundColor = 'red'
}).on('mouseout', e => {
const btn = e.target
btn.style.backgroundColor = 'blue'
})

Autorun Javascript

On page loaded:

function autorun() {
    // Your code here
}
if (window.addEventListener) window.addEventListener("load", autorun, false);
else if (window.attachEvent) window.attachEvent("onload", autorun);
else window.onload = autorun;

On DOM ready:

if (document.addEventListener) document.addEventListener("DOMContentLoaded", autorun, false);
else if (document.attachEvent) document.attachEvent("onreadystatechange", autorun);
else window.onload = autorun;

Export JSON to file using javascript

// Set export button
var exportButton = document.getElementById('button-export');

var dataStr = JSON.stringify(localLinks);
var dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
var exportFileDefaultName = 'data.json';

exportButton.setAttribute('href', dataUri);
exportButton.setAttribute('download', exportFileDefaultName);

localStorage javascript

;(function (window, document, undefined) {
    // Feature test for localStorage
    if(!('localStorage' in window)) return;
    // Get links
    var localLinks = localStorage.getItem('go--links');
    if (!localLinks) return;
    // The action
    var userButton = document.getElementById('button-user');
    userButton.classList.remove('hidden');
})(window, document);   

Three methods:

localStorage.setItem('global--night-mode', true);
localStorage.getItem('global--night-mode');
localStorage.removeItem('global--night-mode');

localStorage only supports strings. Use JSON.stringify() and JSON.parse().

var names = [];
names[0] = prompt("New member name?");
localStorage.setItem("names", JSON.stringify(names));

//...
var storedNames = JSON.parse(localStorage.getItem("names"));

Copy to the clipboard in JS

   // Code from http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript
    function copyTextToClipboard(text) {
        var textArea              = document.createElement("textarea");
        textArea.style.position   = 'fixed';
        textArea.style.top        = 0;
        textArea.style.left       = 0;
        textArea.style.width      = '2em';
        textArea.style.height     = '2em';
        textArea.style.padding    = 0;
        textArea.style.border     = 'none';
        textArea.style.outline    = 'none';
        textArea.style.boxShadow  = 'none';
        textArea.style.background = 'transparent';
        textArea.value            = text;

        document.body.appendChild(textArea);
        textArea.select();

        try {
          var successful = document.execCommand('copy');
          var msg = successful ? 'successful' : 'unsuccessful';
          console.log('Copying text command was ' + msg);
        } catch (err) {
          alert('La copie dans le presse-papier ne fonctionne pas sur ce navigateur.');
        }

        document.body.removeChild(textArea);
        return successful;
    }

Then, there is two ways:

onClick and input[type=text]

Your input:

<input type="text" value="foobar" onclick="copyThis('<?php echo $str; ?>', this); select()" />

Note that select() alone select all the content of the input text but is optional. Then:

function copyThis(text, item) {
        var success = copyTextToClipboard(text);
        if(success) {
            item.classList.add('copied');
            window.setTimeout(function(){
                item.classList.remove('copied');
            }, 750);
        }
    }

addEventListener

var element = document.getElementById('clipboard');
element.classList.remove('hidden'); // element is only showed when JS is available
element.addEventListener('click', function(e){
   e.preventDefault(); // Cancel the native event
   e.stopPropagation();// Don't bubble/capture the event
    success = copyTextToClipboard('<?php echo $str; ?>');
        if(success) {
            element.classList.add('copied');
            window.setTimeout(function(){
                element.classList.remove('copied');
            }, 750);
        }
 }, false);

The first one seems more versatile when using PHP, since you don't have to write the string inside a function at the bottom of a page/on another document. Of course we could use a data attribute ton store the string, and get used by the Event Listener.