enavu webdevmania tutsvalley psdestination
visit the enavu network
16 Comments Article Title Overlay

10 Awesome jQuery and JavaScript Snippets

Awesome collection of jQuery and JavaScript snippets. Enjoy.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

Make HTML5 work in older IE browsers

(function(){if([email protected]_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

You can also link to the original javascript file.


Detect browser

eval(function(p,a,c,k,e,d){e=function(c){return(c

Usage

var browser = $.browser.browser();

For more info check jQBrowser.

Display last tweet

$.getJSON("http://twitter.com/statuses/user_timeline/username.json?callback=?", function(data) {
     $("#twitter").html(data[0].text);
});

Reference URL.

Load jQuery only if it's not already loaded

var jQueryScriptOutputted = false;
function initJQuery() {

    //if the jQuery object isn't available
    if (typeof(jQuery) == 'undefined') {

        if (! jQueryScriptOutputted) {
            //only output the script once..
            jQueryScriptOutputted = true;

            //output the script (load it from google api)
            document.write("");
        }
        setTimeout("initJQuery()", 50);
    } else {

        $(function() {
            //do anything that needs to be done on document.ready
        });
    }

}
initJQuery();

Reference URL.

Get mouse coordinates inside a box

$(function() {
$("#demo-box").click(function(e) {

  var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);

  alert("X: " + relativeX + "  Y: " + relativeY);

});
});

Reference URL

Random HEX color

'#'+Math.floor(Math.random()*16777215).toString(16);

Reference URL

Do ... to an element when it comes into the view by scrolling

$(document).ready(function() {
    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    }

    var myelement = $('#formcontainer'); // the element to act on if viewable
    $(window).scroll(function() {
        if(isScrolledIntoView(myelement)) {
            // do something when element is scrolled to and viewable
        } else {
            // do something when element is not viewable
        }
    });
});

Reference URL

Email validation

function checkMail(email){
	var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	if (filter.test(email)) {
		return true;
	}
	return false;
}

Reference URL

Verticaly center an image inside it's parent

$(window).load(function(){
    var parent_height = $('#the_image').parent().height();
    var image_height = $('#the_image').height();
    var top_margin = (parent_height - image_height)/2;
    $('#the_image').css( 'margin-top' , top_margin);
});

Reference URL

Open external links in new window

$('a').each(function() {
   var a = new RegExp('/' + [removed].host + '/');
   if(!a.test(this.href)) {
       $(this).click(function(event) {
           event.preventDefault();
           event.stopPropagation();
           window.open(this.href, '_blank');
       });
   }
});

That's it, i hope you like my selection of jQuery and javascript snippets.

Related posts:

  1. Working with cookies using jQuery and JavaScript
  2. Top 10 HTML Snippets
  3. Top 10 jQuery Snippets (including jquery 1.4)
  4. Associative Arrays – jQuery style JavaScript Functions
  5. Disabling right mouse click menu with jQuery

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • About the “Make HTML5 work in older IE browsers”, could you give some examples of using HTML5 features in IE?

  • @Thai Dang Vu – 52 framework website is coded with HTML5 and is using this code for IE.

  • @Thai DAng Vu using this script you can use HTML5 in IE just like any modern browser. There is no difference.

  • Chaotic set of tips. Thanks

  • Good JavaScript Snippets.

  • cool set. Display last tweet is the best of them.

  • @Gabriel Silva – You won’t be able to use html5 in IE, you will just be able to use some of the new tags described in the html5 spec, and style them with css.

  • Great collection thanks!

  • Nice set, thanks for the “last tweet” one.

  • You’re welcome.

  • Hey, I came across this blog post while searching for help with JavaScript. I have recently changed browsers from Chrome to IE. After the change I seem to have a problem with loading JavaScript. Every time I browse page that needs Javascript, my computer does not load and I get a “runtime error javascript.JSException: Unknown name”. I can’t seem to find out how to fix it. Any help is very appreciated! Thanks

  • @Sana – Well i can only say, don’t use IE. It’s the worst browser available :)

  • @PaulEye yes indeed. What I was trying to say is that he would be able to use some of the new tags.

  • Some good stuff. Thanks for sharing!

    PS: Your “Submit Comments” button text is truncated (ff v3.5.9).

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting