SODEVE » Tricks

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

Share and Enjoy

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!

Share and Enjoy

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!

Share and Enjoy

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

Share and Enjoy

No related posts.

How To Fight Spam In Your WordPress Blog

Hardono — Sat, 26 Nov 2011 18:35:08 +0000

As your blog become more visible to the search engines’ bot, it is also become more visible to the spammer-bots (spambots). A spambot is a program designed to ~~promote shady websites, sell dubious health products, sell counterfeit goods~~ annoy and slow down your database.

Usually, spambots is run in a botnet. Botnet is a network which consists of computers that are controlled by black-hat hackers. If suddenly your friends complained that you send them spammy messages from your email/instant Messenger, check your PC. Your PC may already become a botnet members.

Back to the topic of this post, this blog is used to be plagued by many spam comments/trackbacks. But with my recent configuration, I am confident that it will able to thwart most of the spam comments without causing too much of irritation to the good visitors of this blog.

If you think your WordPress blog is currently being targeted by spammers, you should try these two WordPress plugins will keep them at the bay:

1. Akismet

Akismet works by intercepting all submitted comments & trackback. It will submit the comments and trackbracks to their web service for test. If the result turns out positive, it will allow the comments/trackback. If negative, they will go to spam folder. I highly recommended you to use Akismet.

2. Spam Free WordPress

Although Akismet is good, it’s not enough. With Akismet, the comments/trackbacks are still be saved in the database anyway. So if you have many spambots posting comments to your blog, it could slow down your blog. Because of that, I recently deployed Spam Free WordPress. This plugin works by generating a unique password for each post. This way, a spambot can’t directly hit you with a FORM submit. Instead, it needs to download the whole page, parse the HTML, extract out the password, and finally submit the FORM.

So yes, this plugin has a weakness. But parsing a whole page is not economical to the spammers, so this plugin will deter most of the spammers. But if they somehow managed to submit the spammy comments/trackbacks, Akismet will be ready to catch them and throw these SOB to the spam folder.

Conclusion

Once you have these two plugins deployed in your blog, your blog will have two security layers to defend from spambots attacks. On the outer layer you have Spam Free WordPress plugin that requires the bot to read the post before posting. And there’s Akismet standing behind, ready to catch any comments/trackbacks that managed to bypass Spam Free WordPress.

Goodluck with your blog!

Share and Enjoy

How To Show Authorship In Google Search Result For WordPress Blog

Hardono — Thu, 03 Nov 2011 15:52:20 +0000

Recently, Google added a functionality to help content owners to show their authorship in Google Search Result. So instead of showing only the title and the excerpt of your article, your Google+ profile name and picture will also be shown in the search result.

To achieve this, you need to do 5 simple steps:

1. Modify About Widget

If you already have a widget in the sidebar for showing your profile (like mine is under label ‘Selamat Datang’), add a link to your About Page with rel=”Author”

In my case, I linked my smiling picture to SODEVE’s About page.

We need this widget because we want every article to be automatically linked to About page. Although in my case, the link to About page is already in the top menu. But this menu is generated by WordPress’s wp_list_pages function, so it is more complicated to add the rel=”author”. So if you don’t have this widget, please create one.

2. Modify About Page

If your About page is already have link to your Google+ profile page, you need to ensure that the link has rel=”me”. Otherwise, you need to create link to your Google+ profile page.

Here’s the link I am using in my About page.


   Hardono Arifanto @ Google+

3. Modify Google+ Profile

Now you need to link back your Google+ Profile page to your WordPress About page. Open your Google+, click Edit Profile. In Other Profile section, add a custom link to your WordPress About page.

Here’s how I did mine:

4. Test It

To ensure everything is working, you need to use Google’s Rich Snippets Testing Tool. Just enter any url from your WordPress site, and click Preview button. If everything OK, you should see your Google+ Profile name and picture shown.

5. Register Your Authorship Request

Filling up this FORM is the last and (maybe) the most important step.

Alright, I hope this post help you claim authorship in Google’s search result. Cheers!

References

Scott Hanselman. Thanks for the headstart.

Joost de Valk. Thanks for the detailed insight.

Google, straight from the horse’s mouth

Share and Enjoy

How To Add Javascript Beep That Runs in All Browsers

Hardono — Wed, 05 Oct 2011 16:04:55 +0000

In a project that my team did recently, we build a web interface which receive inputs from a barcode scanner. Let’s focus to the textbox in which the scanning result will be entered.

When its content changed, textbox’s event handler will submit the value to backend process for validation. If valid, the textbox content will be cleared and a single beep sound will be played. If not, a triple beep sound will be played.

Apparently we had a quite challenge in implementing these single beep and triple beep sounds . So today I want to share what I have learned. When I googled for this topic, I found that there are at least three ways to do this. So I did made a simple HTML project, which you can download at the bottom of this article. I then tested each method using all major browsers (Firefox, Google Chrome, Internet Explorer 9, Opera and Safari).

The first two methods are utilizing plugins. IE will use Windows Media Player plugin, while the rest requires QuickTime plugin. Without these plugins, the first two methods won’t work.

1. Using EMBED tag.

Tested working on:

Surprisingly, it doesn’t work in current version Firefox (7.0.1). Once the page is loaded, Firefox simply barfed error message saying that the QuickTime plugin is crashed.

2. Using OBJECT tag.

Tested working on:

This method doesn’t work on IE9. Surprisingly, I get random results when testing in IE9. Sometimes it hanged when it enters getElementById method. Some other times it gets “Access denied” error when accessing sound.object.Play().

3. Using AUDIO tag.

Audio tag seems to behave abnormally. When I put the audio tag above the form, nothing rendered in the page. Weird, right?
This method tested working on:

IE9 still not working. When I debug it, it able to return getElementById correctly. It’s just that the play() method does nothing.

Conclusion

Sadly, we are still unable to have one single solution that works in all major browsers. If we target various browsers, I suggest to use both AUDIO and EMBED tags. Then we select which element to play based on the browser type.

Btw, you can download the project files (html and wav files) HERE. Please test it yourself. I hope you get the same result as mine But if you don’t, please report your finding and let’s discuss it.

Alright, I hope it helps Cheers!

Reference:

Share and Enjoy

How To Make Favourite Icon For Your Blog/Website

Hardono — Tue, 04 Oct 2011 11:39:53 +0000

If you notice, this blog is now have new Favourite Icon. OK I admit, I ripped off the from Google’s logo color-set. But as my friend pointed out, I could have ripped off the color-set from Windows too

Anyway, let’s get started with project. Here are the tools needed: Paint.NET, ColorPic (color picker), and Junior Icon Editor.

Since it is very easy, I won’t go through the details. I’ll just give you these steps. I hope you can figure it out on your own.

Create a new Image in Paint.NET. The canvas must be in square shape. I usually use 200×200 size.
Use ColorPic to find out the color codes used on existing image.
Once image complete, start Junior Icon Editor. Create all the possible size combination (16×16, 24×24, 32×32, 48×48, 64×64)
On Paint.NET, resize the Image to 64×64, select All (Ctrl + A), Copy (Ctrl + C) the image
On Junior Icon Editor, select the 64×64 part, Paste (Ctrl + V) the image
Repeat above two steps for remaining sizes
On Junior Icon Editor, save the image as favicon.ico
Upload the favicon.ico to the root folder of your website / blog
…..
Profit?!??!

Once you’ve done above steps, you can test it whether it works. Below is the picture of SODEVE’s favicon.ico in various browsers:

I hope it helps Cheers!

Share and Enjoy

[Solved] IRAS Validation and Submission Application Error: Found unsigned entry in resource

Hardono — Mon, 28 Feb 2011 11:21:24 +0000

My HR colleague called me this morning because she’s having problem with Inland Revenue Authority of Singapore (IRAS) Validation and Submission Java Application (JNLP) which can be found HERE.

The error window that she had was:

click Details to view the Exception:

To solve this issue, you need to do the following steps:

Remove the proxy settings (optional). There’s a chance that the your HTTP Proxy server is caching the outdated version of the applet
Clear your Java cache. Go to Control Panel – Java. click Settings, then click Delete Files.
Set JNLP File/MIME Association. In Java Cotrol Panel, click Advanced tab. Expand JNLP File/MIME Association. Select Promp User.

You should by now fixed the issue. When you launched the Java Application you should have the following prompt:

Click Run, and you are set to validate your Employment Income submission.

If it’s still not working, drop a comment and we’ll see what we can do .

Share and Enjoy

Commercial Git / SVN Hosting Comparison

Hardono — Thu, 13 Jan 2011 10:32:21 +0000

I was searching for a place to host my SVN/Git repositories for my private projects. After hours of searching, I found a number of providers. So I compile some of their basic features, and present it here.

Warning: The interactive table below is created using Yahoo User Interface library (YUI), so you need to enable your Javascript.

Tools used:

Disclaimer: The data is provided as it is. I am not liable for any incorrectness in the data. If you found that the data is misleading/incorrect, leave a comment/contact me. I will make a reasonable attempt to incorporate your changes.

Filter by Provider:

Share and Enjoy

No related posts.