I have a simple date picker page. My calendar lives in an iframe which is inside a div. I have an onfocusout attached to the div that closes the div.
The problem is when I click on the calendar, the select event for the calendar never fires because the onfocusout fires and the div disappears.
How can I best handle the common date picker workflow? The link following is a similar abstraction where blue div represents the calendar. When I click on the blue div I don't want red event to fire.
https://jsfiddle.net/1ye6yn43/5/
#divouter {
background-color: red;
height: 45vh;
}
#divinner {
background-color: blue;
height: 25vh;
width: 75vh;
}
<div id="divouter">
outer
<div id="divinner">
inner
</div>
</div>
var blueclick = document.getElementById('divinner');
blueclick.onclick = function(event) {
alert('blue');
event.preventDefault();
}
var redclick = document.getElementById('divouter');
redclick.onclick = function() {
//alert('red');
redclick.style.visibility = 'hidden';
}
redclick.onfocusout = function() {
alert('red focus out');
}
Add event.stopPropagation(); to your blue event
Related
Calendar
I am integrating full Calendar in Angular. I have added different events in full Calendar. On each event I have added button inside event. Where ever I click on the event , event click of full Calendar gets called. I want to call a function when user click on the button inside event content. Can someone assist me how can I do that.
Below is my code of button inside event of a full Calendar.
If I really understand what you are asking for then ans is
event.stopPropagation();
Snippet example
function parent(event) {
console.log(alert("parent"))
}
function child(event) {
event.stopPropagation();
console.log(alert("child"))
}
.parent{
width: 200px;
height: 200px;
background-color: red;
margin :auto ;
}
.child {
width:100px;
height:100px;
margin:auto;
background-color: blue;
}
<div class = "parent" onclick = "parent(event)" >
<div class = "child" onclick = "child(event)">
child
</div>
</div>
I have a menu which I want to display when the input is focused, so I used the focus and blur event of the input to trigger the function that either shows or hide the menu.
The problem is when I want to add events inside the menu (for example a click event), the blur event of the input is always triggered first so the click event of the menu is never triggered
Here's a sample code to illustrate my problem: https://jsfiddle.net/f7xvg1L9/27/
function hide () {
document.getElementById('box').style.display = 'none';
}
function show () {
document.getElementById('box').style.display = 'block';
}
function select () {
document.getElementById('select').innerHTML = 'selected';
}
document.getElementById('input').addEventListener('blur', hide)
document.getElementById('input').addEventListener('focus', show)
document.getElementById('box').addEventListener('click', select)
#box {
width: 100px;
height: 50px;
background-color: red;
display: none;
}
<input type='text' id='input'/>
<div id='box'>Test</div>
<p id='select'></p>
(the select() function is never called)
Thanks in advance
You can do a lot of things in CSS instead of Javascript for this.
Here, setup a CSS rule for the selector input:focus + #box, #box:active, which displays the box.
#box:active is there to register the click on the box before it disappears, it won't work without it.
document.getElementById('box').addEventListener('click',() => {
document.getElementById('select').innerHTML = 'selected';
});
#box {
width: 100px;
height: 50px;
background-color: red;
display: none;
}
input:focus + #box, #box:active{
display: block;
}
<input type='text' id='input'/>
<div id='box'>
Test
</div>
<p id='select'></p>
That's an unfortunate side effect.
But it can be solved quite easily by using different events.
Instead of using a focus/blur handler, you can just use click events for all 3 of these, since focussing the input is the same as clicking inside it. And Blurring the input is the same as clicking outside of the input.
So if we show the box onclick of the input, we can then add a different click event to the rest of the document. Inside that click event, we can check if the current click is inside the box or not and act accordingly.
var box = document.getElementById('box');
var input = document.getElementById('input');
var change_text = function() {
box.innerHTML = 'selected';
};
var outside_click = function( event ) {
if ( !box.contains(event.target) ) {
box.style.display = 'none';
document.removeEventListener('click', outside_click);
}
};
var show_box = function( event ) {
event.stopPropagation();
box.style.display = 'block';
document.addEventListener('click', outside_click);
};
box.addEventListener('click', change_text);
input.addEventListener('click', show_box);
#box {
width: 100px;
height: 50px;
background-color: red;
display: none;
}
<input type='text' id='input'/>
<div id='box'>Test</div>
Edit: But the CSS solution posted above is a way better and easier solution.
Two things you can use:
event.relatedTarget - This is only valid for focus and blur events on only contains a value if the relatedTarget has tabindex=1 or greater.
the useCapture phase of addEventListener which allows you to get at events before most things get to them.
In the example below I use them both, though I really only needed to use the event.relatedTarget since that let me see that the user was clicking on the #box and prevent from closing the box.
function hide (evt) {
if (evt.relatedTarget && evt.relatedTarget.id === 'box') {
document.getElementById('box').style.display = 'none';
document.getElementById('input').focus();
}
else {
document.getElementById('box').style.display = 'none';
}
}
function show (evt) {
document.getElementById('box').style.display = 'block';
}
function select (evt) {
document.getElementById('select').innerHTML = 'selected';
}
document.getElementById('input').addEventListener('blur', hide);
document.getElementById('input').addEventListener('focus', show);
document.getElementById('box').addEventListener('click', select, true);
#box {
width: 100px;
height: 50px;
background-color: red;
display: none;
}
<input type="text" id="input"/>
<div id="box" tabindex="1">
Test
</div>
<p id="select"></p>
I think the most quick and simple way would be to use setTimeout in the hide function.
function hide () {
setTimeout(function(){
document.getElementById('box').style.display = 'none';
}, 300)
}
function show () {
document.getElementById('box').style.display = 'block';
}
function select () {
document.getElementById('select').innerHTML = 'selected';
}
document.getElementById('input').addEventListener('blur', hide)
document.getElementById('input').addEventListener('focus', show)
document.getElementById('box').addEventListener('click', select)
#box {
width: 100px;
height: 50px;
background-color: red;
display: none;
}
<input type='text' id='input'/>
<div id='box'>Test</div>
<p id='select'></p>
I am building a wordpress website and in the header part there is a search bar. How to create a dim effect(background:rgba(0,0,0,0.3)) on other elements except in search bar when I use the search bar (for example like in Quora.com). Also this code(your answer) should be working if I use code for other elements(other than search bar) like input box,or any other div.
I will be more satisfied if you come with an answer that is flexible to use for any div.
Thanking you in advance.
You need to add a click event to the element that needs to be clicked. You can then bind a function to that event that is triggered upon the click, as follows:
var test = document.getElementById("test");
test.addEventListener("click", changeColour);
function changeColour() {
var changeme = document.getElementById("change");
changeme.classList.add("addopacity");
}
#change {
background: #000;
width: 100px;
height: 100px;
}
#change.addopacity {
opacity: 0.2;
}
<button id="test">Click me please</button>
<div id="change"></div>
Please note, you don't have to add a class to the target element like I have above, you can just as easily add an inline style with changeme.style.opacity = "0.2"; within the function.
If you want to click on the element itself and have it change colour, you can do something similar:
var test = document.getElementById("change");
test.addEventListener("click", changeColour);
function changeColour() {
this.classList.add("addopacity");
}
#change {
background: #000;
width: 100px;
height: 100px;
color: #fff;
}
#change.addopacity {
opacity: 0.2;
}
<div id="change">CLICK ME</div>
Use the opacity property and apply it wherever you need it.
div {
opacity: 0.3;
}
For part of the site I'm working on, I have a set of sidebars that can pull out. To have them hide when the users are done with them, I've set up a div with a click event (see below) so that whenever the user clicks somewhere outside of the sidebar, the sidebar closes. The problem that I'm running into, however, is that the click event handler is grabbing the event, running its method, and then the click event seems to stop. I've tried using return true and a few other things I've found around here and the internet, but the click event just seems to die.
$('.clickaway').click(function() {
$('body').removeClass(drawerClasses.join(' '));
return true;
});
EDIT: Here is a fiddle with an example: https://jsfiddle.net/2g7zehtn/1/
The goal is to have the drawer out and still be able to click the button to change the color of the text.
The issue is your .clickaway layer is sitting above everything that's interactive, such as your button. So clicking the button, you're actually clicking the layer.
One thing you could do is apply a higher stacking order for elements you want to interact with, above the .clickaway layer. For example, if we apply position: relative, like this:
.show-drawerHotkey .ColorButton {
position: relative;
}
The element will now be in a higher stacking order (since it comes after the clickaway, and we've applied no z-index to clickaway)
Here's a fiddle that demonstrates: https://jsfiddle.net/2g7zehtn/5/
Using this somewhat famous SO answer as a guide, you can bind to the $(document).mouseup(); event and determine whether certain "toggling" conditions apply:
[EDIT] - Example updated to illustrate clicking a link outside of the containing div.
// Resource: https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it
var m = $('#menu');
var c = $('#menuContainer');
var i = $('#menuIcon');
i.click(function() {
m.toggle("slow");
});
$(document).mouseup(function(e) {
console.log(e.target); // <-- see what the target is...
if (!c.is(e.target) && c.has(e.target).length === 0) {
m.hide("slow");
}
});
#menuIcon {
height: 15px;
width: 15px;
background-color: steelblue;
cursor: pointer;
}
#menuContainer {
height: 600px;
width: 250px;
}
#menu {
display: none;
height: 600px;
width: 250px;
border: dashed 2px teal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm a link outside of the container
<div id="menuContainer">
<div id="menuIcon"></div>
<div id="menu"></div>
</div>
Following is my fiddle in which i made a div with class overlay and i am trying to do that when user clicks on submit button then that overlay class div appears on the div of contact form and on clicking close button that div hides and it shows the reset form again. Kindly let me know how can I make such kind of overlay on the contact form on submit button
http://jsfiddle.net/VqDKS/
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
}
See this, edited with jQuery and CSS. Set the overlay to position: absolute and hide it before the form is submitted. Then remove it when the 'Close'-button is clicked.
http://jsfiddle.net/VqDKS/3/
CSS:
.overlay
{
background-color: yellow;
height:200px;
width: 300px;
position: absolute;
top: 0px;
z-index: 99;
display: none;
}
Jquery code:
function js()
{
alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$(".overlay").fadeIn()
return false;
}
$(document).ready(function(){
$(".close").click(function(){
$(".overlay").fadeOut();
$('#contact_form3 input[type="text"]').val('');
});
});
Make following change in HTML:
<input type="button" value="close" class="close">
You need to hide your overlay at the beginning just show the form. When clicked submit, show overlay and hide the form. Then when close is clicked hide the overlay and show the form.
It can be as :
function js()
{ alert('clicked submit: get typed name');
var name = $("#FN3").val();
$("#name").html( name );
$("#form-div").hide();
$(".overlay").show();
return false;
}
function closeOverlay(){
$("div.overlay").hide();
$("div#form-div").show();
}
please have a look here :
http://jsfiddle.net/injulkarnilesh/VqDKS/7/
Basically you need to set the contact form wrapper position property to relative and then just set position of your overlay to absolute, something like this:
.contact_wrapper { position: relative; }
.overlay { position: absolute; top: 0; left: 0; }
This way you will be sure that your overlay will be absolute positioned on the top of your contact form.
When page is loaded, we don't need the overlay, so you can add the following property:
.overlay { display: none; }
In your code, when you submit the form you are using onclick event to execute your handler.
Here you need to make overlay visible again, you can use .show() of jQuery:
$('.overlay').show();
And now you need to add event handler to deal with close button, you can simply add unique idintifier (e.g. class) to the element, then with jQuery you can trigger click event for this element and here you can hide your overlay.
$('.closeBtn').click( function() {
$('.overlay').hide();
});
By the way, you can read about .submit() and .ajax() methods in jQuery.
Here is a working jsFiddle.
I updated your fiddle a bit: http://jsfiddle.net/nweevers/VqDKS/8/
This is a way to do this. But then your form isn't still submitted.
The best way is to show the overlay after the post. And then you can hide the overlay with the button.
$overlay.on('click', 'input[type=button]', function() {
$overlay.hide();
});