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
Related
I have multiple divs in html such:
<div class="litter">
<div class="litter-1">
<div class="status">Available</div>
<div class="available"><img /></div>
</div>
<div class="litter-2">
<div class="status">Available</div>
<div class="available"><img /></div>
</div>
</div>
The status text will vary based on user input. If the status is available the available class should not show. But if the status is unavailable then it should. The image is present all the time but only displaying if the status changes.
I can get the jQuery to either hide all of the images, or show them all, but not based on the html value of the status.
jQuery
if($('.litter > .status').html()==="Available") {
$(this).next('.available').hide();
} else {
$('.available').show();
}
Any help?
You could use a loop using jQuery .each():
// change selector to '.litter .status'
$('.litter .status').each(function() {
// loop through each .status element
// get partner img container .available
var imgContainer = $(this).parent().find('.available');
if ($(this).text() === "Available")
{
imgContainer.hide();
}
else
{
imgContainer.show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="litter">
<div class="litter-1">
<div class="status">Available</div>
<div class="available"><img src="https://via.placeholder.com/150/" alt="placeholder1" /></div>
</div>
<div class="litter-2">
<div class="status">Other status</div>
<div class="available"><img src="https://via.placeholder.com/150/" alt="placeholder2" /></div>
</div>
</div>
You can toggle a single class, status-available, and combine it with the adjacent sibling combinator to control the display of the image.
<!-- Image will show -->
<div class="status status-available">…</div>
vs.
<!-- Image will not show -->
<div class="status">…</div>
Example
/* Image is hidden by default */
.available > img {
display: none;
}
/* Adjacent sibling combinator in action */
.status-available + .available > img {
display: block;
}
<div class="litter">
<div class="litter-1">
<div class="status status-available">Available</div>
<div class="available">
<img src="http://placekitten.com/150/150" alt="Cute cat" />
</div>
</div>
<div class="litter-2">
<div class="status">Available</div>
<div class="available">
<img src="http://placekitten.com/150/150" alt="Cute cat" />
</div>
</div>
</div>
Ok, so Haldo put me on the right track, but in order to make it all come together with the string. Instead of if ($(this).text() === ("Available") I had to use this if ($(this).text().indexOf('Needs a Forever Home') > -1)
The rest of the code stays the same as Haldo's.
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.
html
<div class="channel">
<div class="programs" id="p1"></div>
<div class="selec_pro" id="s1" style="display:none;"></div>
<div class="programs" id="p2"></div>
<div class="selec_pro" id="s2" style="display:none;"></div>
<div class="programs" id="p3"></div>
<div class="selec_pro" id="s3" style="display:none;"></div>
<div class="programs" id="p4"></div>
<div class="selec_pro" id="s4" style="display:none;"></div>
</div>
The div element under class channel are created dynamically. On focus
of class programs, selec_pro next to that class program div needs to
be display block. After that focus off selec_pro needs to be display
none.
Can anyone help ?
Try this in CSS:
.selec_pro {
display: none;
}
.programs:focus + .selec_pro {
display: block;
}
The + is the CSS adjacent sibling selector. See here: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
So I have this
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>
http://jsfiddle.net/uzpxjukv/
You have btn1, btn2, btn3 and btn4. I'm trying to make it so that when you press btn1, the div with the class pre1 should then get "display: block;" or something to make it visible. Then when btn2 is clicked, pre1 turns invisible again and pre2 turns visible.
Maybe something like this? If there will be more buttons, it should be more optimalized.
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
.prevs div:not(.pre1) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1">Button 1</div>
<div class="btn2">Button 2</div>
<div class="btn3">Button 3</div>
<div class="btn4">Button 4</div>
</div>
<div class="prevs">
<div class="pre1">Previews 1</div>
<div class="pre2">Previews 2</div>
<div class="pre3">Previews 3</div>
<div class="pre4">Previews 4</div>
</div>
JSFIDDLE DEMO -> http://jsfiddle.net/uzpxjukv/5/
$('.btns div').click(function() {
var classNumber = this.className.slice(-1);
$('.prevs div').hide();
$('.pre' + classNumber).show();
});
On click of the button div, first hide all the pre divs and then show only the relevant div.
Try it
$('.btns > div').on('click', function() {
var numberOfDiv = $(this).attr('class').slice('-1'),
prevs = $('.prevs');
prevs.find('> div').hide();
prevs.find('.pre' + numberOfDiv).show();
});
This example is with your html code, if is possible to change it, you can get a better code.
See the fiddle
I have changed your HTML a little bit..Changed the class attribute of the prevs divsti ids.
HTML
<div class="btns">
<div class="btn1" id="1" onClick="reply_click(this.id)"></div>
<div class="btn2" id="2" onClick="reply_click(this.id)"></div>
<div class="btn3" id="3" onClick="reply_click(this.id)"></div>
<div class="btn4" id="4" onClick="reply_click(this.id)"></div>
</div>
<div class="prevs">
<div id="pre1"></div>
<div id="pre2"></div>
<div id="pre3"></div>
<div id="pre4"></div>
</div>
JS
function reply_click(id) {
document.getElementById("pre" + id).style.display = "block";
}
Provided that you know what naming system the divs use, you could use something along these lines. (To see properly working, view using developer tool)
$('.btns div').on('click', function() {
var currClass = $(this).attr('class').slice(-1); //get end of number of div clicked
$('.prevs div').css('display', 'none'); //reset all divs to being hidden
$('.pre' + currClass).css('display', 'inline-block'); //show desired div
});
.btns div {
background-color: gray;
}
.btns div, .prevs div {
width: 2em;
height: 2em;
display: inline-block;
padding-right: 0.2em;
}
.prevs div {
background-color: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>
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();
}
});