ansaurus

Question

jQuery - making hide all/show this div image more generic

Answer 1

+4 A:

The first thing you can do, to make it cleaner is replace all those similar calls with something more generic.

(note: assume all of this is inside of document.ready())

$('#trigger1').data('target', '#divsunset');
$('#trigger2').data('target', '#divwinter');
$('#trigger3').data('target', '#divbh');
$('#trigger4').data('target', '#divwl');
$('#trigger1,#trigger2,#trigger3,#trigger4').mouseover(function() {
    var selector = $(this).data('target');
    $(".contentdiv").addClass("inactive");
    $(selector).removeClass("inactive");
    $(".inactive").fadeOut(500);
    $(selector).fadeIn(500);
});

Using comma-delimited selectors is a great way to obey DRY with jQuery.

I use $(element).data() to set and retrieve a some data on the element, in this case, the selector used to update the appropriate element.

Also, just for a cleaner visual look, you can use the following in the place of $(document).ready(), if you prefer it. It's the exact same thing, just a different syntax.

$(function() {
   //DOM ready
};

TM 2008-12-09 18:52:34

Answer 2

A:

It's good, but you'll need a more generic approach to the id's you've assigned.

The quickest solution that comes to mind is to wrap up the overlapped divs that fade in under a parent div "#wrapped". Take all the links and assign them CSS classes 'trigger NAME' where 'NAME' is 'Sunset, 'Winter', etc. Then you can do something like:


   $(document).ready(function() {

      $(".trigger").mouseover(function() {

                $(".contentdiv").addClass("inactive");
                $("#wrapper ." + $(this).attr('class')[1]).removeClass("inactive");
                $(".inactive").fadeOut(500);
        $("#wrapper ." + $(this).attr('class')[1]).fadeIn(500);
      });

It's not the best possible solution, but hope it gives you an idea.

kRON 2008-12-09 19:01:23

Answer 3

+1 A:

I replied to a similar question some months ago jQuery Swapping Elements if that helps.

Matt

Clarrification, where i've got {id:'1'} you should swap in the id of the div you want to show and make a generic class name on the other DIV's to hide them.

Remeber that you can apply mulitple classes to an element:

<Div class="name1 name2"></div>

which might help if you have style rules attached to the original divs.

Matt Goddard 2008-12-09 19:06:24

Answer 4

A:

Thank you Matt, TM and kRON, your responses really helped.

I dont feel I explained myself totally, but TM provided the answer I was looking for.

I wanted to follow DRY and the code TM provided helped me best this time since it did not require for me to alter my markup, just the jQuery code.

Again, thanks a lot. Its amazing how quickly I got the answer. Keep up the great work.

silverCORE 2008-12-09 19:40:53

ansaurus

tags:

views:

answers:

jQuery - making hide all/show this div image more generic

related questions