Imthiaz Blog

It has been really long time since I worked on my blog to improve the look and feel. I keep doing this once in while since I usually get annoyed at look at the blog with same template. This time I was fascinated with the template from YG Desire. I downloaded the theme and made the customization what I had done in my old theme. Once I have completed I decided to drop my old light box code and I moved to jquery light box.

One thing I hated the most in light box is to edit each link for the image and update with class and rel code. Based on the new theme I wrote a small snippet which will insert the needed class and other attributes for the light box to work.

$(document).ready(function(){
$('div.entry img').each(function(){
if($(this).parent().is('a')){
$(this).parent().attr('rel',$(this).parents('div.entry').attr('id'));
$(this).parent().attr('class','jqueryLightbox');
}
});
});

Demo :

The above code will search for all images in my post div and if the parent is a link it will add the needed attributes to the link. Well it is working fine if the link is an image. Have to add a check and lazy to do it

My sidebar is always big and I am greedy to show lot of links like archives, tags, pages etc. The template I selected looked well for accordion style listing. So I made the sidebar into an accordion panel.

I removed old  highlight plugin and I changed the same with syntax highlight wordpress plugin. Well my blog looks very cool with new code hightlight feature. Here after sharing code snippet will not be a problem.

Phew that is a lot of work I have done the whole day. I started simple and got involved and worked the whole day on this. Now my blog looks great with new features

Personal javascript, jquery, wordpress

For past few days I was playing around with this javascript library jquery which is really light and powerful.
This was told by Nishanth from our company. He is a great fan of this tool and even I am one now.

http://jquery.com/

Some of examples to use this library

$(”p.surprise”).addClass(”ohmy”).show(”slow”);

The selectors are really powerful and makes life very easier. Samples

Hide all Paragraph elements that contain a link:

$(”p[a]“).hide();

Show the first paragraph on the page:

$(”p:eq(0)”).show();

Hide all divs that are currently showing:

$(”div:visible”).hide();

Get all list items that are children of an unordered list:

$(”ul/li”)
/* valid too: $(”ul > li”) */

Get all Paragraphs, with a class of ‘foo’, that have a link in them:

$(”p.foo[a]“);

Get list item that contains link with “Register” text inside:

$(”li[a:contains('Register')]“);

Get the input field’s value with the name of ‘bar’:

$(”input[@name=bar]“).val();

All checked radio buttons:

$(”input[@type=radio][@checked]“)

Programming javascript