Develop Reference

Code to click outside of element not firing

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>

Button inside of div not working after clone

Trying to build a dashboard that lets me test animations while linking and unlinking boxes. Got everything working, but when I add the link function, I found that the link doesn't work after the parent element has been cloned. I want it to work so that when someone clicks the left box, the right two boxes show whatever animation is selected as long as the link is active. If the link is inactive, the unlinked box does not animate. Using animate.css for the animations.
Here's the html:
<div id="animations-container">
<center>
<button name="slideInLeft" class="animation-selector selected">Slide In Left</button>
<button name="slideInDown" class="animation-selector">Slide In Down</button>
<button name="zoomInUp" class="animation-selector">Zoom In Up</button>
<button name="zoomIn" class="animation-selector">Zoom In</button>
<button name="pulse" class="animation-selector">Pulse</button>
<button name="wobble" class="animation-selector">Wobble</button>
<button name="shake" class="animation-selector">Shake</button>
</center>
</div>
<div id="container">
<div id="graphs">
<div class="block"><div class="content-block" style="height:280px; background-image:url(current-open-issues-by-opco.png);"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:237px; background-image:url(days-remaining-to-remediate-open-issues.png);"></div><div class="link-icon"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:350px; background-image:url(root-cause-of-ltm-issues.png);"></div></div>
</div>
<div style="clear:both;"></div>
</div>
and here's my jquery:
<script>
$(function() {
$(".linked-button").on('click', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
});
$(function() {
$(".animation-selector").on('click', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
});
$(function() {
$(".link-icon").on('click', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
});
});
Also replicated it in jsfiddle: https://jsfiddle.net/3hjfj/
Update - working! Thanks - this was my first stackoverflow question - nice to get my cherry popped. Here's the new code:
$(function() {
$('body').on('click', '.linked-button', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
$('body').on('hover', '.linked-button', function() {
$('.link-icon').toggleClass("link-hover");
});
$('body').on('click', '.animation-selector', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
$('body').on('click', '.link-icon', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
$('.transparent-blue').fade();
});
$('body').on('mouseenter', '.link-icon', function() {
$('.transparent-blue').show();
});
$('body').on('mouseleave', '.link-icon', function() {
$('.transparent-blue').hide();
});
});

Apart from not needing multiple document ready functions, the event handlers are applied only to the objects with those classes that exist at the time they are run, so the cloned objects do not get them. Try this instead:
$("document").on("click", ".link-icon", function() {
$("document").on("click", ".animation-selector, function() {
and
$("document").on("click", ".linked-button", function() {

Use this for dynamically created elements:
$('body').on('click', '.animation-selector', function() {
// do something
});
$('body').on('click', '.link-icon', function() {
// do something
});

JQuery Is not working properly on mouseenter and mouseleave

Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???

You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});

try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.

$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});

JS slidetoggle on UL Tree

When i click on second item with slideToggle, first item close.
$(function() {
$('.toggleSitemap').find('ul').css('display','none')
$('.toggleSitemap').click(function(){
$(this).parent().find('ul').slideToggle('slow');
});
});
http://jsfiddle.net/qHZsZ/2/

I dont know how much will this help you. I also needed to implement accordian(toggle) in my MVC project once, and I used something like this:
View.aspx:
<div class='toggle' style="float: left">
<div style="float: left;clear:both;">
<br />
<span class="ulGroup" jqattr="<%:Group.Key %>" style="font-weight: bold;font-color: black;cursor: pointer"><img src="<%: Url.Content("~/Images/imageplus.gif")%>"/>
<%:Group.Key%></span>
</div>
<div class="togglebox" style="clear:both;" >
<!-- Write contents as you wish -->
<!-- as
<ul> test
<li>Test1></li>
<li>Test2></li>
<li>Test3></li>
</ul>
.
.
.
-->
</div>
</div>
And called a design.js (javascript file) as :
$(document).ready(function () {
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over span
$(".ulGroup").click(function () {
var valueText = $(this).attr('jqAttr');
// slide toggle effect set to slow you can set it to fast too.
var x = $(this).parent().next(".togglebox").css("display");
if (x == "block") {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
else {
$(this).text('');
$(this).append($('<img src="../../Images/imageplus.gif"/>'))
$(this).append(' ' + valueText);
}
$(this).parent().next(".togglebox").slideToggle("fast");
return true;
});
});

You're pretty close. I think the key ingredient you're missing is to prevent propagation of the click event.
Also, to make it a little less quirky, you only want the click event to fire if the target's direct parent has the toggleSitemap class.
$(function() {
$('.toggleSitemap').click(function(e){
if ($(e.target).parent().hasClass('toggleSitemap')) {
e.stopPropagation();
$(this).children('ul').slideToggle('slow');
}
});
});
Here's an example: http://jsfiddle.net/DkbNA/2/

How can I swap an image on click and show it onclick or when clicked elsewhere?

My HTML structure is:
<div class="box_container">
<a class="box_one entire_sprite_image" href="#"></a>
<a class="box_two entire_sprite_image" href="#"></a>
</div>
Onclick of box_one or box_two I want them to go to an active state. I intend to use JQuery to do that. So when box_one or box_two is clicked the image color changes to reflect active state.
I am not sure how I can use JQuery to do this because instead of having two different images for each box I am using a sprite image.
I am new to Jquery but got up to this point:
(function ($) {
$(document).ready(function() {
$(".box_one, .box_two").click(function () {
});
});
})(jQuery);
How can I still use Jquery to change the image when clicked and change back to original when clicked on that image again and when something else is clicked?

My assumption is that your asking how to change the sprite on the element that was clicked. To do that you'd adjust the background-position of the clicked element as shown here:
$(document).ready(function(){
$(".box_one, .box_two").click(function () {
$(this).css('backgroundPosition', '0 -54px'); // replace values with appropriate sprite values
});
});
Please clarify if you're use case is different from this.
UPDATE: use an active class and toggle it. toggle active class by clicking on other elements.
<div class="box_container">
<a class="box_one active" href="#"></a>
<a class="box_two" href="#"></a>
</div>
$(document).ready(function(){
$(".box_one").click(function () {
$(this).toggleClass('active');
});
$(my_selected_elements).not(".box_one").click(function () {
$(this).toggleClass('active');
});
});

use classes for the swap
.box_one{
background : 'imgUrlOne'
}
.box_one.swap{
background : 'imgUrlOneSwap'
}
.box_two{
background : 'imgUrlTwo'
}
.box_two.swap{
background : 'imgUrlTwoSwap'
}
<div class="box_container">
<a class="box_one entire_sprite_image" href="#"></a>
<a class="box_two entire_sprite_image" href="#"></a>
</div>
Javascript
(function ($) {
$(document).ready(function() {
$(".box_one, .box_two").click(function () {
$(this).hasClass('swap') ? $(this).removeClass('swap')
: $(this).addClass('swap')
});
});(jQuery);
Updated Check Fiddle