jQuery dialog - div positioned on top of dialog box inputs disabled - javascript

The problem is this:
A dialog box is opened. I click the input field of the dialog box to open a div that is absolutely positioned over the dialog box. The input cannot be interacted with.
Here is the example on Jsfiddle
You can mouse over the input and the mouse cursor will change to the 'I' icon. You can even interact with the close anchor tag on the absolutely positioned div. It's not a z-index issue. It works in jQuery UI 1.9 and older. Strangely, after the absolute div has been added to the DOM, if you append an empty div to the end of the body html (using firebug to edit the code realtime), the input works.
Any ideas?
Thanks in advance,
Bontke
$('#open_dialog').click(function (event) {
var dialog_html = '<div id="dialog_body">' +
'<input type="text" name="test1"/>' +
'</div>';
$(dialog_html).dialog({
title: 'WTF Test',
height: 110,
width: 300,
modal: 'true',
close: function () {
$(this).remove();
$('#test_div').remove();
}
});
//dialog input click
$('input[name=test1]').click(function (event) {
var html = $('<div id="test_div" style="border: 1px solid red; z-index: 10000; position: absolute; left: 45%; top: 60%; width: 235px; height: 100px; background-color: blue;"><input name="foobar"/><a id="test_close" style="color: white;" href="#">close</a><br/><span style="color: white">super awesome text</span></div>'),
body = $(document.body);
if ($('#test_div').length === 0) {
//append div to body
html.appendTo(body);
//add close functionality to test_div
$('#test_close').click(function (event) {
event.preventDefault();
//remove test_div from DOM
$(event.currentTarget).parent().remove();
});
}
});
});

The dialog_html dialog is set to modal: 'true' which means it will deactivate everything else on the page. If you remove this it removes any problems. I think you're getting mixed results because you're adding to the DOM after jQuery has made the dialog modal and you really shouldn't be able to interact with the second popup at all, but it is breaking. You may want to try making the second pop-up modal, or adding it as a child of the first dialog rather than appending it to document.body

Sorry for the delayed reply, here is the solution:
http://jsfiddle.net/aY9ms/5/
I want the dialog box to be a modal. You are right, the adding the DOM is the because of how dialog box works. And in my case, it is better to add any html to the dialog box parent for better memory clean up. And adjusting the overflow on the dialog box allows the div to float over the dialog box as I want.
Thanks for all of the feedback and help!
var $ = $j;
var dialog_html = '<div id="dialog_body">' +
'<input type="text" name="test1"/>' +
'</div>';
$(dialog_html).dialog({
title: 'WTF Test',
height: 110,
dragable: true,
width: 300,
modal: 'true',
close: function () {
$(this).remove();
$('#test_div').remove();
}
});
//dialog input click
$('input[name=test1]').click(function (event) {
var html = $('<div id="test_div" style="border: 1px solid red; z-index: 10000; position: absolute; left: 45%; top: 60%; width: 235px; height: 100px; background-color: blue;"><input name="foobar"/><a id="test_close" style="color: white;" href="#">close</a><br/><span style="color: white">super awesome text</span></div>'),
dialog_box = $('#dialog_body').parent(),
body = $(document.body);
//adjust css
dialog_box.css({'overflow': 'inherit'});
if ($('#test_div').length === 0) {
//append div to body
//html.appendTo(body);
html.appendTo(dialog_box);
//add close functionality to test_div
$('#test_close').click(function (event) {
event.preventDefault();
//remove test_div from DOM
$(event.currentTarget).parent().remove();
});
}
});

Related

Click link below a div that also has a clickable event

I have a div that has a clickable event. In this case it's just a console.log, below the div I have an a href and I would like that when the user clicks on the div and not the a href it shows the console.log, but if the user clicks on the a href it opens the link instead of showing the console.log.
Is this possible?
$('.top-item').on( "click", function() {
console.log("div clicked");
});
.top-item {
width: 100px;
height: 50px;
position: absolute;
left:0;
top:0;
background-color: rgba(255,0,0,.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top-item">
</div>
Click me
So when top-item is clicked show console.log, when a href is clicked despite being under top-item open the link instead of console.log.
Any ideas? Thank you.
https://jsfiddle.net/6b5sf4xc/1/
Then u should calculate from coordinates like below example. U calculte a coordinates then click placed coordinates then compare
$('.top-item').on( "click", function(e) {
var coor=$("a").position();
checkCoordinate(coor.left,coor.left+$("a").width(),coor.top,coor.top+$("a").height(),e.pageX,e.pageY);
});
function checkCoordinate(x1,x2,y1,y2,clickx,clicky){
if(clickx>=x1 && clickx<=x2 && clicky<=y2 && clicky>=y1){
console.log("a clicked");
}
else{
console.log("div clicked");
}
}

Not able to click in any content in box coming after using "Show a popup when hovering over a link or button"

i am not able to click in content of popup which comes after using "Show a popup when hovering over a link or button".
i am link to code that i am using: http://jsfiddle.net/8UkHn/
please help me either by suggesting an edit in same code or a new code.
thanks.
$("a").hover(function(e) {
$($(this).data("tooltip")).css({
left: e.pageX + 1,
top: e.pageY + 1
}).stop().show(100);
}, function() {
$($(this).data("tooltip")).hide();
});
div {
position: absolute;
display: none;
background: #ccc;
border: 1px solid;
}
foo
<br><br>
bar
<div id="foo">
foo means foo
<a href="">Anyhing can go here!
</a>
</div>
<div id="bar">bar means bar</div>
When your mouse moves out of the <a> tag, the tooltip associated with it is immediately hidden. Because of this, you won't be able to click on anything inside the tooltip.
The solution is to keep the tooltip open as long as the mouse is inside your <a> or its associated tooltip.
Check demo: http://jsfiddle.net/8UkHn/2108/
Code:
$("a").hover(function(e) {
$($(this).data("tooltip")).css({
left: e.pageX + 1,
top: e.pageY + 1
}).stop().show(100);
// clear any timer started for hiding the tooltip
if($(this).data("hidetimer")) {
clearTimeout($(this).data("hidetimer"));
$(this).data("hidetimer", 0);
}
}, function() {
// start a timer for hiding the tooltip
// after 500ms so as to give the user time to move his
// mouse over to the tooltip
var tooltip = $($(this).data("tooltip"));
$(this).data("hidetimer", setTimeout(function() {
tooltip.hide();
}, 500));
});
$('[data-tooltip]').each(function() {
var self = $(this), tooltip = $(self.data("tooltip"));
// similar show/hide logic for when the mouse enters/leaves the tooltip
tooltip.hover(function() {
if(self.data("hidetimer")) {
clearTimeout(self.data("hidetimer"));
self.data("hidetimer", 0);
}
}, function() {
self.data("hidetimer", setTimeout(function() {
tooltip.hide();
}, 500));
});
});
As your tooltips are outside of your a tag that you hover, when you try to hover the tooltip, it disapear, you should keep your tooltip inside your hover target to avoid this behaviour.
Please,try this:
(Fiddle)
$(".container").hover(function(e) {
$(this).children(".tooltip").css({
left: e.pageX + 1,
top: e.pageY + 1
}).stop().show(100);
}, function() {
$(this).children(".tooltip").hide();
});
.tooltip {
position: absolute;
display: none;
background: #ccc;
border: 1px solid;
}
.container{
overflow:visible;
}
<span class="container" data-tooltip="#foo">
<a href="http://foo.com" >foo</a>
<div id="foo" class="tooltip" >foo means foo</div>
</span>
<span class="container" data-tooltip="#bar">
<a href="http://bar.com" >bar</a>
<div id="bar" class="tooltip" >bar means bar</div>
</span>

closing a modal when clicking on a link

I'm using on my website a kind of modal overlay to display a full size image when clicking on a thumbnail.
here is my JS :
$(".mix.photos").on("click", function(){
var img = $(this).children("img").data("imagefull");
$("#modal_inner").html("<img src='"+img+"' />");
$("#modal_inner").fadeIn();
})
.mix.photos is my div containing the img.
when clicking on .mix.photos it oppens my #modal_inner wich displats the var img. (the src of the full size image is in my .data("imagefull").
it works great, but I'm trying to add a link to close the #modal_inner when clicking on it.
here is my CSS :
#modal_inner{
width: 847px;
height: 374px;
position: absolute;
top: 0px;
left: 0px;
padding-left: 120px;
background-color:rgba(187, 187, 187, 0.8);
display: none;
padding-top: 10px;
z-index: 1000;}
and my HTML :
<div id="modal_inner">
<div id="modal_close">CLOSE</div>
</div>
can anybody help me with this ?
thanks a lot
Try this.
To add close button
$(".mix.photos").on("click", function(){
var img = $(this).children("img").data("imagefull");
$("#modal_inner").html("<img src='"+img+"' />");
$("#modal_inner").fadeIn();
$('<div id="modal_close">CLOSE</div>').appendTo('#modal_inner');
});
Closing function
$(document).on('click','#modal_close',function(){
$('#modal_inner').empty().fadeOut();
})
You should be able to use the following code:
//if you want the modal to close when clicking on the modal itself:
$("#modal_inner").on("click", function(){
$(this).fadeOut();
});
//if you want the modal to close when clicking on the close button ie <div id="modal_close">CLOSE</div>:
$("#modal_close").on("click", function(){
$("#modal_inner").fadeOut();
});
you can add a link to your html markup
<div id="modal_inner">
<div id="modal_close">CLOSE</div>
My Link to Close the modal
</div>
and then do the following:
$("#modal_inner a").on("click", function(){
$("#modal_inner").fadeOut();
});
Something like this will work:
$(".mix.photos").on("click", function () {
var img = $(this).children("img").data("imagefull");
$modal = $("#modal_inner").find('.image').html("<img src='" + img + "' />").end()
.fadeIn(function() {
var self = this;
$(this).on('click', '#modal_close', function() {
$modal.off().hide();
});
});
});
You can also delegate close event to the document object, but I don't want all the clicks to be checked even when overlay is hidden.
Demo: http://jsfiddle.net/PG2Z8/

Appending HTML with click function jQuery not working

http://jsfiddle.net/CCKUz/
So I have a box with a <span class="open"> that will increase the height of a collapsible div to view the content. It's collapsible simply by CSS height and the open click function sets height to auto. Easy and this works.
The problem happens when I go to append the open and close spans. When I include them in the actual html, they work fine. When I append them, they no longer function. I thought maybe this was due to not being available for the js to apply the .click function to them since they were created after the load but even creating them and applying the .click in the same function doesn't help this problem.
Is there anything you see there that might be affecting this? Thanks.
HTML:
<div class="box collapsible">
<h3>Title</h3>
<p>This is a sample paragraph that is here for placer purposes.</p>
</div>
CSS:
.box { height: 20px; border: 1px solid #000000; padding: 10px; margin: 20px; position: relative; overflow: hidden; }
h3 { margin: 0 0 20px 0; line-height: 20px; }
.open, .close { text-indent: -9999px; width: 20px; height: 20px; position: absolute; top: 10px; right: 10px; }
.open { background: #00ff00; }
.close { background: #0000ff; }
JS:
$(function(){
var box = $(".collapsible");
var close = $(".collapsible span.close");
var open = $(".collapsible span.open");
box.each(function(){
box.append('<span class="open">Open</span>');
open.each(function(i){
open.click(function(){
alert("You clicked open");
$(this).parent(box).css("height","auto").append('<span class="close">Close</span>');
$(this).hide();
$(this).parent().find(close).show();
});
});
close.each(function(i){
close.click(function(){
$(this).parent(box).css("height","15px");
$(this).hide();
$(this).parent().find(open).show();
});
});
});
});
No need for loops, jQuery does that internally, and you need delegated event handlers with dynamic elements, like so:
$(function () {
var box = $(".collapsible");
box.append( $('<span />', {'class':'open'}) )
.on('click', '.close', function () {
$(this).hide()
.closest('.collapsible')
.css("height", "auto")
.append( $('<span />', {'class':'close'}).show() );
})
.on('click', '.close', function () {
$(this).hide()
.closest('.collapsible')
.css("height", "15px")
.find('.open').show();
});
});
you select the open-elements before adding them:
var open = $(".collapsible span.open");
Try this:
$(function(){
var box = $(".collapsible");
var close = $(".collapsible span.close");
box.each(function(){
box.append('<span class="open">Open</span>');
var open = $(".collapsible span.open"); //do it here!!
open.each(function(i){
open.click(function(){
alert("You clicked open");
$(this).parent(box).css("height","auto").append('<span class="close">Close</span>');
$(this).hide();
$(this).parent().find(close).show();
});
});
close.each(function(i){
close.click(function(){
$(this).parent(box).css("height","15px");
$(this).hide();
$(this).parent().find(open).show();
});
});
});
});
There is no need for .each delegate the function
$(document).on('click','.collapsible span.open',function(){
demo here http://jsfiddle.net/CCKUz/2/
The problem is that you are adding your .close spans dynamically, so your initial search will not find anything, so it will not add any click handlers to them. You can use event delegation to fix this easily.
.on('click', 'span.close', function(evt){
You can also simplify your code a lot:
$(".collapsible")
.append('<span class="open">Open</span>')
.on('click', 'span.open', function(evt){
// Search within the parent '.collapsible'.
$(evt.delegateTarget)
.css("height", "auto")
.append('<span class="close">Close</span>');
// Hide the '.open' span.
$(this).hide();
})
.on('click', 'span.close', function(evt){
// Search within the parent '.collapsible'.
$(evt.delegateTarget)
.css("height","15px");
.find('.open').show();
// Remove the old '.close' button since the
// open handler will make a new one.
$(this).remove();
})

FancyBox steals content and doesn't put it back?

I have fancybox triggered on a link that loads content from a hidden div.
If I close the fancybox and click the link again, it loads up blank the second time around
Here's my code:
$.fancybox({
content: $target
});
Any ideas?
I've had a lot of bother with other people's light boxes, issues similar to yours, and other issues with not displaying content and such.
This quick bit of code creates the same as the fancybox plugin (essentially), this is what I use all the time, and its cross browser compatible and easy to debug and change when your content doesn't fit or comes out screwy or anything.
<script type="text/javascript">
jQuery(document).ready(function($){
$('a.clickme').click(function(){
// this creates an overlay
var theOverlay = $('<table class="overlayTable"><tr><td style="vertical-align:middle;text-align:center;padding:0"></td></tr></table>')
.click(function(){ $(document).unbind('keyup'); $(this).remove(); });
// this creates the white "inner" box
$('<div></div>')
.attr('id','insideContent')
.css({
'display':'inline-block',
'background':'#fff',
'padding':'20px'
})
.append('<p>Some content here... you can load anything you want - or copy it from another div if you want...</p>')
.appendTo($('body'))
.wrap(theOverlay)
.click(function(e){ e.stopPropagation(); });
$(document).bind('keyup', function(e){
// this binds the esc key to close the overlay
if(e.keyCode==27) { $(document).unbind('keyup'); $('table.overlayTable').remove(); }
});
});
});
</script>
<style>
.overlayTable {
background: url("url/to/transparent/png/for/overlay/background.png") repeat scroll 0 0 transparent;
border-collapse: collapse;
border-spacing: 0;
height: 100%; width: 100%; z-index: 999;
left: 0; position: fixed; top: 0;
}
</style>
Feel free to make it into a plugin or similar. As you're just filling a div with content you can put any HTML or anything in there you want.
You can also add your own touches, such as the close button (all it needs to do is call $('table.overlayTable').remove();).

Categories