When I update a file on my server the html page automatically changes the html page (checks every 9 seconds for changes).
How can I trigger a chime sound file to alert a user of a html page change?
Here is the html:
<html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("data.txt");
var refreshId = setInterval(function() {
$("#responsecontainer").load('data.txt?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body bgcolor=#befcb4>
<div id="responsecontainer"></div>
</body></html>
If you're problem is triggering the actual sound, you can find that here. As far as determining whether there is a new element in the page, I'd just compare it to the old one.
You can easliy create a HTML Audio Element with javascript:
<audio autoplay><source src="youraudiofile.mp3" type="audio/mp3"></audio>
After you created it in jquery with .append() or whatever just add an .delay(2000) in ms with your length of your file and then remove that element again with .remove()
e.g.
var audioElement = $('<audio autoplay id="music"><source src="youraudiofile.mp3" type="audio/mp3"></audio>');
$("body").append(audioElement).delay(1000).remove("#music");
Related
In my project, my JS receives information from server and then displays it on HTML. However, when I acess the page, the data is not fully loaded yet, so the entire HTML is loaded but the data is not. It forces me to wait X milliseconds to see the last thing to complete the page (the data).
I want to make all elements (divs, span, buttons, my data) load exactly when data's retrieved and ready to be shown. Also, I wanted to do this by displaying a simple waiting gif in order to make the user pacient about it, but I'm not sure how to do it.
window.onload = ()=>{
var questionPlace = document.querySelector("#question-place");
displayPrevious(data, questionPlace);
}
<head>
<script src='./scripts/index.js' type='module'></script>
</head>
<body>
<div class="flexbox-container" id="question-place"> <!-- data here --> </div>
<!-- buttons, divs, etc -->
</body>
Rather than window.onload, use $.when($.ajax()).then():
Option 1:
Create every element using document.createElement:
//window.onload = () => {
$.when($.ajax("file.txt")).then((data, textStatus, jqXHR) => {
var elements = [];
elements.push(document.createElement('div'));
});
And the only element that should be in the <body> would be your gif:
<body>
<img src="loading.gif" alt="Loading...">
</body>
Option 2:
Set every element to have display: none;:
<head>
<style>
* {
display: none;
}
</style>
</head>
<body>
<!-- other elements -->
<img src="loading.gif" alt="Loading..." onload="(event) => event.target.style.display = 'block'">
</body>
And again wait for the call to finish and set everything to block:
$.when($.ajax("file.txt")).then((data, textStatus, jqXHR) => {
$("*").css("display", "block");
});
You can hide whatever "parent" HTML element you want and unhide it on the success event for the jQuery get request.
See: Show html after completing work with ajax and jquery
Hello coders in the house.
I am a complete beginner, I saw something on thewpclub.Net and I want to implement the same on my Wordpress blog.
When someone clicks a download link, I want a new browser tab to open and display a countdown timer like 15 seconds before the main download link will now appear.
Pls try and download from thewpclub. Net , you will understand what am trying to say.
What I have tried:
A friend on facebook gave me this jquery code.
But after I paste it in my blog.
The countdown just happens right away on the same post page. It doesn't even wait for user to click the link not to talk of opening a new tab.
See the code below
function c() {
var startTime = $('.c').attr('id');
var counter = startTime;
$('.c').text(counter);
setInterval(function() {
counter--;
if (counter > 0) {
$('.c').text(counter);
}
// Display 'counter' wherever you want to display it.
if (counter === 0) {
// alert('this is where it happens');
clearInterval(counter);
$('.c').text('');
$('.c').append('Download');
}
}, 1000);
}
// Start
c();
<span class="c" id="5"></span>
--------- Updated Answer based on first comment -------
You have to create 2 separate html files. The first HTML (first_page.html) file contains the link for opening the page which contains the download link in a new tab.
Here is what first_page.html looks like:
<!DOCTYPE html>
<html>
<head>
<title>First Page</title>
</head>
<body>
Click to open download page
</body>
</html>
The second HTML page (second_page.html) contains the code to create the counter and display the download link when the counter expires. The important point to note is that I am using $(document).ready() to execute this code when this page loads.
Here is the second_page.html file:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
function c() {
var startTime = $('.c').attr('id');
var counter = startTime;
$('.c').text(counter);
setInterval(function() {
counter--;
if (counter > 0) {
$('.c').text(counter);
}
// Display 'counter' wherever you want to display it.
if (counter === 0) {
// alert('this is where it happens');
clearInterval(counter);
$('.c').text('');
$('.c').append('Download');
}
}, 1000);
}
$(document).ready(function() {
c();
});
</script>
<span class="c" id="5"></span>
</body>
</html>
</body>
</html>
This should now meet your expectations. Hope it helps!
--------- Original Answer--------------
You can open a new tab on clicking a link by specifying target="_blank" property in your <a> tag.
Click
On this page, you can then display the counter before display the download link.
Does this help?
I am trying to create an HTML file that when run, will open a URL in a new tab (the URL is pointing to a file on a local server, so when the HTML is run it in fact prompts the user to open or save the file), and then after x seconds, closes itself without the prompt asking the user if they wish to close the tab.
Only Internet Explorer can be used, as my company does not allow other browsers.
I already have a file that opens and closes the tab, however, the tab is closed almost immediately, which does not allow time for the prompt to come on-screen and ask the user if they wish to open or save the file. Here is my code so far:
<html>
<head>
<title>You are being redirected</title>
<meta HTTP-EQUIV="REFRESH" content ="0; url=X:\\Directory\Subdirectory\File.docx">
</head>
<body>
<center>
<script type="text/javascript">
window.open('javascript:window.open("", "_self", "");window.close();', '_self');
</script>
</center>
</body>
</html>
A solution to my problem would be to just literally add a delay between the tab opening and closing in the above code (ideally 5 seconds or 5000 milliseconds). If anyone could show me how to add this delay before it closes that would be extremely helpful.
<script type="text/javascript">
setTimeout(function() {
window.open('javascript:window.open("", "_self", "");window.close();', '_self');
}, 5000);
</script>
You should use settimeout():
setTimeout(function,milliseconds,param1,param2,...)
Read about it here: w3schools settimeout();
This works to open a new tab and close it after 5 seconds
var wnd = window.open("http://google.com", "_blank", "");
window.setTimeout(closeWindow, 5000);
function closeWindow() {
wnd.close();
}
I'm loading really big web page with thousands of elements.
How can I test if node has fully loaded including it self and all it child elements but I don't want to wait for whole page to be loaded.
For example lets have this page:
<html>
<head>
<script>
var cnt = 0;
var id = setInterval(function test() {
var e = document.querySelector('#content')
if (!e) return;
// how to test is "e" fully loaded ?
if (cnt == e.childNodes.length) {
clearInterval(id);
} else {
cnt = e.childNodes.length;
console.log(cnt);
}
}, 10);
</script>
</head>
<body>
<div id="content">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>
<!-- ... add 30k div elements -->
</div>
</body>
</html>
This will print something like this on console:
4448
9448
14448
19448
24948
30000
I think that the load event would be an more apropriate answer to your question.
It can be atached to an ellement and fires when everything is loaded including images and other resources.
some examples you can find here.
https://developer.mozilla.org/en-US/docs/Web/Events/load
https://www.w3schools.com/jsref/event_onload.asp
but if you don't care about the resources than you might want to look at this.
https://developers.google.com/speed/docs/insights/rules
say you want to alert after the div#content is loaded. if you put your javascript after div's closing tag, it will run after loading all the html prior to the script.
<div id="content">
// your content
</div>
<script type="text/javascript">
alert("finished loading until this point");
</script>
simply I've .wav file and I want to run it once the textbox value changed. the textbox is placed on a aspx page. I've an HTML5 tag called :
<audio id="audiotag1" src="Sound/Alarm1.wav" preload="auto"></audio>
<script type="text/javascript">
function play_single_sound() {
document.getElementById('audiotag1').play();
}
</script>
and the code behind is:
System.Web.UI.ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), "Script", "play_single_sound();", True)
they work fine if the browser support HTML5. So, I need same thing using javascript so that it work with each browser.
thanks
Use this.
<script type="text/javascript">
function play_single_sound() {
var audio = new Audio('Alarm1.wav');
audio.play();
}
</script>
HTML
Text box
If you want to play sound in text change event then add onchange event to your text box control then in the corresponding function play the sound
<input type="text" id="myTextBox"
onchange="musicplay()">
Java script
<script type="text/javascript">
function musicplay() {
var Playsound= new Audio('Sound/Alarm1.wav');
Playsound.play();
}
</script>