Posted by: Kathirvel K on: July 1, 2011
jQuery Code: <script type=”text/javascript” > jQuery(document).ready(function() { jQuery(“.AccordionMenu .AccordionHeader”).click(function() { jQuery(this).css({backgroundImage:”url(Open.png)”}).next(“div.AccordionContent”).slideDown(‘slow’, function() { if (jQuery(this).is(‘:visible’)) { jQuery(this).siblings(“div.AccordionContent”).slideUp(“slow”).siblings(“.AccordionHeader”).css({backgroundImage:”url(Close.png)”}); jQuery(this).prev(“.AccordionHeader”).css({backgroundImage:”url(Open.png)”}) } else { jQuery(this).siblings(“.AccordionHeader”).css({backgroundImage:”url(Close.png)”}); } }); }); }); </script> CSS Code: <style> .AccordionHeader { background: transparent url(Close.png) center right no-repeat; position:relative;padding: 7px 10px; cursor: pointer; margin:1px; font-weight:bold;color:#FFFFFF;height: 22px; } .AccordionContent { display:none; background: #FFFFFF !important; border: 1px [...]
Posted by: Kathirvel K on: July 1, 2011
This is explained how to do show more / show less option using jQuery for dynamically generated texts/links/lists. jQuery code: <script type=”text/javascript” > jQuery(function() { var adjustheight = 40; var moreText = "Show More"; var lessText = "Show Less"; jQuery(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden'); var listItem_size = jQuery(".more-block a").length if (listItem_size < = 8 ) { [...]
Posted by: Kathirvel K on: July 1, 2011
Internet Explorer conditionnal comments <!–[if IE]> <link href=”ie.css” rel=”stylesheet” type=”text/css” /> <![endif]–> You can also target only a certain version of IE: <!–[if IE6]> <link href=”ie.css” rel=”stylesheet” type=”text/css” /> <![endif]–> Internet Explorer hacks .class { width:200px; /* All browsers */ *width:250px; /* IE */ _width:300px; /* IE6 */ .width:200px; /* IE7 */ } Targeting Opera [...]
