JQuery - creating hide all / show this div image is more general
I have the following JQuery code.
basically I will have some overlapping divs and a list of links to the right of all those separated divs. when you hover over the link assigned to the div element, it disappears.
I have the following code and it works (it uses the default window image samples), but if anyone can come up with how to optimize it or make it generic, I would appreciate it.
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#trigger1").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divsunset").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divsunset").fadeIn(500);
});
$("#trigger2").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divwinter").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divwinter").fadeIn(500);
});
$("#trigger3").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divbh").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divbh").fadeIn(500);
});
$("#trigger4").mouseover(function() {
$(".contentdiv").addClass("inactive");
$("#divwl").removeClass("inactive");
$(".inactive").fadeOut(500);
$("#divwl").fadeIn(500);
});
});
</script>
<style>
#divsunset
{
position: absolute;
top: 5px;
left: 5px;
}
#divwinter
{
position: absolute;
top: 5px;
left: 5px;
}
#divbh
{
position: absolute;
top: 5px;
left: 5px;
}
#divwl
{
position: absolute;
top: 5px;
left: 5px;
}
#links
{
position: absolute;
top: 800px;
left: 700px;
}
.inactive
{
}
</style>
</head>
<body>
<div id="divsunset" class="contentdiv">
<img src="Sunset.jpg" />
</div>
<div id="divwinter" class="contentdiv">
<img src="Winter.jpg" />
</div>
<div id="divbh" class="contentdiv">
<img src="bh.jpg" />
</div>
<div id="divwl" class="contentdiv">
<img src="wl.jpg" />
</div>
<br />
<div id="links">
<a href="#" id="trigger1">Show Sunset</a>
<a href="#" id="trigger2">Show Winter</a>
<a href="#" id="trigger3">Show Blue Hills</a>
<a href="#" id="trigger4">Show Waterlillies</a>
</div>
</body>
</html>
Thanks Matt, TM and KRON, your answers really helped.
I don't feel like I have fully explained myself, but TM provided the answer I was looking for.
I wanted to follow DRY and the code provided by TM helped me the best this time as I didn't need to change the markup, just the jQuery code.
Thanks again. It's amazing how quickly I got a response. Continue in the same spirit.
source to share
The first thing you can do to make it cleaner is to replace all these similar calls with something more general.
(note: let's assume it's all inside 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 subjugate DRY with jQuery.
I am using $(element).data()
to set and retrieve some data in an element, in this case a selector used to update the corresponding element.
Also, for a cleaner visual experience, you can use the following instead $(document).ready()
if you like. It's the same, just different syntax.
$(function() {
//DOM ready
};
source to share
I answered a similar question a few months ago with jQuery Swapping Elements if that helps.
Matt
Clarrification where I have {id: '1'} you have to swap the id of the divs you want to show and create a generic class name on the other DIV to hide them.
Recall 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.
source to share
This is fine, but you will need a more general approach to the identifier you assigned.
The quickest solution that comes to mind is to wrap the overlapping divs that disappear under the parent div "#wrapped". Take all the links and assign them a trigger of the classes 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);
});
This is not the best possible solution, but hopefully it gives you an idea.
source to share