Apparently, the word ‘satisfaction’ is not in my dictionary when related to design of this blog. Just last week, after sailing in the sea of Google search result, I was stranded at Guillermo Rauch’s beautiful blog —Devthought reading his post about Node.JS.

While scrolling ups and downs trying to digest the content, I noticed that there are left and right navigational buttons which are statically positioned. So even when I scrolled all the way up or down, the buttons will remain at the same position.

I totally bought this very good idea. I realized that this help the readers alot. They did not need to comb through the page to find the previous/next buttons.

Then I looked back at this very own blog’s navigational links. To my dismay, they are now looks totally unacceptable 🙁

So, I want to make this blog navigational buttons statically positioned too. But then I remember, visitors to this blog are not all using 24″ wide flat screen. To validate my suspicion, I logged in to Google Analytics and look at the visitors’ browser information.

Aha! Many of this blog’s visitors are still using resolution with 1024 pixels of width. Considering that this blog requires at least 960 pixels, I need to ensure that this changes only affect those visitors that have enough free pixels on the left and right side for the links. For that very reason, I can’t do the modification on the WordPress’ template. Hence, jQuery is the only way to go.

In summary, the jQuery script will do the following steps:

1. get the width of browser’s window.
2. if have enough space for the links, then set the links into fixed position and then hide the links’ original container.
3. if not, check whether the links’ container is hidden. If hidden, make it visible and move the links inside
4. repeat step 1,2,3 when the window is resized

To implement this, I need to firstly modify the navigational links in my template’s index.php and single.php.

index.php

<div class="navigation"  id="divPostNav">
	<div id="divPrev" class="left">
		<h3><?php next_posts_link(__('&laquo; Previous Entries', 'pyrmont_v2')); ?></h3>
	</div>
	<div id="divNext" class="right">
		<h3><?php previous_posts_link(__('Next Entries &raquo;', 'pyrmont_v2')); ?></h3>
	</div>
	<div class="clear"></div>
</div>

single.php

<div class="post" id="divPostNav">
	<div class="navigation">
	<div id="divPrev" style="width:50%" class="left">
		<h3><?php previous_post_link('%link','&lt;&lt; %title'); ?></h3>
	</div>
	<div id="divNext" style="width:50%; text-align:right;" class="right">
		<h3><?php next_post_link('%link','%title &gt;&gt;'); ?></h3>
	</div>
	<div class="clear"></div>
 </div>

Next, I need to add the following script to footer.php

if (jQuery)
{
	/* obtain jQuery instance */
	$sdv = jQuery.noConflict();
	
	/* ensure the links look & feel consistent */
	var formatLink = function(strEl){
		var pEl = $sdv(strEl);
		if (pEl.length>0) {
			pEl.children().children().css('color','#ccc');	
			pEl.children().children().hover(
				function(){$sdv(this).css('color','#E1771E');},
				function(){$sdv(this).css('color','#ccc');}
			);
		}
	}
	formatLink("#divPrev");
	formatLink("#divNext");
	
	var fnModifyNavigation = function(){
		/* obtain window's width */
		var w = $sdv(window).width();		
		var hw = (w-970)/2;
		if (hw>200)
		{	
			/* we have enough space for the fixed postion links */
			jQFPL($sdv("#divPrev"),'left',0, hw);
			jQFPL($sdv("#divNext"),'right', 0, hw);
			$sdv("#divPostNav").hide();
		}
		else
		{
			/* not enough space for the fixed postion links */
			var divNav = $sdv("#divPostNav");
			if (divNav.length > 0) {
				if (divNav.css('display') == 'none')
				{
					divNav.show();
					divNav.prepend(jQSPL("#divNext", "right"));
					divNav.prepend(jQSPL("#divPrev", "left"));
				}
			}
		}
	}	
	
	/* jQuery Fixed Position Link */
	var jQFPL = function(el, remClass, absPosPX, width) 
	{
		var pEl = el.detach();
		if (pEl) {
			pEl.removeClass(remClass);
			eval("var objStyle = { 'position':'fixed', 'top':'300px', 'width': '"
				+ width + "px', '" + remClass + "':'" + absPosPX+ "px', 'text-align':'"
				+remClass+"'};");
			pEl.css(objStyle);				
			pEl.appendTo("body");						
		}
	}
		
	/* jQuery Static Position Link*/
	var jQSPL = function(strEl, strFloat){
		var el = $sdv(strEl).detach();
		el.css('position','static');
		el.css('width','50%');
		el.css('float',strFloat);	
		return el;
	}
	
	/* run position modification routine 
		after the document is loaded */
	$sdv(fnModifyNavigation);	
	
	/* handle the window's resize event
		and run position modification routine again */
	$sdv(window).resize(fnModifyNavigation);
}

That’s all needed to make the prev/next navigational links statically positioned on the screen.

I hope it helps, cheers!

References

1. jQuery Selectors
2. jQuery CSS
3. jQuery DOM Manipulation
4. jQuery Events

Incoming Search

jquery, wordpress