Script Load

Tony M · 07-27-2010, 07:54 PM

I want this script to load after the page load
the script is:

Code:

<script type="text/javascript" src="http://localtimes.info/clock.php?cp3_Hex=0F0200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=118&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Indonesia&city=Jakarta&widget_number=116"></script>

the script in My page is like:

Code:

<!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">
<head>
<title>My test page</title>
</head>

<body>
<h1>Tony</h1>
<h2>Welcome Tony Website</h2>
<script type="text/javascript" src="http://localtimes.info/clock.php?cp3_Hex=0F0200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=118&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Indonesia&city=Jakarta&widget_number=116"></script>
<h3>Tony is ... and is....</h3>
<h3>He will....</h3>
</body>

</html>

So how can I make this script loads after all elements of My page are loaded and without changing it's position (the script position)?

Philip M · 07-27-2010, 09:08 PM

You can only load the script last of all by placing it right ahead of the </body> tag.

But you can load the script and delay the execution of the function(s) contained within it by

window.onload = function() {
functionOne();
functionTwo();
}

As your script is loaded from an external source this may not be posssible.

Quizmaster: How many centimeters are there in a metre?
Contestant: Two and a half.

RandomUser531 · 07-27-2010, 10:11 PM

Try this. Anything else using onload must be combined with it.

Code:

<h2 id='myElem'>Welcome Tony Website</h2>

............

<script type="text/javascript">

window.onload = function()
{
  var myScript = document.createElement( 'script' ), 
      elem = document.getElementById( 'myElem' );

  myScript.src = "http://localtimes.info/clock.php?cp3_Hex=0F0200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=118&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Indonesia&city=Jakarta&widget_number=116";

  elem.parentNode.insertBefore( myScript, elem.nextSibling );
}
</script>

Tony M · 07-28-2010, 07:48 AM

ok, how to put these codes in My page?

Code:

<!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">
<head>
<title>My test page</title>
</head>

<body>
<h1>Tony</h1>
<h2>Welcome Tony Website</h2>
<script type="text/javascript" src="http://localtimes.info/clock.php?cp3_Hex=0F0200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=118&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Indonesia&city=Jakarta&widget_number=116"></script>
<h3>Tony is ... and is....</h3>
<h3>He will....</h3>
</body>

</html>

RandomUser531 · 07-28-2010, 01:02 PM

Quote:

Originally Posted by Tony M

ok, how to put these codes in My page?

You can put the <script> block pretty much anywhere since it does not execute until the document has finished loading, at which time it will insert your specified script immediately after the element with id='myElem'.
Presumably your script is suitable for insertion into a loaded document.

Tony M · 07-28-2010, 06:29 PM

The code that You showed Me above is not working, please help?

Old Pedant · 07-28-2010, 10:51 PM

Phil & Philip: I think you are misdiagnosing his problem.

That script he is invoking is used to document.write code to embed a Flash object in the page.

Just point your browser to that url:
http://localtimes.info/clock.php?cp3...get_number=116
to see the JS code.

So he *CAN'T* delay it until page load. Period. He *MUST* create the Flash object inline.

*IF* he had access to the code, he could change it so that the Flash movie doesn't start until requested, but that's about all he could do.

He could also dump out what the code is generating and, instead of using that code just embed the Flash by hand and than change when the movie starts.

But he can't do it by simply using onload to delay when the code is invoked.

RandomUser531 · 07-29-2010, 12:21 AM

Quote:

Originally Posted by Old Pedant

Phil & Philip: I think you are misdiagnosing his problem.

That script he is invoking is used to document.write code to embed a Flash object in the page.

Well I did warn about that possibility, but now I know there's only one thing for it.

1) Remove the code I gave you.

2) Place your original <script> tags for the clock at the end of the <body> section, then immediately below those tags (still inside the body) add this script block:

Code:

<script type='text/javascript'>

(function()
{
 var objs = document.getElementsByTagName('object'), 
     me = document.getElementById( 'myElem' );  
   
 for( var i = 0, found = false, clsId; i < objs.length && !found; i++ )
 {
  clsId = objs[i].getAttribute('classid') || "";
      
  if( clsId === "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" )
  {
   found = true;  
   me.parentNode.insertBefore( objs[i], me.nextSibling );
  }
 } 
})();

</script>

3) Make sure this element has the ID as shown here: <h2 id='myElem'>Welcome Tony Website</h2>

Old Pedant · 07-29-2010, 01:25 AM

Doesn't he also need to remove the objs[i] object?? Or does the insertBefore just move it, automatically, because it can't be in two places at once?

And what's the purpose of the found flag?

RandomUser531 · 07-29-2010, 03:04 AM

Quote:

Originally Posted by Old Pedant

Doesn't he also need to remove the objs[i] object?? Or does the insertBefore just move it, automatically, because it can't be in two places at once?

Yes it's automatic, although Opera used to be a bit shaky about it.

Quote:

And what's the purpose of the found flag?

To end the loop prematurely in an overt manner if further iterations are redundant.

Tony M · 07-29-2010, 02:23 PM

ok, finaly the script is working,
BUT it is working fine only on Internet Explorer, but not on Firefox, on Firefox the clock is Hovering above the text that is supposed to be after it, and not under it? So what is the solution?

RandomUser531 · 07-29-2010, 03:46 PM

Quote:

Originally Posted by Tony M

ok, finaly the script is working,
BUT it is working fine only on Internet Explorer, but not on Firefox, on Firefox the clock is Hovering above the text that is supposed to be after it, and not under it? So what is the solution?

That will just be a page-layout issue. Try adding a <p> or <br> tag after your <h2> and transfer id='myElem' to that tag. Whatever you do, remember that the clock will be inserted immediately after whichever element has id='myElem'.

Tony M · 07-29-2010, 04:49 PM

Ok, the script is working, thanks.
I had those last 2 questions:

1- If I put the srcipt (that You showed Me above)

Code:

<script type='text/javascript'>

(function()
{
 var objs = document.getElementsByTagName('object'), 
     me = document.getElementById( 'myElem' );  
   
 for( var i = 0, found = false, clsId; i < objs.length && !found; i++ )
 {
  clsId = objs[i].getAttribute('classid') || "";
      
  if( clsId === "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" )
  {
   found = true;  
   me.parentNode.insertBefore( objs[i], me.nextSibling );
  }
 } 
})();

</script>

does it make all the JavaScript scripts in My page to load after the loading time?
(for example I had a second clock but the script of the other clock isn't directly over the script that You showed Me, so does this other clock load after the page loads, or it will load normally with the page according to it's position)

2- If I put a Javascript code that shows that the page is loading "Please Wait", does the clock code (that We discussed in the posts above), will be loaded before or after the loading message (please wait) disappears?