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

Author

Programster

Stuart is a software developer with a passion for Linux and open source projects.

comments powered by Disqus