Sometimes you might want to do a little on the fly DOM editing using your favourite Javascript library – jQuery.

To do this you might need to include jQuery on the page, you can do this by pasting these lines into your console in Chrome or Firebug in Firefox.

And there you have it, the full power of jQuery at your fingertips

If you have a page that keeps getting longer because new items appear on it at the bottom and what’s at the bottom of the page is most important it can be a paint to have to keep scrolling done to see it.

You can make it auto scroll continuously with JQuery but that’s potentially really awkward if at any point you need to scroll up (it basically means you can’t).

The best solution is to make the page auto scroll in a sticky fashion. So when the page is already scrolled all the way to the bottom it auto scrolls, when it’s not at the bottom it does not scroll.

This can be achieved quite easily with the following code:

var num = (lastDocumentHeight - $(window).height()) - $(document).scrollTop();
if(num == 0) {
	$("html, body").animate({ scrollTop: $(document).height() }, "slow");
}
lastDocumentHeight = $(document).height();

In this example lastDocumentHeight is a global. It works by determining if the current position is the same as it was previously and this position equates to being at the bottom of the page then scroll. This needs to run after your page length has increased.

Magento’s product images come with a workable, although somewhat unusual image zoom functionality. But many users want a lightbox which lets users click an image and see a large version. Of course, you can use just about any jQuery plugin in your templates – Magic Zoom being one such perfect example.

But instead of manually installing and configuring the Javascript yourself, MagicZoom has its own Magento MagicZoom extension which can be dropped straight in and integrates beautifully with Magento

Some highlights MagicZoom’s Magento extension

• Automatically inserts the product title onto the zoomed box
• Automatically linking main image and thumbnails for navigation when zoomed
• Visible on pretty much any area of the site, not just the product view page
• Per-theme customisation
• An insane amount of user-configurable options without touching a line of code (see below)

Installation

MagicZoom’s extension comes with its own installer, although for me it was perfectly sufficient to simply drop in the files

A lot of concern has been caused by the “Cookie Law” which says you must tell people that you use cookies if you do, and 99% of sites do!

Well here’s a very simple jQuery bolt-on that deals with that, and although visitors need javascript enabled to see it, you have made “best efforts” to inform them, and on any eCommerce site you’re going to have a “this site requires javascript message” anyway.

The file to download is from github (isn’t opensource great?) here and is as simple to implement as add the script file to the head and somewhere on the page insert the following :

<script type="text/javascript">
    $(document).ready(function() {
      $.cookieBar();
    });
</script>

The example page is also on github : http://carlwoodhouse.github.com/jquery.cookieBar/.

I was recently asked by a client to create a scrollable, navigation menu for their site. However, they wanted it to have an onHover submenu that expanded to the side, over the top of the scrollbar.

The problem with this is that there is noway to do this using normal css, over the overflow:scroll hides the sub menu. If you put the submenus into a different div outside the scrollable area, then you can run into problems with the onHover thinking you’ve left the target.

To get round this I put together the following jQuery, HTML and CSS, which I hope will help someone.

<div class="categories">
	<ul>
		<li class="level0 first parent">
			<a href="path/to/link">
			<p>First Item</p>
			</a>
			<ul style="display:none">
				<li class="level1 first parent">
					<a href="path/to/link">
						<p>sublevel-1</p>
					</a>
					<ul style="display:none">
						<li class="level2 first">
							<a href="path/to/link">
								<p>sub-sublevel1</p>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="level0">
			<a href="path/to/link">
				<p>Second Item</p>
			</a>
		</li>
	</ul>
	<div id="hoverMenu" style="display: none; ">
		<div id="subHoverMenu" style="display: none; "></div>
	</div>
</div>

.categories{background:white;height:310px;overflow:scroll;overflow-x:hidden;}
.categories .active{background:red;}
.categories ul{padding:9px 10px 0 10px;}
.categories ul li a{color:black;height:21px;line-height:21px;}
.categories ul li a p{font-size:13px;padding:0 0 0 0;margin:0 0 0 0;white-space:nowrap;}
.categories #hoverMenu{background:white;height:auto;position:absolute;width:auto;z-index:150;} 
.categories #hoverMenu .active{background:red;}
.categories #hoverMenu li{padding:5px 10px 5px 20px;}
.categories #hoverMenu p{color:black;font-size:13px;white-space:nowrap;}
.categories #hoverMenu #subHoverMenu{background:white;width:auto;height:auto;position:absolute;z-index:150;}
.categories #hoverMenu #subHoverMenu .active{background:red;}

	jQuery(document).ready(function() {
		jQuery(".categories li.level0").mouseenter(function() {
			jQuery(this).siblings().removeClass('active');
			jQuery(this).addClass('active');
			if(jQuery(this).hasClass('parent')) {
				jQuery('#hoverMenu ul').remove();
				var pos = jQuery(this).position(); 
				var mouseX = pos.left + 175;
				var mouseY = pos.top; 
				var subMenu=jQuery(this).children('ul:first')
				subMenu.clone(true, true).show().appendTo('#hoverMenu');
				jQuery('#hoverMenu').css({'top':mouseY,'left':mouseX});
				jQuery('#hoverMenu').show();
			} else {
				jQuery('#hoverMenu ul').remove();
				jQuery('#hoverMenu').hide();
			}
		})
		
		jQuery(".categories li.level1").bind('mouseenter', function() {
			jQuery(this).siblings().removeClass('active');
			jQuery(this).addClass('active');
			if(jQuery(this).children('ul').length) {
				jQuery('#subHoverMenu').empty();
				var subPos = jQuery(this).position();
				var subMouseX = jQuery(this).outerWidth();
				var subMouseY = subPos.top; 
				var subSubMenu=jQuery(this).children('ul:first')
				subSubMenu.clone(true, true).show().appendTo('#subHoverMenu');
				jQuery('#subHoverMenu').css({'top':subMouseY,'left':subMouseX});
				jQuery('#subHoverMenu').show();
			} else {
				jQuery('#subHoverMenu').empty().hide();
			}
		})
		
		jQuery(".categories li.level2").bind('mouseenter', function() {
			jQuery(this).siblings().removeClass('active');
			jQuery(this).addClass('active');
		})
		
		jQuery('#hoverMenu').mouseleave(function(){
			jQuery('#hoverMenu ul').remove();
			jQuery('#hovermenu').hide();
			jQuery('#subHoverMenu').empty().hide();
		})
		
		jQuery('#subHoverMenu').mouseleave(function(){
			jQuery(this).empty().hide();
		})
		
		jQuery('.categories').mouseleave(function() {
			jQuery('#hoverMenu ul').remove();
			jQuery('#hoverMenu').hide();
			jQuery('#subHoverMenu').empty().hide();
			jQuery(".col-left .category-list .categories li").removeClass('active');
		})
	})

Obviously, change styles and content as required

If you are using jQuery and attaching click handlers etc to elements as part of your document ready block, you may find you are losing those handlers if you update the page with Javascript after load.

For example if you have some kind of slide show which involves redrawing the contents of a div, you might find that the click handlers you had attached to the links of class ‘slideshow-link’ stop working.

Of course you can reattach handlers manually after dropping in your new HTML but that’s pretty messy.

A much nicer solution is this:

Instead of using

jQuery('.slideshow-link').click(function(){});

You can use

jQuery('.slideshow-link').live('click', function(){});

The Live method will keep the attachment to elements matching the selector now and in the future.

http://api.jquery.com/live/

Gotta love jQuery

Jquery, arguably the most popular Javascript library has has a new version released.

The release features some dramatic performance improvements, especially on widely used functions like .html()

It also features a host of new functionality and improvements. For full details check out this page:

http://jquery14.com/day-01/jquery-14

I’m currently working on a project that has some really heavy javascript requirements. For the project I decided on using jQuery to implement the required functionality. Now having only used jQuery for a few days I have to say I’m impressed with how easy and intuitive it is.

That combined with the excellent jQuery support in Netbeans (my IDE of choice) is making this a real pleasure to work with