Pdesignz
asked on
Jquery help show/hide div content based on image
I am newbie to jquery, but I would like to have a div or div content display based on a icon or image selected. I would have 6 icons or images and based on the icon/image selected the div or content would display that relates to that icon/image. If possible to have a left and right arrow to cycle to content that would be great as well.
Here are two examples that I found and I like to reference...Thanks
https://www.bluefountainmedia.com/website-design (Section Labeled Web Design Process)
https://www.digitalhill.com/?a=what-we-do (Section Labeled Need Real Web Solutions)
Here are two examples that I found and I like to reference...Thanks
https://www.bluefountainmedia.com/website-design (Section Labeled Web Design Process)
https://www.digitalhill.com/?a=what-we-do (Section Labeled Need Real Web Solutions)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Great work!! Thanks
ASKER
Would it be possible to have different images as the selected state image?
ASKER
example tab1 has image 1, tab2 has image 2 for both image and selected state...thanks
use images like tab_1_on.png / tab_1_off.png (start with 0 for first image)
then use this
see, I am changing selected image as "tab_x_on.png" and previous selected one to "tab_p_off.png"
Line 9-10 added to current solution... I cannot test this since we need images ready and hosted on web server :)
then use this
var preIndex = 0;
$("#divNavigate .imgNav").click(function() {
var ix = $("#divNavigate .imgNav").index($(this));
console.log(ix);
$("#divNavigate .imgNav:eq('" + preIndex + "')").removeClass("selected");
$(this).toggleClass("selected");
$("#divContent .tab:eq('" + preIndex + "')").hide();
$("#divContent .tab:eq('" + ix + "')").show();
$("#divNavigate .imgNav").attrb("src","tab_"+ix+"_on.png");
$("#divNavigate .imgNav").attrb("src","tab_"+preIndex+"_off.png");
preIndex = ix;
});
see, I am changing selected image as "tab_x_on.png" and previous selected one to "tab_p_off.png"
Line 9-10 added to current solution... I cannot test this since we need images ready and hosted on web server :)
ASKER
Great! Thanks for the help...Let me try the images and see. So the 1st image or image 0 would that be tab_0_on or tab_0_off for the default selected state. Then I assume it would be _on for the select state and _off for the non selected state. Is it also possible to add title for the image that changes color on the select state or should I make the title be part of the image...Thanks!
default values "tab_X_off.png" and X will start from 0
there is no title involved here :)
<div id=divNavigate>
<img class="imgNav" src="tab_0_off.png">
<img class="imgNav" src="tab_1_off.png">
<img class="imgNav" src="tab_2_off.png">
<img class="imgNav" src="tab_3_off.png">
<img class="imgNav" src="tab_4_off.png">
<img class="imgNav" src="tab_5_off.png">
</div>
there is no title involved here :)
here is extended demo :)
https://jsfiddle.net/sfLez4u8/
added some visual styling, margin/padding/text etc...
https://jsfiddle.net/sfLez4u8/
added some visual styling, margin/padding/text etc...
ASKER
I tested this solution with images that I created and are hosted and it is not working. On default I have it setup where tab_0_on.png is loaded and the rest of the images use the tab_x_off.png images. When I click the other images, the images do not change from the _off to the _on state. Also when I click the images the content is loaded below the images, but additional content is loaded, so if I click 2,3,4 the content for 2,3,4 would be loaded and not switch between 2,3,4 as it was before... I also removed the reference to the .selected as I did not need this for now...
Here is the script I am using...
To reference the images you can go to http://www.dev.pdesignz.com/images/tab_x_on.png/
To see a working example you can go here and see the issues...
http://www.dev.pdesignz.com/web-design-development.html
Thanks!!
Here is the script I am using...
<script type="text/javascript">
var preIndex = 0;
$("#divNavigate .imgNav").click(function() {
var ix = $("#divNavigate .imgNav").index($(this));
console.log(ix);
$("#divContent .tab:eq('" + preIndex + "')").hide();
$("#divContent .tab:eq('" + ix + "')").show();
$("#divNavigate .imgNav").attrb("src","tab_"+ix+"_on.png");
$("#divNavigate .imgNav").attrb("src","tab_"+preIndex+"_off.png");
preIndex = ix;
});
$("#divNavigate .imgNav:eq(0)").click();
</script>
To reference the images you can go to http://www.dev.pdesignz.com/images/tab_x_on.png/
To see a working example you can go here and see the issues...
http://www.dev.pdesignz.com/web-design-development.html
Thanks!!
try
$("#divNavigate .imgNav:eq("+ix+")").attr("src","tab_"+ix+"_on.png");
$("#divNavigate .imgNav:eq("+preIndex+")").attr("src","tab_"+preIndex+"_off.png");
ASKER
Would this be correct, using what you just said to add...
When I do this the content changes, but the images are then hidden as I assume would now be the selected images but they are not displayed. Also on load the default selected image is also hidden by default, shows for about a second but then it hidden
<script type="text/javascript">
var preIndex = 0;
$("#divNavigate .imgNav").click(function() {
var ix = $("#divNavigate .imgNav").index($(this));
console.log(ix);
$("#divContent .tab:eq('" + preIndex + "')").hide();
$("#divContent .tab:eq('" + ix + "')").show();
$("#divNavigate .imgNav:eq("+ix+")").attr("src","tab_"+ix+"_on.png");
$("#divNavigate .imgNav:eq("+preIndex+")").attr("src","tab_"+preIndex+"_off.png");
preIndex = ix;
});
$("#divNavigate .imgNav:eq(0)").click();
</script>
When I do this the content changes, but the images are then hidden as I assume would now be the selected images but they are not displayed. Also on load the default selected image is also hidden by default, shows for about a second but then it hidden
:) you need to use same path...
looks like you are missing images
looks like you are missing images
$("#divNavigate .imgNav:eq("+ix+")").attr("src","/images/tab_"+ix+"_on.png");
$("#divNavigate .imgNav:eq("+preIndex+")").attr("src","/images/tab_"+preIndex+"_off.png");
<img class="imgNav" src="/images/tab_0_off.png">
>>>
<img class="imgNav" src="images/tab_0_off.png">
also, we need to check preindex initially...
var preIndex;
$("#divNavigate .imgNav").click(function() {
var ix = $("#divNavigate .imgNav").index($(this));
console.log(ix);
$("#divContent .tab:eq('" + preIndex + "')").hide();
$("#divContent .tab:eq('" + ix + "')").show();
$("#divNavigate .imgNav:eq("+ix+")").attr("src","images/tab_"+ix+"_on.png");
if (preIndex) $("#divNavigate .imgNav:eq("+preIndex+")").attr("src","images/tab_"+preIndex+"_off.png");
preIndex = ix;
});
$("#divNavigate .imgNav:eq(0)").click();
or just reverse off on
$("#divNavigate .imgNav:eq("+preIndex+")").attr("src","images/tab_"+preIndex+"_off.png");
$("#divNavigate .imgNav:eq("+ix+")").attr("src","images/tab_"+ix+"_on.png");
ASKER
Images were on server, but the last change you did fixed everything all working...If I want to add the images into a list item (ul) so that I can add spacing or center would this still work?
no it is not working as expected... fix that one first...
use this one
ie reverse these lines... right now first image is off, then on, then off initially, which we dont want it...
use this one
$("#divNavigate .imgNav:eq("+preIndex+")").attr("src","images/tab_"+preIndex+"_off.png");
$("#divNavigate .imgNav:eq("+ix+")").attr("src","images/tab_"+ix+"_on.png");
ie reverse these lines... right now first image is off, then on, then off initially, which we dont want it...
just use
or
or any combination :)
.imgNav {
cursor: pointer;
padding: 40px;
}
or
.imgNav {
cursor: pointer;
padding-right: 30px;
padding-left: 30px;
}
#divNavigate{
padding-bottom:30px;
}
or any combination :)
or put them in a table like
<table class="cebteredTable" style="width:100%">
<tr>
<td><img ...></td>
...
<td><img ...></td>
</tr>
</table>
.centeredTable td {
text-align:center;
}
ASKER
Great will give it a shot thanks! If I wanted to have a 3rd image for say the hover state, is that possible and how would I do that . I am thinking that if I add this, people would then see that the images are clickable as I am not sure they would figure that out in it's current state...thanks!
then you need "tab_x_hov.png" and need to write 2 functions
one for mouse in one for mouse out
or with jQuery
one for mouse in one for mouse out
or with jQuery
$( "#divNavigate .imgNav" ).hover(
function() { // hover in
// change img to "tab_x_hov.png"
}, function() { // hove out
// restore image somehow :)
}
);
ASKER
Not sure how to write the function or how I would do this...If you need I can post another question so you can get rewarded for the help you are providing...
sure
ASKER
Ok will that..
ASKER