We Keep Coding

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");
}
}

Selecting child of previous parent jQuery

Lately I've been trying my hand at animation using CSS and jQuery, it went well, however, now I want to do a bit more.
That is, once the user clicks information should show up on top of the image.
At the moment, I just have a few tags on which I perform the animations and class toggles.
My question is, I've thought about doing the following:
<div class= "singleImage">
<img src.... class="actualImage">
<p>text to put over the image</p>
</div>
This would be done per image which means that I'll have about 5 of them with different images.
However, I don't know how to go about selecting the previous element of class "actualImage".
Has anyone got any suggestions?
Thank you

Use the jQuery prev function. Example: Assume you want to select the image previous to the second image:
var foo = $(".singleImage").eq(1);
var bar = $(foo).prev().find('.actualImage');
Fiddle

Try this:
$('singleImage').children('.actualImage').prev();

I'm not sure why you are trying to select the previous element, but you could do something akin to this:
Bind a function to the click event for the element containing your image and caption.
Inside this function, toggle the caption.
Also, bind a click event handler to the body to detect clicks "off" the containing element.
HTML:
<a href="#" class="has-caption">
<img src="http://placehold.it/300x300" />
<span class="caption">This is a caption</span>
</a>
CSS:
a.has-caption { position: relative; }
a.has-caption .caption {
background: rgba(0, 0, 0, .25);
bottom: 0;
color: #fff;
display: none;
height: 20px;
left: 0;
line-height: 20px;
position: absolute;
width: 100%;
}
a.has-caption img { vertical-align: bottom }
JavaScript
$('a.has-caption').on('click', function(e) {
e.preventDefault(); e.stopPropagation();
var self = $(this)
, tmpId = 'toggle-' + Date.now();
self.addClass(tmpId);
$('span.caption', self).toggle();
$('body').one('click', function(e) {
if (!$(event.target).closest('.' + tmpId).length) {
$('span.caption', '.' + tmpId).hide();
self.removeClass(tmpId);
};
});
});
http://jsfiddle.net/83s7W/

.replaceWith() to replace content in a div for different link elements

I am trying to load a div with different content based on the link I click...
While it seems to work for the first link when I click it, clicking the other links only replaces the content with the same content for 'encodeMe' , yet I have specified different content that I want to replace for 'htmlize-me'
The first run-through of this I did not use jQuery's .bind() function. I simply used .click() , and both had the same result. Looking through the jQuery API I thought using the .bind() function would bind each function within it to that particular page element, but it seems to apply it to all my links.
I've achieved the same effect using .hide and .show to toggle divs but I want to be more elegant about how I do that, and this was my attempted alternative...
here's the relevant html:
<label for="list-root">App Hardening</label>
<input type="checkbox" id="list-root" />
<ol>
<li id="encode-me"><a class="show-popup" href="#">encodeMe()</a></li>
<li id="htmlize-me"><a class="show-popup" href="#">htmlizeMe()</a></li>
</ol>
<div class="overlay-bg">
<div class="overlay-content">
<div class="the-content"></div>
<br><button class="close-button">Close</button>
</div>
</div>
here's the script I made to trigger the content change:
$('#encode-me').bind('click' , function() {
$('div.the-content').replaceWith('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').replaceWith('Hi, Im something different');
});
});

Try something like this:
Use html() instead of replaceWith()
$('#encode-me').bind('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').html("Hi, I'm something different");
});
});

replaceWith does exactly what it sounds like, it replaces the div with the h3, so when you click the second link there is no div.
Try setting the innerHTML instead
$('#encode-me').on('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>Found in <p>[web root]/redacted/redacted.asp</p>');
});
$('#htmlize-me').on('click' , function() {
$('div.the-content').html('Hi, I\'m something different');
});

So I figured out a more clever way to do this! Use the DOM to your advantage - set up a nested list structure and change the content using .find() on parent and child elements the list.
Markup
<span style="font-size:1.4em">Type
<ul class="row">
<li>Blah
<div class="overlay-content">
<p></p>
<p class="changeText">Blah</p>
</div>
</li>
<li>Blah2
<div class="overlay-content">
<p></p>
<p class="changeText">Blah2</p>
</div>
</li>
</ul>
</span><br>
<!-- OVERLAYS -->
<div class="overlay"></div>
CSS
.close {
border-radius: 10px;
background-image: url(../img/close-overlay.png);
position: absolute;
right:-10px;
top:-15px;
z-index:1002;
height: 35px;
width: 35px;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:10;
height:100%;
width:100%;
background:#000;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
display:none;
}
.overlay-content {
position:fixed!important;
width: 60%;
height: 80%;
top: 50%;
left: 50%;
background-color: #f5f5f5;
display:none;
z-index:1002;
padding: 10px;
margin: 0 0 0 -20%;
cursor: default;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
Script
$(document).ready(function(){
$('.show-popup').click(function() {
var ce = this;
$('.overlay').show('slow', function() {
$(ce).parent().find('.overlay-content').fadeIn('slow');
});
});
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var docHeight = $(document).height(); //grab the height of the page
var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
$('.overlay').show().css({'height' : docHeight}); //display your popup and set height to the page height
$('.overlay-content').css({'top': scrollTop+100+'px'}); //set the content 100px from the window top
});
/*
// hides the popup if user clicks anywhere outside the container
$('.overlay').click(function(){
$('.overlay').hide();
})
*/
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
$('.close').click(function() {
$('.overlay-content').hide('slow', function() {
$('.overlay').fadeOut();
});
});
});

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

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();
});
}
});

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();
})