Develop Reference

jQuery: remove or hide overlay div?

I'm creating an overlay div using the following code when an image thumbnail is clicked:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs)
return false;
});
});
</script>
This works fine.
Now i need to remove or hide the overlay div when the user clicks on the img with the id of imgBig. so I tried this:
<script>
jQuery(document).ready(function(){
jQuery( "#overlay #imgBig" ).click(function() {
jQuery("#overlay").remove();
});
return false;
});
</script>
but for some reason it just doesn't work which means it doesn't hide/remove the overlay div!
Could someone please advise on this issue?
Thanks in advance.

The click function doesn't work with dynamically created elements. Also, id's are unique so you should only need to use #imgBig in the selector.
Try this:
jQuery(document).ready(function(){
jQuery( "#imgBig" ).on('click', function() {
jQuery("#overlay").remove();
});
return false;
});

You should use the second part inside the first function, like this (I replaced Jquery with $):
...
var imgs = (this.href);
$('#overlay #imgBig').attr("src", imgs);
$( "#overlay #imgBig" ).click(function() {
$("#overlay").remove();
});
return false;
A JSFiddle example:
JSFiddle

Now i need to remove or hide the overlay div when the user clicks on
the img with the id of imgBig
Try assigning click event to img element having src set to imgs
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs);
// assign `click` event to `img` element having `src` set to `imgs`
jQuery("img[src=" + imgs + "]").on("click", function() {
// do stuff
// e.g., remove or hide the overlay div
$(this).parent().remove();
});
return false;
});
});

The problem is that the on() or the click() function doesn't work with dynamically generated HTML content. Previously you could use the live() method but currently it's deprecated in jQuery. Fortunately, the on() method accepts a second argument especially for these cases. So you can use:
jQuery( "body" ).on( 'click', '#imgBig', function() {
jQuery("#overlay").remove();
});
Here's a Fiddle: http://jsfiddle.net/y5y1x5vm/
Hope that solves your problem.

Hide content when clicking outside div with jquery

I'm using jquery to togle content with a button, I would like to hide the content when I click outside my "contentcone" div. The HTML is the following
<div class="togglecone">
</div>
<div class="contentcone">
<div class="contentleft">
<div class="title">
Cone
</div>
<div class="maincopy">
Hello my friends this is a really nice cone that can be placed anywhere
</div>
<a href="https://www.mcnicholas.co.uk/" class="button">
View on website
</a>
</div>
<div class="contentright"> <img src="images/cone.png" alt=""/>
</div>
</div>
This is the script
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
$(this).toggleClass("expandedcone");
$content.slideToggle();
});
});
http://jsfiddle.net/thomastalavera/SCKhf/914/

This should do it:
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(document).on("click", function(e) {
if( $(e.target).is(".togglecone") ) {
$(this).toggleClass("expandedcone");
$content.slideToggle();
} else {
$content.slideUp();
}
});
});
DEMO

You need to set a click event on document to close the box. I tried to keep your original click function intact.
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
$(this).addClass("expandedcone");
$content.slideDown();
});
$(this).on('click', function(e) {
if ($(e.target).is('.togglecone')) { // don't slide up if you click the cone
return;
}
if ($(".togglecone").hasClass('expandedcone')) {
$content.slideUp();
$(this).removeClass("expandedcone");
}
});
});
http://jsfiddle.net/SCKhf/925/

A simple and pretty blunt way to do this is:
$(document).ready(function(){
var $content = $(".contentcone").hide();
$(".togglecone").on("click", function(e){
e.stopImmediatePropagation();
$(this).toggleClass("expandedcone");
$content.slideToggle();
});
$("body").on("click", function(e){
if ($(".contentcone").is(':visible')) {
$(".togglecone").click();
}
});
$(".contentcone").on("click", function(e){
e.stopImmediatePropagation();
return false;
})
});
But note it has a lot of disadvantages, is just a blunt solution to your problem, it must be tweaked to be ok as a permanent choice.
Edit (to answer the question in comment):
Sure, I know more than 1, each depending on your layout. You can:
a) Instead of the "body" part, make a selector for whatever elements you want to toggle event one. This works ok on layouts with a small number of big (as size on screen) elements.
b) Add one more condition to the "body" part, where you get mouse position and use it to see if the mouse is in the place you want. You can do this with e.pageX/e.pageY, or you can find relevant relative position to an element here jQuery get mouse position within an element.

This should do it with lesser code:
$(document).mousedown(function (e) {
var container = $(".togglecone");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});

Jquery Click Event Is Larger Than Button

I'm having some issues with the Jquery click event. The event is firing when I click the button but it also will fire when I click to the side of the button which produces an undesirable affect in the application I'm building. I've included a JSFiddle below which demonstrates this issue. If you click to the right of the 'Next' button the event will still fire. Also if you take out the javascript this behavior disappears.
JSFiddle
Javascript shown below:
$(function() {
$(" #sortable ").sortable({axis: "x", containment: "window"});
$( ".clicked" ).click( function() {
var sortedIDs = $( "#sortable" ).sortable( "toArray", {attribute: 'custom-cl'} );
alert(sortedIDs);
var target = "http://localhost:3000/langs";
$.ajax({
type: 'get',
url: target + '?order='+sortedIDs.join(',') ,
dataType: 'script'
});
});
});
Any ideas on how to resolve this issue and contain the click event within the button?
Thanks for the help in advance!

That's because your click handler is set on the div that contains the button. If you want it only for the button element, give it an id and set it on that instead.
<div class="clicked"><button id="next" type="button">Next</button></div>
$('#next').click(function(){..});

It's because the div has display:block by default (which has width 100% of parent), you can just set it to inline-block:
.clicked {
display:inline-block;
}
Demo

change this
<div class="clicked"><button type="button">Next</button></div>
into this
<div><button type="button" class="clicked">Next</button></div>
and try

why not change to this:
$( ".clicked button" ).click( function() {

How to hide div slowly in javascript

I have two div when I click button to close the div. second div moves upward I just want to do this slowly. I try to use transition effect but cant do it any help? thanks in advance.
fiddle

http://jsfiddle.net/ssZXA/185/
read the documentation about .hide()
the first argument is "duration"
You can use $("#notice").hide('slow');

use fadeOut
$( "#closebutton" ).click(function(event)
{
$("#notice").fadeOut('slow'); //OR fadeOut('10000') time is in milliseconds
});
Jsfiddle

Use
$("#notice").slideToggle();
or
$("#notice").fadeOut();
In Place of
$("#notice").hide();

Plz try this:
$("#notice").hide("slow");
Thanks.

Just apply slow on hide function and I customized your code as follows:
$("#closebutton").button({
icons: {
primary: "ui-icon-close"
},
text: false
}).click(function(event) {
$("#notice").hide("slow");
});
Refer LIVE DEMO

Just do this:
$("#notice").hide('fade');
or
$("#notice").hide('slideUp');
instead of $("#notice").hide();
Demo

$("#notice").hide('fade','slow');
DEMO
or
$("#notice").hide('fade',5000);
5000- indicates it will take 5seconds to hide. you can give any value.
Syntax:
$("selector").hide('type',time);

Try with this.
<body>
<div id="myDiv" style="width:200px;height:150px;background-color:red;">
This is the div that will fade out, slide up, then be removed from the DOM.
</div>
<input id="myButton" type="button" value="Fade" />
</body>
$(function() {
$("#myButton").click(function() {
$("#myDiv").fadeTo("slow", 0.00, function(){
$(this).slideUp("slow", function() {
$(this).remove();
});
});
});
});
Demo

$(function(){
$(this).html('«');
$('.slider-arrow').click(function(){
var x = $(".slider-arrow").offset();
if (x.left == "308")
{
$( ".slider-arrow, .panel").animate({left: "-=300"}, 700);
}
else
{
$( ".slider-arrow, .panel").animate({left: "+=300"}, 700);
}
});
});

Append <div> with click and remove with click

I have the following problem:
I append the div:
$(".class").click(function() {
$(this).append("<div class='click'></div>");
$("div.click").show();
});
Then i remove it with a click on another button but the div is still there.
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});

Try keeping a pointer to the div the following should work.
var tempDiv;
$(".class").click(function() {
tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
tempDiv.remove();
});
Otherwise you can use this way
$(".class").click(function() {
$("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
$('.click').remove();
});
PS: You may also remove the .show() if the .click class is not hidden by default

Try this
You have two buttons.
Say:
<div class="Main">
<div>Div0</div>
</div>
<button class="button1">Click to add</button>
<button class="button2">Click to remove</button>
and JS Code is :
var counter=1;
$(".button1").click(function() {
$('.Main').append("<div class='click'> newly added Div "+counter+"</div>");
counter++;
$("div .click").show();
});
$(".button2").click(function() {
$('.Main div').remove(':last-child');
});

Here is an example based on your work : http://jsfiddle.net/UQTY2/128/
<div class="class">Click to add a green box</div>
<button class="button">Click to remove all green boxes</button>
$(".class").click(function() {
$(this).append("<div class='click'></div>");
});
$(".button").click(function(e) {
e.preventDefault();
$("div.click").remove();
});

this will remove
$(".button").on("click", function (e) {
e.preventDefault();
$("div.click").remove();
});
check my fiddle
http://jsfiddle.net/suhailvs/4VmYP/2/

When you dynamicly create element, you need delegated-event: .on( event, selector, handler(eventObject) ).
$(document).on("click", ".button", function(e){
e.preventDefault();
...
$("div.click").hide();
});
If you want remove element, you shoud use .remove() method instead of .hide().

you can dynamically add and remove div with javaScript like this
Check this example
Add and Remove Div dynamically
in this example the default remove button remove the most recent added div or you can say the last div in the container
But if you want to remove particular div with div place number you can enter the div number .
Code example
HTML
<div class="Main">
<div>div1</div>
</div>
<button id="ok">add</button>
<button id="del">remove</button>
<label>Enter div number to remove</label>
<input id="V"/>
<button id="Vok">ok</button>
JS
var counter=0;
$("#ok").click(function(){
$('.Main').append('<div> new div'+counter+'</div>');
counter++;
})
$("#del").click(function(){
$('.Main div').remove(':last-child');
})
$("#Vok").click(function(){
var Val=$('#V').val();
$('.Main div:nth-child('+Val+')').remove();
})

remove "on" from
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});