Home>

1. Picture preload

(function ($) {
 var cache=[];
 //arguments are image paths relative to the current page.
 $.preloadimages=function () {
  var args_len=arguments.length;
  for (var i=args_len;i--;) {
   var cacheimage=document.createelement ("img");
   cacheimage.src=arguments [i];
   cache.push (cacheimage);
  }
 }
jquery.preloadimages ("image1.gif", "/path/to/image2.png");

2. Open link in new window (target="blank")

$("a [@rel $=" external "]"). click (function () {
   this.target="_blank";
});
/*
  usage:
  <a href="http://www.catswhocode.com" rel="external">catswhocode.com</a>
* /

3. Add class to body when javascript is supported

/* The code is only 1 line, but the simplest way to detect whether the browser supports javascript, if it supports javascript, add a hasjs class to the body element * /

$("body"). addclass ("hasjs");

4. Smoothly scroll the page to an anchor point

$(document) .ready (function () {
  $("a.toplink"). click (function () {
    $("html, body"). animate ({
      scrolltop:$($(this) .attr ("href")). offset (). top + "px"
    }, {
      duration:500,      easing:"swing"
    });
    return false;
  });
});

5. Fade in and out when the mouse is moved

$(document) .ready (function () {
  $(". thumbs img"). fadeto ("slow", 0.6);
//this sets the opacity of the thumbs to fade down to 60%when the page loads
  $(". thumbs img"). hover (function () {
    $(this) .fadeto ("slow", 1.0);
//this should set the opacity to 100%on hover
  }, function () {
    $(this) .fadeto ("slow", 0.6);
//this should set the opacity back to 60%on mouseout
  });
});

6. Make contour columns

var max_height=0;
$("div.col"). each (function () {
  if ($(this) .height ()>max_height) {max_height=$(this) .height ();}
});
$("div.col"). height (max_height);

7. Enable html5 support on some older browsers

(function () {
  if (!/*@[email protected]*/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])}
}) ()

//Then introduce the js in the head

<!-[If lt ie 9]>

<script src=">

<! [Endif]->

8. Test if the browser supports certain css3 attributes

var supports=(function () {
  var div=document.createelement ("div"),   vendors="khtml ms o moz webkit" .split (""),   len=vendors.length;
  return function (prop) {
   if (prop in div.style) return true;
   prop=prop.replace (/^ [a-z] /, function (val) {
     return val.touppercase ();
   });
   while (len--) {
     if (vendors [len] + prop in div.style) {
      //browser supports box-shadow. do what you need.
      //or use a bang (!) to test if the browser doesn "t.
      return true;
     }
   }
   return false;
  };
}) ();
if (supports ("textshadow")) {
  document.documentelement.classname +="textshadow";

9. Get the parameters passed in the url

$.urlparam=function (name) {
  var results=new regexp ("[\\?&]" + name + "= ([^&#] *)"). exec (window.location.href);
  if (! results) {return 0;}
  return results [1] || 0;
}

10. Disable form submission with enter

$("#form"). keypress (function (e) {
 if (e.which == 13) {
  return false;
 }
});

Related articles

  • Previous Case Study Try {} Catch {} Function
  • Next C # method to modify the IIS site framework version number