I don't want a button I want a timer instead that counts down 5 seconds then the javascript function executes on page load
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/app.min.css" />
<title>
Test
</title>
</head>
<body>
<!-- I don't want a button I want a timer instead that counts down 5 seconds then the javascript function executes -->
<button onclick="myFunction()">Click Me</button>
<div id="myDIV", class="myDIV">
Initializing Hide
</div>
<div id="myDIVS", class="myDIVS">
Hide Successful
</div>
<script type="text/javascript">
function myFunction(){
var target = document.getElementById("myDIV");
var show = document.getElementById("myDIVS");
if(target.style.display = "none"){
// target.style.display = "block";
show.style.display = "block";
}else{
show.style.display = "block";
}
}
</script>
</body>
<style>
.myDIV{
background-color: aqua;
margin: 30px;
padding: 50px 30px;
/* display: none; */
}
.myDIVS{
background-color: green;
margin: 30px;
padding: 50px 30px;
display: none;
}
</style>```
You need to use setTimeout(). Just put the onClick code inside this, also I have corrected the = vs. == mistake.
function myFunction() {
var target = document.getElementById("myDIV");
var show = document.getElementById("myDIVS");
if (target.style.display == "none") {
target.style.display = "block";
show.style.display = "none";
} else {
target.style.display = "none";
show.style.display = "block";
}
}
setTimeout(myFunction, 5000);
.myDIV {
background-color: aqua;
margin: 30px;
padding: 50px 30px;
/* display: none; */
}
.myDIVS {
background-color: green;
margin: 30px;
padding: 50px 30px;
display: none;
}
<div id="myDIV" class="myDIV">
Initializing Hide
</div>
<div id="myDIVS" class="myDIVS">
Hide Successful
</div>
Wait for five seconds and see?
Related
Im trying to make popup with adsence in middle of overlay with countdown of 20s. If user clicks on ad and getting redirected to adsence site page saves user choise to hide ad in future for xxx. It does work with regular links but after putting adsence script it doesnt dismiss overlay or save any of userschoise.
<!DOCTYPE html>
<html>
<head>
<title>Popup Overlay Example</title>
<style>
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
#block {
width: 300px;
height: 250px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
cursor: pointer;
}
#countdown {
color: white;
font-size: 48px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="overlay">
<div id="block">
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx" crossorigin="anonymous"></script>
<!-- 300x250 blocks -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px;z-index: 99999999;" data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div id="countdown">
20
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var now = Date.now();
var userChoiceTime = localStorage.getItem("userChoiceTime");
if (userChoiceTime && (now - userChoiceTime < 50000)) {
document.getElementById("overlay").style.display = "none";
} else {
var overlay = document.getElementById("overlay");
var block = document.getElementById("block");
var countdown = 20;
var countdownTimer;
block.addEventListener("click", function() {
closeOverlay();
});
function closeOverlay() {
overlay.style.display = "none";
localStorage.setItem("userChoiceTime", now);
}
function startCountdown() {
var countdownElement = document.getElementById("countdown");
countdownElement.innerHTML = countdown;
countdownTimer = setInterval(function() {
countdown--;
countdownElement.innerHTML = countdown;
if (countdown === 0) {
closeOverlay();
}
}, 1000);
}
startCountdown();
}
});
</script>
</body>
</html>
Can anyone help me solving this one?
I have this simple Modal that's shows up upon clicking button and a Page inside it, depends of which button is click,
uno is for page1, dos is for page2 tres is for page3.
the whole box is a button and i have h3 inside it(It's for the title of that button), but when i click the green area which is H3 my pages does not shos up.
I know the problem is that when it clicks h3 it targets the h3 and h3 has ni ID in it.
Can someone help me to make my h3 act as div when i click it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.myBtn {
width: 100px;
height: 100px;
background-color: aqua;
margin: 10px;
text-align: center;
}
.myBtn h3 {
background-color:green;
line-height: 2;
cursor: pointer;
}
.myBtn:hover {
background-color: aquamarine;;
}
.btns {
float: left;
}
.modal {
display: none;
background-color: aqua;
float: right;
width: 400px;
height: 600px;
}
.page1 {
position: absolute;
display: none;
background-color: burlywood;
margin: 20px;
width: 300px;
height: 150px;
}
.p1 {
border: 2px solid red;
}
.p2 {
border: 2px solid blue;
}
.p3 {
border: 2px solid green;
}
</style>
</head>
<body>
<p>Click the button to Show Modal.</p>
<div class="btns">
<div class="myBtn" id="uno">
<h3>uno</h3>
</div>
<div class="myBtn " id="dos">
<h3>dos</h3>
</div>
<div class="myBtn "id="tres">
<h3>tres</h3></div>
</div>
<div class="modal">
Modal
<div class="page1 p1">Page1</div>
<div class="page1 p2">Page2</div>
<div class="page1 p3">Page3</div>
</div>
<!--JS-->
<script>
var btn = document.querySelectorAll('.myBtn');
var getModal = document.querySelector('.modal');
var getPages = document.querySelectorAll('.page1');
//console.log(getPages);
for(let i=0; i<btn.length;i++ ){
btn[i].addEventListener('click', () => {
hideModal();
getId();
displayPage()});
}
function hideModal(){
getModal.style.display = "block";
}
function getId(){
//console.log(event.target.id);
}
function hideall(){
for(let i=0; i<getPages.length;i++ ){
getPages[i].style.display = 'none';
}
}
function displayPage(){
hideall();
var btnId = event.target.id;
console.log(btnId);
if(btnId == "uno"){
getPages[0].style.display = "block";
}else if(btnId == "dos"){
getPages[1].style.display = "block";
}else if(btnId == "tres"){
getPages[2].style.display = "block";
}
console.log(getPages[0]);
}
window.addEventListener('click', closeIfOutside);
function closeIfOutside(e) {
if(e.target == getModal)
{
getModal.style.display = 'none';
}
}
</script>
</body>
</html>
<html>
You can add pointer-events: none to your h3 elements so that any clicks will fall through to the containing parent div behind it, allowing you to get the correct id to show the correct page:
.myBtn h3 {
background-color: green;
line-height: 2;
cursor: pointer;
pointer-events: none;
}
See example below:
var btn = document.querySelectorAll('.myBtn');
var getModal = document.querySelector('.modal');
var getPages = document.querySelectorAll('.page1');
//console.log(getPages);
for (let i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', () => {
hideModal();
getId();
displayPage()
});
}
function hideModal() {
getModal.style.display = "block";
}
function getId() {
//console.log(event.target.id);
}
function hideall() {
for (let i = 0; i < getPages.length; i++) {
getPages[i].style.display = 'none';
}
}
function displayPage() {
hideall();
var btnId = event.target.id;
//console.log(btnId);
if (btnId == "uno") {
getPages[0].style.display = "block";
} else if (btnId == "dos") {
getPages[1].style.display = "block";
} else if (btnId == "tres") {
getPages[2].style.display = "block";
}
//console.log(getPages[0]);
}
window.addEventListener('click', closeIfOutside);
function closeIfOutside(e) {
if (e.target == getModal) {
getModal.style.display = 'none';
}
}
.myBtn {
width: 100px;
height: 100px;
background-color: aqua;
margin: 10px;
text-align: center;
}
.myBtn h3 {
background-color: green;
line-height: 2;
cursor: pointer;
pointer-events: none;
}
.myBtn:hover {
background-color: aquamarine;
;
}
.btns {
float: left;
}
.modal {
display: none;
background-color: aqua;
float: right;
width: 400px;
height: 600px;
}
.page1 {
position: absolute;
display: none;
background-color: burlywood;
margin: 20px;
width: 300px;
height: 150px;
}
.p1 {
border: 2px solid red;
}
.p2 {
border: 2px solid blue;
}
.p3 {
border: 2px solid green;
}
<p>Click the button to Show Modal.</p>
<div class="btns">
<div class="myBtn" id="uno">
<h3>uno</h3>
</div>
<div class="myBtn " id="dos">
<h3>dos</h3>
</div>
<div class="myBtn " id="tres">
<h3>tres</h3>
</div>
</div>
<div class="modal">
Modal
<div class="page1 p1">Page1</div>
<div class="page1 p2">Page2</div>
<div class="page1 p3">Page3</div>
</div>
All the stuff for the button seems right and it works in reverse of what I want currently. when I load the page the div: myDIV is there and the button toggles it disappearing and reappearing. How do I make myDIV none by default but still have the button function as a toggle
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
display:none;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>
<div id="myDIV">
This is my DIV element.
</div>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
I think the point is in here style.display = '' actually do
When you use style.display to get display status, it can not get display attribute defined in css
You need to get CSS Value first to toggle the display value with a button in JS. By default, it is advised not to give inline style on HTML.
function myFunction() {
const cont = document.querySelector("#chartContainer");
const styles = getComputedStyle(cont)
const displayStyle = styles.display;
if(displayStyle === "none"){
cont.style.display = "block";
}else {
cont.style.display = "none";
}
}
const BTN = document.querySelector("button");
BTN.addEventListener('click', myFunction);
.container {
background-color: #FFF;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
}
#chartContainer {
background-color: blue;
border-radius: 25px;
height: 200px;
width: 100%;
float: below;
display: none;
}
button {
width: 50px;
height: 50px;
}
<div class="container">
<button>toggle</button>
<div id="chartContainer">
</div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
</div>
I was wondering why the button doesn't change to the other function where the button will turn red when clicking it a second time.
My goal is to have one button that will change function depending on whether you pressed it once
<!DOCTYPE html>
<html>
<head>
<style>
#hello {
padding: 30px 60px;
background-color: #4db8ff;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
cursor: pointer;
color: white;
font-family: arial;
font-size: 20px;
}
</style>
</head>
<body>
<div id="hello" onclick="button()">START</div>
</body>
<script>
var x = true;
if(x == true) {
function button() {
x = false;
alert("once");
}
}
if(x == false) {
function button() {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}
</script>
</html>
You're conditionally creating, on page load, one of two possible function definitions. The second definition won't replace the first just because you've reassigned the boolean flag at some point.
Create a single function that checks the status of x internally:
function button() {
if(x) { // Comparing against true is redundant
x = false;
alert("once");
} else {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}
Your function button() is only being defined once. You can not define a function based on a condition, it will be defined as soon as its surrounding code is executed. Thus, you need to place your if statements inside the function.
<!DOCTYPE html>
<html>
<head>
<style>
#hello {
padding: 30px 60px;
background-color: #4db8ff;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
cursor: pointer;
color: white;
font-family: arial;
font-size: 20px;
}
</style>
</head>
<body>
<div id="hello" onclick="button()">START</div>
</body>
<script>
var x = true;
function button(){
if(x) {
x = false;
alert("once");
} else {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}
</script>
</html>
Currently the Overlay only closes upon clicking button 'X'. I would like it to close when clicking outside the overlay or if the page is refreshed.
The other thing I have tried at least 100 times and miserably failed, is to keep the hover effect (color #F00) intact when the overlay is active. I have tried
.active{
color:#F00;
}
but it seems that this only works for the split second the link is clicked on.
The Javascript is as following:
<script type="text/javascript">
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
</script>
The CSS is as following:
<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>
The HTML is as following:
<!-- 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 class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
Your help will be strongly appreciated!
Keep in mind this is a quick fix for your problem and wrote it to show you some basics in javascript
document.onclick = function(event) this triggers on any mouse click on the document.
var target = getTarget(event); this calls the function that will return what element was clicked
What the function does
Since all your elements have an id we are checking to see if the id is blank. If there is no idea it is than outside your elements so close the div
I added an id to your button so we could change the color from black to red
<!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>