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

Share and Enjoy

Related posts:

1. How to use jQuery in Your WordPress Post
2. How to Prevent WordPress Loads jQuery Twice
3. Using jQuery to Enhance Google Syntax Highligher WordPress Plugin

Taken from Forex Market Hours

 
I must read more economic publications on Eurozone and USA

Below is the economic calendars that might affect the rates:

Share and Enjoy

Related posts:

1. Internet is a Double Edge Knife, Use it Wisely

Summary of the Bill (please READ the online document for clarification, I might summarized it incorrectly):

1. It applies to commercial email, commercial SMS/MMS
2. It doesn’t apply to telemarketers
3. unsubscribe request is effective maximum 10 business days after the submission of the unsubscribe request
4. It applies if the SPAM committed in Singapore (sender/organization is physically reside in Singapore)
5. sending email to addresses obtained by harvesting email address in the internet is ILLEGAL
6. Buying email address list obtained by harvesting email address in the internet is also ILLEGAL
7. The damage is not to exceed SGD$25 per message, and not to exceed SGD$1 Million in total, unless the plaintiff able to show that the SPAM has caused damage more than SGD$1 Million

So in order not violating the SPAM law, the email/SMS/MMS should:

1. for email, the subject must started with “<ADV>”
2. Must have unsubscribe facility

Hopefully this article helps, If you are going to send any commercial (please refer to the document, the description is quite long) message, please make sure you are not violating the law.

PS: Hmm… although it sounds like I’m advocating the spammers, I’m not. I hate spammers.

Share and Enjoy

Related posts:

1. How to Improve Singapore Parliament’s Website
2. Singapore Bus Guide on Handheld Device
3. Singapore Government will spend almost USD$1 Billion on IT

So hopefully for the next few days i’ll carefully research this topic.

Maybe today i’ll try to write about TCO (Total Cost of Ownership)

Initial costs cover the costs to start the business. These costs are:

• leasing the building
• buying new hardwares and softwares
• revamping the building
• buying furnitures
• initial advertising.

Operational costs cover the costs to run day to day business. These costs are:

• Electricity
• Maintenance
• Salary
• Security

Hmm.. while i was pondering about the idea, i went to Wikipedia, realizing that i have so many things to read about corporate finance

I wish i can just download them into my brain like Neo did

Share and Enjoy

No related posts.