AndrewSavetchuk/-index.md

## -index.md

      
      Raw
    
  
              -index.md
            
          
JavaScript Snippets (Outdated)
Table of Contents

Insert Script Tags into HTML
Check if the Browser Is Internet Explorer
Check if the Mobile Operating System
Replace Cyrillic characters with Latin characters
Handle the Click Event on Dynamically Created Elements (jQuery)
Disabled Drag for Images and Links (jQuery)
Fire a Callback When the Image Is Loaded (jQuery)
Force Viewport Width if Device Width Is Less Than N (jQuery)


## 1.md

      
      Raw
    
  
              1.md
            
          
    Insert Script Tags into HTML
This function will insert the script tags into the <head></head>.
Scripts marked as defer are executed after the DOM parsing is complete in the order in which they are defined in the markup. If you need to load the scripts immidiately (after inserting), remove this line: script.defer = true.
However, you should be careful when placing your scripts into the <head></head> without async or defer.
function insertScript(src) {
    const script = document.createElement('script');
    script.src = src;
    script.async = false;
    script.defer = true;
    document.head.appendChild(script);
}

addScript('1.js'); // 1. This script will start loading immediately.
addScript('2.js'); // 2. This script will be executed as soon as the first one is loaded.
addScript('3.js'); // 3. This is guaranteed to be in order 1 -> 2 -> 3.

  
## 2.md

      
      Raw
    
  
              2.md
            
          
    Check if the Browser Is Internet Explorer
Fortunately, we don't need to do this anymore, the function is here for historical purposes.
function isIE() {
    const ua = navigator.userAgent.toLowerCase();
    return ua.indexOf('msie') !== -1;
}

  
## 3.md

      
      Raw
    
  
              3.md
            
          
    Check if the Mobile Operating System
function getMobileOperatingSystem() {
    const ua = navigator.userAgent || navigator.vendor || window.opera;

    // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(ua)) {
        return "Windows Phone";
    }

    if (/android/i.test(ua)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(ua) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
}

  
## 4.md

      
      Raw
    
  
              4.md
            
          
    Replace Cyrillic characters with Latin characters
function replaceCyrillic(str) {
    let output = str;

    const cyr = [
        'а','б','в','г','д','е','ё','ж','з','и','й','к','л','м','н','о','п',
        'р','с','т','у','ф','х','ц','ч','ш','щ','ъ','ы','ь','э','ю','я',
        'А','Б','В','Г','Д','Е','Ё','Ж','З','И','Й','К','Л','М','Н','О','П',
        'Р','С','Т','У','Ф','Х','Ц','Ч','Ш','Щ','Ъ','Ы','Ь','Э','Ю','Я',
    ];

    const lat = [
        'a','b','v','g','d','e','io','zh','z','i','y','k','l','m','n','o','p',
        'r','s','t','u','f','h','ts','ch','sh','sht','a','i','y','e','yu','ya',
        'A','B','V','G','D','E','Io','Zh','Z','I','Y','K','L','M','N','O','P',
        'R','S','T','U','F','H','Ts','Ch','Sh','Sht','A','I','Y','e','Yu','Ya',
    ];
    
    
    for (let j = 0; j < cyr.length; j++) {
        output = output.replace(cyr[j], lat[j]);
    }
    
    return output;
}

console.log(replaceCyrillic('Тестовая строка')); // => 'Testovaya стrоkа'

  
## 5.md

      
      Raw
    
  
              5.md
            
          
    Handle the Click Event on Dynamically Created Elements (jQuery)
In the example below, the .class element is a dynamically created element.
$('body').on('click', '.class', function() {
    // do something
});

  
## 6.md

      
      Raw
    
  
              6.md
            
          
    Disabled Drag for Images and Links (jQuery)
The example below is deprecated, the function is here for historical purposes.
Nowadays, we can now use the CSS property user-drag: none;
function disableDrag() {
    $("img, a").on("dragstart", function(event) {
       event.preventDefault();
    });
}

  
## 7.md

      
      Raw
    
  
              7.md
            
          
    Fire a Callback When the Image Is Loaded (jQuery)
$('img').each(function() {
    const img = new Image();
    
    img.onload = function() {
        console.log($(this).attr('src') + ' - loaded!');
    }
    
    img.src = $(this).attr('data-src'); // This can be used for lazy-loading
});

  
## 8.md

      
      Raw
    
  
              8.md
            
          
    Force Viewport Width if Device Width Is Less Than N (jQuery)
function forceViewportSize() {
    var viewport = $('meta[name="viewport"]');
    
    if (screen.availWidth < 480) {
        viewport.attr("content", "width=320, user-scalable=no");
    } else {
        viewport.attr("content", "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no");
    }
}

$(document).ready(function() {
    forceViewportSize();
});

$(window).on('resize', function() {
    forceViewportSize();
});

$(window).on("orientationchange", function() {
    forceViewportSize();
});