Programster's Blog

Tutorials focusing on Linux, programming, and open source

Javascript Cheatsheet

Check if Element With ID Exists

With jquery...

if($("#" + name).length == 0) {
  //it doesn't exist
}

Get Whether Checkbox Ticked

Use jquery .is(':checked')

Execute Script When Document Loaded

$(document).ready()

You can chain these multiple times and all will execute. E.g.

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

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

Using pure javascript, you can use:

body.onload(doSomething());

This will execute when all of the body is loaded, but these cannot be "chained". You are setting the onload property of the body instead of adding more methods to a queue to be executed.

Fade Away Text On Click

The code below shows you how to have some text appear beside the mouse that will eventually fade away, when you click on something.

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
        </head>
    <body>
        <script type="text/javascript">
        
        // Track the mouse position and set it to global variables
        var g_mouseX = 0;
        var g_mouseY = 0;
        $(document ).on("mousemove", function( event ) {
            g_mouseX = event.pageX;
            g_mouseY = event.pageY;
        });
        
        function fadeAwayTextClickHandler(clickedElement, textToShow)
        {
            var alpha = 1;
            var startingLeft = g_mouseX + 20;
            var startingTop = g_mouseY - 20;
            
            var fadeAwayTextElement = document.createElement("p");
            fadeAwayTextElement = $(fadeAwayTextElement);
            fadeAwayTextElement.text(textToShow);
            fadeAwayTextElement.css("position", "absolute");
            fadeAwayTextElement.css("top", g_mouseY + "px");
            fadeAwayTextElement.css("left", startingLeft + "px");
            fadeAwayTextElement.css("z-index", 100);
            
            fadeAwayTextElement.css("color", "rgba(0,0,0, " + alpha + ")");
            $("body").append(fadeAwayTextElement);
            
            
            var difference = 0;
            var step = 1;
            var alphaStep = 0.02;
            
            var fader = function() {
                alpha -= alphaStep;
                difference += step;
                
                fadeAwayTextElement.css("color", "rgba(0,0,0, " + alpha + ")");
                var newTop = startingTop + difference;
                fadeAwayTextElement.css("top", newTop);
                
                if (alpha > 0)
                {
                    window.requestAnimationFrame(fader);
                }
                else
                {
                    fadeAwayTextElement.remove();
                }
                
            }
            
            window.requestAnimationFrame(fader);
        }
        </script>
        
        <a href="javaScript:void(0);" onclick="fadeAwayTextClickHandler(this, 'Copied!');"">advancedClickHandler</a>
        
    </body>
</html>

References