ansaurus

Question

How do you swap DIVs on mouseover? (jquery?)

Answer 1

A:

The only thing that's wrong with this code (at least to me) is that you're not using a loop to process all elements. Other than that, why not to it like that?

And with loop, I mean grabbing the container element via a JQuery and iterating over all child elements – basically a one-liner.

Konrad Rudolph 2008-08-29 16:08:41

Answer 2

+4 A:

Here's the jQuery version:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(function () {
    $("#switches li").mouseover(function () {
     var $this = $(this);
     $("#slides div").hide();
     $("#slide" + $this.attr("id").replace(/switch/, "")).show();
     $("#switches li").css("font-weight", "normal");
     $this.css("font-weight", "bold");
    });
});
</script>

<ul id="switches">
  <li id="switch1" style="font-weight:bold;">First slide</li>
  <li id="switch2">Second slide</li>
  <li id="switch3">Third slide</li>
  <li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>

travis 2008-08-29 16:21:23

Answer 3

+1 A:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(
  function(){
    $( '#switches li' ).mouseover(
      function(){
        $( "#slides div" ).hide();
        $( '#switches li' ).css( 'font-weight', 'normal' );
        $( this ).css( 'font-weight', 'bold' );
        $( '#slide' + $( this ).attr( 'id' ).replace( 'switch', '' ) ).show();
      }
    );
  }
);

</script>
</head>
<body>
<ul id="switches">
  <li id="switch1" style="font-weight:bold;">First slide</li>
  <li id="switch2">Second slide</li>
  <li id="switch3">Third slide</li>
  <li id="switch4">Fourth slide</li>
</ul>
<div id="slides">
  <div id="slide1">Well well.</div>
  <div id="slide2" style="display:none;">Oh no!</div>
  <div id="slide3" style="display:none;">You again?</div>
  <div id="slide4" style="display:none;">I'm gone!</div>
</div>
</body>
</html>

mojo 2008-08-29 16:30:30

Answer 4

+2 A:

Nice. travis and I were both pushing in the same direction, but did things quite differently. I'd normally swallow a similar answer, but the code below highlights something that jquery really handles well, which is allowing you to separate out the handling to the pieces that are best suited for it. The HTML contains only the elements. The javascript adds/removes classes, and hooks up events. CSS is used for styling.

EDIT: Code removed. Carl Meyer's version did the same thing my original code did, but cleaner and simpler, especially using the .hover() jquery method instead of .mouseover(), and using real objects almost everywhere, instead of easily-broken string selectors. If you switched IDs in the future, you would only need to modify slide_for_switch() and the selector used in his $(document).ready() method.

Thomas G. Mayfield 2008-08-29 16:30:50

Answer 5

+11 A:

$(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');
        });
    });

Rather than displaying all slides when JS is off (which would likely break the page layout) I would place inside the switch LIs real A links to server-side code which returns the page with the "active" class pre-set on the proper switch/slide.

And here's the HTML:

<html>
<head>

<title>test</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="switch.js"></script>

<style type="text/css">

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

#slides div {
  display: none;
}

#slides div.active {
  display: block;
}

</style>
</head>
<body>

<ul id="switches">
  <li class="active">First slide</li>
  <li>Second slide</li>
  <li>Third slide</li>
  <li>Fourth slide</li>
</ul>
<div id="slides">
  <div class="active">Well well.</div>
  <div>Oh no!</div>
  <div>You again?</div>
  <div>I'm gone!</div>
</div>

</body>
</html>

Carl Meyer 2008-08-29 16:49:56

instead of doing this.slide i recommend using the data function: $(this).data('slide', slides[idx]); That way you don't clutter the DOM with data.

Pim Jager 2009-06-08 19:06:57

Good point, thanks. Edited to include this suggestion.

Carl Meyer 2009-06-09 15:35:26

Answer 6

+4 A:

Here's my light-markup jQuery version:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function switchTo(i) {
  $('#switches li').css('font-weight','normal').eq(i).css('font-weight','bold');
  $('#slides div').css('display','none').eq(i).css('display','block');
}
$(document).ready(function(){
  $('#switches li').mouseover(function(event){
    switchTo($('#switches li').index(event.target));
  });
  switchTo(0);
});
</script>
<ul id="switches">
  <li>First slide</li>
  <li>Second slide</li>
  <li>Third slide</li>
  <li>Fourth slide</li>
</ul>
<div id="slides">
  <div>Well well.</div>
  <div>Oh no!</div>
  <div>You again?</div>
  <div>I'm gone!</div>
</div>

This has the advantage of showing all the slides if the user has javascript turned off, uses very little HTML markup and the javascript is pretty readable. The "switchTo()" function takes an index number of which <li> / <div> pair to activate, resets all the relevant elements to their default styles (non-bold for list items, display:none for the divs) and the sets the desired list-item and div to bold and display. As long as the client has javascript enabled, the functionality will be exactly the same as your original example.

Neall 2008-08-29 16:53:06

ansaurus

tags:

views:

answers:

How do you swap DIVs on mouseover? (jquery?)

related questions