Tutorial Open External Links In New Window

by in , 0 

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

You can do this straight with HTML, but that is invalid markup, this takes care of business without invalid code and unnecessary markup.

Or, you can still avoid the validation problems and just append the class target=_blank thing to any links with href attributes starting with http://. The example below only targets links in a #content area. Scoping down like that might be a good idea in case your menus are dynamic and create full URLs.

$("#content a[href^='http://']").attr("target","_blank");

Also note that there are a wide variety of different ways to only target external links.

Tutorial Move Cursor To End of Textarea or Input

by in , 0 

jQuery.fn.putCursorAtEnd = function() {

  return this.each(function() {

    $(this).focus()

    // If this function exists...
    if (this.setSelectionRange) {
      // ... then use it (Doesn't work in IE)

      // Double the length because Opera is inconsistent about whether a carriage return is one character or two. Sigh.
      var len = $(this).val().length * 2;

      this.setSelectionRange(len, len);
    
    } else {
    // ... otherwise replace the contents with itself
    // (Doesn't work in Google Chrome)

      $(this).val($(this).val());
      
    }

    // Scroll to the bottom, in case we're in a tall textarea
    // (Necessary for Firefox and Google Chrome)
    this.scrollTop = 999999;

  });

};
Check out this Pen!

Reference URL

Tutorial Move Clicked List Items To Top Of List

by in , 0

Assuming HTML like this:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

So if "Two" is clicked, move it to the top of the list.

$("li").click(function() {
     
  $(this).parent().prepend($(this));
  
});

Will work for multiple lists...

Tutorial Make jQuery :contains Case-Insensitive

by in , 0 

// NEW selector
jQuery.expr[':'].Contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

// OVERWRITES old selecor
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

Update to work for jQuery 1.8

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

With this in place, 

$("div:contains('John')")

would select all three of these elements:

<div>john</div>
<div>John</div>
<div>hey hey JOHN hey hey</div>

Demo via Pablo Fortes.

Tutorial Make Entire Div Clickable

by in , 0 

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

Looks for a link inside div with class of "myBox". Redirects to that links value when anywhere in div is clicked.

Reference HTML:

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

Tutorial Loading jQuery

by in , 0

Load with Google API

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1.2.6");
</script>
<script type="text/javascript" src="js/example.js"></script>

Direct Link to Google

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>

Check if loaded, only load if unloaded

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("<scr" + "ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></scr" + "ipt>");
       }
       setTimeout("initJQuery()", 50);
   } else {

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

}

Reference URL

Tutorial Load Only a Section of a Page

by in , 0

Use Case

You want to AJAX load a section of another page on your site onto the current page. Say your eCommerce CMS system creates a dynamic menu of products, but that exists as a subdirectory of your site and you want to use that on the homepage.

jQuery

$("#mainNav").load("/store #mainNav")

The first param is the URL (only works for same-domain requests!) and the second (well, technically it's still part of the first, separated by a space) is a jQuery selector of the part to load. Not passing the second selector param will load the entire page. There is an optional third parameter, a callback function, which will run when the load is complete.

Reference URL