When I set a cookie, it disappears after the page reloads. here is the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="mainx.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-
cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<style type="text/css">
body {margin: 0;}
.dropdown-notification {
height: 30px;
line-height: 40px;
position: relative;
top: -50px;
transition: top .8s;
text-align: center;
background: #FF9900;
color: white;
}
.dropdown-notification.active {
top: 0;
}
</style>
<div class="dropdown-notification text-center">
Cookies ensure the proper functioning of this site. By using it, you accept the use of cookies. <button class="close">Got it!</button>
</div>
<script type="text/javascript">
// Check if cookie
};
if ($.cookie("noti") !== "closed") {
$('.dropdown-notification').addClass('active');
}
// On button click close and add cookie (expires in 100 days)
$('.close').on('click', function(){
$.cookie("noti", "closed", { expires : 1000 });
document.cookie = "username=Player; expires=Thu, 18 Dec 3019 12:00:00 UTC";
$('.dropdown-notification').removeClass('active');
})
$('.delete-cookie').on('click', function(){
var R_U_sure = prompt("Are You Sure? if yes, type 'YES'. if not type 'NO'");
if (R_U_sure = "YES"){
$.cookie("noti", "open");
$('.dropdown-notification').addClass('active');
}
else{
console.log('cookie cleared.');
}
})
</script>
<button class="delete-cookie">Reset Progress?</button>
<DIV ID="main">
<div id="navigationbar"></div>
<div id="player">
<audio controls autoplay hidden>
<source src="FB1.mp3" type="audio/mpeg">
If you're reading this, audio isn't supported. :(
</audio>
</div>
<li>
<button class=""></button>
<button class=""></button>
<button class=""></button>
<button class=""></button>
</li>
</DIV>
</body>
</html>
The reset progress doesn't work. It is supposed to ask YES or NO. but nothing happens when I click it.
Is there somehow I can keep the cookie the next time someone visits the website?
Maybe PHP cookie?
The username cookie and the closed cookie disappear after the page reloads. I want the page to recognize the user and only show the cookie noti the first time. Other problem is the reset progress, mentioned on top.
Related
I have an error message that only shows if the audio file isn't found. If it is found then people see an ON button. The error message can be clicked on to reload the page. I want it to remain on the current active drop down menu page. Right now it makes you reselect an option from the drop down menu.
<!--I coult not get the page to display properly by putting the JS code here. That is why it's in the html field-->
<!--I coult not get the page to display properly by putting the css code here. That is why it's in the html field-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.hidden {
display: none;
}
</style>
<style>
.down {
font: bold 15px Arial;
background-color: red;
color: white;
padding: 3px 3px;
width: 100%;
text-decoration: none;
display: inline-block;
border-top: 5px solid red;
border-right: 5px solid red;
border-bottom: 5px solid red;
border-left: 5px solid red;
}
</style>
<style>
select {
border: 50px;
color: #000000;
background: #12f3fd;
text-align: center;
font-weight: bold;
*background: Black;
}
</style>
</head>
<body>
<div align="center">
<select name="stations" id="station" style="font-size:25px;" align="center">
<option>Select a Opton</option>
<option value="1">What you see if audio file was found</option>
<option value="2">What you see if audio file was not found</option>
</select>
</div>
<div class="st hidden" id="st1">
<p>
<audio id="audio1" src="example.mp3"></audio>
<button id="A" class="button">ON</button>
</p>
</div>
<div class="st hidden" id="st2">
<p>
<audio id="audio2" src="example.mp3"></audio>
<button id="B" class="button">ON</button>
</p>
</div>
</body>
<!--Controls the Drop Down Menu-->
<script>
$(document).ready(function(){
$('#station').on('change', function(){
var theVal = $(this).val();
$('.st').addClass('hidden');
$('.st#st' + theVal).removeClass('hidden');
});
});
</script>
<!--Displays the error message if the audio file is not found and gives the option to reload the page.-->
<div id="dwnB" class="down">
<script>
$("#audio2").on("error", function(e) {
document.getElementById("B").outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b></div>';
});
</script>
</div>
<!--This script reloads the page and is tied to the above script-->
<script>
const reloadtButton = document.querySelector("#reload");
// Reload everything:
function reload() {
reload = location.reload();
}
// Event listeners for reload
reloadButton.addEventListener("click", reload, false);
</script>
</html>
I get this when i run the snippet.
Error: {
"message": "Uncaught ReferenceError: reloadButton is not defined",
"filename": "https://stacksnippets.net/js",
"lineno": 123,
"colno": 1
}
Remember, Reload button is not in the body of the page but is in the script part of the page and only displays if there's an error. Even though button A in the first menu option should error as well. I did not write a script for it to do that so you can see what it looks like with out the error.
Here is the script for the reload button.
<!--Displays the error message if the audio file is not found and gives the option to reload the page. The entire error message is the reload button.-->
<div id="dwnB" class="down">
<script>
$("#audio2").on("error", function(e) {
document.getElementById("B").outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b></div>';
});
</script>
</div>
<!--This script reloads the page and is tied to the above script-->
<script>
const reloadtButton = document.querySelector("#reload");
// Reload everything:
function reload() {
reload = location.reload();
}
// Event listeners for reload
reloadButton.addEventListener("click", reload, false);
</script>
Reloading in the snippet causes the page to go blank. But if you run the code and reload somewhere else it displays as if you haven't chosen a menu option yet.
I don't know where "filename": "https://stacksnippets.net/js", is coming from as I don't see that in my code.
How can I get to to stay on the current selected menu option after the reload button is clicked?
const reloadButton = document.querySelector("#reload");
As there is no element with id reload, reloadButton value is null
reloadButton.addEventListener("click", reload, false);
As you now know that reloadButton is null, event cannot be attached
Instead of only creating the error body, add the reload button and then add an event, on this new reload button, refer code given below:
$('#audio2').on('error', function (e) {
document.getElementById('B').outerHTML = '<div id="dwnB" class="down" align="center" onclick="location.reload();"><h2><b>The Audio File Could not be found.</h2> Please try again later.<br> Tap anywhere on this message to reload and try again.</b><br><button class="reload">Reload</button> </div>';
//once element with id 'dwnB' is created find the Reload Button
let newReloadButton = document.querySelector("#dwnB .reload");
newReloadButton.addEventListener('click', reload, false);
});
$(document).ready(function () {
$('#station').on('change', function () {
let value = $(this).val();
$('.st').addClass('hidden');
$('.st#st' + value).removeClass('hidden');
//store your latest value in localStorage
localStorage.setItem('station', value);
});
//fetch the old value from localStorage
let oldStation = localStorage.getItem('station');
//set station value as per stored value
if (oldStation) {
$('#station').val(oldStation).trigger('change');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
As you created the New Reload Button, no need of this lines
const reloadButton = document.querySelector("#reload");
reloadButton.addEventListener("click", reload, false);
Note: No need to add <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> as you are using <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
so here is the thing i have a block of html code that needs to be replaced when a button is clicked. Its no big deal using
$('div.myCustomReplacer').replaceWith(newHTML);
but i also need to render a django-form {{ form }} in the new HTML
when i simply use
<div class="NewDiv"> {{ form }} </div? the html is rendered as "{{ form }}" because of those quotes the form is not rendered.
So how i do remove those ?
sorry just new to JavaScript.
I don't think you can achieve it like that. Remember that the form is added when html is rendered in the server, so basically {{form}} doesn't exist in client.
No worries, there are several simple ways to reach you goal just using simple JavaScript. One way is to simple let server inject the form, and just make it visible when user click button. Take a look at the example I made for you.
document.getElementById('showBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'block';
});
document.getElementById('hideBtn')
.addEventListener('click', function () {
document.getElementById('targetDiv').style.display = 'none';
});
html, body {
width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
button {
margin: 1rem;
}
section {
margin: 1rem;
}
section span {
background-color: lightcoral;
font-size: small;
padding: .5rem;
}
<!doctype html>
<html lang="en">
<head>
<title>Hide Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<button id="showBtn">Show Form</button>
<button id="hideBtn">Hide Form</button>
<section>
<div id="targetDiv" style="display: none;">
<h2>Form <span> (a moment ago I was just hidden)</span></h2>
<form>
<label for="someInput">Bla bla</label>
<input id="someInput" type="text"/>
</form>
</div>
</section>
<script src="./app.js"></script>
</body>
</html>
I have a project where I am creating a spinner page but I am having difficulty integrating the spinner page while I am redirecting to a URL. Basically I have a multiplication program. If the answer is correct it prompts correct and goes to a specific URL(http://stackoverflow.com) and if is incorrect it goes to another URL(http://yahoo.com). Before it actually goes to those pages I would like the spinner that I created to show up first while the pages are loading. Can someone help me with this? Thanks in advance.
Here is my main HTML page(index1.html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<meta charset="ISO-8859-1">
<title>A Multiplication Game</title>
</head>
**<script>
window.addEventListener("loader", function(){
var spinner=document.getElementById("spinner");
document.body.removeChild(load_screen);
});
</script>**
<body >
<span id="mathprompt">What is <span id="num1">8</span> multiplied by
<span id="num2">E</span>?
</span>
<br>
<span id="inputrow">
<input type="text" id="inputfield">
<button id="submitbutton">Submit</button>
</span>
**<div class="loader" id="spinner"></div>**
<p id="response"></p>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Here is my JavaScript code(script.js). As you can see I have declared spinner as a variable but not sure if I should right the function for it here or in HTML:
var num1;
var num2;
var guess;
var answer;
var response;
$(document).ready(function() {
num1=document.getElementById("num1");
num2=document.getElementById("num2");
guess=document.getElementById("inputfield");
response=document.getElementById("response");
**spinner=document.getElementById("spinner");**
$("#submitbutton").click(function(){
checkAnswer();
redirectPage();
});
setNumbers();
});
function setNumbers(){
num1.innerHTML = Math.floor(Math.random() * 10)+1;
num2.innerHTML = Math.floor(Math.random() * 10)+1;
}
function checkAnswer(){
var n1 = parseInt(num1.innerHTML);
var n2 = parseInt(num2.innerHTML);
answer = n1 * n2;
if (parseInt(guess.value) == answer){
response.innerHTML = "Correct!";
} else
response.innerHTML = "Incorrect!";
}
function redirectPage(){
if (parseInt(guess.value) == answer){
window.location.href = "http://stackoverflow.com";
} else{
window.location.href = "http://yahoo.com";
}
}
And here is the code for the spinner in the css(stylesheet.css):
#charset "ISO-8859-1";
#inputrow{
background-color:#80ff80;
}
#mathprompt{
font-size: 34px;
color:orange;
text-align: center;
}
#response{
font-size: 34px;
color:white;
text-align: center;
}
body {
background-color: #8080c0;
text-align: center;
}
**.loader{
border:16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 240px;
height: 240px;
animation: spin 2s linear infinite;
margin-left: auto;
margin-right: auto;
text-align:center;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}**
You seem to want to detect that an external website is loaded...you cannot detect this, in Javascript you won't have access to the "loaded" event of an external website loaded in a new tab of your browser.
All your can do is display a loading, then doing a "redirect" in javascript.
And when yahoo/stackoverflow page will be loaded (having replaced your website in the browser tab), your loader will obviously have disappeared...is it what you want ?
You have 3 cases :
If you load yahoo/stackoverflow in an iframe embedded in your page, yes you could display a loading and detect that the page is loaded in your iframe (for instance you load a page of your own in the iframe, you can in JS access to the page's content...you load Yahoo/Stackoverflow in the iframe, then when in JS you cannot access to iframe content, it means that the external page is loaded...)
if you are redirecting to the yahoo/stackoverflow page, you will only be able to display a loading before the external pages are beginning to load...
you can try to prefetch the external page, you display a loading, and when the page is loaded, then you redirect to the page...your browser will have cached almost all html elements i think (to check)...
var myPrefetchedPage;
$.ajax({
url: "test.html",
cache: false,
success: function(html){
myPrefetchedPage = html;
}
})
Preloading code in an iframe :
jQuery(document).ready(function ($) {
$app = $('.app');
$app.addClass('loading');
$iframe = $('<iframe>');
$iframe.attr({src: 'http://www.yahoo.fr/'});
$iframe.appendTo($('body'));
// When <iframe> has been loaded, remove loading spinner to reveal <iframe>
// or redirect to the page in your browser tab.
$iframe.load(function() {
$('.app').remove();
// redirect to the real page
window.location.href='http://www.yahoo.fr/';
});
});
I want to add button that let user back 30 seconds during listening songs in mp3 player but the hell I can't do it. I am playing with this for hours, here's what I use http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player. What I have got already
code for 30 sec back
// jump 30 seconds back when we click the button
$('.audioplayer-back30s').click(function(){
var audio = $('audio');
var backToSec = audio.currentTime - 30;
// make sure that we jump to a valid point in time
audio.currentTime = (backToSec >= 0) ? backToSec : 0;
});
html
<head>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700" />
<link rel="stylesheet" href="../../assets/css/audioplayer.css" />
<script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/audioplayer.js"></script>
</head>
<body>
<div class="container">
<br><br><br><br>
<div class="jumbotron">
<div class="thumbnail">
<br><br><br><br>
<h2 style="text-align: center;">You are listening mp3 number 1</h2>
<br><br><br><br>
<div id="wrapper">
<audio preload="auto" controls>
<source src="../../assets/media/audio/BlueDucks_FourFlossFiveSix.mp3">
</audio>
</div>
</div>
<div class="team">
<a><img src="http://i57.tinypic.com/30t6gd2.jpg"</a>
</div>
<div class="team" style="float: right;">
<a><img src="http://i61.tinypic.com/29zv7u8.png"</a>
</div>
</div>
</div>
<script>$( function() { $( 'audio' ).audioPlayer(); } );</script>
<script>
/*
VIEWPORT BUG FIX
iOS viewport scaling bug fix, by #mathias, #cheeaun and #jdalton
*/
(function(doc){var addEvent='addEventListener',type='gesturestart',qsa='querySelectorAll',scales=[1,1],meta=qsa in doc?doc[qsa]('meta[name=viewport]'):[];function fix(){meta.content='width=device-width,minimum-scale='+scales[0]+',maximum-scale='+scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document));
</script>
</body>
css
.audioplayer-back30s
{
width: 2.5em; /* 40 */
height: 100%;
text-align: left;
text-indent: -9999px;
cursor: pointer;
z-index: 2;
top: 0;
left: 0;
}
.audioplayer-back30s:hover,
.audioplayer-back30s:focus
{
background-color: #222;
}
.audioplayer-back30s a
{
display: block;
}
Rest of css and js files of this mp3 player are here http://tympanus.net/Development/AudioPlayer/AudioPlayer.zip . Really I don't have any ideas and I really need this feature, most problem is with creating just button. Thanks you guys for any response.
You need to bind the timeupdate event
Example
var audio = $('audio');
audio.on('timeupdate',function() {
var time = Math.floor(this.currentTime);
if (time > 5) {
this.currentTime = 0;
}
});
So, I have a fairly simple setup.
The site can be viewed here
And the bootstrap library for the icons is here
<head>
<style>
#pButton{
height:60px;
width: 60px;
border: none;
background-size: 50% 50%;
background-position: center;
}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min$
<link href="css/ripples.min.css" rel="stylesheet">
<link href="css/material-wfont.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<audio id="music">
<source src="http://listen.fillyradio.com:8006/;stream" type="audio/mpeg" />
</audio>
<div id="audioplayer">
<button id="pButton" class="mdi-av-play-circle-outline" onclick"play()"></button>
</div>
</div>
<script>
// variable to store HTML5 audio element
var music = document.getElementById('music');
function play() {
if (music.paused) {
music.play();
pButton.className = "";
pButton.className = "mdi-av-pause-circle-outline";
} else {
music.pause();
pButton.className = "";
pButton.className = "mdi-av-play-circle-outline";
}
}
</script>
</body>
My issue? The player works fine with controls enabled, but I want to be able to use custom controls, not the default browser controls.
The button clicks, but doesn't imitate audio or change icons like it should.
Any ideas?
<button id="pButton" class="mdi-av-play-circle-outline" onclick"play()"></button>
you need = after your onclick
new
<button id="pButton" class="mdi-av-play-circle-outline" onclick="play()"></button>