7 Jquery / Javascript tricks every developer should know

7 Jquery / Javascript tricks every developer should know

Jquery

I wish I had known these Jquery / Javascript tricks when I first found myself in the field of development. This post assumes that you have a rudimentary understanding of HTML, Javascript and Jquery.

Do you know all of these?

Don’t forget to link to Jquery for these to work: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

1) Disable the default anchor tag (#) page jump

Have you ever had an empty anchor tag and wished that on the click or tap function you could avoid the web page jumping all the way to the top of the screen? Here’s how to fix it:

$('a.someclass').click(function(e) {
    // Cancels the default action
    e.preventDefault();
});

2) Fetch the window height and width of your screen on any device

vpHeight = $(window).height();
vpWidth = $(window).width();

// This will return the screen width and size on a resize event
$(window).resize(function () {
    vpHeight = $(window).height();
    vpWidth = $(window).width();
});

Now set your div block to fit the screen width and height:

vpHeight = $(window).height();
vpWidth = $(window).width();

$("YourDiv").height(vpHeight).width(vpWidth);

Don’t forget to repeat inside the resize function. This will fetch the height and width again after the window has been resized. Write a resize function if you want to avoid repetition:

$(document).ready(function(){
    ResizeScreenSizes();
    
    $(window).resize(function(){
        ResizeScreenSizes();
    });
});

function ResizeScreenSizes() {
    vpHeight = $(window).height();
    vpWidth = $(window).width();
    $("#YourDiv").height(vpHeight).width(vpWidth);
}

4) Make a div or iframe scroll-able on a tablet

This seems to be an issue synonymous with Ipads but it can happen on any device and can vary based on your circumstances. If you are battling to get your content to scroll, try this handy trick.

The parent div needs to have the following css attributes assigned to it:

-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;

5) Javascript onclick events that can make life much easier

<div onClick="window.location='https://URL';" class="yourclass"></div> // Opens location URL in same window

<div onClick="window.open(https://URL, Name);" class="yourclass"></div> // Opens location URL in different tab

<div onclick="history.back();" class="yourclass"></div> // Triggers the browser back button on the click event

<div onclick="history.forward();" class="yourclass"></div> // Triggers the browser forward button on the click event

6) Hide an element based on the text content

    $(".yourClass:contains('Home')").hide();

Ever had a specific element that you wanted to hide and there was no unique ID or identity assigned? This is a quick fix that will allow you to hide a specific class that contains a specific string of text. This example would hide an element with the class of “yourClass” that contains the word “Home”.

7) Keep the Copyright year current dynamically

If you have a custom designed html site, avoid having to manually update the the year in the © Copyright footer annually. Insert this code into your html footer:

&copy; <script type="text/javascript"><script type="text/javascript"> now = new Date theYear = now.getYear() if (theYear < 1900) theYear = theYear + 1900 document.write(theYear)</script>

Have you got any suggestions to add to my list?

Leave your ideas in the comment block below or drop me an email.

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *