popup goes back to hidden state when clicking outside the popup area - javascript

If I have a popup (using a div), how can I have the div to go back to the hidden state when someone clicks anywhere outside of the div?
i.e. the popup is visible, then someone clicks outside the popup, the div should be hidden again.
How can I achieve this functionality?

A popular way to do this is with an overlay. When your create your div popup, also create a <div id="overlay"> immediately beneath it that takes up the whole screen:
div#overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
Optionally, you can use this overlay to darken all other content with, for example, background: #000 and opacity: 0.5.
After you've crafted your JavaScript to add this overlay right beneath your popup, add a click listener to it. When the user clicks the overlay, you'll know that s/he has clicked outside of your popup.
Note that position: fixed doesn't work in older browsers. One workaround is, when the overlay is visible, to instead set the overlay to position: absolute, then temporarily add overflow: hidden to <body> to prevent the user from scrolling down.

A different way of doing it that seems more straight forward to me, is this:
$("body").click(function (event) {
var outside = $(event.originalTarget).parents("#popup").length === 0;
if (outside) {
$("#popup").remove();
$("body").unbind("click");
}
});
In short, the originalTarget is what was actually clicked, and the script then checks if #popup is one of its ancestors (called parents in jQuery). If it isn't, the click was outside, and we remove the popup.

Related

Hide element, but keep it clickable?

I have a button generated inside an iframe. Unfortunately, I can't change how it looks, as it's delivered by 3rd party library. I thought of a little trick to use my own button and keep the generated one inside:
<button id="my-button">Click Me</button>
This way, I can tell the library to place its buttons inside mine, so the <iframe> would get appended like this:
<button id="my-button">
Click Me
<iframe src="..."></iframe>
</button>
Now, the only thing left is to hide the <iframe>. I can't simply use visibility: hidden, because that way the click event no longer works. Why I did is instead:
#my-button {
overflow: hidden;
position: relative;
}
#my-button > * {
position: absolute;
top: 0;
bottom: 0;
opacity: .0001;
}
It seems to be a good solution, as I don't see the 3rd party button and I can do whatever I want with my own button. I just need to make sure it's not larger that the button inside, which would render part of my own button unclickable.
What I would prefer, would be rendering that other element somewhere else and hiding it with display: none or position: absolute outside of my viewport and then triggering the click inside it. Due to modern CORS policies, as far as I know it's not possible to reach elements inside the <iframe> though - am I right?
Is there any more reliable way to achieve the same effect without so much trickery? I'm not that excited about opacity: .0001, it make me anxious that in some browsers it will leave some visible trace of the other button.
It isn’t possible to have an element of the parent trigger a click on a button (or any other element) within an iFrame for security reasons.

Prevent background scroll & Jumping to top on mobile

On our mobile site, when clicking the hamburger icon in the top right I want the drop-down menu to appear and be scrollable, without the background scrolling. I have written javascript to set the body to fixed when you click the menu icon, however, this results in the website jumping to the top of the page. This is not what I want, I would like for it so that when the user clicks on the menu button, the background page stays where it is and does not jump to the top.
Below is the code that I have already tried for this.
Javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("body").toggleClass("noScroll");
});
});
CSS
.noScroll {
position: fixed;
}
EDIT Here is the website: http://s2br5s5r3.gb-02.live-paas.net
href="#" makes page going top, give correctly url ex: href="https://www.google.com/" then the problem of going top will be solved.
css
.noScroll {
overflow: hidden;
/* position: fixed */
}
javascript
jQuery(function($) {
$(".x-btn-navbar").on("click", function() {
$("html, body").toggleClass("noScroll");
});
});
then the <body> will be unscrollable.
first of all remove the css position fixed from the class no-scroll. That's what is causing the page to jump on top when you click the menu button. After you open the menu it is scrollable as it should, i assume what you want is to prevent the page behind the open menu to be scrolled when the menu is open. Ypu can achieve this with javascript event listeners like so:
EventTarget.addEventListener('scroll', noscroll);
instead of EventTarget give the body an id and use the event listener to that when the user clicks on the element, but then when they close the menu you should remove the event listener with:
EventTarget.removeEventListener()
I hope this helps you
Keep in mind though that you have to separate the content of the page from the menu, because if you add the no scroll to the body that will apply also to the menu as long as it is a child of the body

mouseout closes the trigger and not the target

I have set a popup to open at mouse over on an element. The popup should close when the cursor is off it.
For some reason the popup window closes when the cursor is right off its opener button, instead.
You can see an example here:
http://www.friends.wwz.co.il/Lab/Gefen/Generali/es/popup.html
Please try to hover with the mouse on the "lee mas" button. A popup will open. It should close at hovering off it. But instead it closes at hovering off the lee mas button, so it closes immediately.
Any idea where do I go wrong?
Many thanks in advance for you advice
The main problem is you are attaching hover events to the button. Once you hover out of the button element, it fires the hoverOut button.
So the ideal course of action can be:
Bind hover event to the button.
Once hovered, a pop-up is dynamically added.
Then, a hover event is bounded to the pop.
And the code of dissolving the pop-up is attached in the hover-out function.
So that when actually the cursor is hovered out of the pop-up it dissolves.
Apart from that, Just have a look at this fiddle. It has two hyperlinks for hover. The first is the one you are facing. The second one is the one you are looking for. :D
Code for it:
$(document).ready(function() {
$("#toggleSwitch_j").hover(
function() {
$("#theBox_3").slideDown(500);
}, function() {
$("#theBox_3").slideUp(500);
});
$("#StayOpen").hover(
function() {
$("#theBox_2").slideDown(500);
}, function() {
$("#theBox_2").slideUp(500);
});
});
body {
background-color: #eef;
}
#theBox_3,
#theBox_2 {
display: none;
border: 1px solid #000;
width: 200px;
height: 100px;
background-color: #ddf;
}
#toggleSwitch_j,
#StayOpen {
background-color: #cacaca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This layout will only keep the hidden div visible as long as you point to the link
<br>You'll never be able to reach anything inside the div
<br>jQuery Hover
<div id="theBox_3">Peek-a-boo!</div>
<hr>This layout puts the link and hidden div inside a wrapper - hovering anywhere inside the wrapper expands the hidden div, so you can reach content inside it. This would be handy if you need to put links or form elements inside the hidden div, instead of
just text to read.
<div id="StayOpen">
jQuery Hover
<div id="theBox_2">Peek-a-boo!</div>
</div>

img inside hidden div pixelated for a short time when shown

I suppose this had been answered before, but I couldn't find a similar issue on the web.
I have an img element inside a hidden div (a side menu). It is not hidden actually, it is an absolutely positioned div residing outside of the body borders. When user clicks a button to open the menu, I make use of jQuery's animate to move it back into the viewport by playing with its left property. The setup is as follows:
.menu {
.
.
.
width: 200px;
position: absolute;
left: -200px;
}
When user clicks the button to open the menu, I run this animation:
$('.menu').animate({
left: "+=200"
},
500,
function() {
// stuff here
}
);
The problem is, when this animation is completed, the img inside the menu is pixelated for a short period of time, like 3 seconds, then it renders correctly. This happens everytime I close and open the menu again. How can I solve this?
EDIT
I've prepared a fiddle, but couldn't reproduce the issue in the fiddle. Image renders with no problem in the fiddle. I am posting the link here anyway, maybe that could help to understand the setup. Could the reason be other elements present in the document at the time of the animation? Or could it be about hte size of the image?
http://jsfiddle.net/j5aecuqx/

Unable to click a div, how do I bring one div on top of another

I have this jsfiddle http://jsfiddle.net/fwQq4/19/
Here I have the wrapper class (div.wrapper) above the div#middle. So if I click on the div#middle the click is happening on div.wrapper. How can I get the click to have middleElement as the source.
The real problem is I have many items inside the middle element, and I want to find which element the user clicked on.
How can I get the middle element on top!
Add these two lines of css to #middle:
position: relative;
z-index: 1;

Categories

Resources