Archive for category web development

Simple FAQs with jQuery

Posted by Nishanth in web development on February 21st, 2010

There are lot of such FAQs toggle scripts available and you will be asking why I wrote a new one. The reason is simple to make the script work with different and most used html structures. Most of the time user will be entering data from CMS and we have to make the script working with that. This script is customized to work with content management system so any HTML header tag(h1 -h6) followed by a content tag will do . Any bugs please report ;) .

Click here to see a demo

Code :

jQuery.fn.faqs=function(options) {
var settings = {showFirst:true,activeClass:'opened'};
if(options) {jQuery.extend(settings, options);}
	$(this).each(function() {
	var cObj=this;
	$(this).find(":header").not(this).next("*:not(:header)").hide();
	if(settings.showFirst) {
	$(this).find(":header:first").addClass(settings.activeClass).not(this).next("*:not(:header)").show();
	} 
	$(this).find(":header").click(function(e) {
	$(this).toggleClass(settings.activeClass).next("*:not(:header)").toggle(':animated');
	$(this).parents().filter(cObj).find(":header").not(this).next("*:not(:header)").hide().prev(":header").removeClass(settings.activeClass);
 	});
	});
}

How to call ?

$(function() {
$(".faq1, .faq2, .faq3").faqs({showFirst:true,activeClass:'active'});
});

No Comments

Thickbox(3.1) image group not working with latest jQuery? Try this

Posted by Nishanth in web development on February 15th, 2010

Today one of my colleague faced an issue with Thickbox. He was using “rel” tag to group images and show in gallery. Code was working fine but suddenly it stopped working after updating the jQuery library to latest version(1.4). After lot of debugging we found the issue. Below line throws an exception
“unrecognized expression: “.

 TB_TempArray = $("a[@rel="+imageGroup+"]").get();

Issue was with “@” selector which was not supported in latest jQuery. We had replaced it and finally got the code working.

TB_TempArray = $("a[rel="+imageGroup+"]").get();

Hope this may help someone :)

,

4 Comments

jQuery height function not working in thickbox iFramed content? try this

Posted by Nishanth in web development on March 29th, 2009

Last week we were trying to run a scroll script (DYN-WEB’s scrolling code ) inside thickbox iFramed content. Unfortunately code was not working and the reason was the element height not working. We tried alternative jQuery element height and the result was same. The height we were getting was ‘0′.

Finally we fixed this issue by using setTimeout and calling the scroll script after a small delay.

 $(function() {
    	alert($(".box").height()); // not working, what we got was '0'
    	setTimeout('alert($(".box").height());',500); // worked
 
  })

Hope this may help someone :)

,

2 Comments

Iterating CSS class for elements using jQuery

Posted by Nishanth in web development on March 5th, 2009

This is a small jQuery extension used for iterating class for elements. Here you can specify class name and also you can specify how to iterate the class. You can pass multiple class names for iteration.

Click here to see a demoDownload demo


How to call ?

$("div.row").iterate({iterateBy:2,className:'alternate'});
$("div.row").iterate({iterateBy:3,className:'red,green,yellow'});

No Comments

Trying to avoid duplicate content in my blog

Posted by Nishanth in web development on March 1st, 2009

After watching video about Canonical link element By Matt Cutts , I analyzed my site for possible duplicate content. I found that there are some pages having duplicate content.

I had listed these pages below:

  1. Article listing based on tags and article detail page. This happens when there is only one article inside a tag.
  2. Article listing based on category and article detail page. This happens when there is only one article inside a category.

I started searching for word press plug-in. One plug-in I found was adding canonical link to page and post. The plug-in was named “No duplicate content”. What it does is adding canonical link element for single page and post.

<link rel="canonical" href="YOUR_PREFERED_URL"/>

For my blog I don’t need a canonical link element in article detail page. There is no chance of duplicate content for article detail page. The only url I am providing to search engines is the permalink of the page.

In category/tag page I found an alternative way to avoid duplicate content. I wrote a small script for permanent redirect (301) in category/tag page. The redirect is conditional the page will be redirected if there is only one post inside category/tag page.

add_action ( "template_redirect", "canonicalLink");
function canonicalLink() {
	global $wp_query;
	$postCount = count($wp_query->posts);
	if((is_category()|| is_tag()) && $postCount==1) {
	 return wp_redirect(get_permalink($wp_query->posts[0]->ID),301);
	}
	return ;
}

I am experimenting with my blog, so I will be checking whether this script have any difference with Google indexing.

2 Comments

Divs of equal height using jQuery script

Posted by Nishanth in web development on February 21st, 2009

What the script do ?
Script will calculate the maximum height from the set of elements. While calculating it will consider the padding applied through CSS also . So have fun :)

Click here to see a demoDownload demo

How to call ?

$(document).ready(function(){
$(".my-equal-boxes").setEqualHeight();
});

JQuery extended function

   jQuery.fn.setEqualHeight=function(o) {
    	var maxHeight=0;
    	var maxElement=null;
     	jQuery(this).each(function(i) {
          		if((jQuery(this).height()+parseInt(jQuery(this).css("padding-bottom"))+parseInt(jQuery(this).css("padding-top")))&gt;maxHeight) {
    			maxHeight=jQuery(this).height()+parseInt(jQuery(this).css("padding-top"))+parseInt(jQuery(this).css("padding-bottom"));
    			maxElement=this;
    		}
    	});
    	jQuery(this).not($(maxElement)).each(function() {$(this).height(maxHeight-parseInt(jQuery(this).css("padding-top"))-parseInt(jQuery(this).css("padding-bottom")))})
    }

,

3 Comments

Files to edit for enabling cURL in XAMPP?

Posted by Nishanth in web development on February 19th, 2009

Last week I was installing “Magento” on XAMPP . Then I realized that cURL was disabled by default in XAMPP. I changed   “\apache\php\php.ini” and uncommented the line for cURL extension but still not working. Finally I made it working by editing couple of “ini” files. I had listed these ini’s below.

\xampp\apache\bin\php.ini
\xampp\apache\php\php5.ini
\xampp\apache\php\php.ini
\xampp\apache\php\php\php4.ini (to switch PHP version)

To enable cURL you need to uncomment the below line

;extension=php_curl.dll

to 

extension=php_curl.dll

, ,

No Comments

JQuery Script to highlight current page’s navigation link

Posted by Nishanth in web development on February 16th, 2009

This is a small script used for highlighting the current page’s navigation link. Here you can also specify the scope by just removing “*” with your own expression. Here I am adding class “current” to the navigation link wich can be used for styling the link.

$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("current")
//add your own logic here if needed
})

,

No Comments

JQuery tooltip with HTML support

Posted by Nishanth in web development on February 14th, 2009

This tooltip is customized for adding html content as tooltip content.
You can put any formatted html as tooltip content. See the demo below, mouse over the icon and check the tooltip

Click here to see a demoDownload demo

How to call ?

$(document).ready(function(){
$(".formInfo").tooltip({tooltipcontentclass:"mycontent"})
});;

CSS : Here is the sample style used in this demo page.You can style this according to your site theme

#NT_copy {
background-color: #333333;
color: #FFFFFF;
font-weight: bold;
font-size: 13px;
font-family: "Trebuchet MS";
width: 300px;
left: 0;
top: 0;
padding: 4px;
position: absolute;
text-align: left;
z-index: 20;
-moz-border-radius: 0 10px 10px 10px;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=87);
-moz-opacity: .87;
-khtml-opacity: .87;
opacity: .87;
}

,

No Comments

Is adsensebot helping googlebot with indexing?

Posted by Nishanth in web development on February 14th, 2009

I believe that Adsensebot is helping googlebot with indexing.

After registering my domain I had submitted my site to https://www.google.com/webmasters/.
I was constantly checking if the site was indexed by google. As site was not indexed by the google I started googling for SEO realted articles. I came across several blogs and read some articles regarding adsense bot.Finally I decided to put adsense in my site. The very next day I got my homepage indexed in Google.

Google has been using a shared cache So any page crawled by any Googlebot is stored in the cache, then any other bot can first check the cache before sending out a page request So this way adsensebot may help googlebot.

1 Comment