SODEVE » Software

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

Download Data Terbaru Sertifikasi Guru 2012

Hardono — Sun, 13 Nov 2011 17:14:20 +0000

Setelah melakukan pengecekan data, rupanya PusBangProDik telah mengupdate data mereka.

Sebetulnya saya ingin download semua data yang baru dan mengupdate semua blog post yang sudah ada, tapi kok kayaknya bakal makan waktu yang banyak ya . Maka saya memutuskan untuk membuat program yang bisa langsung dipakai di website ini, itung-itung sambil belajar Flex Programming.

Untuk bisa menjalankan program ini, Flash Player (minimal ver 10.2) diperlukan. Langkah untuk mengunduh data cukup singkat:

Pilih Propinsi
Pilih Kabupaten
Tekan Download button
Tunggu sampai download selesai, kemudian tekan Save As button
Pop-up window akan keluar, sekarang pilih lokasi untuk menyimpan file, dan tekan Save button

Informasi Kelulusan UKA: Download Daftar Kelulusan Peserta Uji Kompetensi Awal (UKA) Sertifikasi Guru 2012 – Versi Komplit

Download Daftar Sementara Calon Peserta Sertifikasi Guru Departement Agama (DEPAG) 2012 [klik disini]

To view this page ensure that Adobe Flash Player version 10.2.0 or greater is installed.

Semoga bisa membantu bapak/ibu guru sekalian

UPDATE

~~My apology Apparently Adobe Flash cannot download HTML file from other domain. That’s why the Flash form above doesn’t work. Let me find another way to download the latest Sertifikasi 2012 data.~~

I did a work around, by creating a cached proxy, here at sodeve.net. The proxy basically is a simple PHP’s curl method call. The cache will be refreshed daily.

UPDATE 23 Nov 2011

I just realized that my proxy didn’t set the expired header for the content retrieved. Thus, you may NOT get the latest data. So if you have ever dowloaded data from here, you NEED to clear your browser’s cache.

UPDATE 27 Dec 2011

Memperbaiki bug dimana halaman terakhir tidak diikutkan.
Memperlihatkan jumlah Kuota

UPDATE 5 April 2012

Mengkoreksi Download Files utk Sertifikasi Guru Departement Agama (Depag) 2012

PENTING: Untuk memastikan anda mendapatkan data terbaru, anda perlu membersihkan cache browser anda.

Share and Enjoy

Installing VirtualBox In Windows

Hardono — Wed, 12 Oct 2011 11:00:38 +0000

VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Not only is VirtualBox an extremely feature rich, high performance product for enterprise customers, it is also the only professional solution that is freely available as Open Source Software under the terms of the GNU General Public License (GPL) version 2.

Between VMWare Workstation and VirtualBox, I prefer the later. Mainly because it’s free . It’s also sufficient to my need, which is pretty basic. I want to have a mini environment with a number of different database servers to test my application at home.

Anyway, the installation is really straight forward. Just by clicking Next buttons and Yes buttons, I think you should get your VirtualBox up and running.

Here are the screen captures for your viewing pleasure.

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

Building NGINX Reverse Proxy on Windows using VMWare Player

Hardono — Sun, 12 Jun 2011 10:58:40 +0000

In my recent project, I was required to open up a portion of an Intranet web application to external customer. I was researching for options.

Yes, IIS7 has an Application Request Routing extension. But since my public facing server is Windows 2003 Server, IIS7 was out.

Then I read Karl Seguin’s post on using NGINX to improve ASP.NET Performance. So I said to myself, let’s get dirty on this

My first step was to download VMWare Player. Why VMWare Player? Mainly because it’s free. You just need to register, activate VMWare account, then grab the installer.

Next step is to download Ubuntu Server VMWare image. Visit http://www.thoughtpolice.co.uk/vmware/ and grab a copy.

By now I believe you already run the Ubuntu server in VMWare Player.

Login as ‘notroot’. Password: ‘thoughtpolice’
Download Nginx source code. Command: wget http://nginx.org/download/nginx-1.0.4.tar.gz
Follow the following commands to extract the archive:
1. gunzip nginx-1.0.4.tar.gz
2. tar -xf nginx-1.0.4.tar
Follow the following commands to install the required runtime libraries:
1. sudo -s
2. apt-get update
3. apt-get install gcc
4. apt-get install libpcre3 libpcre3-dev
5. apt-get install zlib1g-dev
6. exit
Follow the following commands to build nginx:
1. cd nginx-1.0.4
2. ./configure
3. sudo make install

By now you should have NGINX installed to /usr/local/nginx. You could now edit the configuration in /usr/local/nginx/conf/nginx.conf. If you’re not sure how, NGINX’s documentation have section with many examples on how to configure NGINX. Editing the .conf is done using vi, so iIf you’re unfamiliar with vi, you could read a simple intro here.

Have fun!

Share and Enjoy

Internet Explorer 9 (IE9) for Windows XP released today!!!

SQLPal: Amazingly Simple and Fast Oracle Query Tools

Hardono — Tue, 07 Jun 2011 05:05:12 +0000

In the past I have talked about using Tora to connect to Oracle. I also listed down downloads of Oracle Client for Windows.

Today I am going to introduce you to SQLPal.

Installation

No installation needed! Just download the zip file and extract it at your convenience. You also need to have the latest JRE installed.

Important: If you get an error when connecting to Oracle you need to update the JDBC driver included with SQLpal. Find classes12.jar in your Oracle installation and copy the file over to your SQLpal directory, replacing the existing file.

Setting Up Oracle Connection

Click the ‘power-plug’ icon to initiate connection. It will ask you to provide:

User ID
Password
Oracle’s server host name
Oracle’s server port number
Oracle’s server System ID (SID)

If you don’t know what is your Oracle server’s SID, connect to Oracle using your existing tools, and run the following query:


select instance from v$thread

SQLPal is very simple yet sufficient. It has only four tabs:

SQL Prompt. This tab is pretty much like SQL*Plus with steroid. You can:
1. run queries
2. use Up / Down key to retrieve previous queries
3. bookmark your queries (Bookmarks -> Bookmark last command …)
4. export query result to Excel (by pressing the Excel icon)
Scratchpad. This tab is just like any other query editor. You can:
1. load/save SQL file
2. save query result as HTML
3. export query result to Excel (by pressing the Excel icon)
Schema Browser. This tab will help you to see the details of every Oracle objects (Procedures, Packages, Functions, Tables, Views, Sequences, Synonims). Some objects are read-only (Tables, Views, Sequences, Synonims). But the rest are editable.
Research. This tab is basically a browser pointing to resources that might help you when you hit a stumbling block.

Try this tiny and efficient tools. I’m sure you going to like it very much!

Credit:

timewasteblog.com

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

I Love 7-Zip

Hardono — Mon, 10 Jan 2011 16:54:42 +0000

In case you still using Winzip, switch to 7-Zip now! I love this 1MB installation-tool. It’s super-efficient in compressing files. And the best part is, this awesome tools is free.

As Fred R. Barnyard said, ‘one picture is worth a thousand words’. Lo! And behold!

Share and Enjoy

Windows Oracle Clients Download

Hardono — Sun, 09 Jan 2011 16:20:00 +0000

In case you’re looking for Windows Oracle Clients, here are the links:

Oracle 11g Release 2 Client 32-bit 64-bit
Oracle 11g Release 1 Client 32-bit 64-bit
Oracle 10g Release 2 Client 32-bit 64-bit

If you’re looking for Oracle Client v. 9 and below, sadly it’s no longer available publicly at Oracle website. You can still call their sales rep and request for quotation though.