Click here to Skip to main content
14,836,551 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a menu bar with some drop down menus. When I hover, I display dropdowns. I also have a slideshow banner div '#slideshow' beneath this menu bar. The drop down menus are getting disturbed when the slide show moves to the next image. That is, it disappears and displays again until such time I keep the mouse over this drop down menu. How to make this drop down menu not disturbed because of this slide show. I think that the functioning of this slide show should be stopped until such time the mouse is over the dropdown menu. Is it possible? In css I tried with .menubar ul li ul li a:hover>#slideshow
{
display:none;
}
XML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script type="text/javascript">
       debugger;
       function slideShow() {

           var showing = $('#slideshow a.show');
           var next = showing.next().length ? showing.next() : showing.parent().children(':first');
           var timer;

           showing.fadeOut(800, function() { next.fadeIn(600).addClass('show'); }).removeClass('show');

           setTimeout(slideShow, 5000);

       }
       $(document).ready(function() {
           slideShow();
       });
       </script>


CSS
.menubar ul li ul li a:hover>#slideshow
{
 display:none;
}

 /*menu bar area ends*/

/*slide show starts*/


  #slideshow
  {
     margin-left:-230px;
     margin-top:66px;
  width:850px;
  height:189px;
 -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

}

#slideshow a{
    display:none;
}

#slideshow a:first-child {
    display: block;
 }
#slideshow .show
{
    width:800px;
}
/*slide show ends*/
Posted
Comments
Sanket Saxena 6-Jan-15 6:31am
   
Any working link? Seems can be manage by a minor css change only.
   
<div class="menubar" style=" height:33px; border-style:groove; border-width:thin; width:859px;">
<ul>
<li> Contact us </li>
<li> Causes list </li>
<li> Corporate issues
<ul style="">
<li> Incorporation </li>
<li> Merger and acquisitions </li>
<li> Arbitration </li>
<li> Representations </li>
<li> Legal outsourcing </li>
<li> Intellectual property </li>
</ul>


</li>
Sanket Saxena 6-Jan-15 6:46am
   
you code
.menubar ul li ul li a:hover>#slideshow
{
display:none;
}
not making any sense because you are hiding the slideshow instead of stopping it.

may be u can try by making the
var showing = $('#slideshow a.show'); to be global and then onmouseover of the dropdown just manage the fadeIn and fadeOut using jQuery
   
Yes, but it is not even getting hidden.

1 solution

You'll want to define a toggle in the page script, and have the slideshow function only execute if the toggle is not set. Then link your menu item hover events to that toggle::


JavaScript
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script type="text/javascript">
       debugger;
       var canSlide = true; //this is your toggle variable
       function slideShow() {
           if(canSlide) //check if toggle is set
           {
               var showing = $('#slideshow a.show');
               var next = showing.next().length ? showing.next() : showing.parent().children(':first');
               var timer;
 
               showing.fadeOut(800, function() { next.fadeIn(600).addClass('show'); }).removeClass('show');
           }
           setTimeout(slideShow, 5000);
 
       }
       $(document).ready(function() {
           slideShow();
       });
       $(".menubar ul li ul li a").mouseover(function(){canSlide = false;}).mouseout(function(){canSlide=true;}); //set toggle
       </script>
   
v2
Comments
   
Thank You. It works.Fine.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900