»
S
I
D
E
B
A
R
«
jQuery Slide Left
Jul 11th, 2010 by admin

Here is how you can use jQuery to animate a div to slide left.

<style>
#outerDiv {width:20px; height:20px; position:relative;}
#innerDiv {width:20px; height:20px; position:absolute; top:0; left:0;}
</style>
<div id="outerDiv">
    <div id="innerDiv">
        some text here
    </div>
</div>
<script>
$(document).ready(function() {
 var $marginLefty = $('#innerDiv');
 $marginLefty.css('marginLeft',$marginLefty.outerWidth());
 $marginLefty.animate({
   marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
  $marginLefty.outerWidth() :
  0
 });
});
</script>
No Comments »
jQuery Focusing a Text Input on Page Load
Jun 2nd, 2010 by admin

If you have a login form on your form page, and you’d like the username text input field to be focused when window body onload. Use the jQuery $(selector).focus() method, you can do so with ease:

    // when the HTML DOM is ready
    $(document).ready(function(){
        // focus the <input id="username" type="text" ...>
        $('#username').focus();
    });
No Comments »
jQuery Disabling All Effects
May 31st, 2010 by admin

Some web users may find web page effects redundant and time-consuming, especially for returning visitors. jQuery has a way to disable all animations from one access point but still supports the animate method and its final value.

<script>
$.fx.off = true;
$(document).ready(function () {
  $('#animate').click(function () {
    $('.box').animate({ width: '+=100', height: '+=100' });
  });
});
</script>
No Comments »
jQuery – Scrolling an Element into View
May 30th, 2010 by admin

If you need to scroll the window to make an element into view, you can use the offset method to determine the location of the destination element relative to the document and then use the scrollTop method to scroll the document to bring the element into view.

For example, let’s say you want to scroll to the #links element when the user clicks the #related element:

jQuery('#related').click(function() {
    var fooOffset = jQuery('#links').offset(),
        destination = fooOffset.top;
    jQuery(document).scrollTop(destination);
});
No Comments »
jQuery Custom Form Skin
May 25th, 2010 by admin

To build a jQuery custom form skin can be tedious, the easier way to do so is to build on an existing skin plugin. jNice is so far the easiest to use. It styles form elements like button, checkbox, select menu and input field etc. It also has cross-browser support.

You can download it at: http://plugins.jquery.com/project/jNice

No Comments »
Converting HTML tag to lowercase using jQuery
May 22nd, 2010 by admin

Using jQuery, you can convert HTML tags to lowercase. Here is how you can do it:

<script>
$('#output').text($('#container').html().replace(/<\/?[A-Z]+.*?>/g, function (m) { return m.toLowerCase(); }));
</script>
No Comments »
Reloading Ajax Data at interval using jQuery
May 22nd, 2010 by admin

To reload Ajax data at interval using jQuery is easy, example below will execute the reload every 30 seconds.

function refreshUsers(){
  $.getJSON(url, postData, function (data, textStatus){
    // Do something with the data
  });
}

// Keep interval in a variable in case you want to cancel it later.
var refreshInterval = setInterval(refreshUsers, 30 * 1000);
No Comments »
Vertical Scroll Bar on Left
Apr 6th, 2010 by admin

To make vertical scroll bar appear on the left instead of right, using CSS overflow alone is not enough. A JavaScript jQuery plugin could save all the heavy coding.

In the example below, we have a div named ‘scollme’ and the div has a fixed height and overflow set to auto, to initialize the scrollbar only requires one line, which is $('#scrollme').leftScrollbar();. You can see the demo at: http://www.highub.com/demo/leftscrollbar.html

<!DOCTYPE html>
<html>
<head>
<style>
div#scrollme {

	width:200px;
	height:100px;
	overflow:auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.leftscrollbar.js"></script>
</head>
<body>
	<div id="scrollme">
		hihihi<br />
		hihihi<br />
		hihihi<br />
		hihihi<br />
		hihihi<br />
		hihihi<br />
		hihihi<br />
		hihihi<br />
		hihihi<br />
		hihihi<br />
	</div>
<script>
$('#scrollme').leftScrollbar();
</script>
</body>
</html>
No Comments »
jQuery Caching
Feb 16th, 2010 by admin

jQuery’s selector is a very convenient tool, but if the object is not cached, it could cause excessive memory issue. Like the way you normally use for JavaScript, in jQuery, it’s a good practice to use object caching.

For instance, if you’re logging the various properties of the event object for a mousemove event, and the
code lags behind because it uses $(‘.classname’) selectors to find and update HTML with the event data.

Your page contains this HTML code for the log:

$(‘html’).mousemove( function( event ) {
$(‘#log’).html( event.clientX );
});

The code above can be optimized using object caching:

var $log = $(‘#log’);
$(‘html’).mousemove( function( event ) {
$log.html( event.clientX );
});

No Comments »
jQuery Join Array
Feb 15th, 2010 by admin

jQuery can help you combine or concatenate two arrays.

Here is an example: 

(function($) {
    $(document).ready(function() {
        var asianCountries = ['China', 'Japan', 'South Korea'];
        var europeanCountries = ['UK', 'France'];
        var countries = $.merge( asianCountries, europeanCountries );
        $('#countries').html( '<li>' + countries.join('</li><li>') + '</li>' );
    });
})(jQuery);
No Comments »
« Older Entries