Javascript onload run function help - javascript

Need help with my simple script that is supposed to auto click next after 5 seconds.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>
</title>
<script type="text/javascript">
window.onload = Next() {
setTimeout(Next() {
var next = document.getElementById("NEXT");
window.location.href = next.href;
}, 5000);
}
</script>
</head>
<body>
<div align="right">
<a id="NEXT" href="http://www.mysite.com/pictures.php?id=34">[ NEXT ]</a>
</div>
</body>
</html>

Your problem is that .click() only works on buttons.
Whilst were at it lets use unobtrusive javascript.
window.onload = function() {
setTimeout(function() {
var next = document.getElementById("NEXT")
window.location.href = next.href;
}, 5000);
}
Live example.
Edit
window.onload = Next() {
setTimeout(Next() {
Don't use the word Next() just use function()
To create functions you need either function () or function SomeName()

On a point of correctness, your script doesn't say it's javascript (you need to say which scripting language it is), and your html technically doesn't say it's HTML (it's missing a doctype declaration):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript">
function next() {
// '1' dynamically generated when this page was generated by PHP,
// and will be '2' next time the page loads.
location = "pictures.php?id=1";
}
document.addEventListener("DOMContentLoaded", function(){setTimeout(next,5000);}, false);
</script>
</head>
<body>
...
</body>
</html>
This sounds like being pedantic, but IE in particular is really anal about having those things. Without a doctype declaration, it won't treat a document starting with as HTML code, but start to take fairly inaccurate guesses.

Related

Microsoft Edge Refresh button does not execute the onLoad java script code

I have the following simple java script code which does not execute when I press the Refresh button in Microsoft Edge. None of the 3 alerts execute at refresh. It works well with Chrome.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
jQuery(function() {
alert('jQuery');
});
function func() {
alert('func');
}
function load() {
alert('load');
}
window.onload = load();
func();
</script>
</head>
<body>
</body>
</html>
This code can be put in an HTML file (test.html).
Why does this happen? Thank you.
Maybe use window.addEventListener("load", load, false);. Sometimes, if one thing doesn't work, another will.

Set Window focus with a link

I have a problem with Javascript window focus setting.
I've written a function to open a new window with the JS method window.open() and save the return value to a variable.
Now I have a link on the first page and by clicking on this link the second, with window.open() opened, window should get the focus.
But this won't work. Is there any way to get this working?
My code looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<script type="text/javascript" language="JavaScript">
var myWindow;
function checkForRefresh() {
myWindow = window.open("test.html", "TestMain");
myWindow.focus();
}
function switchFocus(umsWindow) {
myWindow.focus();
}
</script>
</head>
<body onLoad="checkForRefresh()">
<p>Test Link</p>
</body>
</html>
This problem has been talked already, some browsers does not listen to window.focus(). Please take a look at comment #2533335.
I got it to work when I made the functions properly global by putting them on the window object
http://jsfiddle.net/u52xE/3/
window.switchFocus = function() {
myWindow.focus();
}
It's not ideal to have that javascript in your HTML and global functions though, I'd recommend using jQuery to attach events

detect when video finishes and redirect to web page

I've found various ideas on how to detect when a web video ends, but can't get the syntax right for the way I'm using javascript to play the video. Note that I'm using version 4 of the jwplayer.
Here is the HTML that uses swfobject.js and player.swf. It works fine, but I want to add code that detects when the video has finished at will then redirect to a web location using - window.location.href = http://www.webpage.com
Any help will be very appreciated! Here's the full page of HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='swfobject.js'></script>
</head>
<body lang=EN-US bgcolor='#000000'>
<center>
<p id='preview'></p>
<script type='text/javascript'>
var so = new SWFObject('player.swf','player1','640','381','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('flashvars','&file=mymovie.m4v&bufferlength=3&autostart=true&controlbar=bottom');
so.write('preview');
</script>
</center>
</body>
</html>
You need to use our JS API - http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference
And, use our JW Embedder (Not SwfObject) - http://www.longtailvideo.com/support/blog/15827/using-the-jw-embedder-to-embed-your-player
Then, the set up will look something like this:
<h2>Redirecting on complete</h2>
<div id="container">This'll be the player</div>
<script type="text/javascript">
jwplayer("container").setup({
file:"bunny.mp4",
flashplayer:"player.swf",
height:400,
width:600,
events:{
onComplete: function() {
window.location = "http://www.google.com";
}
}
});
</script>
Hope that helps!

Java script printing out a blank page

I have the following java script code
$("#btn_Print").click(function (e) {
e.preventDefault();
var printWindow = window.open("../private/analysisPrint.htm");
printWindow.print();
printWindow.close();
return false;
});
and the analysisPrint.htm page contains.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<h4>
Print</h4>
First print page
</div>
</body>
</html>
The problem I am having is that I am always getting a blank page being printed. When i open the page directly and print its fine.
Any Ideas
You can (and probably should) wait for the page to load completely (including images):
var printWindow = window.open("../private/analysisPrint.htm");
$(printWindow).on('load', function() {
printWindow.print();
printWindow.close();
});

"scrollHeight" not updated in "onscroll" event handler when using HtmlCtrl in an application but works correctly in IE9

When sample below code loads in IE9, it works correctly, but when loads in an html control in an application, scrollHeight not updated in onscroll event handler when I change the innerHTML content in the handler, and therefore the alert not to be displayed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script>
function f()
{
var nBodyHeightOld = document.getElementById("div1").scrollHeight;
document.getElementById("div1").innerHTML += '<div>It is a test!</div>';
if (document.getElementById("div1").scrollHeight != nBodyHeightOld)
alert('scrollHeight changed!');
}
</script>
</head>
<body>
<div id='div1' style='overflow:scroll; height:300px' onscroll="f()">
<div style='height:400px'></div>
</div>
</body>
</html>
Becuse the application use IE8. To force application use IE9 add meta tag to html:
<meta http-equiv="X-UA-Compatible" content="IE=9" >

Categories

Resources