Overlaying a transparent div, which when clicked disappears - javascript

I am looking to have a transparent div on an HTML page with a graphic on which it has instructions for the user on how to use the page. When anywhere on the page is clicked or pressed then the div will hide/disappear.
I have JavaScript code which I have taken from another post on Stack Overflow, but I cannot seem to get it working.
It is linked to my HTML page and CSS, and the div is appearing, but it isn't disappearing when clicked.
How can I do this?
HTML code is as below:
<div id="overlay">
<div id="home_text">
<!-- Your image -->
</div>
</div>
CSS:
#overlay {
background: rgba(0, 0, 0, .4);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
#home_text {
background: red;
height: 300px;
margin: 20px auto 0;
width: 300px;
}
JavaScript:
(function () {
var overlay = ('#overlay');
overlay.on('click', function (e) {
overlay
.hide()
.off();
});
});

You have missed the "$" character before ("#overlay"):
$(document).ready(function() {
var overlay = $('#overlay');
overlay.on('click', function (e) {
overlay
.hide()
.off();
});
});
Demo:
http://jsfiddle.net/ks38e/6/

You are missing a $ sign:
var overlay = $('#overlay');
Working demo
If you check your JavaScript console, you will see an error pointing to this line of code.

The HTML has a minor error, the of the "overlay" should be closed:
<div id="overlay"></div>
<div id="home_text">
<!-- Your image -->
</div>
That works on the fiddle above

Related

How can I close layer popup when I click background or button?

The scenario is as follows.
Default Status (no layer popup)
When I click the button, layer popup shows.
Click the button or outside, layer popup will be hide.
I want to close the layer popup when I click background(outside) or button.
How can I do with Vanilla JS or jquery? (based on HTML)
I would appreciate it if you could answer.
When you open the popup attach a click listener to body that closes it and removes the listener.
You can use this code
//use by id
document.getElementById(#id).style.display = 'block';
document.getElementById(#id).style.display = 'none';
//use by className
document.getElementById(.className).style.display = 'none';
document.getElementById(.className).style.display = 'block';
or use jQuery
$(document).ready(function(){
$("#id").click(function(event){
// $("#id").toggle();
// $("#id").hide();
// $("#id").show();
});
});
Set id for your layer in HTML part like id="layerPopup"
Then on your JS code create event for your button
$(document).on('click', '#btnId', function(){
$("#layerPopup").hide();
});
You should appear a overlay which will cover the whole body, and give it css property z-index to lower from the button, and when apply click function on it same as my code
HTML
<div class="overlay"></div>
CSS
.overlay{
background-color: transparent;
inset: 0;
position: fixed;
z-index: 100;
display: none;
}
button{
z-index: 101;
}
JQuery
$('button').click(function(){
$('.overlay, popup').toggle();
});
$('.overlay').click(function(){
$('.overlay, popup').hide();
});
One standard way to handle such scenario is to have a backdrop div behind the popup and then add an event listener to it. You may choose to change backdrop's background color to increase pop up aesthetics visibly.
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10;
background: rgba(0, 0, 0, 0.75);
}
.modal {
position: fixed;
top: 30vh;
left: 10%;
width: 80%;
z-index: 100;
overflow: hidden;
}
<div class="backdrop" />
<div class="modal" />
And then you can add an event listener on backdrop:
$(document).on('click', '.backdrop', function(){
$(".modal").hide();
});
PS: There may be some syntax issues!

horizontal slide in html

I know that this is a frequent question but I can't find an answer that matches my requirements.
In short, I want to horizontal slide a box from the right-side (insivisible) part of the screen to the left and then from the left back to the right.
The html/css/js below demonstrates what I want:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
#box-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80em;
background-color: #f00;
}
#box-2 {
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 4em;
background-color: #0f0;
}
#viewport {
overflow: hidden;
position: relative;
height: 100em;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="viewport">
<div id="container">
<div style="position: relative">
<div id="box-1">
</div>
<div id="box-2">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
});
</script>
</body>
</html>
Now, everything might seem fine except for two important things:
I do not want to specify a height for the outer viewport. I would like this viewport to adopt automatically the height of the highest item in the container
this code does not do what I want if you scroll down at the bottom of the page when the red box is visible and click on it: the green box comes within the viewport but it is scrolled at the bottom. I would like the green box to come in view directly. As a bonus, it would be nice if once the green box is in view, if I click on it, the red box came back in view at its previous scroll position.
Of course, this example has lots of other limitations (the default animation function provided by jquery sucks, etc...) but I believe I can fix them later.
Given the limitations of the solution I have posted here, I suspect that I did not chose the right approach but I have no idea on where I should start.
You need to scroll to the top of the div when you click on the box.
Here's the code:
$(function() {
var vheight = Math.max($("#box-1").height(), $("#box-2").height());
$("#viewport").height(vheight)
});
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
$('html,body').animate({
scrollTop: $("#box-1").offset().top
});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
$('html,body').animate({
scrollTop: $("#box-2").offset().top
});
});
I also updated the JS Fiddle: http://jsfiddle.net/Av7P3/1/

JQuery animate is not working in firefox

I have Jquery script to play navbar animation on one page and disable it on another page. it works on chrome but not on firefox. Heres my code:
var URL = window.location.pathname;
URL = URL.split("/");
if(URL[1] != 'holiday') {
$('.navbar').addClass('hide-menu');
$(window).scroll(function() {
slider();
});
} else {
$(".navbar").addClass('show-menu');
}
The slider function :
function slider() {
if (document.body.scrollTop > 500)
$('.navbar').stop().animate({
"margin-top" : '0'
});
else
$('.navbar').stop().animate({
"margin-top" : '-150px'
});
}
The CSS:
.show-menu {
margin-top: 0px;
}
.hide-menu {
margin-top: -150px;
}
Firefox hide the menu but it fail to play the animation and show the menu back. Any suggestion guys? thanks
You have to get the scroll amount from the element that actually has the scrollbar. Firefox considers that to be the <html> element.
You can wrap all your content in a container that's got overflow: auto set, and then use that as the thing to check for scroll amount as well as the place to put the scroll event handler. Here's a jsbin.
<body>
<div id=everything>
<div class=navbar>
HELLO WORLD
</div>
<!-- content ... -->
</div>
</body>
and CSS:
html, body { height: 100%; padding: 0; margin: 0; }
#everything { height: 100%; overflow: auto; }

javascript window scroll issue

I am working on javascript scroll. I have following html code
JSFIDDLE
<div class="wrapper">
<div class="red div current"></div>
<div class="blue div"></div>
<div class="green div"></div>
<div class="yellow div"></div>
</div>
In above code I have four div tags red, blue, green and yellow. All of them are position in following css.
html, body {
height: 100%;
}
.wrapper {
overflow: hidden;
height: 100%;
}
.div {
position: relative;
height: 100%;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
In above html and css the red div tag is the current one which means user is seeing the red div tag on the screen. Now what I am trying to do is when user scroll over window once, then the next div tag i.e. blue will be animated and moved to the top and will become visible to the user whereas the red div tag will be behind the blue one. This same process goes for both green and yellow.
The problem is that when user scroll once then the div tag should animate however my current javascript code is keep reading the scroll and animating the div tags one after another. What I want is when user scroll once then scroll should be disabled until the blue div tag is animated. Then scroll should be enabled. Again when user scroll second time, the scroll should disable until the green div tag completes its animation. Same goes for yellow.
How can I achieve above?
Here is my javascript
$(window).on("scroll", function () {
var next = $('.current').next();
var height = next.outerHeight();
next.animate({top: '-=' + height}, 500, function () {
$(this).prev().removeClass('current');
$(this).addClass('current');
});
});
Please have a look on update JsFiddle
$(window).on("scroll", function () {
var next = $('.current').next();
var height = $('.current').outerHeight();
$('.current').prevAll().each(function(){
height += $(this).outerHeight();
});
next.animate({top: '-=' + height}, 500, function () {
$(this).prev().css('top','');
$(this).prev().toggleClass('current');
$(this).toggleClass('current');
});
});
The main reason your example wasn't working as expected is because you were relatively positioning the divs, and not moving them to the correct spot.
Working JSFiddle:
http://jsfiddle.net/seanjohnson08/rVVuc/6/
.wrapper {
overflow: hidden;
height: 100%;
position: relative;
}
.div {
position: absolute;
height: 100%;
width: 100%;
top: 100%;
}
.current{
top: 0;
}
If you are looking for a way to limit the amount of scroll events fired, try throttling: http://benalman.com/projects/jquery-throttle-debounce-plugin/. My solution doesn't require this, because no matter how many times it is firing the scroll event, it only ever tells jquery to animate to top:0, there's no chance of it animating past that.

jQuery: Auto scroll to top

i use this script to open a modal:
<script type="text/javascript">
$(function(){
$('.compose').click(function() {
$('#popup_bestanden_edit_name').reveal({
animation: 'fade',
animationspeed: 600,
closeonbackgroundclick: true,
dismissModalClass: 'close',
});
return false;
});
}); </script>
But when i'm at the bottom of the page and click the link, the modal opens at the top of the page.
So it looks like nothing happends, but i have to scroll to the top to see the modal opened.
Is it possible to send the user automatically to the top when the modal is opened?
use below code to move to top of page:
$('html, body').animate({scrollTop: '0px'}, 0);
Instead of 0, you can have some other value like 500 (its in milliseconds) to make it move to top slowly
You can add position: fixed and for example top: 30px to styles for #popup_bestanden_edit_name. If you do that, modal will appear always in the same place, no matter where the user is on the page. But then you must be careful, because if modal is higher than viewport, you won't be able to see the remaining part of modal.
If you still want to scroll to top (without animation), using JavaScript you can put
$('body').scrollTop(0);
right before your return false;
BTW, if you want to prevent default action of a link to fire, it's a better practice to do it that way:
$('.compose').click(function(event) {
// your code here
event.preventDefault();
}
I would suggest not to scroll to the top of the page. It is not good UX Design! We can have overflow hidden on the body. So, user can not scroll once popup comes to screen. We need to give position fixed to the main element of the popup.
I would suggest to check below snippet.
<html>
<head>
<title>Example</title>
<style type="text/css">
.nooverflow {overflow: hidden;}
.popup {position: fixed; z-index: 99;}
.cover {position: fixed; background: #000; opacity: .5; filter: alpha(opacity=50); top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
.popup-conteiner {overflow-y: auto; position: fixed; height: 100%; width: 100%; left: 0; top: 0; z-index: 101;}
.popup-block {position: relative; top: 100px; z-index: 101;}
</style>
</head>
<body>
<div id="popup">
<div class="cover"></div>
<div class="popup-conteiner">
<div class="popup-block">
<!-- POPUP's HTML GOES HERE -->
</div>
</div>
</div>
</body>
</html>
But, if it does not work then you can scroll page to the top of the page. You can use solution given by Rajesh as well. I would like to add a condition that if page is already animated then stop before doing new animation.
var htmlBody = $("html,body"),
top = 0;
if (htmlBody.is(':animated')) {
htmlBody.stop(true, true); //Need to stop if it is already being animated
}
htmlBody.animate({ scrollTop: top }, 1000); //Scroll to the top of the page by animating for 1 sec.

Categories