Posts Tagged jquery

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 :)

,

2 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

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")))>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

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