MonthSeptember 2007

Chili 1.9 Released Today

UPDATE: Chili 2.0 has been released

Changes
  • Circumvented an evil bottleneck
  • Simplified the core clockwork
  • Removed the bundled jQuery library
  • Changed the plugin names to follow the naming convention of jQuery’s plugins
  • Added a new example showing that Chili 1.9 is much faster
Links

How to fix the resize event in IE

In IE the window resize event is fired multiple times per actual resize: it is a well known issue for IE6 and IE7, but they misbehave along different patterns. Actually it seems that IE6 is worse than IE7.

After quite a long session of R&D, I’ve got to a pretty good solution, in the form of a jQuery plugin: jquery.wresize.js

/*  
===============================================================================
WResize is the jQuery plugin for fixing the IE window resize bug
...............................................................................
                                               Copyright 2007 / Andrea Ercolino
-------------------------------------------------------------------------------
LICENSE: http://www.opensource.org/licenses/mit-license.php
WEBSITE: http://noteslog.com/
===============================================================================
*/

( function( $ ) 
{
	$.fn.wresize = function( f ) 
	{
		version = '1.1';
		wresize = {fired: false, width: 0};

		function resizeOnce() 
		{
			if ( $.browser.msie )
			{
				if ( ! wresize.fired )
				{
					wresize.fired = true;
				}
				else 
				{
					var version = parseInt( $.browser.version, 10 );
					wresize.fired = false;
					if ( version < 7 )
					{
						return false;
					}
					else if ( version == 7 )
					{
						//a vertical resize is fired once, an horizontal resize twice
						var width = $( window ).width();
						if ( width != wresize.width )
						{
							wresize.width = width;
							return false;
						}
					}
				}
			}

			return true;
		}

		function handleWResize( e ) 
		{
			if ( resizeOnce() )
			{
				return f.apply(this, [e]);
			}
		}

		this.each( function() 
		{
			if ( this == window )
			{
				$( this ).resize( handleWResize );
			}
			else
			{
				$( this ).resize( f );
			}
		} );

		return this;
	};

} ) ( jQuery );

If you want to try it, here is a test page, where a div is automatically resized when the window is resized.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow:hidden;">
 <head>
  <title> test window resize </title>

<script type="text/javascript" src="http://jquery.com/src/jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.wresize.js"></script>


<script type="text/javascript">
jQuery( function( $ ) 
{
	function content_resize() 
	{
		var w = $( window );
		var H = w.height();
		var W = w.width();
		$( '#content' ).css( {width: W-20, height: H-20} );
	}

	$( window ).wresize( content_resize );

	content_resize();
} );
</script>

 </head>

 <body>
 
<div id="content" style="border: 1px dashed silver; position:absolute; overflow:auto;">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
</div>

 </body>
</html>

References:

http://dev.jquery.com
http://snook.ca
http://ecmascript.stchur.com

Differences between jQuery Selections

The most basic action for a jQuery script is to select elements to act upon later.

I’ve just made up a little page for testing the differences between jQuery selections.

© 2017 Notes Log

Theme by Anders NorenUp ↑