SODEVE

How To Change Your WordPress’s Prev/Next Link Style Using jQuery

Hardono — Mon, 06 Feb 2012 11:01:27 +0000

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:

get the width of browser’s window.
if have enough space for the links, then set the links into fixed position and then hide the links’ original container.
if not, check whether the links’ container is hidden. If hidden, make it visible and move the links inside
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

single.php

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

jQuery Selectors

jQuery CSS

jQuery DOM Manipulation

jQuery Events

Possibly Related Posts

How to use jQuery in Your WordPress Post

How to Prevent WordPress Loads jQuery Twice

Using jQuery to Enhance Google Syntax Highligher WordPress Plugin

Instant Hosts File Switcher For Windows & Ubuntu

Hardono — Fri, 03 Feb 2012 13:07:00 +0000

Dear Readers,

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 ). 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!

Possibly Related Posts

Goodbye Dynamic Widgets, Welcome Widget Logic

Hardono — Sat, 28 Jan 2012 05:42:34 +0000

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:

is not a Tags page, and

is not a Page (not a Post), and

is not a Single post, and

is not a Category page

I hope it helps, cheers!

Possibly Related Posts

Quickly Create Expandable / Collapsible Box in Blogger

Hardono — Wed, 28 Dec 2011 05:48:02 +0000

This is the follow up of my previous post.

If you’re using Blogspot/Blogger, you could follow the following steps to make the expandable/collapsible box available to you:

1. Modify Template

In your blogger main menu, click Template

Then click Edit HTML

Then click Proceed

An editor with the XML content will show up. Now we need to find and add the following text immediately AFTER it:

After that, we need to scroll down the editor and find and add the following text immediately BEFORE it:

2. Create Control DIV

This DIV is basically the area where user will click to expand/collapse your content DIV. You style the DIV anyway you like, or add whatever content inside the Control DIV as long as you follow this two rules:

the class attribute must contains “sdvExp”. E.g. class=”sdvExp”
it must have an ID. E.g. id=”XXXX”

Example of Control DIV


	Test Control DIV

3. Create Content DIV

This DIV is basically the box that will expand/collapse whenever user clicks the Control DIV. Content DIV only has one rule, its class property must contains “child-ID_OF_CONTROL_DIV” E.g. class=”child-XXXX”

Example of Content DIV


	Test Content DIV
	
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at commodo tortor.
		Donec condimentum rutrum dui,  vitae rutrum dolor malesuada a. Pellentesque
		habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
		Donec facilisis ligula eu risus cursus cursus. Curabitur nec bibendum nulla.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
		himenaeos.	Vivamus eu dolor et enim egestas pellentesque ac a sapien.
		Maecenas aliquam adipiscing fermentum. Quisque egestas dui sed lacus congue
		id sagittis urna mattis. Duis ut cursus libero. Pellentesque lorem neque,
		fermentum sed fermentum at, auctor et nisl. Nulla lobortis elit odio.
		Suspendisse laoreet volutpat adipiscing.

I hope it helps. If you found any difficulty in implementing this, you can always drop a comment. Cheers!

Possibly Related Posts

Latest Ferry Schedule From Singapore to Tanjung Pinang

Hardono — Sat, 24 Dec 2011 09:19:39 +0000

This is an update to my old ferry schedule. Apparently many people visiting that page when they were looking for information about ferry from Singapore to Tanjung Pinang. Just to make sure I didn’t mislead them, I recently visited Tanah Merah Ferry Terminal. I quickly grabbed the printed schedules from the service counters.

Anyway, I managed to take picture of the entrance using my HTC Sensation. With the help of an Android App called Pano, I can automatically stitched a few photos into a panoramic-view image.

Monday to Friday

Depart from Singapore (Singapore Time +8 GMT)	Depart from Tanjung Pinang (Indonesia Time +7 GMT)
08.50 – Indo Falcon	07.00 – Sindo Ferry
09.20 – Wave Master	10.00 – Indo Falcon
12.30 – Sindo Ferry	10.30 – Wave Master
15.00 – Indo Falcon	14.00 – Sindo Ferry
15.30 – Wave Master	16.00 – Indo Falcon
18.20 – Sindo Ferry	16.30 – Wave Master

Saturday, Sunday and Public Holiday

Depart from Singapore (Singapore Time +8 GMT)	Depart from Tanjung Pinang (Indonesia Time +7 GMT)
08.50 – Indo Falcon	07.00 – Sindo Ferry
09.20 – Wave Master	10.00 – Indo Falcon
10.20 – Sindo Ferry	10.25 – Wave Master
13.10 – Indo Falcon	13.30 – Sindo Ferry
13.30 – Wave Master	14.00 – Indo Falcon
17.10 – Indo Falcon	14.25 – Wave Master
17.30 – Wave Master	18.00 – Indo Falcon
18.20 – Sindo Ferry	18.30 – Wave Master

Enjoy your trip to Bintan! Happy Holidays everyone! Cheers!

Possibly Related Posts

Saturday Karaoke Session – Jay Chou Edition

Hardono — Sat, 17 Dec 2011 01:21:55 +0000

I don’t have a great voice But it doesn’t stop me for going to Karaoke session with friends and colleagues. Here are my favorite Jay Chou’s songs that I always tried to sing it (provided the KTV has it). See, now I can practice this three songs in front of my PC.

Anyway, I hope you like the arrangement. It started sad, mellow and slow with An Jing, then progressed to slow rock with Bu Neng Shuo De Mi Mi. And finally, Huo Yuan Jia with it’s rapping rock, turntables effect, Erhu and distorted guitar. This last song simply blows my mind.

Although Jay Chou has many albums and songs, somehow only these three songs from Jay Chou that managed to stick to my brain. The rest simply failed to do so.

Enjoy your weekend!

An Jing (Silence)

Video Clip

Karaoke Clip

Lyrics

只剩下鋼琴陪我談了一天
Zhi sheng xia gang qin pei wo tan le yi tian
I had no one to talk to except for the piano one day.

睡著的大提琴
Shui zhao de da ti qin
The sleeping cello

安靜的舊舊的
An jing de jiu jiu de
Is quiet and worn out.

我想你已表現的非常明白
Wo xiang ni yi biao xian de fei chang ming bai
I think you’ve already made it extraordinarily clear.

我懂我也知道
Wo dong wo ye zhi dao
I understand and I know

你沒有捨不得
Ni mei you she bu de
You’re not unwilling to part with me.

你說你也會難過我不相信
Ni shuo ni ye hui nan guo wo bu xiang xin
You say it will also be hard for you, but I don’t believe it.

牽著你陪著我
Qian zhe ni pei zhe wo
You holding me hand and accompanying me,

也只是曾經
ye zhi shi ceng jing
That’s all in the past.

希望他是真的比我還要愛你
Xi wang ta shi zhen de bi wo hai yao ai ni
I hope he really loves you more than I do.

我才會逼自己離開
Wo cai hui bi zi ji li kai
Only then can I force myself to leave.

你要我說多難堪
Ni yao wo shuo duo nan kan
You want me to say something that comes very hard for me.

我根本不想分開
Wo gen ben bu xiang fen kai
I certainly don’t want us to break up.

為什麼還要我用微笑來帶過
Wei shen me hai yao wo yong wei xiao lai dai guo
Why must I use a smile in order to go on?

我沒有這種天份
Wo mei you zhe zhong tian fen
I don’t have that kind of ability

包容你也接受他
Bao rong ni ye jie shou ta
To tolerate the fact that you also accept him.

不用擔心的太多
Bu yong dan xin de tai duo
You don’t need to worry too much.

我會一直好好過
Wo hui yi zhi hao hao guo
I will feel better.

你已經遠遠離開
Ni yi jing yuan yuan li kai
You’ve already gone far, far away.

我也會慢慢走開
Wo ye hui man man zou kai
I will also slowly leave.

為什麼我連分開都遷就著你
Wei shen me wo lian fen kai dou qian jiu zhe ni
Why must I obediently go when we are breaking up?

我真的沒有天份
Wo zhen de mei you tian fen
I truly don’t have the ability

安靜的沒這麼快
An jing de mei zhe me kuai
My silence doesn’t come fast.

我會學著放棄你
Wo hui xue zhe fang qi ni
I will be learning how to let go of you.

是因為我太愛你
Shi yin wei wo tai ai ni
It’s because I love you too much.

lyrics, romanji & translation found at chinese music blog.

Bu Neng Shuo De Mi Mi (Secret I Can’t Tell)

Video Clip

Karaoke Clip

Lyrics

不能说的秘密 | Bu Neng Shuo De Mi Mi | Secrets I Can’t Tell

词: 方文山
Ci: Fang Wen Shan
Lyrics: Vincent Fang

曲: 周杰伦
Qu: Zhou Jie Lun
Music: Jay Chou

冷咖啡离开了杯垫
leng ka fei li kai le bei dian
As the cold coffee leaves the coaster

我忍住的情绪在很后面
wo ren zhu de qing xu zai hen hou mian
I desperately tried to hold my emotions far behind

拼命想挽回的从前
pin ming xiang wan hui de cong qian
Fighting hard to restore the past

在我脸上依旧清晰可见
zai wo lian shang yi jiu qing xi ke jian
On my face you can still see ever so clearly

最美的不是下雨天
zui mei de bu shi xia yu tian
that rainy day wasn’t the most beautiful

是曾与你躲过雨的屋檐 oh~~
shi ceng yu ni duo guo yu de wu yan
It’s the shelters that I once shared with you in the rain

回忆的画面
hui yi de hua mian
The pictures in my memory

在荡着秋千梦开始不甜
zai dang zhe qiu qian meng kai shi bu tian
While on the swings dreams become less sweet

你说把爱渐渐放下会走更远
ni shuo ba ai jian jian fang xia hui zou geng yuan
You told me that by gradually letting go I’d be able to go further

又何必去改变已错过的时间
you he bi qu gai bian ni cuo guo de shi jian
and why bother changing the times that you’ve missed

你用你的指尖阻止我说再见
ni yong ni de zhi jian zu zhi wo shuo zai jian
you used your fingertip to stop me from saying goodbye

想像你在身边在完全失去之前
xiang xiang ni zai shen bian zai wan quan shi qu zhi qian
imaging you being by my side before you completely disappear

你说把爱渐渐放下会走更远
ni shuo ba ai jian jian fang xia hui zou geng yuan
You told me that by gradually letting go I’d be able to go further

或许命运的签只让我们遇见
huo xu ming yun de qian zhi rang wo men yu jian
Perhaps life’s destiny only allowed us to meet

只让我们相恋这一季的秋天
zhi rang wo men xiang lian zhe yi ji de qiu tian
(and) Only allowed us to love this one season of fall

飘落後才发现这幸福的碎片
piao luo hou cai fa xian zhe xing fu de sui pian
only after the pieces drifted down that I realized these are the pieces of happiness

要我怎麼捡
yao wo zen me jian
How do i pick them up

Lyrics, romanji and translation found at Byon

Huo Yuan Jia (Fearless)

Video Clip

Karaoke Clip

Lyrics

嚇命有几回合擂台等着
he ming you ji hui he lei tai deng zhe
Humph, How many rounds are there in life, the arena is waiting

生死状赢了什么冷笑着
shen shi zhuang yin le she me leng xiao zhe
After winning a death duel, who’s smiling coldly?

天下谁的第一又如何
tian xia shui de di yi you ru he
Who controls the fraternity? So what if (you) are the first

止干戈我辈尚武德
zhi gan she wo bei shang wu de
Stop interfering in my martial rules

我的拳脚了得却奈何徒增虚名一个
wo de quan jiao liao de que nai he du zheng xu ming yi ge
My punches and kicks are great but I only gained a meaningless title

江湖难测谁是强者谁争一统武林的资格
jiang hu nan che shui shi qiang zhe shui zheng yi tong wu lin de zhi ge
The martial fraternity is too hard to predict. Who will be the strongest? Who will have the qualifications to rule the whole fraternity?

小城里岁月流过去清澈的勇气洗涤过的回忆
xiao cheng li sui yue liu guo qu qing che de yong qi xi yi guo de hui yi
Time passes fast in the city, the limpid courage washed away my memories

我记得你骄傲的活下去
wo ji de ni jiao ao de huo xia qu
I’ll remember you, living on proudly

霍霍霍霍霍霍霍霍霍家拳的套路招式灵活
huo *9 jia quan de tao lu zhao shi ling huo
Huo (*9) family punch’s moves are flexible

我我我我我我我我活着生命就该完整渡过
wo (*8) huo zhe shen ming jiu gai wan zheng du guo
I (*8) I have lived life and should live to the finish

我我我我我我我我过错软弱从来不属于我
wo (*9) guo chuo ruan luo cong lai bu su yu wo
I (*8) Mistakes and weakness will never come from me

霍霍霍霍霍霍霍霍我们精武出手无人能躲
Huo (*8) wo men jing wu chu shou wu ren neng duo
I (*8) None can evade when our fine moves are executed

Lyrics, romanji and translations found at A-Lyrics

PS: It’s created with the help of Expanding/Collapsing Box.

Possibly Related Posts

Quickly Convert Ancient JSP Page into ASP.NET MVC + Ext.NET

Hardono — Wed, 14 Dec 2011 15:30:38 +0000

Last week, I was required to quickly do maintenance to an ancient JSP page. The page basically is a spaghetti code that retrieve shipment data from Oracle, transform it into HTML output. The page itself is residing in an old Allaire JRun server. So yeah, it’s really that ancient

Due to the time constraint and my lack of familiarity with the overall Java EE environment, I decided to move it into my comfort zone

To create the overall layout, we can always derive from Ext.NET MVC project. So I made a few changes and I have something like this:

When the user clicked the Search button, we need to submit to backend processing and show the output in the Result panel.

The click event handler is in JavaScript:

var fnSearch = function(sender, ev) {
   pnlResult.load({
	url:'/Job/Search',
	params:{shipref: txtShipRef.getValue()},
	callback:function(el){
		el.applyStyles("overflow:scroll");
	},
	text:'loading...',
	timeout:30
   });
}

Meanwhile at the backend, JobController.cs will have the following the action handler:

public ContentResult Search(String shipref)
{
	var res = new ContentResult();
	res.ContentType = "text/html";
	var sb = new StringBuilder();
	try
	{
	    //Convert the Java code in JSP page into C# code
	    //Highly recommended to use sb.Append()
	    //instead of + operator for String concatenating
	    res.Content = sb.ToString();
	}
	catch (Exception ex) {
		res.Content = ex.ToString();
	}
	return res;
}

There you go, at least now we can move this application to a newer and better server. Which should translates as a better experience to the user

I hope it helps. Cheers!

Possibly Related Posts

Inline JavaScript Code That Broke My Feed

Hardono — Tue, 13 Dec 2011 13:49:51 +0000

In my previous post, I needed to embed Flash object. To do that, the post needs to have two inline JavaScript code blocks embedded inside.

This two code blocks apparently killed my RSS Feed! I didn’t know about this, until I visited my LinkedIn page. LinkedIn page was prompting me to enter my WordPress blog URL address. Hmm.. that’s weird. I remember I have done that immediately when I created my LinkedIn account. I squinted my eyes to find any error messages. Below the WordPress form, I saw broken red lines with varying degree of thickness. Apparently the error message was outside the DIV’s visible area. The error message reads “Error in parsing http://sodeve.net?feed=rss2″.

Here’s the offending inline codes:

And

Btw, please note that I made the JavaScript codes in multiple lines to make it readable. In its original form, each code block will be merged into a single line.

When I opened up this blog’s RSS Feed URL using Google Chrome, it spitted back red rectangle error message back at me. I opened the same URL with Safari, and it simply give up without even telling what’s the source of the error. Still not satisfied, I launched both IE9 and Firefox to the same URL.

Surprise surprise, these two browsers didn’t report any error. IE9 incompletely renderred the XML as a full-page of words without any arrangement. But it actually stopped rendering the content half-way. Perhaps it saw the error, got depressed, then perhaps go hiding somewhere trying to get high. Great, IE9, your act is just like Towelie.

If IE9 is like Towelie, I think Firefox is like Eddie Mora from Limitless. Although there’s error in the feed, it is still showing everything perfectly. And by perfectly, I mean everything. The FeedBurner’s favicon, the layout, the form to subscribe to the feed.

Last but not least, Opera. I think Opera is the most informative among all. It prompted the error, described what kind of error is it, which location the error was triggered from, and it even shown the part of the XML code where the error is originated.

Based on this razor-sharp information from Opera, I look into the XML file. I found out that the second JavaScript code block was auto-encapsulated inside CDATA section. But why only the second code block was auto-encapsulated? What makes the first code block so special (or not so special, depending on your today’s mood) that it wasn’t auto-encapsulated?

Anyway, I solved this issue by taking out both code blocks, and put them into two separate external .js file. Yes, this is actually the recommended practice should you ever need to include JavaScript code in your WordPress blog post. Why didn’t I do it in the first place? In my defense, the inline JavaScript code did work. As long as you make them in one single line.

What I did’t realize was that I accidentally depended on a ‘hack’, deprecated-method, or whatever it is that now WordPress (or W3 Total Cache) doesn’t support. I am not sure whether I should call this a bug. What do you think?

Moral of the story, use the recommended best practice when doing something, but don’t stop yourself from hacking Show me your hand if your’re agree!

Cheers!

The screenshots from the browsers:

Possibly Related Posts

How To Force ASP.NET MVC To Serve Index.PHP

Hardono — Mon, 12 Dec 2011 12:05:49 +0000

What a weird title for a solution that I don’t think many people would need But apparently I needed it. So after scratching my head for non-dandruff-related cause, I found out how to do it.

Just a short background story. We have ASP.NET MVC application already deployed in the production server. Unfortunately, the launch date of the application is still days ahead. So instead of showing the application, a countdown page is more appropriate.

So somebody come up with the countdown page. Sadly, it was in PHP. It was a quite challenge to make IIS serve the index.php. I tried set the IIS’ default document priority, but it didn’t work.

Then I realized that Global.asax is overriding IIS behavior. Since the index.php needs a few .js files, .css and few .png images, I amended the Global.asax.cs into something like this:

protected void Application_AuthenticateRequest(object sender, System.EventArgs e)
{
	string url = HttpContext.Current.Request.RawUrl.ToLower();
	if (!(url.EndsWith("index.php")
		|| url.EndsWith(".js")
		|| url.EndsWith(".css")
		|| url.EndsWith(".png")))
	{
		Response.Redirect("http://www.project.com/index.php", true);
	}
	//.....
	//Your exisiting code
	//....
}

To deploy this solution, first I recompile the project. Then I backup my original dll by renaming it into .bak file. Lastly, I copied the newly compiled dll into the Server’s bin folder.

This way, it would be a minor change on the launch date D-Day. I could simply delete the application’s main dll file, and rename the existing .bak file into .dll.

I hope it helps. Cheers!

Image courtesy of: Human Angel

Possibly Related Posts

No related posts.

How To Create Expandable / Collapsible Box with jQuery Within WordPress

Hardono — Sat, 10 Dec 2011 19:46:21 +0000

jQuery makes a lot of things easier. I have blogged before about creating collapsible/expandable box. But jQuery make that blog post obsolete and too ‘dirty’.

After consulting with Google, it pointed out a great website that teaches tips & tricks on Javascript. I modified his project to suit what I need. Below is the code, and after it, you could find the Live Demo.

Original Code


	
		Test JQuery
		
		
	
	
		
			Lorem Ipsum
		
		
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at commodo tortor. Donec condimentum rutrum dui,
			vitae rutrum dolor malesuada a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
			turpis egestas. Donec facilisis ligula eu risus cursus cursus. Curabitur nec bibendum nulla.
			Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
			Vivamus eu dolor et enim egestas pellentesque ac a sapien. Maecenas aliquam adipiscing fermentum.
			Quisque egestas dui sed lacus congue id sagittis urna mattis. Duis ut cursus libero.
			Pellentesque lorem neque, fermentum sed fermentum at, auctor et nisl. Nulla lobortis elit odio.
			Suspendisse laoreet volutpat adipiscing.

Live Demo

Expandable/Collapsible Box Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at commodo tortor. Donec condimentum rutrum dui, vitae rutrum dolor malesuada a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec facilisis ligula eu risus cursus cursus. Curabitur nec bibendum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu dolor et enim egestas pellentesque ac a sapien. Maecenas aliquam adipiscing fermentum. Quisque egestas dui sed lacus congue id sagittis urna mattis. Duis ut cursus libero. Pellentesque lorem neque, fermentum sed fermentum at, auctor et nisl. Nulla lobortis elit odio. Suspendisse laoreet volutpat adipiscing.

Making it Work in WordPress

To make the box working in WordPress, please observe the following source code and follow the three steps:


Expandable/Collapsible Box Demo



Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at commodo tortor. Donec condimentum rutrum dui, vitae rutrum dolor malesuada a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec facilisis ligula eu risus cursus cursus. Curabitur nec bibendum nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu dolor et enim egestas pellentesque ac a sapien. Maecenas aliquam adipiscing fermentum. Quisque egestas dui sed lacus congue id sagittis urna mattis. Duis ut cursus libero. Pellentesque lorem neque, fermentum sed fermentum at, auctor et nisl. Nulla lobortis elit odio. Suspendisse laoreet volutpat adipiscing.

If you follow three steps above, you should get your expandable/collapsible box working.

Good luck!