I want the <div> with class .shell-pop to be closed if they click out of the element area. It appears not to fire though, and none of the logs or alerts go off either. I've looked around and everything appears right?
jQuery
$('document').ready(function () {
updateCart();
$(".shell").click(function (e) {
e.preventDefault();
$(".shell-pop").fadeIn(300, function () { $(this).focus(); });
});
$(".shell-pop").on('blur', function () {
$(this).fadeOut(300);
window.alert("work");
console.log("works");
});
});
HTML
<div class="options-area">
<div class="options-popup shell-pop">
<div class="swatches">
<div class="colors-shell colors" id="green">
<p class="prices-for-swatch">$14.23</p>
</div>
<div class="colors-shell colors" id="pink">
<p class="prices-for-swatch">$7.23</p>
</div>
<div class="colors-shell colors" id="blue">
<p class="prices-for-swatch">$11.25</p>
</div>
<div class="colors-shell colors" id="orange">
<p class="prices-for-swatch">$10.23</p>
</div>
<div class="colors-shell colors" id="default-shell">
<p class="prices-for-swatch">FREE</p>
</div>
<div class="colors-shell colors" id="exit">
<img src="img/Silhouette-x.png" class="x-logo" alt="exit" />
<p class="closeit">CLOSE</p>
</div>
<div class="shell square">
<img src="img/controllers.png" class="item-icon" alt="controller-piece">
<p class="name-of-item">Shell</p>
<p id="shell_Price1" class="items-price">0.00</p>
</div>
Give your <div> a tabindex.
The tabindex global attribute is an integer indicating if the element
can take input focus (is focusable), if it should participate to
sequential keyboard navigation, and if so, at what position.
Observe the following...
<div tabindex="-1"></div>
$('div').on('blur', function() {
console.log('blurrr');
});
JSFiddle Link - simple demo
Blur will only fire on form elements. You should consider a different approach. For example, you could watch for click events on .shell-pop and determine it's current state.
Like
$(document).on('click', function(e){
if ($(e.target).is('.shell-pop')) {
alert('focused');
} else {
alert('blured');
}
});
Related
$(document).ready(function () {
$(".req_sent").hover(function () {
$(".drop").toggle("hover");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
I have a simple button i.e. Sent. Now, What I actually want when I hover on Sent button then It show div i.e. <div class="drop"> but it hide when I move cursor from Sent button to <div class="drop">.
Now, I want stay on <div class="drop"> when hover on Sent if I remove my mouse from <div class="drop"> it will hide again. So, How can I do this? Please help me.
Thank You
you can try below code where show drop when hover on sent button. On hover of drop do nothing but hide it when you leave drop
$(document).ready(function () {
$(".req_sent").hover(function(){
$(".drop").show();
});
$(".drop").hover(function(){
//do nothing
}, function(){
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
Here you go
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
</div>
<script>
$(document).ready(function () {
$(".profile_btnn").hover(function(){
$(".drop").toggle("hover");
});
});
</script>
You want to keep, visible div event mouse out from Sent button. And hide when its mouse over on div
Just don't use toggle() and apply show() to get it done.
Please check below code:
$(document).ready(function () {
$(".req_sent").hover(function () {
$(".drop").show('slow');
});
$(".drop").hover(function () {
$(".drop").hide('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
I'm trying to update text inside clicked element, but both the div gets updated on the same time. trying to play around the same code without including Id or further class.
Trying to find the solution since morning.
Here is the the live fiddle to playground: https://jsfiddle.net/vinayak5192/63ujzwwn/2/
$(".edit_me").hover(function() {
$(this).addClass('hover_edit_me');
$(".hover_edit_me").on('click', function(e) {
e.preventDefault();
var big_parent = $(this);
//edit text
if (big_parent.attr("data-type") == 'text') {
$("#sim-edit-text .text").val(big_parent.text());
$("#sim-edit-text").fadeIn(500);
$("#sim-edit-text .sim-edit-box").slideDown(500);
$("#sim-edit-text .sim-edit-box-buttons-save").click(function() {
big_parent.text($("#sim-edit-text .text").val());
});
}
});
}, function() {
$(this).removeClass('hover_edit_me');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit_me" data-type="text">This is simple title</div>
<p class="edit_me" data-type="text">This is simple paragraph</p>
<hr/>
<!-- Edit Form -->
<div class="appName_edit" id="sim-edit-text">
<div class="sim-edit-box">
<div class="sim-edit-box-content">
<small>Edit Text: </small>
<div class="sim-edit-box-content-field">
<textarea class="sim-edit-box-content-field-textarea text"></textarea>
</div>
</div>
<div class="sim-edit-box-buttons">
<div class="btn appName_btn_save sim-edit-box-buttons-save">Save</div>
<div class="btn appName_btn_cancel sim-edit-box-buttons-cancel">Cancel</div>
</div>
</div>
</div>
Define big_parent out of all the function body and you're done.
var big_parent
$(".edit_me").hover(function() {
$(this).addClass('hover_edit_me');
$(".hover_edit_me").on('click', function(e) {
e.preventDefault();
big_parent = $(this);
//edit text
if (big_parent.attr("data-type") == 'text') {
$("#sim-edit-text .text").val(big_parent.text());
$("#sim-edit-text").fadeIn(500);
$("#sim-edit-text .sim-edit-box").slideDown(500);
$("#sim-edit-text .sim-edit-box-buttons-save").click(function() {
big_parent.text($("#sim-edit-text .text").val());
});
}
});
}, function() {
$(this).removeClass('hover_edit_me');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="edit_me" data-type="text">This is simple title</div>
<p class="edit_me" data-type="text">This is simple paragraph</p>
<hr/>
<!-- Edit Form -->
<div class="appName_edit" id="sim-edit-text">
<div class="sim-edit-box">
<div class="sim-edit-box-content">
<small>Edit Text: </small>
<div class="sim-edit-box-content-field">
<textarea class="sim-edit-box-content-field-textarea text"></textarea>
</div>
</div>
<div class="sim-edit-box-buttons">
<div class="btn appName_btn_save sim-edit-box-buttons-save">Save</div>
<div class="btn appName_btn_cancel sim-edit-box-buttons-cancel">Cancel</div>
</div>
</div>
</div>
here is snippet
Your problem is being caused by the fact that inside $(".hover_edit_me").on('click', function(e) { you are defining another click handler for $("#sim-edit-text .sim-edit-box-buttons-save"). - every time you click on a element to edit, you are making it so that hitting save updates that element, but it's still going to update other elements you've clicked on too.
There are a couple ways of solving this. One is to move the declaration of big_parent and to move the click event for ...-save to outside the .hover_edit_me click event.
The other is to remove the events on the save element before applying the new one by adding .off(), like so:
$("#sim-edit-text .sim-edit-box-buttons-save").off().click(function() {
Check below snippet
You can also solve by below way.
Instead of declaring a variable every time use variable directly
$big_parent = $(this);
$(".edit_me").hover(function() {
$(this).addClass('hover_edit_me');
$(".hover_edit_me").on('click', function(e) {
e.preventDefault();
$big_parent = $(this);
//edit text
if ($big_parent.attr("data-type") == 'text') {
$("#sim-edit-text .text").val($big_parent.text());
$("#sim-edit-text").fadeIn(500);
$("#sim-edit-text .sim-edit-box").slideDown(500);
$("#sim-edit-text .sim-edit-box-buttons-save").click(function() {
$big_parent.text($("#sim-edit-text .text").val());
});
}
});
}, function() {
$(this).removeClass('hover_edit_me');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit_me" data-type="text">This is simple title</div>
<p class="edit_me" data-type="text">This is simple paragraph</p>
<hr/>
<!-- Edit Form -->
<div class="appName_edit" id="sim-edit-text">
<div class="sim-edit-box">
<div class="sim-edit-box-content">
<small>Edit Text: </small>
<div class="sim-edit-box-content-field">
<textarea class="sim-edit-box-content-field-textarea text"></textarea>
</div>
</div>
<div class="sim-edit-box-buttons">
<div class="btn appName_btn_save sim-edit-box-buttons-save">Save</div>
<div class="btn appName_btn_cancel sim-edit-box-buttons-cancel">Cancel</div>
</div>
</div>
</div>
Till now I can grab the src of the image and display it in a fixed division, kind of like a pop up. But I want to hide the div element when the mouse is clicked outside the div. Please guide me how to do it, and also please correct me if my code can be improved. Thanks!
js:
$(document).ready(function () {
$(".pic").hide();
$(".screen").click(function () {
display($(this));
});
});
function display($this) {
var source = $("img", $this).attr("src");
$(".pic img").attr("src",source);
$(".pic img").css("width","450px");
$(".pic").show();
}
html:
<div id="album">
<div class="pic">
<img src="" />
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/1 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<div class="screen">
<h1 class="title">Photo 1</h1>
<img src="images/2 png.png" class="image" />
<p class="description">This is a description</p>
</div>
<span class="clear_left"></span>
</div>
blur event of jquery can be used
$(".screen").bind('blur',function () {
hide($(this));
});
function display($this) {
$(".pic").hide();
}
Try like this
$(document).click(function () {
if ($(this).class != "pic") {
$(".pic").hide();
}
});
Live Demo
I have a UI where more than three div's are there which has the data's with different ids but with the common button called as "Read".I have displayed the messages in which I have kept the message body as a tiny(15) on this Read button it show me the entire body of the message.How to achieve this one way that I am trying to do is as follows:
foreach (var item in Model.MyNote)
{
<div class="row">
#if (item.Owner.Roles.Any(cx => cx.RoleName == "Customer"))
{
<div class="panel">
<div class="row">
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Personal.ImageURL)" />
<span style="text-align: center;">
#item.Owner.Personal.FirstName #item.Owner.Personal.LastName
</span>
</div>
<div class="nine columns">
<input type="hidden" value="#item.Id" id="messid" />
<p class="parahide1">#item.Description </p>
<p class="parahide">#item.Description.ToTiny(15) </p>
</div>
#*Read*#
<button class="button" id="read">Read</button>
</div>
</div>
}
else if (item.Owner.Roles.Any(cx => cx.RoleName == "Professional"))
{
<div class="panel">
<div class="row">
<div class="nine columns">
<p>#item.Description </p>
</div>
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Professional.ImageURL)" />
<span style="text-align: center;">#item.Owner.Professional.CompanyName</span>
</div>
</div>
Read
</div>
}
</div>
<script type="text/javascript">
$(function () {
$(".parahide1").hide();
$("#read").live('click',function () {
$(".parahide").hide();
$(".parahide1").show();
});
});
</script>
}
This give the the result but it is showing the description of all the div's even if I click on the button of the first div.
Try finding the classes in the parent of the current button like this -
$(function () {
$(".parahide1").hide();
$("#read").on('click',function () {
$(this).parent().find(".parahide").hide();
$(this).parent().find(".parahide1").show();
});
});
Hence, only the divs present in the current button's parent will be hidden or shown!
More on .parent() and .find()
Also use .on() instead of .live() as live has been deprecated.
Figured I would ask here because I can't seem to find an easy solution or a solution on here that fits my needs. The problem I'm having with my site at the moment is when dealing with slide animations and with timing of those animations.
So when a user clicks one of my navigation buttons there is a panel that slides out the content based on the button pressed. if you click another button it will slide that one previous div back up and slide down the new content panel.
The main problem I'm getting is either I get animation timing issues because the other one starts sliding as the other one is for some reason.
All my content panels are siblings to one another...so here's the jQuery I'm using....any suggestions would be greatly appreciated!
$('a.navBtn').click(function(){
var divName = this.name;
$.when(function(){
$("#"+divName).siblings().filter(":visible").slideUp("slow");
}).then(function(){
$("#"+divName).slideDown("slow");
})
});
<div id="services">
<div class="noise_overlay">
<div id="contact"><img src="i/contact.png" /></div>
<div id="linkedin"><img src="i/linkedin.png" /></div>
<div id="facebook"><img src="i/facebook.png" /></div>
<div id="twitter"><img src="i/twitter.png" /></div>
<div id="flickr"><img src="i/flickr.png" /></div>
</div>
</div>
<div id="serviceContent">
<div id="contactContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="contactData">
<span>contact</span>
</div>
</div>
<div class="contentFooter"></div>
</div>
<div id="linkedinContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="linkedinData" class="mpCenter">
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="facebookContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="facebookData" class="mpCenter">
<span>facebook</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="twitterContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="twitterData" class="mpCenter">
<span>twitter</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
<div id="flickrContent" class="contentPane mpHidden">
<div class="noise_overlay_300">
<div id="flickrData" class="mpCenter">
<span>flickr</span>
</div>
</div>
<div class="contentFooter"><span></span></div>
</div>
</div>
You need to chain your animation events so the slideDown doesn't happen until the slideUp is done:
http://api.jquery.com/slideUp/
$("#"+divName).siblings().filter(":visible").slideUp("slow", function() {
$("#"+divName).slideDown("slow");
});
Should be something like that.
I have made a simple jQuery snippet for you. The javascript:
$(function() {
$('a.navBtn').click(function(e) {
var pane = $(this).attr('name'),
switchPanes = function(name) {
if($('.contentPane:visible').attr('id') === name){
return;
}
if($('.contentPane:visible').length > 0){
$('.contentPane:visible').slideUp('fast', function() {
$('#' + name).slideDown('medium');
});
} else {
$('#' + name).slideDown('medium');
}
};
switchPanes(pane);
e.preventDefault();
});
});
Here's a working(?) version. I use the callback of the slideUP to call the slideDown.
http://jsfiddle.net/yazYF/
EDIT: Just like the Justin said, I just have some code to test with. :)
EDIT 2: Now with an initial pane visible
http://jsfiddle.net/yazYF/1/
EDIT 3: Initially nothing...
http://jsfiddle.net/yazYF/2/