Home/ Questions/Q 8289151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T12:26:35+00:00

I am trying to create a content div with button links on a right

  • 0

I am trying to create a content div with button links on a right sidebar. When the user is not hovering over any of the buttons, the content should rotate through each of the five button topics (I’ve accomplished this). Also, when the user hovers over a specific button, what should happen is a) stop the rotation and b) display only the content topic related to that button.

Currently all I can make it do is rotate through the topics (with a Javascript function) and make content appear and disappear on hover (in HTML). Help please?

<script>
function rotatecontent(){
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
futcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex+1
messages[prevcontentindex].style.display="none"
messages[curcontentindex].style.display="block"
messages[futcontentindex].style.display="none"
}


window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent")
setInterval("rotatecontent()", 1000)
}
}

$('#container li').hover(function() {
    clearInterval(interval);
}, function() {
    interval = setInterval("rotatecontent()", 1000);
});

</script>

HTML:

 <body>


 <ul id="container">

 <li><a href="#">
 <img src="image1.jpg" width="250" height="100" class="Bab-
 image"></a></li>


 <li><a href="#"><img src="image2.jpg" class="sluotr-image 
 </a></li>

 <li><a href="#"><img src="image3.jpg" 
 class="blogs-image"></a></li>

 <li><a href="#"><img src="image4.jpg" class="chat-
 image"></a></li>

 <li><a href="#"><img src="image5.jpg" 
 class="view-image"></a>
 </li>

 </ul>

 <div class="dyncontent">
 <div id="div1">Content 1</div>
 <div id="div2" style="display:none">Content 2</div>
 <div id="div3" style="display:none">Content 3</div>
 <div id="div4" style="display:none">Content 4</div>
 <div id="div5" style="display:none">Content 5</div>
 </div>
 </body>
 </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a jsfiddle rotates until you hover over one of the hyperlinks, then resumes when you leave: http://jsfiddle.net/58pms/11/ (updated jsfiddle, original only went through one rotation)

    I feel like it’s hard to say what’s wrong with your original code since I had to add some variable declarations and HTML that were missing from your sample. I also took out the event handlers that would show the item you were hovering over for simplicity since I don’t think that was your main question.

    The HTML:

    <ul id="container" overflow:hidden>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
    <li><a href="#">Five</a></li>
</ul>
<div class="dyncontent">
<div id="div1">Be A Billiken</div>
<div id="div2" style="display:none">Be A Billiken 2</div>
<div id="div3" style="display:none">Be A Billiken 3</div>
<div id="div4" style="display:none">Be A Billiken 4</div>
<div id="div5" style="display:none">Be A Billiken 5</div>
</div>

    And the script:

    var messages;
var curcontentindex = 0;
var prevcontentindex;
var futcontentindex;
var i;

function rotatecontent() {
    messages.hide();
    curcontentindex = (curcontentindex < messages.length - 1) ? curcontentindex + 1 : 0;
    messages.get(curcontentindex).style.display = "block";
}


$(function() {
    messages = $('.dyncontent').find('div');
    i = setInterval(rotatecontent, 1000);


    $('#container li').hover(function() {
        clearInterval(i);
    }, function() {
        i = setInterval(rotatecontent, 1000);
    });
});
    • 0