I have the following HTML, CSS, and Javascript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getTarget(event){
target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
return target;
}
document.onclick = function(event){
var target = getTarget(event);
if(target.id == ""){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
}
}
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
button.style.color="#ff0000";
}
}
</script>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
}
</style>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
</div>
</body>
</html>
The overlay opens and closes just fine. However, if the overlay is opened and the user visits another page on the website, and returns to the original page where the overlay was, the overlay still remains open...Is there a way to make the overlay close upon refreshing the page and upon returning to the page having visited another one?
Any help is much appreciated :)
James
Try This using display none to the div which you want to hide while refreshing
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getTarget(event){
target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
return target;
}
document.onclick = function(event){
var target = getTarget(event);
if(target.id == ""){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
}
}
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
button.style.color="#ff0000";
}
}
</script>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
}
</style>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay" style="display: none"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
</div>
</body>
</html>
The easiest way I can think of is using Localstorage to do the task. You can read more about localstorage Here
In your case you will have to save timestamp in the variable. And then you can have an if statement on your homepage which checks the time which has elapsed since last time the page was refreshed. Let's say if it is more than 10 minutes or maybe 30 minutes you can show the overlay again. The reason I am saying you will need timestamp is that you will have to unset the variable if the user visits again after some time and is not returning from with-in the website. There is no timeout function in localstorage so you will have to use a tweak like timestamp.
Another way is to save a value in $_SESSION and see if it is set to certain value. If it is then it means it is a returning user else its a new user. But I am not sure if your page is php or not therefore I have mentioned localstorage method first.
If you need any further assistance please do let me know.
In my opionion there are at least two solutions.
using coockies
using global function
Second solution:
create your "popup.js" and call it in html, of course. Your js will be:
var Popup = (function () {
var isVisible;
return {
init: function () {
isVisible = false;
},
show: function() {
....
},
hide: function() {
....
},
isVisible: function() {
return isVisible;
}
};
}());
Related
Sorry if this had already been asked but I have two onclick divs and what I want to do is for example: I open the first one but then when I open the second one I want the first one to close automatically and the other way around.
Here's the HTML:
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myFunction2() {
var x = document.getElementById("myDIV2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none"; }
}
#myDIV {
position: relative;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
top: 150px;
}
.button1 {
position: relative;
top: 120px
}
#myDIV2 {
position: relative;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
}
.button2 {
position: relative;
}
<button class="button1" onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<button class="button2" onclick="myFunction2()">Try it2</button>
<div id="myDIV2">
This is my second DIV element.
</div>
DEMO: https://codepen.io/pen/NWrZBRX
You need to get both divs in both functions then. Then hide whichever one you want and show the other one. You also only need one function because it is just reversing whatever you already did. I also made it so the button is always on top of the div by using z-index:1; because it was being hidden some of the time below the divs.
(this can be done in your existing code by doing the following)
#myDIV {
position: relative;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
top: 150px;
}
.button1 {
position: relative;
top: 120px
z-index:1;
}
#myDIV2 {
position: relative;
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
}
.button2 {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="legStyle.css">
</head>
<body>
<button class="button1" onclick="myFunction()">Try it</button>
<div id="myDIV">
This is my DIV element.
</div>
<div id="myDIV2">
This is my second DIV element.
</div>
<script>
function myFunction() {
const x = document.getElementById("myDIV");
const y = document.getElementById("myDIV2");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none"
} else {
x.style.display = "none";
y.style.display = "block"
}
}
</script>
</body>
</html>
I know that Click here opens the link in a new tab (default behaviour in Chrome and Firefox) and that
<a href="http://www.example.com" onclick="window.open('http://www.example.com',
'newwindow', 'width=700,height=500'); return false;">Click here</a>
opens it in a new window.
But how to open an external page in a modal popup (centered on screen, rest of the original page "darkened")?
Is there a nice way to do it?
I tried the following code, but it doesn't seem to be working (click: popup opens, reclick, it closes, reclick on link: it doesn't open anymore. Also the iframe doesn't load).
document.getElementById("a").onclick = function(e) {
e.preventDefault();
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
setTimeout(function() {
document.getElementById('page').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById('page').className = "";
}
}, 100);
return false;
}
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
<div id="page">
Click me<br>
Hello<br>
Hello<br>
<div id="popup">
External website:
<iframe id="iframe"></iframe>
</div>
</div>
Based on Sphinx's great answer, here is what I'll use to create a modal popup displaying an external website in a iframe with a dark background for the rest of the page when the popup is open:
document.getElementById("link").onclick = function(e) {
e.preventDefault();
document.getElementById("popupdarkbg").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById('popupiframe').src = "http://example.com";
document.getElementById('popupdarkbg').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
return false;
}
window.onkeydown = function(e) {
if (e.keyCode == 27) {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
e.preventDefault();
return;
}
}
#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }
<div id="main">
Click me<br>
</div>
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>
The root cause is page.onclick is registered after popup window is open at the first time, then the following 'open popup' will trigger a.onclick and page.onclick in a row, that caused the popup window is open then is closed directly.
The simple solution is add one parameter to control the state of the popup. if the popup is closed, do nothing in page.onclick.
To remove setTimeout, there are two solution:
added another parameter to control the state of the popup initialization.
Don't make <div id="page"> is the parent of <a id="popup">, so <a id="popup"> will not be triggered when clicked <div id="page">.
Below are two solutions:
I prefer the Solution2, it is better decoupling than
Solution1, every component foucs on its own jobs.
Solution 1: added isInit as the indicator if the popup already finished initialization.
PS: In the comment, you mentioned close the popup only when click on <div id="page">, to implement this in solution1, I think you have to bind the event =mouseout, mouseenter to judge where the mouse clicks.
document.getElementById("a").onclick = function(e) {
e.preventDefault();
var isInit = true; // indicates if the popup already been initialized.
var isClosed = false; // indicates the state of the popup
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
document.getElementById('page').onclick = function() {
if(isInit){isInit=false;return;}
if(isClosed){return;} //if the popup is closed, do nothing.
document.getElementById("popup").style.display = "none";
document.getElementById('page').className = "";
isClosed=true;
}
return false;
}
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
<div id="page">
Click me<br>
Hello<br>
Hello<br>
<div id="popup">
External website:
<iframe id="iframe"></iframe>
</div>
</div>
Solution 2: make <div id="page"> and <a id="popup"> is cousin not parent relations.
document.getElementById("popup").showpopup = function() {
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
document.getElementById("page").style.display = "block";
}
document.getElementById("a").onclick = function(e) {
e.preventDefault();
document.getElementById("popup").showpopup();
}
document.getElementById('page').onclick = function() {
if(document.getElementById("popup").style.display == "block") {
document.getElementById("popup").style.display = "none";
document.getElementById("page").style.display = "none";
document.getElementById('page').className = "";
}
};
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
#page {
display: none;
width: 100%; height: 100%;
top:0px; left:0px;
z-index: 9;
padding: 2em;
position: absolute;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
Click me<br>
Hello<br>
Hello<br>
<div id="page">
</div>
<div id="popup">
External website:
<iframe id="iframe"></iframe>
</div>
document.getElementById("a").onclick = function(e) {
e.preventDefault();
var isInit = true; // indicates if the popup already been initialized.
var isClosed = false; // indicates the state of the popup
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
document.getElementById('page').onclick = function() {
if(isInit){isInit=false;return;}
if(isClosed){return;} //if the popup is closed, do nothing.
document.getElementById("popup").style.display = "none";
document.getElementById('page').className = "";
isClosed=true;
}
return false;
}
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
<div id="page">
Click me<br>
Hello<br>
Hello<br>
<div id="popup">
External website:
<iframe id="iframe"> height=“200”</iframe>
</div>
</div>
I have three divs for a Twitter post, a Facebook post and a LinkedIn post and these make up a carousel.
These are then inside of another div called #social-media-feeds.
I am wondering if it is possible to change the background colour of #social-media-feeds based on which div in the carousel is showing.
So when the twitter div shows I would like the background colour of #social-media-feeds to be #00aced, when the facebook div shows I would like the background colour to be #3b5998, and when the linkedin div shows I would like the background colour to be #007bb5.
If this is possible I'd really appreciate a hand. Thanks!
This is terribly formed code, but it works. I can't pretend to know what your code looks like so I hope this helps:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
height: 100%;
padding: 0px;
}
#social-media-feeds {
display: inline-block;
height: 100%;
width: 100%;
}
.post {
display: none;
}
#leftButton {
position: absolute;
top: 50%;
left: 0%;
height: 30px;
width: 60px;
text-align: right;
background-color: gray;
cursor: pointer;
}
#rightButton {
position: absolute;
top: 50%;
right: 0%;
height: 30px;
width: 60px;
background-color: gray;
cursor: pointer;
}
</style>
</head>
<body>
<div id="leftButton"><</div>
<div id="rightButton">></div>
<div id="social-media-feeds">
<div id="facebook" class="post">Facebook</div>
<div id="twitter" class="post">Twitter</div>
<div id="linkedIn" class="post">LinkedIn</div>
</div>
<script>
var socialMediaFeedsDiv = document.getElementById('social-media-feeds');
var backgroundColors = ["#3b5998", "#00aced", "#007bb5"];
var posts = document.getElementsByClassName('post');
var index = 0;
posts[index].style.display = 'inline-block';
socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];
var leftButton = document.getElementById('leftButton');
leftButton.addEventListener('click', function() {
posts[index].style.display = 'none';
index--;
if (index < 0) {
index = posts.length - 1;
}
posts[index].style.display = 'inline-block';
socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];
});
var rightButton = document.getElementById('rightButton');
rightButton.addEventListener('click', function() {
posts[index].style.display = 'none';
index++;
if (index > (posts.length - 1)) {
index = 0;
}
posts[index].style.display = 'inline-block';
socialMediaFeedsDiv.style.backgroundColor = backgroundColors[index];
});
</script>
</body>
</html>
I am trying to build a simple toggle button using JavaScript, not jQuery, to translate the element back and forth. I did my best a newbie (for JavaScript) but cannot figure it out. The main idea is that the side menu should show from the side when clicked on the button and should hide back to the same place when it is clicked again.
Please help.
function toggleNavBar() {
var nav = document.getElementById("sideNav"),
button = document.getElementById("checkButton"),
check = "hidden";
if (check == "hidden") {
nav.style.transform = "translate(0px)";
check = "shown";
} else if (check == "shown") {
nav.style.transform = "translate(-290px)";
check = "hidden";
}
}
body {
margin: 0 auto;
padding: 0;
}
#sideNav {
background-color: #96e6b3;
display: inline-block;
width: 20%;
position: fixed;
height: 100vh;
z-index: 2;
overflow: hidden;
-webkit-transform: translate(-290px);
/* Safari */
transform: translate(-290px);
*/
}
nav ul {
list-style-type: none;
font-family: Junction, "Times New Roman", sans-serif;
font-size: 1.9em;
margin-top: 24%;
}
nav ul li {
margin-top: 1%;
padding-top: 4.7%;
margin-left: -50px;
text-align: center;
}
nav a {
text-decoration: none;
color: #000000;
}
nav li:hover {
background-color: #34cf6d;
}
<!doctype html>
<html lang="en">
<head>
<title>Check</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="font.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" href="styleCheck.css">
<style>
<!--very specific small CSS for this document--> #toggler {
text-decoration: underline;
}
#toggler:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div class="o-content">
<div class="o-container">
<div class="o-grid">
<button id="checkButton" class="c-hamburger c-hamburger--htx" onclick="toggleNavBar()">
<span>toggle menu</span>
</button>
</div>
</div>
</div>
</div>
<div id="sideNav">
<nav>
<ul>
<li>Home
</li>
<li>Items
</li>
<li>XML
</li>
</ul>
</nav>
</div>
<!--side Nav-->
</body>
</html>
You should only declare your check variable once:
var check = "hidden";
function toggleNavBar() {
var nav = document.getElementById("sideNav"),
button = document.getElementById("checkButton");
if (check == "hidden") {
nav.style.transform = "translate(0px)";
check = "shown";
} else if (check == "shown") {
nav.style.transform = "translate(-290px)";
check = "hidden";
}
}
A few optimizations (assuming this is done after document is ready):
var toggleNavBar = (function() {
var check = "hidden";
var nav = document.getElementById("sideNav");
var button = document.getElementById("checkButton");
return function() {
if (check == "hidden") {
nav.style.transform = "translate(0px)";
check = "shown";
} else {
nav.style.transform = "translate(-290px)";
check = "hidden";
}
}
})();
courtesy N0ME on this site, I have been able to get the HTML, CSS, and Javascript below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getTarget(event){
target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
return target;
}
document.onclick = function(event){
var target = getTarget(event);
if(target.id == ""){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
}
}
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
button.style.color="#ff0000";
}
}
</script>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
}
</style>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
</div>
</body>
</html>
When I click the buttons, the overlay appears and disappears in one quick flash. I would like it to take for example 500ms so that a fade in/fade out effect is created.
I've tried adding the following script without any luck:
<script>
$(document).ready(function(){
$(".x").click(function(){
$("p").toggleOverlay(500)
});
$(".btn").click(function(){
$("p").toggleOverlay(500);
});
});
</script>
Could anyone please guide me as to what I'm doing wrong and how I could solve the issue?
Thank you so much in advance.
James
Try giving the transition-duration style to your button like this:
button .x{transition-duration:0.5s}
That should do the trick.
Try adding delay(500) before toggleoverlay()
<script>
$(document).ready(function(){
$(".x").click(function(){
$("p").delay(500).toggleOverlay();
});
$(".btn").click(function(){
$("p").delay(500).toggleOverlay();
});
});
</script>
If you are in fact using jquery, this is what you want:
function toggleOverlay(){
$('#overlay, #specialBox').fadeToggle(500);
}
get rid of the extra jquery you added, and just replace your toggleOverlay function with the above.
http://api.jquery.com/fadetoggle/