Blog code github javascript jquery Programming Software

Top 10 incredibly useful Javascript / Jquery code snippets ← ABrandao.com

Here’s my listing of 10 useful  JavaScript &  some Jquery code snippets.  The  code snippets under are pretty useful and discover myself reusing them repeatedly in all types of situations.  I have created full-page examples of those snippets, go seize them over at my Javascript Github Repo

Notice: For the examples the use Jquery   remember to embrace the CDN link to Jquery somewhere on the web page..

or download an area copy and seek advice from that. For more details on getting latest Jquery go here. https://code.jquery.com/

1. Jquery examine if a browser function exists.

Typically you need to implement a certain browser function, however it might be too new or not obtainable in all browsers, use this little useful script to verify first. Utilizing (featureName in Window)  returns true if the function is current in the browser.Sadly this isn’t a common answer, with certain options and some browsers implement this in a different way. In that case a more full answer is to use one thing like Modernizr JS.

2. JavaScript scroll to prime hyperlink.

This small piece of java script  code is used to navigate the consumer back to prime of the web page when they’re at the bottom of the page. Start by creating the HTML code for the button link itself. Full Web page Instance

Now full the corresponding JavaScript event handler.

// When the user scrolls down 30px from the top of the document, show the button var Btnypos=30; window.onscroll = function() ReturntoTop(); //attach the event handler

function ReturntoTop() document.getElementById(“BtnToTop”).style.display = “block”; else document.getElementById(“BtnToTop”).style.display = “none”;

// When the user clicks on the button, scroll to the top of the document function topFunction() document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

3. Jquery clear type values

Very often you must utterly clear a  long types values and reset it.

$(document).ready(function() $(‘#formID’)[0].reset(); );

4. JavaScript time into hh:mm:ss period time (time ago)

Typically you need to present the period of one thing as an alternative of simply its actual time. Right here’s a simple snippet that uses any milliseconds time into a human readable format.

5. Javascript Page outing on a timer

This can be a basic Javascript perform any very straightforward to implement. Using the SetInterval funciton you’ll be able to set what number of milliseconds (1000 ms =1 second) before a specific perform is triggered. In this instance a dialog immediate will seem afer 3 seconds.

setInterval( promptMe() , 3000); //displays an alert dialog every 3 seonds

6. Jquery Save and re-load Type values to Native Storage

For longer varieties  a pleasant function for visitors is to SAVE their values, in case the consumer re-freshens the page, presses the back button and doesn’t lose all their knowledge. Under is a relatively straightforward method using Jquery and Local Storage to save lots of and reload the values.

$.each( $('form input'), function() input_name = $(this).attr('id'); if (localStorage[input_name])

$(this).val(localStorage[input_name]); console.log("Restoring: "+input_name +" with "+localStorage[input_name] ) ;

);

/** SaveForm() saves ALL form data into LocalStorage */ function SaveForm()

$.each( $('#myformID :input'), function() input_name = $(this).attr('id'); localStorage[input_name ] = $(this).val(); console.log("Saving: "+input_name +" = "+ $(this).val() ) ;

);

Then someplace in the body of the just connect .bind(“change” code to seize any modifications within the type and save them immediately

Go seize the complete type instance here:  js_save_load_form.html

7. JavaScript seek for a worth in an array.

A standard JavaScript knowledge processing procedure is to look an array for a given value. Here’s a couple of examples for seek for array values or array objects.

eight. JavaScript forestall disable right-click to download pictures

Typically you need a simple , albeit not idiot proof since someone can take a display capture of the display to defeat this. For the informal use this will likely suffice. First begin by creating an image link with the right imgId identify


$('#imgId').bind('contextmenu', function(e) return false; );

9. Jquery get browser IP tackle

While this is sometimes executed with a server scripting language like PHP , it may also be completed on the shopper using somewhat Jquery AJAX magic and a supporting website on this case JSONIP.com or you may just position your personal in PHP as under.

$ip) );
exit;
?>

then type your net page, difficulty the decision.

$(document).ready(function () $.getJSON(“http://jsonip.com/?callback=?”, function (data) console.log(“Your Browser IP: “+data); alert(data.ip); ); );

10. pure plain JavaScript ajax / post call

Most folks revert to Jquery to make ajax calls, because of its neat and easy way to call ajax. But if you just need to do ajax without all the other library overhead that Jquery brings, in about 20 lines of code you can do pure JavaScript ajax calls.. In this case we’re making a call to some script.php and returning the ajax request into an element with id myDiv

else alert('something else other than 200 was returned');

;

xmlhttp.open("GET", "script.php", true); xmlhttp.send();

an alternate approach using  POST to a URL :


That’s it for now hopefully this ideas and snippets will make it easier to out and serve as a useful reference next time you could clear up one among these points. Be happy to share your personal code snippets or strategies within the comments under.


Recent Posts