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

Hi Friends!

Today I want to share with you a very useful tool to instantly switch your Windows/Ubuntu hosts file. If you’re unfamiliar with the term ‘hosts file’, this WIKI should help.

Anyway, by using this tool you can immediately switch to a new hosts file, by at most two clicks of mouse (actually, it is one click and one double-clicks :P). No installation needed, but you will need a full-write access to your hosts file.

Other than that, depending on your Operating System, you might need:

• Windows:
  • .Net framework 2.0 and upper.
• Linux:
  • Mono 1.2 and upper
  • root access
  • nscd Service
  • ifconfig commmand

Here is how the main interface looks like:

Really simple right?

Interested? You can visit and download it at: Host Profiles @ Codeplex . It’s FREE! And it’s open source too.

Have a great weekend everyone, Cheers!

About two or three months ago, I started using Dynamic Widgets to regulate how the *ehm* Google’s Ads is showing in the sidebar. This is due to Google’s policy on how many number of ads can be displayed in a page.

I was happy 🙂 Dynamic Widgets user interface is really easy. You just need to declare your sidebar widgets as a dynamic instead of static. Then continued by define the rules that regulate when that particular widget is shown or hidden by clicking list of check-boxes describing the conditional logic.

Sadly, today I found out that the Dynamic Widget is broken. It didn’t recognize that the current page is a Tags archive page. The result is obvious, it disregard any logical conditions that I previously set and messed up my sidebar.

It is very likely that my recent upgrade to WordPress 3.3.1 is the primary cause. Since I don’t want to revert to previous WordPress version, I look out for replacement. Then I found out Widget Logic. If you are familiar with Boolean logic, Widget Logic is super effective. Instead of clicking check-boxes for configuration, you write your own logical condition. Widget Logic only evaluate those widgets that have something in their ‘Widget logic’ field. If their ‘Widget logic’ field is empty, the widget is simply treated as static widget.

As you can see, the logical condition is composed using WordPress’s functions. Here are the list of WP’s commonly-used functions that could help you:

• is_front_page()
• is_page()
• is_single()
• is_tag()
• is_category()
• is_archive()

For complete list of functions, you could refer to WordPress documentation.

And if you’re not familiar with Boolean logic, you could learn how to do it HERE.

Quick Example

!is_tag() && !is_page() && !is_single() && !is_category()
This widget will be shown if the current page:

1. is not a Tags page, and
2. is not a Page (not a Post), and
3. is not a Single post, and
4. is not a Category page

I hope it helps, cheers!