This is my code:
<div class="titfx">
<div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.clk1').on("click", function(event) {
//first code
var here = $(this).parent(".titfx").next(".here");
here.toggle();
//second code
if (!here.is(event.target) && here.has(event.target).length === 0) {
here.hide();
}
});
});
</script>
What the first part of javascript code does: When the word "CLICKME" is clicked, then the hidden div with text "info for here" shows.
What the second part of javascript code should do: When any part of the screen that is not class="here" is clicked on, then the text "info for here" should hide. The second part of my code is unable to achieve that. I'm not sure what I'm doing wrong. Please help me fix this issue.
you need to bind two event listeners to achieve this, one for the "clk1" element, and one for the whole page.
when fires document click event, just hide the text,
when fires ".clk1" click element, you need to stop propagation first and then write the toggle behaviour.
this is my solution
$(document).ready(function() {
$('.clk1').on("click", function(event) {
//first code
event.stopPropagation();
$(".here").toggle();
});
//second code
$(document).on("click", function(event){
$(".here").hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="titfx">
<div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>
Here is a potential solution. The first click binding works for the toggle logic. However, for your second scenario, you said you want it to close them if they click any where on the page, other than the two areas. In that regard, you are concerned with the click events for the body, not just the two areas.
The second logic binds to the body, and checks to see if the clicked element is a child of the .clk1 or the .here. If it is not a child of either one, it will hide the .here.
The css was added to force the page size to be larger than just the html provided so you could actually click on something not them, :)
$(document).ready(function() {
$('.clk1').on("click", function(event) {
var here = $(this).parent(".titfx").next(".here");
here.toggle();
});
$(document.body).on('click', function(event){
var clickedElement = $(event.target);
if (!clickedElement.closest('.clk1').length
&& !clickedElement.closest('.here').length) {
$('.here').hide();
}
});
});
body {
min-width: 800px;
min-height: 600px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="titfx">
<div class="clk1">CLICKME</div>
</div>
<div class="here" style="display:none;">info for here</div>
Related
I just want to show a div when someone click "add" button. If he clicks that "add" button again, needs to hide the current one and show another div. It also needs to show the approved div list on top area. If someone clicks the top area approved div, need to load the div again.
I try to hide and show on click but no luck. (I'm bit new to jquery and I know this is pretty basic code.)
Here is the fiddle Fiddle
$('.add-box').click(function() {
$('.test-div-2').show();
});
$('.add-box').click(function() {
$('.test-div-1').hide();
});
.test-div-1,
.test-div-2,
.test-div-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Do below things:-
1.Add jQuery library before your script code.
2.Wrap your code inside $(document).ready(function(){..}); (needed when script code is added above the HTML. if script code is added at the bottom of the page then wrapping is not needed).
3.Do show(),hide() in single click itself.
$(document).ready(function(){
$('.add-box').click(function() {
$('.test-div-2').show();
$('.test-div-1').hide();
});
});
.test-div-1,
.test-div-2,
.test-div-3{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Fiddle example:- https://jsfiddle.net/rrj1818a/
Note:-
If you want to show one-by-one then do like below:-
https://jsfiddle.net/87re6avo/
<div class="test-div active">1</div>
<div class="test-div">2</div>
<div class="test-div">3</div>
<a class="add-box">Add</a>
$('.add-box').click(function(e) {
e.preventDefault();
var $current = $('.test-div.active');
var $next = $current.next();
$current.removeClass('active');
if(!$next.length) {
$next = $('.test-div').first();
}
$next.addClass('active');
});
I have parent div with class a "very-big-div" that nests another "container-div" that by its turn also nests another child divs. The very big div's made to act like a button and the div that come right after it is a container that appears when I click the very big div.
<div class="very-big">
<div class="container">
<!-- Some other more nested divs that has anchors and buttons -->
<div class="friend-request">
<div class="button-div">
<button class="accept">Trigger</button>
<button class="refuse">Trigger</button>
</div>
</div>
</div>
</div>
The problem is 2 things first: the css problem has not yet been solved
I assigned a hover pseudo class for the "very-big-div", and whenever I hover the "container-div" the hover properties(background-color) is applied to the "very-big-div". This is not what I intend to make, I want to only hover "very-big" div for the hover to apply.
.very-big{
background-color:green;
}
The second problem is : I have a jquery that deals with the container so it is toggled on/off by the "very-big-div"
$(document).ready(function(){
$("#container-div").hide();
$("#very-big-div").click(function(){
$("#container-div").toggle();
});
});
the container has both anchor and button tags whenever I click the an anchor or a button inside the container it is toggled to close itself, and that is not what I want, what I want is just when I only press the "very-big-div" the toggle is activated.
Same as #Jhecht has given the answer, I have just inherited his to mine.
You can stop propagation of the click of child element that trigger toggle by using target and excluding all the child elements of your .very-big container as:
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
Code Snippet:
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
var target = $(e.target);
if (!target.is('.very-big *')) {
$(".container").toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>
This works for me, but I am not sure if it is what you need.
Please add in the minimum HTML, CSS, and Javascript needed to fully recreate the error you are seeing.
$(document).ready(function() {
$(".container").hide();
$(".very-big").click(function(e) {
console.log(e);
var current = $(e.toElement);
if (current.is('.container')) {
e.stopPropagation();
return false;
}
$('.container').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
Other Text
<div class="container">
This is text to fill stuff out so I can click on it.
</div>
</div>
I have a <div class="stock"></div>wrapped around :
<div class="stockAdd"></div>
<div class="stockRemove"></div>
<div class="stockInput"></div>
I want to prevent a click inside my .stock to trigger a function. For now i have the following :
if ($(event.target).is('.stockInput') || $(event.target).is('.stockAdd') || $(event.target).is('.stockRemove')) {
console.log("Ajout stock");
return
}
Isn't there a better way to select thos three divs ? The $(event.target).is('.stock') don't get the job done when i click my nested divs.
Thanks
If I understand you correctly, you want to catch click events on .stockAdd, .stockRemove, and .stockInput, but not on other elements within .stock itself, is that correct?
If so, a delegated event can take care of that without any need to manually check the event target:
$('.stock').on('click', '.stockAdd, .stockRemove, .stockInput', function() {
alert("Clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stock">
<div class="stockAdd">stockAdd</div>
<div class="stockRemove">stockRemove</div>
<div class="stockInput">stockInput</div>
<div>No event</div>
</div>
I would strongly recommend against depending on event.target here; it's too fragile. Any HTML tags nested inside your desired targets would break things:
$('.stock').on('click', function(event) {
if (event.target.className=="stockAll") {
alert("clicked");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stock">
<div class="stockAll">
This <b> will not work if someone clicks in the bold area</b> but works outside
</div>
</div>
You can add a separate class to all of them like .stock-inner and then grab them all with $('.stock-inner') or you can use a $("div[class^='stock-inner']) - this will grab the parent .stock div...
Also, to reject a click event within the handler you're gunna want to use e.preventDefault() where e is the event object.
the reason it doesn't work well on nested divs is they pass the conditional if in your example, to make it stricter you could add div to selector:
if ($(event.target).is('div.stockInput') || $(event.target).is('div.stockAdd') || $(event.target).is('div.stockRemove'))
You can attach the event on .stock and then filter using the event.target.
HTML
<div class="stock" style="border: 10px solid #000;">
<div class="stockAdd">Add</div>
<div class="stockRemove">Remove</div>
<div class="stockInput">Input</div>
</div>
JavaScript
$('.stock').on('click', function(e) {
if( e.target.className !== 'stock' ) {
console.log(e.target.className);
}
});
jsfiddle
I'm trying to have a Div fade in after the user clicks two other divs.
This is what I have so far but I'm pretty sure I'm doing something wrong. I can't seem to get the div to fade in even if only one div is clicked let alone two. Any help would be appreciated! thank you so much.
<script>
$(document).ready(function(){
$('#video_overlays').hide();
$('#video_overlays').fadeIn(9000);
$('#video_overlaysanswer').hide();
$('#video_overlaysanswer').fadeIn(18000);
$('#video_overlaysanswer1').hide();
$('#video_overlaysanswer2').hide();
$('#video_overlaysanswer2').fadeIn(18000); });
</script>
<script type="text/javascript">
$(document).ready(function(){
$("video_overlaysanswer").click(function() {
var index = $(this).closest("li").index();
$("video_overlaysanswer1").eq(index).fadeIn("slow");
return false; // prevents navigation to #
});
})
</script>
<div id="video_overlays">
This is where text is
</div>
<div id="video_overlaysanswer">
answer 1
</div>
<div id="video_overlaysanswer2">
answer 2
</div>
<div id="video_overlaysanswer1">
the answer that I want to fade in once the other two div's are clicked
</div>
$(document).ready(function(){
$('#video_overlays').hide();
$('#video_overlays').fadeIn(500);
$('#video_overlaysanswer').hide();
$('#video_overlaysanswer').fadeIn(500);
$('#video_overlaysanswer1').hide();
$('#video_overlaysanswer2').hide();
$('#video_overlaysanswer2').fadeIn(500);
$("#video_overlaysanswer,#video_overlaysanswer2").click(function() {
$("#video_overlaysanswer1").fadeIn("slow");
return false; // prevents navigation to #
});
});
Try code above.It works fine.Now implement different click event fo buttons.hope this helps.
http://jsfiddle.net/szr9vpv5/
I saw a post earlier today and have been playing around with: http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html
What I'd like to be able to do is when a span gets clicked, to fire the click event on a different element in the page:
<div class='editable sampleItem pointer' id='qqq'>click me!!!</div>
Is that possible?
sure..
$('.myspan').click(function(){
$('.different-div').click();
})
$('.different-div').click(function(){alert('div click fired')});
Check like this,
HTML:
<div class='editable sampleItem pointer' id='qqq' onclick='clickHandler()'>click me!!!</div>
Javascript:
<script type="text/javascript">
function clickHandler() {
/* You code here */
}
</script>