Home/ Questions/Q 3223870
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T16:09:26+00:00

Hope someone can help. I have the code below which when the user hovers

  • 0

Hope someone can help. I have the code below which when the user hovers over the name the image and text in the div on the right changes.

How can I delay the hover so that when the user swipes across the page it doesnt change the content quickly… if that makes sense

<head>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script>


<script>$(document).ready(function() {
    switches = $('.switches > li');
    slides = $('#slides > div');
    switches.each(function(idx) {
            $(this).data('slide', slides.eq(idx));
        }).hover(
        function() {
            switches.removeClass('active');
            slides.removeClass('active');             
            $(this).addClass('active');  
            $(this).data('slide').addClass('active');
        });
    });</script>




    <style type="text/css">

.switches .active {
  font-weight: bold;
}

.switches {
 list-style-type:none;
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 line-height:21px;
 cursor:pointer;
 padding:0;


}

#slides div {
  display: none;
}

#slides div.active {
  display: block;
}

</style>

</head>

<body>


   <div id="people">

<h1>Our People<br />
</h1>

<table width="912" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="175" valign="top">
    <ul class="switches">
  <li class="active">Philip Havers QC</li>
  <li>Robert Seabrook QC</li>
  <li>James Badenoch QC</li>
  <li>Stephen Miller QC</li>
  <li>Kieran Coonan QC</li>
  <li>Terence Coghlan QC</li>
  </ul>

    </td>
    <td width="186" valign="top">
    <ul class="switches">
      <li>Guy Mansfield QC</li>
      <li>Sally Smith QC</li>
      <li>Elizabeth-Anne Gumbel QC</li>
      <li>Paul Rees QC</li>
      <li>Margaret Bowron QC</li>
      <li>Neil Garnham QC</li>

      </ul>
      </td>
    <td width="170" valign="top">
      <ul class="switches">
      <li>David Balcombe QC</li>
      <li>Joanna Glynn QC</li>
      <li>David Hart QC</li>
      <li>Martin Forde QC</li>
      <li>William Edis QC</li>
      <li>Wendy Outhwaite QC</li>
      </ul>
      </td>

    <td width="221" valign="top">
    <ul class="switches">
      <li>Wendy Outhwaite QC</li>
      <li>Angus McCullough QC</li>
      <li>Philippa Whipple QC</li>
      <li>Christina Lambert QC</li>
      </ul>
      </td>
    <td width="160" rowspan="3" valign="top">

<div id="slides">
  <div class="active"><img src="images/paul.jpg" width="160" height="178" alt="Paul" />
  Paul Woods, 
Senior Partner

    <a href="#">View CV ></a> 
</div>

  <div><img src="images/paul2.jpg" width="160" height="178" alt="Paul" /></div>
  <div><img src="images/paul3.jpg" width="160" height="178" alt="Paul" /></div>
  <div>I'm gone!</div>
  <div>kiren</div>
  <div>terence</div>
  <div>guy</div>
</div>



    </td>
  </tr>
  <tr>
    <td height="29" colspan="4">&nbsp;</td>
    </tr>
  <tr>
    <td><ul class="switches">
      <li>John Gimlette</li>              
<li>Marina Wheeler</li>            
<li>David Evans</li>                
<li>Henry Witcomb</li>               
<li>Andrew Kennedy</li>               
<li>John Whitting</li>               
<li>Martin Downs</li>
</ul>
</td>
    <td>
    <ul class="switches">
    Justin Levinson 
    <li>Sarah Lambert</li>
    <li>Owain Thomas</li>
    <li>Jeremy Hyam</li>
    <li>Oliver Sanders</li>
    <li>Ben Collins</li>
    <li>Shaheen Rahman</li>
    </ul>
    </td>
    <td>
    <ul class="switches">
    <li>Richard Smith</li>
    <li>Christopher Mellor</li>
    <li>Robert Kellar</li>
    <li>Matthew Barnes</li>
    <li>Sarabjit Singh</li>
    <li>David Manknell</li>
    </ul>
    </td>
    <td>
    <ul class="switches">
    <li>Richard Mumford</li>
    <li>John Jolliffe</li>
    <li>Rachel Marcus</li>
    <li>Pritesh Rathod</li>
    <li>Caroline Cross</li>
    <li>Matthew Donmall</li>
    <li>Suzanne Lambert</li>
    </ul>
    </td>
    </tr>
</table>
</div>


</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If all you want is a delay you could add a timeout, which would change your JavaScript to something like:

    $(document).ready(function() {
    var timeout = null;
    var delay = 500;
    var switches = $('.switches > li');
    var slides = $('#slides > div');
    switches
        .each(function(idx) { $(this).data('slide', slides.eq(idx)); })
        .hover(
            function() {
                var hoveredElement = $(this);
                timeout = setTimeout(function(){
                    switches.removeClass('active');
                    slides.removeClass('active');             
                    hoveredElement.addClass('active');  
                    hoveredElement.data('slide').addClass('active');
                }, delay);
            },
            function(){
                clearTimeout(timeout);
                slides.removeClass('active');
            });
    });

    Further to this it would probably be nicer if you maybe faded in the content on the slides, using the animate() and stop() methods to stop it going crazy if the user hovered over lots of options.

    • 0