how to stop slideshow while mouse hover's on drop down menu

Question

0.00/5 (No votes)

See more:

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 6-Jan-15 0:25am

S.Rajendran from Coimbatore

Add a Solution

Comments

Sanket Saxena 6-Jan-15 6:31am

Any working link? Seems can be manage by a minor css change only.

S.Rajendran from Coimbatore 6-Jan-15 6:37am

<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

S.Rajendran from Coimbatore 6-Jan-15 6:48am

Yes, but it is not even getting hidden.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Nathan Minier · Accepted Answer · 2015-01-06T01:58:00

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>