In this JavaScript accordion slideshow we did 2 months back, we took the help of MooTools compact framework.
The slideshow works fine in all browsers except in IE 6 & 7, where a statement in the paragraph denoted by <p> tags does not automatically break (see picture below) to the next line.
This small lacuna in IE renders the slideshow somewhat unattractive in that browser.
You can however work your way out by manually breaking the statement with a <br /> tag at the appropriate place.
This typically happens because of different interpretation of <p> style by IE for the MooTools accordion slideshow.
In this video article we will do the same JavaScript accordion slideshow with jQuery library. You can have a look at the slideshow below.
Move your mouse over the Facebook and Twitter logos, and see how the respective accordions play out.
If the MooTools script is not properly reflected in IE, the jQuery JavaScript accordion slideshow script as used here has its own share of irritants too.
Since the accordion works with <a> tag, 2 things happen.
- When the page loads, the accordion window set to default with ‘a1’, always opens first. This can be avoided with MooTools accordion slideshow.
- No other hyperlink is possible inside the accordion.
If these minor hiccups are okay with you, then let us proceed to the html code. It’s given below for the above accordion slideshow.
Before you can put it in action in your website, do not forget to get the free jQuery user interface framework that is referred to in the head section.
HTML Code
<html><head>
<title>JavaScript Accordion Slideshow | 2WebVideo.Com</title>
<script src="jquery132min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 360;
minWidth = 120;
$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
<style>
* {margin:0; padding:0;}
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 0px;
display: block;
margin-right: 10px;
}
ul li a{
display: block;
overflow: hidden;
height: 90px;
width: 120px;
margin: 1px;
}
#a1{
width: 360px;
}
ul li img{
position: absolute;
}
ul li p{
font:normal 11px verdana; line-height: 14px;
margin: 0;
padding: 0;
width: 233px;
display: block;
margin-left: 125px;
}
p.left {
color:#fff; background:#ff0000;
}
p.middle {
color:#333; background:#d3d2d0;
}
p.right {
color:#202000; background:#c0c000;
}
</style>
</head>
<body>
<ul>
<li style="background:#ff0000;">
<a id="a1">
<img src="2wv-logo.png" />
<p class=left>
<strong><u>2WebVideo</u></strong><br/><br />
2WebVideo video production course provides value, and is highly popular. Check out now.
</p>
</a>
</li>
<li style="background:#d3d2d0;">
<a>
<img src="facebook-logo.png" />
<p class=middle>
<strong><u>Facebook</u></strong><br/><br />
Facebook is the third most popular web destination in India, coming after Orkut and YouTube.
</p>
</a>
</li>
<li style="background:#c0c000;">
<a>
<img src="twitter-logo.png" />
<p class=right>
<strong><u>Twitter</u></strong><br/><br />
Among the most popular social media tools, Twitter has recently broken into top-50 most visited sites in the US.
</p>
</a>
</li>
</ul>
</body>
</html> This article of October 6th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
