Slider changes while mouse over the tabs
donkasok - June 26, 2009 - 07:38
| Project: | Slider |
| Version: | 6.x-1.x-dev |
| Component: | User interface |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs review |
Jump to:
Description
Currently in slider module one have to click on the tabs below/above to navigate to the slides , Is it possible to make while mouse over the tabs the slides will change.

#1
This is possible, but it would take some coding in the jQuery to get it right. Can you code jQuery?
#2
I dont know jquery, Can you please guide me, I am ready to pay for this feature too, coz i really need it
#3
Yeah I can guide you but unfortunately I'm not doing paid support at the moment. So I can offer a quick tip ... you need to bind to the hover event of the list items and then simulate the click in the callback.
You can try the paid support forums if you aren't a programmer. It shouldn't take more than a couple of hours.
#4
Thank you... I am trying to do myself... if icant accomplish this then i will look for a paid support in the forum.
Thank you for your support.
with regards,
Don
#5
Hi,
I was trying in forum and i think its take little time to get a response. Can u please help me to sort it out.I was trying to study jquery and i found its not so easy as it seems.I want this ability urgently. Please help me. If u don't take paid support , i can do donation on behalf of you or i can get something from your wish list.Please don't take this in a negative sense, i really need this ability for my website.
with regards,
Don
#6
CSS
---------
.tabs {
margin: 0;
padding: 0;
position: absolute;
bottom: 0;
z-index: 1;
}
.tabs li {
float: left;
display: block;
width: 10em;
background-color: #fff;
text-align: center;
}
.tabs li a {
padding: 0.2em;
display: block;
text-decoration: none;
color: #000;
border-top: 5px solid #fff;
font-size: 1.3em;
}
.tabs li a:hover {
border-top: 5px solid #333;
background-color: #666;
color: #fff;
}
JQUERY FOR HOVER NAVIGATION
--------------------------------------------------------
assuming panels are the slide container
---------------------------------------------------------------------------
var hoverIntent = null;
$tabs.find('a').hover(function () {
clearTimeout(hoverIntent);
var el = this;
hoverIntent = setTimeout(function () {
$panels.hide().filter(el.hash).show();
}, 100);
}, function () {
clearTimeout(hoverIntent);
}).click(function () {
return false;
});
Could you please check this code and if u are availabe please guide me how to integrate it with the existing slider
with regards,
Don Asok
#7
#8
Yes you can