I have an UL
list with several links in it, and each item is linked to its own DIV
. When the user hovers over UL link, proper DIV
box is shown.
Here is my HTML code:
<ul class="productlist">
<li><a href="#" id="link0" class="product-link">Link 1</a></li>
<li><a href="#" id="link2" class="product-link">Link 2</a></li>
<li><a href="#" id="link3" class="product-link">Link 3</a></li>
</ul>
<div class="panel-overview boxlink" id="boxlink0"> Something goes here 1 </div>
<div class="panel-overview boxlink" id="boxlink1"> Something goes here 2 </div>
<div class="panel-overview boxlink" id="boxlink2"> Something goes here 3 </div>
and the JavaScript that makes it work (not a JavaScript expert, sorry):
<script>
$(function() {
var $boxes = $('.boxlink');
$('.productlist .product-link').mouseover(function() {
$boxes.hide().filter('#box' + this.id).show();
});
});
</script>
I was wondering how can I make the boxes to be scrolled through automatically every 3 to 4 seconds. So for example, first DIV
is opened for 3 seconds, then the second, then the third...
Here is the the live site, since I haven't really described it properly.
Your description wasn't very clear to me, but this is how I interpereted it after viewing your website: Cycle through the links to show the nice images. This will happen automatically. BUT. If user wants to navigate, the cycle should stop
Here is the code for that.
$(document).ready(function () {
var $boxes = $('.boxlink');
var $links = $('.product-link');
var cycle = false;
var cycle_step = 0;
$('.productlist .product-link').mouseenter(function() {
boxActivate(this.id);
stopCycle();
});
$('.productlist .product-link').mouseleave(function() {
cycle = setTimeout(function(){
startCycle();
}, 1000);
});
var boxActivate = function(id){
$boxes.hide().filter('#box' + id).show();
}
// cycle - only when mouse is not over links
var startCycle = function(){
cycle = setInterval(function(){
boxActivate($links.get(cycle_step).id);
cycle_step++;
if(cycle_step==$links.length) {
cycle_step=0;
}
}, 1000);
}
var stopCycle = function(){
clearInterval(cycle);
}
startCycle();
});
try it like this:
HTML:
<ul class="productlist">
<li><a href="#" id="0" class="product-link">Link 1</a></li>
<li><a href="#" id="1" class="product-link">Link 2</a></li>
<li><a href="#" id="2" class="product-link">Link 3</a></li>
</ul>
<div class="panel-overview boxlink" id="boxlink0"> Something goes here 1 </div>
<div class="panel-overview boxlink" id="boxlink1"> Something goes here 2 </div>
<div class="panel-overview boxlink" id="boxlink2"> Something goes here 3 </div>
I changed the IDs of the <a>
s.
JS
var current_box = 0; // Saves current shown box for timer
var timer_break = false; // Determines if timer shows boxes or not
// Function hides all boxes
function hide_boxes() {
$('.boxlink').hide();
}
// Function shows box wit box_id and hides all other boxes
function show_box(box_id) {
hide_boxes();
$('#boxlink'+box_id).show();
}
$(document).ready(function () {
// Bind show_box to HOVER Event
$('.product-link').mouseover(function () {
timer_break = true;
show_box($(this).attr('id'));
});
// Bind hide_box to MOUSEOUT Event
$('.product-link').mouseout(function () {
timer_break = false;
hide_boxes();
show_box(current_id); // So there is no "gap" until the timer hits again
});
// Initiate Timer
var show_timer = setInterval(function () {
if(!timer_break) {
if(current_box < 2) {
current_box++;
} else {
current_box = 0;
}
show_box(current_box);
}
},3000);
// Show first Box after loading
show_box(current_box);
});
Working JS Fiddle: http://jsfiddle.net/8527K/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With