I am sort of new to JS, and I'm having trouble getting my code to work exactly how I want it to.
(See JSFiddle https://jsfiddle.net/ey02227z/3/)
I have 3 images, and would like to be able to click on an image and have it show a hidden div, and then when the next image is clicked, I want it to hide the first div and show the next one.
(Click Image 1 to see HiddenContent1, Click Image2, it hides HiddenContent1 and shows HiddenContent2, etc.)
Here is My Code:
(I didn't include any JS because honestly, I don't know where to start.)
Thank you in advance!
#ImgContainer{
text-align:center;
}
.Hidden{
display:none;
}
.image:hover{
border: 1px solid purple;
}
#HiddenContentContainer{
text-align: center;
min-height:50px;
min-width:100%;
border: 1px solid teal;
}
<div id="MainContainer">
<div id="ImgContainer">
<img id="image1" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image2" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image3" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" />
</div>
<div id="HiddenContentContainer">
<h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3>
<div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div>
<div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div>
<div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div>
</div>
</div>
This may solve your problem.
Try It
HTML
<div id="MainContainer">
<div id="ImgContainer">
<img id="image1" class="image" data-target="#Hidden1" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image2" class="image" data-target="#Hidden2" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image3" class="image" data-target="#Hidden3" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" />
</div>
<div id="HiddenContentContainer">
<h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3>
<div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div>
<div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div>
<div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div>
</div>
JS:
//Normal hide-show
$(".image").click(function(){
$(".Hidden").hide();
$($(this).attr("data-target")).show();
});
//For Toggle same code
$(".image").click(function(){
$(".Hidden").hide();
if(!$($(this).attr("data-target")).hasClass("current")){
$($(this).attr("data-target")).show().addClass("current");
}
else{
$($(this).attr("data-target")).removeClass("current");
}
});
Here's a starting point:
// listen to clicks from any of the links
$( '#ImgContainer a' ).on( 'click', function( e ) {
e.preventDefault(); // not necessary in this case but good practice
var link = $( this ); // the link that was clicked
var index = link.index(); // its index position
$( '#HiddenContentContainer div' ).addClass( 'Hidden' ); // reset all to hidden
$( '#Hidden' + ( index + 1 ) ).removeClass( 'Hidden' ); // remove the hidden associated with this clicked link
});
Included comments to help you better understand what each line does.
Related
I'm building a simple html/css/vanilla js component to display images. I have the list of images on the top, and when I click on one of them, it must appear in the main container.
To do that I just change the img element src like this:
document.addEventListener('DOMContentLoaded', (event) => {
var mainImg = document.getElementById("mainImg");
var thumbnailContainer = document.getElementById("thumbnailContainer");
thumbnailContainer.addEventListener("click", (event) => {
var linkClicked = event.target.currentSrc;
mainImg.src = linkClicked;
});
});
Now I would like to add some animation, but I have some trouble with css transition, here's my html:
<div class="container">
<img id="mainImg" src="xxxxx" alt="car 2"/>
<div id="thumbnailContainer" class="thumbnailContainer">
<div class="thumbnail">
<img src="xxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
</div>
</div>
The thing that is bugging me is that the element that I click to trigger the transition doesn't need to change, but I just change the src property on the main image with JS.
How can I solve this?
Hi i have some code that needs to be hidden. I have tried the code below, but that not fit on my scenario.
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">Want to hid this div</div>
<div style=""/>Want to hid this div too </div>
</div>
I want to hide the last div but this div doesn't have an id or class. I also can't use the div:first(or :eq(0)').hide() method as there are lot of divs and it's not possible to tell which nth-child this div will be. Is there any method to link with zoomer div and hide it? Thanks
Both examples are with background-color: red just for the example.
You can use the :last-child pseudo-class:
#zoomer div:last-child {
background: red;
}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
Same with jquery:
$(function() {
$('#zoomer div:last-child').css('background', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
update
After the change of the question - this will hide the last 2 divs:
#zoomer div:last-child, #zoomer div:nth-last-child(2) {
background: red;
}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
You can user here :last-child, :nth-child pseudo-class
#zoomer div:last-child{display:none}
#zoomer2 div:nth-child(4){display:none;}
<div id="zoomer" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
<div id="zoomer2" style="margin-top:20px" >
<div class="nice">Which show image</div>
<img src="" id="img"/><div style="">nice to see it</div>
<div style="">Want to hid this div</div>
</div>
I want to hide the last div but this div have no id or class
you can use the last-child pseudo class or last method of jquery
$("#zoomer div").last().remove();
or hide
$("#zoomer div").last().hide();
To hide the second last div also using prev
$("#zoomer div").last().prev().hide();
with css you can hide the last 2 div
#zoomer:nth-last-child(-n+2) {
display: none
}
You can use CSS :nth-child() selector or :last-child selector.
Example:
#zoomer div:nth-child(4) {
display: none;
}
<div id="zoomer">
<div class="nice">Which show image</div>
<img src="" id="img" />
<div style="">nice to see it</div>
<div>Want to hid this div</div>
</div>
Use :last-child pseudo class on #zoomer and set in display: none and it works
If div .element has specific class .block / <div class="element block"> then delete html node .element img
HTML:
<div class="element">
<img src="images/picture.jpg" alt="" />
<img src="images/picture.jpg" alt="" />
</div>
Want to delete img, how to do this by Jquery?
Why not something simple like that?
$('.element.block').find('img').remove();
$('.element.block img').remove ()
This removes only images which are in blocks with the both classes
I'm trying to display a div by clicking on an image. the div will contains an image or a video.
I will have several images to click on with content attached.
with my actual JS, all div are displayed when cliking on the image.
I use Custom Fields to enter my images and iframe so my code need to be dynamic.
I don't know how to fix it.
Also in my actual code the div disapear when clicking outside of it, I would like to add a text link over to close it when clicking on it.
here is mu JS :
$(document).ready(function(){
$(".mix").click(function(){
$(".photos_overlay").toggle();
});
});
My Html :
<div class="mix photos" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
and my CSS :
.photo_medias{width:233px;height:133px}
.container .mix.photos{width:233px;height:133px}
.container .mix.videos{width:233px;height:133px}
.photos_overlay{width:967px;height:384px;background-color:black;position:absolute;top:0;left:0;display:none}
.photo_medias_overlay{width:706px;height:364px}
here is JSfidlle to see it in action : http://jsfiddle.net/aaWLJ/12/
can anybody help me with this ?
Thanks a lot for your help,
I have modified your code a little:
HTML
<br />
<div class="mix photos" data-myorder="20140307">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_11.jpg" class="photo_medias_overlay">
</div>
<br>
<div class="mix videos" data-myorder="20140319">
<div class='closeFrame' style="display: none; position:absolute;top:0;">CloseMe</div>
<img src="http://galaxyfoot.soixanteseize-lab.com/wp-content/uploads/media_21.jpg" class="photo_medias">
</div>
<div class="photos_overlay" data-myorder="20140307">
<iframe width="706" height="364" src="//www.youtube.com/embed/gg1RBO1Cj4Y" frameborder="0" allowfullscreen></iframe>
</div>
As you can see I have added a parent div elements for both overlays and a div CloseMe
Also I have changed some CSS (You can change it to what ever you want, I just want to show you the main idea how to resolve your issue):
.photos_overlay{
width:967px;
height:384px;
background-color:black;
position:absolute;
top:20px; /* I have changed top position just to show the div 'CloseMe'*/
left:0;
display:none
}
And the JavaScript Code
$(document).ready(function(){
$(".mix").click(function(){
ShowHide($(this));
});
$(".closeFrame").click(function(){
ShowHide($(this));
});
function ShowHide(elem){
var $mix = $(elem);
$mix.children(".closeFrame").toggle();
$mix.next(".photos_overlay").toggle();
}
});
I have a bit of an issue.
I have a grid of images (3x3), and have a function to swap the image, and show a "content" panel.
While the 1st 2 rows appear to show the content area properly, the bottom row goes in and out and in and out and in and out, etc...
What is causing this behavior, and how can I fix it?
Fiddle
http://jsfiddle.net/o7thwd/4s9GT/
Please excuse the hover image... seems jsfiddle doesn't like it or something... but rest assured that in the site, it works..
Code - jQuery 1.7
// panel grid image swapper
$('.panel img').mouseover(function() {
var $this = $(this);
var src = $this.attr("src").match(/[^\.]+/) + "-hover.png";
$this.attr("src", src);
// Show data panel
$('.' + $this.attr('data-panel')).show('fast');
}).mouseout(function() {
var $this = $(this);
var src = $this.attr("src").replace("-hover.png", ".png");
$this.attr("src", src);
// Hide data panel
$('.' + $this.attr('data-panel')).hide('fast');
});
HTML
<div class="panel-3-image-grid">
<div class="panel1 panel">
<img src="/core/images-tmp/panel-images/panel-3/image1.png" alt="" data-panel="panelGrid-1-content" />
<div class="panelGrid-content panelGrid-1-content">Panel 1</div>
</div>
<div class="panel2 panel">
<img src="/core/images-tmp/panel-images/panel-3/image2.png" alt="" data-panel="panelGrid-2-content" />
<div class="panelGrid-content panelGrid-2-content">Panel 2</div>
</div>
<div class="panel3 panel">
<img src="/core/images-tmp/panel-images/panel-3/image3.png" alt="" data-panel="panelGrid-3-content" />
<div class="panelGrid-content panelGrid-3-content">Panel 3</div>
</div>
<div class="panel4 panel">
<img src="/core/images-tmp/panel-images/panel-3/image4.png" alt="" data-panel="panelGrid-4-content" />
<div class="panelGrid-content panelGrid-4-content">Panel 4</div>
</div>
<div class="panel5 panel">
<img src="/core/images-tmp/panel-images/panel-3/image5.png" alt="" data-panel="panelGrid-5-content" />
<div class="panelGrid-content panelGrid-5-content">Panel 5</div>
</div>
<div class="panel6 panel">
<img src="/core/images-tmp/panel-images/panel-3/image6.png" alt="" data-panel="panelGrid-6-content" />
<div class="panelGrid-content panelGrid-6-content">Panel 6</div>
</div>
<div class="panel7 panel">
<img src="/core/images-tmp/panel-images/panel-3/image7.png" alt="" data-panel="panelGrid-7-content" />
<div class="panelGrid-content panelGrid-7-content">Panel 7</div>
</div>
<div class="panel8 panel">
<img src="/core/images-tmp/panel-images/panel-3/image8.png" alt="" data-panel="panelGrid-8-content" />
<div class="panelGrid-content panelGrid-8-content">Panel 8</div>
</div>
<div class="panel9 panel">
<img src="/core/images-tmp/panel-images/panel-3/image9.png" alt="" data-panel="panelGrid-9-content" />
<div class="panelGrid-content panelGrid-9-content">Panel 9</div>
</div>
</div>
CSS
.panel-3{height:515px;width:990px;margin:0 auto;clear:both;position:relative;z-index:1;}
.panel-3-content{width:480px;float:left;padding-top:160px;}
.panel-3-image-grid{width:475px;float:left;padding-top:20px;}
.panel-3-image-grid div.panel{width:154px;height:154px;float:left;margin-right:3px;margin-bottom:3px;}
.panel-3-image-grid div.panel:hover, .panel-3-image-grid div.panel:active, .panel-3-image-grid div.panel.active{
}
.panel-3-image-grid div.panel:last-child{margin-right:0;}
.panelGrid-content{display:none;position:absolute;width:154px;height:310px;background:#c8deed;}
.panelGrid-1-content, .panelGrid-2-content, .panelGrid-3-content{margin-top:3px;}
.panelGrid-4-content, .panelGrid-5-content{margin:-154px 0 0 157px;}
.panelGrid-6-content{margin:-154px 0 0 -157px;}
.panelGrid-7-content, .panelGrid-8-content, .panelGrid-9-content{margin-top:-314px;}
This is caused by the data panel growing until it is beneath the mouse pointer, which triggers a mouseout on the panel image, which causes the data panel to shrink until it's no longer beneath the pointer, which triggers the mouseenter on the panel image again...
The content panel gets shown on top of the image. If you look at the other rows, it is placed next to or under the image.
Because the content panel is in front of the image, the mouseover event is no longer getting fired for the image (because the mouse is now over the content panel). This is causing it to hide the content panel, which means the mouse is over the image again and a loop is formed.
To break this loop, you either need to attach the mouseover event to the .panel elements (because the mouseover event is going to bubble up there if its over either the image or the content panel) or make sure the content panel is never on top of the image.