So I want clicking on the img "tri" to hide the div "popu". But the img is a child of the div popu so i tried .not(). It didn't work. Note: Also I don't want div "textb" to trigger the hide.
HTML
<div id="re" class="column"><div id="s" class="popu"><img class="tri" src="img/whtri.png"/>
<div class="textb"><center style="font-size:14px;">Item Title</center>
<span style="font-size:12px;">Description this is an item that is very good and i like it very much! I like
<span class="highl">More...</span>
</span>
<span style="">
</span>
</div>
</div>
JQuery
$("body").click(function (e) {
if (!$(e.target).closest(".popu").length.not(".tri")) {
$("#s").hide(200)
}
});
Any Help Would Be Awesome!
You can use .parent():
$('img.tri').click(function() {
$(this).parent().hide();
});
or .closest():
$('img.tri').click(function() {
$(this).closest('.popu').hide();
});
Fiddle Demo
You can also use :
$('.tri').click(function(){
$('#s').hide();
});
Related
I have two divs... Then when I clicked the 1st div, i want to get the text inside of h3 of the 2nd div
Here is my codes... But none of the jquery code is working.. any help to fix my code, please... thanks
HTML
<div class="timeline-badge" style="background-image:url(images/couple-9.jpg);">CLICK ME</div>
<div class="timeline-panel">
qqqq
<div class="timeline-heading">
wwww
<h3 class="timeline-title">Hello</h3>
<span class="date"><i class="icon-calendar"></i>February 00, 2017</span>
</div>
<div class="timeline-body">
<p>III</p>
</div>
</div>
JQUERY / JAVASCRIPT
$('.timeline-badge').on('click', function() {
alert($(this).closest(".timeline-panel + div + h3").text());
alert($( '.timeline-badge > div:eq(0) + h3:eq(0)' ).children().text());
alert($(this).nextAll( '.timeline-heading').eq(0).innerhtml);
});
http://jsfiddle.net/rK4qc/119/
The .timeline-panel is next sibling of .timeline-badge. So you should use .next() to selecting it. Then use .find() to finding .timeline-title in it.
$('.timeline-badge').on('click', function() {
var text = $(this).next().find(".timeline-title").text();
console.log(text);
});
$('.timeline-badge').on('click', function() {
var text = $(this).next().find(".timeline-title").text();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeline-badge" style="background-image:url(images/couple-9.jpg);">CLICK ME</div>
<div class="timeline-panel">
qqqq
<div class="timeline-heading">
wwww
<h3 class="timeline-title">Hello</h3>
<span class="date"><i class="icon-calendar"></i>February 00, 2017</span>
</div>
<div class="timeline-body">
<p>III</p>
</div>
</div>
Use Jquery's siblings selectors https://api.jquery.com/siblings/
$('.timeline-badge').on('click', function() {
console.log($(this).siblings());
});
Go get it by the class name of h3
$('.timeline-badge').on('click', function() {
alert($(this).next().find('h3.timeline-title').text());
});
You can get the value of your h3 tag with:
$('div.timeline-panel div.timeline-heading h3.timeline-title').val();
use this code.
$(document).on("click",".timeline-badge",function() {
alert("H3 IS " + $('h3.timeline-title').text());
});
and check this fiddle for the code.
http://jsfiddle.net/rK4qc/121/
For the second div just add div for it and get the text user the .text() function.
this will work for you:-
$('.timeline-badge').on('click', function() {
alert($(this).next().find('h3.timeline-title').text());
});
I have the below markup and I am trying to get the href but always getting undefined. Any help is appreciated.
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>
$container = $('.wrapper');
$container.on('click', '.bottomP', function (event) {
console.log($(this).closest('a').attr('href'));
});
Assuming that you fix the class/ID issue noted in the comments by Mohammad you could use:
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
$('.wrapper').on('click', '.bottomP', function (event) {
console.log($(this).closest('.wrapper').find('a').attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<span class="mixSpanLeft" style="background-image: url(http://cdn.wallpapersafari.com/29/20/3HE5Mx.jpg)">
</span>
<div class="mixDivRight">
<p class="bottomP"><button>Select</button><p>
</div>
</div>
Aside from what Mohammad mentioned about needing to use .wrapper instead of #wrapper. I recommend using .find() instead of .closest(). .closest() does not work in IE, but that might not be an issue for you. you can also do something like this:
$("div.wrapper").on('click', '.bottomP', function () {
console.log($("div.wrapper a:first").attr('href'));
});
This will grab the first <a> tag inside the wrapper div.
I want click on the check box and hide the respective content.
Now in my code all the content with same class gets hidden when I click any one of the checkbox.
Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.
Fiddle link for reference
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$('.div1').hide();
} else {
$('.div1').show();
}
});
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
<input type="checkbox">Exam1
<div class="div1">I am content1!
</div>
<br>
<input type="checkbox">Exam2
<div class="div1">I am content2!
</div>
<br>
<input type="checkbox">Exam3
<div class="div1">I am content3!
</div>
<br>
<input type="checkbox">Exam4
<div class="div1">I am content4!
</div>
<br>
</form>
https://jsfiddle.net/6ybp2tL6/
Is this possible??
Thanks in advance
Try this instead DEMO
$('input[type="checkbox"]').click(function() {
($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});
Try to hide all the divs with class div1 initially,
$(".div1").hide();
$('input[type="checkbox"]').click(function() {
$(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
});
And toggle the visibility of the relevant div element with class div1 by using next() and toggle()
DEMO
I'm not sure the best way to word this, so hopefully this makes sense.
Currently, on my page, all my elements fadeIn on click. What I would like is for a few select elements in an id (#seqFade below) to fade in on their own when that parent fadeIn class is clicked.
I've figured out how to make both of these effects work on separate pages, but I can't figure out how to have them both occur on the same page / combine the two.
Here is more or less how my page is designed, and below is what I have so far for code.
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="fadeIn">
Bye.
</div>
</div>
SCRIPT
$(document).ready(function(){
//hides all fadeIns
$('.fadeIn').hide();
$(document).on('click',function() {
if('#seqFade') {
//sequential fadeIn function (works)
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow');
});
}
//fadeIn on click (works)
$('.fadeIn:hidden:first').fadeIn('slow');
})
.click();
Thank you so much in advance.
JSfiddle of full page //
JSFiddle of both effects working
Try this, just add a class on hidden at the beginning for the spans
$(document).ready(function() {
var timeOuts = new Array();
var eT=200;
function myFadeIn(jqObj) {
jqObj.fadeIn('slow');
}
function clearAllTimeouts() {
for (key in timeOuts) {
clearTimeout(timeOuts[key]);
}
}
$(document).on('click',function() {
$('#seqFade span').hide().each(function(index) {
timeOuts[index] = setTimeout(myFadeIn, index*eT, $(this));
});
});
});
http://jsfiddle.net/h67vk02w/2/
HTML
<div id="content">
<div class="fadeIn">
<p>Hello</p>
</div>
<div class="fadeIn" id="seqFade">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>.</span>
<span>.</span>
<span>.</span>
</div>
<div class="fadeIn" id="bye">
Bye.
</div>
Javascript
$(function() {
$('.fadeIn').find('span').toggle();
$('#hello, #bye').toggle();
$(document).click(function() {
$('#hello').fadeIn('slow');
$('span').each(function(i) {
$(this).delay(i*300).fadeIn('slow', function() {
$(document).unbind('click')
.bind('click', () => $('#bye').delay(300).fadeIn('slow'));
});
});
});
});
JSFiddle: http://jsfiddle.net/6mLgu3om/3/
Or like that?
Use the classes for this (add some fade/noFade classes to elements). ID must be unique. And after that just check if the element has that class like this. Now you have basically unlimited options to do this. Just add more classes / check and do something.
$(".class_of_element").hasClass("your_class")
this is a very simple example of a html page
<span class ="title" id="title_1">this is</span>
<span class="toggle" id="toggle_1>paragraph 1</span>
<span class ="title" id="title_2">this is</span>
<span class="toggle" id="toggle_2">paragraph 2</span>
im trying to do an onlcick event with the toggle functon, so basically when the user clicks title_1 the toggle_1 will hide and show, and if the user clicks title_2 it will show and hide toggle_2, i hope this makes sense.
(document).ready(function() {
$('.toggle').hide();
$('#title_').click(function() {
$('#toggle_').toggle('slow');
});
});
i started my jquery like this, just don't know what to do from here. thanks
You could:
$('.toggle').hide();
$('.title').click(function() {
$(this).next(".toggle").toggle('slow');
});
Try this
(document).ready(function() {
$('.toggle').hide();
$('.title').click(function() {
$(this).closest('.toggle').toggle('slow');
});
});