I want my popup to show only once per visit. What am I doing wrong? It shows every time I refresh the browser.
This is what I've got.
<body onload="myFunction()">
<!-- Modal -->
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h3>DISCLAIMER</h3>
<input type="submit" name="submit" value="I AGREE" onClick="PopUp('hide')" id="button" />
</center>
</div>
</div>
<script>
var cookie = localStorage.getItem('myPopup');
if (!cookie) {
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function() {
setTimeout(function() {
PopUp('show');
}, 1000);
}
localStorage.setItem('myPopup', 'true');
}
</script>
</body>
Move the If(!cookie) inside window.onload function
<body >
<!-- Modal -->
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h3>DISCLAIMER</h3>
<input type="submit" name="submit" value="I AGREE" onClick="PopUp('hide')" id="button" />
</center>
</div>
</div>
<script>
var cookie = localStorage.getItem('myPopup');
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
if(!cookie){
setTimeout(function() {
PopUp('show');
}, 1000); }
}
localStorage.setItem('myPopup','true');
</script>
</body>
Related
The images that appear when HTML opens is this:
The images that appear when script refreshIt() every 0.5 seconds activated is this:
But unfortunately the HTML keeps showing the first image, demonstrating that the script is not being activated.
What do I need to do to resolve this issue?
Full Script to test:
<html>
<head>
<style>
{
box-sizing: border-box;
}
.column {
float: left;
}
.left {
width: 360;
}
.middle {
width: 360;
}
.right {
width: 360;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<script language="JavaScript">
function refreshIt() {
if (!document.images) return;
document.images['Chart 1'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185109994&selectionId=1485567";
document.images['Chart 2'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185191931&selectionId=1222344";
document.images['Chart 3'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185192198&selectionId=47972";
setTimeout(refreshIt,500); // refresh every 0.5 secs
}
</script>
</head>
<body>
<div class="row">
<div class="column left">
<form action="" method="post" id="url-setter">
<input type="text" name="url" id="url" />
<button type="submit" name="submit">Radar 1</button>
</form>
<iframe id="the-frame" width="347" height="282" src=""></iframe>
<script type="text/javascript">
(function () {
"use strict";
var url_setter = document.getElementById('url-setter'), url = document.getElementById('url'), the_iframe = document.getElementById('the-frame');
url_setter.onsubmit = function (event) {
event.preventDefault();
the_iframe.src = url.value;
};
}());
</script>
<form method="post" target="imgChart1">
<input type="submit" value="Chart 1" />
<input type="text" id="ChartBar1" name="ChartBar1" style="width: 286px;"><br>
</form>
<img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 1">
</div>
<div class="column middle">
<form action="" method="post" id="url-setter2">
<input type="text" name="url2" id="url2" />
<button type="submit" name="submit">Radar 2</button>
</form>
<iframe id="the-frame2" width="347" height="282" src=""></iframe>
<script type="text/javascript">
(function () {
"use strict";
var url_setter = document.getElementById('url-setter2'), url = document.getElementById('url2'), the_iframe = document.getElementById('the-frame2');
url_setter.onsubmit = function (event) {
event.preventDefault();
the_iframe.src = url2.value;
};
}());
</script>
<form method="post" target="imgChart2">
<input type="submit" value="Chart 2" />
<input type="text" id="ChartBar2" name="ChartBar2" style="width: 286px;"><br>
</form>
<img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 2">
</div>
<div class="column right">
<form action="" method="post" id="url-setter3">
<input type="text" name="url3" id="url3" />
<button type="submit" name="submit">Radar 3</button>
</form>
<iframe id="the-frame3" width="347" height="282" src=""></iframe>
<script type="text/javascript">
(function () {
"use strict";
var url_setter = document.getElementById('url-setter3'), url = document.getElementById('url3'), the_iframe = document.getElementById('the-frame3');
url_setter.onsubmit = function (event) {
event.preventDefault();
the_iframe.src = url3.value;
};
}());
</script>
<form method="post" target="imgChart3">
<input type="submit" value="Chart 3" />
<input type="text" id="ChartBar3" name="ChartBar3" style="width: 286px;"><br>
</form>
<img src="https://www.futebolnaveia.com.br/wp-content/uploads/2020/06/betfair-app.png" name="Chart 3">
</div>
</div>
</body>
</html>
What you're looking for is setInterval() which will run continuously until it is canceled with clearInterval(). Rather than body onload, use the window.addEventListener method. It helps separate logic from presentation and is best practices.
let intervalID
window.addEventListener('DOMContentLoaded', () => {
intervalID = setInterval(refreshIt, 500); // refresh every 0.5 secs
})
function refreshIt() {
if (!document.images) return;
// if want to stop the interval from repeating
// if (!document.images) clearInterval(intervalID)
document.images['Chart 1'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185109994&selectionId=1485567";
document.images['Chart 2'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185191931&selectionId=1222344";
document.images['Chart 3'].src = "https://xtsd.betfair.com/LoadRunnerInfoChartAction/?marketId=185192198&selectionId=47972";
}
I have this simple code, and i can't understand why it is not working.
<div>
<input type="button" class="button" value="Add A Site" onclick="Div();" />
</div>
<script type="text/javascript">
function Div() {
var E = document.getElementsByClassName('Form');
if (E.style.display == 'none') {
E.style.display = 'block';
this.value = "Close";
} else {
S.style.display = 'none';
this.value = "Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
user Form which you are trying to access is inside div.form so you have to access that like below....I tested this, its working. the content in Form is displaying
<input type="button" class="button" value="Add A Site" onclick="Div();" />
<script type="text/javascript">
function Div() {
var E= document.getElementsByClassName('Form')[0];
if (E.style.display=='none'){
E.style.display='block';
this.value="Close";
}else {
S.style.display='none';
this.value="Add A Site";
}
}
</script>
<div class="Form" style="display:none;">
<h1>Example</h1></div>
<script>
function Div() {
var E = document.getElementsByClassName('Form')[0];
if (E.style.display==='none') {
E.style.display='block';
this.value=Close;
} else {
E.style.display = 'none';
this.value = 'Add A Site';
}
}
</script>
<input type="button" class="button" value="Add A Site" onclick="Div()" />
<div class="Form" style="display:none;">
<h1>Example</h1>
</div>
This should work for you.
Basically I have a form that needs to be submitted in order that the next section of the site appears, in this case it's when a video plays through and ends, the values are submitted via POST so i can't just have a hardcoded URL as i could if i used GET ie. thecycle.ie/test02.php?click='SCENE 09'. The EventListener works but i just can't get it to submit the form.
function listen(evnt, elem, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt, func, false);
else if (elem.attachEvent)
{
var r = elem.attachEvent("on" + evnt, func);
return r;
}
else window.alert("I'm sorry, I'm afraid I can't do that.");
}
listen("ended", document.getElementById("bgvid"), changePage);
function changePage() {
document.getElementById('formID').submit(); // SUBMIT FORM
}
Below is the full page
<form name="formID" id="formID" method="post" action="test02.php">
<input type="hidden" id="bgstate" name="bgstate" value="1">
<input type="hidden" id="vostate" name="vostate" value="">
<input type="hidden" id="choice" name="choice" value="0">
<script type="text/javascript">
$(document).ready(function() {
var bgAudio = document.getElementById("background_audio");
if(bgAudio) {
bgAudio.volume = 1.0;
bgAudio.play();
}
});
</script>
<script type="text/javascript">
function PlayBG()
{
document.getElementById("bgstate").value = "0";
var bgAudio = document.getElementById("background_audio");
bgAudio.volume = 1.0;
bgAudio.play();
}
function StopBG()
{
document.getElementById("bgstate").value = "1";
var bgAudio = document.getElementById("background_audio");
bgAudio.volume = 0.0;
bgAudio.pause();
bgAudio.currentTime = 0;
}
</script>
<div id="timeline">
<!-- top point of ogham -->
<img src="img/timeline/timeline_start.png" width="31" height="31" id="timeline_01"><br>
<input name="click" id="timelineButton" type="image" value="SCENE 01" src="img/timeline/timeline_A.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_A_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_A.png'">
<input name="click" id="timelineButton" type="image" value="SCENE 02" src="img/timeline/timeline_C.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_C_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_C.png'">
<input name="click" id="timelineButton" type="image" value="SCENE 03" src="img/timeline/timeline_D_on.png" alt="navigation" onmouseover="javascript:this.src='img/timeline/timeline_D_on.png'" onmouseout="javascript:this.src='img/timeline/timeline_D_on.png'">
<!-- bottom point of ogham -->
<img src="img/timeline/timeline_end.png" alt="timeline"><br>
</div>
<div id="banner">
<img src="img/smalllogo.png" alt="the cycle">
<div class="menu">
<ul>
<li>
Home
</li>
<li>
Wiki
</li>
<li>
About
</li>
</ul>
</div>
<div id="music">
<img src="img/music.png" alt="music">
<input type="image" src="img/play.png" alt="play" onclick="PlayBG(); return false;" value="Play" onmouseover="javascript:this.src='img/play_on.png'" onmouseout="javascript:this.src='img/play.png'">
<input type="image" src="img/stop.png" alt="stop" onclick="StopBG(); return false;" value="Stop" onmouseover="javascript:this.src='img/stop_on.png'" onmouseout="javascript:this.src='img/stop.png'">
</div>
</div>
<script type="text/javascript">
function PlayVO18()
{
document.getElementById("vostate").value = "0";
var voAudio = document.getElementById("voiceover_audio18");
var bgAudio = document.getElementById("background_audio");
var oldBGVolume = bgAudio.volume;
voAudio.volume = 1.0;
voAudio.play();
}
function StopVO18()
{
document.getElementById("vostate").value = "1";
var voAudio = document.getElementById("voiceover_audio18");
voAudio.volume = 0.0;
voAudio.pause();
voAudio.currentTime = 0;
}
</script>
<audio id="voiceover_audio18" class="voiceover_audio" src="audio/vo_balor_07.mp3"></audio>
<audio id="background_audio" class="background_audio" src="audio/myth_cycle_01.mp3" loop=""></audio>
<video autoplay="" poster="img/balorlugh_01.jpg" id="bgvid">
<source src="vids/balorlugh_01.webm" type="video/webm">
<source src="vids/balorlugh_01.mp4" type="video/mp4">
</video>
<div id="decision">
<div class="container">
<div class="toggle18">
<h2>Balor<input type="image" src="img/speech.png" alt="play" onclick="PlayVO18(); return false;" value="Play" onmouseover="javascript:this.src='img/speech_on.png'" onmouseout="javascript:this.src='img/speech.png'"></h2>
<p>You have made a grave mistake, my friend. We will have your hand in the end, even if it takes a few lashings to strengthen your resolve... what is that?</p>
<br>
<div class="toggle">
<script type="text/javascript">
function listen(evnt, elem, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt, func, false);
else if (elem.attachEvent)
{
var r = elem.attachEvent("on" + evnt, func);
return r;
}
else window.alert("I'm sorry, I'm afraid I can't do that.");
}
listen("ended", document.getElementById("bgvid"), changePage);
function changePage()
{
document.getElementById('formID').submit(); // SUBMIT FORM
}
</script>
<button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button>
<input type="hidden" id="submit" name="bgstate" value="SCENE 09">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var menu_elements = document.querySelectorAll('.toggle'),
menu_length = menu_elements.length;
for (var i = 0; i < menu_length; i++)
{
menu_elements[i].addEventListener('click', function (e)
{
var target = document.querySelector('.container>.' + e.target.classList[0]); // clicked element
Array.prototype.filter.call(target.parentNode.children, function (siblings)
{
siblings.style.display = 'none'; // hide sibling elements
});
target.style.display = 'block'; // show clicked element
});
}
function MakeChoice08()
{
document.getElementById("choice").value = "08";
}
function MakeChoice04()
{
document.getElementById("choice").value = "04";
}
</script>
</form>
You can`t use "submit" in NAME or ID attribute along with the submit() method, as it will be confused between what it considers an object referenced by the name or id and the method.
Just change <button type="submit" name="click" id="submit" class="buttons" value="SCENE 09">Skip</button> to
<button type="submit" name="click" id="somethingelse" class="buttons" value="SCENE 09">Skip</button>
and <input type="hidden" id="submit" name="bgstate" value="SCENE 09"> to
<input type="hidden" id="somethingelse2" name="bgstate" value="SCENE 09">
I want to create a simple html-javascript page with a text field and a submit button. Submit button has to be enabled every 5 minutes, then you can wrote something in the field and click on submit.clicking on submit, it show how much time is elapsed from activation and submit. Thanks
<html>
<body>
<div id="main">
<!-- Form -->
<form id="form" action="/" method="post">
<label>
<span>Website:</span>
<input placeholder="http://" type="url" tabindex="4" required>
</label>
</div>
<div>
<button name="submit" type="submit" id="submit">invia</button>
<script type="text/javascript">
document.getElementById('submit').disabled = true;
setTimeout(function(){
document.getElementById('submit').disabled = false;
}, 2000);
</script>
<script type="text/javascript">
var t0 = performance.now();
var i=0;
do
{
i++;
} while document.getElementById('submit').click();
var t1 = performance.now();
var time= ( (t1 - t0) + " milliseconds.");
document.getElementById('time').innerHTML = time;
</script>
</div>
<div id="time"></div>
</form>
<!-- /Form -->
</div>
</body>
</html>
Have a look at WindowTimers.setInterval() where a function/callback is invoked at every nth time defined.
In your case, button attribute enabled/disabled.
Hope this helps.
problem solved.
<html>
<body>
<div id="main">
<!-- Form -->
<form id="form" action="/" method="post">
<div>
<label>
<span>Website:</span>
<input placeholder="http://" type="url" required>
</label>
</div>
<div>
<input type="button" value="Invia" id="Invia" onclick="stopTimer()" />
<script type="text/javascript">
document.getElementById('Invia').disabled = true;
setTimeout(function(){
document.getElementById('Invia').disabled = false;
document.getElementById('tempVar').value = Date.now();
}, 5000);
</script>
<script>
var greeting;
function timeGreeting()
{
greeting = performance.now();
}
timeGreeting();
function stopTimer()
{
var time = performance.now();
alert((time - greeting) + "ms");
}
</script>
<input type="button" value="Ricarica Pagina" onClick="document.location.reload(true)">
</div>
</form>
<!-- /Form -->
</div>
</body>
</html>
I want when i clicked on the Question button on the first pic, the form in the second pic to appear and the button to be hidden and when i click on the (X) on the top left of the form on the second pic to close the form and the Question button to appear again. How can i achieve that using Javascript or Jquery or any possible method.
<script type="text/javascript">
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
});
</script>
<div class="container">
<div id="myDiv">
<button type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br>
<span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br>
<span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer"><br>
</form>
</div>
<input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton">
</div>
You almost got it, just need to make a few changes:
Add an Id for the xButton
<button type="button" class="close" data-dismiss="myDiv" aria-label="Close" id="xButton"><span aria-hidden="true">×</span>
</button>
Remove onclick in the html Question button
<input id="info" type="button" value="QUESTION?" class="switchbuton">
Amd add a hanlder for the X button
$(function(){
var button = document.getElementById("info");
var xButton = document.getElementById("xButton");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
//hidding Question button
button.style.visibility = "hidden";
}
function hide() {
myDiv.style.visibility = "hidden";
//showing Question button
button.style.visibility = "visible";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
//handler for the X button
xButton.addEventListener("click", hide, false);
});
Like Carorus said, you're almost there! Their example uses your code and it's probably best that you check that out and understand it.
If you are looking for a jquery solution I threw this together very quickly, I hope it's what you are looking for.
http://codepen.io/anon/pen/pJJKjZ?editors=101
$("#info").click(function(){
show()
});
$(".close").click(function(){
hide();
});
var show = function(){
$("#myDiv").css('visibility', 'visible');
$("#info").css('visibility','hidden');
}
var hide = function(){
$("#myDiv").css('visibility', 'hidden');
$("#info").css('visibility','visible');
}
Your already using JQuery, so you can handle both buttons with 1 line of code...
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
button.style.visibility = "hidden";
}
function hide() {
myDiv.style.visibility = "hidden";
button.style.visibility = "visible";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
$('.button').click(function() { toggle(); });
});
And update your HTML to include a secondary class on your buttons, and remove the onClick attribute...
<div class="container">
<div id="myDiv">
<button type="button" class="close button" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span><input type="text" name="extensionField_Title" id="box1"><br>
<span class="box2">Name</span><input type="text" name="extensionField_Name" id="box2"><br>
<span class="box3">Telephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer"><br>
</form>
</div>
<input id="info" type="button" value="QUESTION?" class="switchbuton button">
</div>
In jQuery you can do it like below. You could even shorten down the code, using classes to show/hide a bigger scope, but this is fine.
function showForm() {
$('#myform').show();
$('#myClose').show();
$("#info").hide();
}
function hideForm() {
$('#myform').hide();
$('#myClose').hide();
$("#info").show();
}
$(function() {
$('#info').click(function() {
showForm();
});
$('#myClose').click(function() {
hideForm();
});
hideForm();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div id="myDiv">
<button id="myClose" type="button" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p id="q">QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" id="myform" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span>
<input type="text" name="extensionField_Title" id="box1">
<br>
<span class="box2">Name</span>
<input type="text" name="extensionField_Name" id="box2">
<br>
<span class="box3">Теlephone</span>
<input type="text" name="extensionField_PhoneNumber" id="box3">
<br>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo">
<br>
<option value="Chat_Csq23"></option>
</select>
<br>
<input type="submit" value="SUBMIT" id="boxbuton">
<input type="hidden" name="author" value="Customer">
<br>
</form>
</div>
<input id="info" type="button" value="QUESTION?" class="switchbuton">
</div>
Html Code:
<div class="container">
<div id="myDiv">
<button type="button" id="hide" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<p>QUESTION</p>
<form action="https://chat.rbb.bg/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm("You are submitting information to an external page.\nAre you sure?");">
<span class="box1">Theme</span> <input type="text" name="extensionField_Title" id="box1"><br/><br/>
<span class="box2">Name</span> <input type="text" name="extensionField_Name" id="box2"><br/><br/>
<span class="box3">Теlephone</span><input type="text" name="extensionField_PhoneNumber" id="box3"><br/><br/>
<span class="boxinfo">About</span>
<select name="extensionField_ccxqueuetag" id="boxinfo"><br>
<option value="Chat_Csq23"></option>
</select><br/><br/>
<input type="submit" value="SUBMIT" id="boxbuton"><br/>
<input type="hidden" name="author" value="Customer"><br/>
</form>
</div>
<input id="info" type="button" onClick = "this.style.visibility= 'hidden';" value="QUESTION?" class="switchbuton">
</div>
js Code
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
$("#hide").click(function(){
myDiv.style.visibility = "hidden";
button.style.visibility = "visible";
});
hide();
button.addEventListener("click", toggle, false);
});