Solved

ONLOAD problem

Posted on 1998-09-02
5
335 Views
Last Modified: 2010-04-09
is there a way to make the counter not start counting until the picture loads? i'm working on a web cam, but if load three seperate jpgs and only have a 15 second count, the page will try to refresh before the pics come down.. on a slow connection of course..

here's waht i'm doing..

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta http-equiv="Refresh" content="15">
<title>Non-Java test</title>
</head>

<body ONLOAD="startClock()">

<img src="alex.jpg" ALT="SpyCam Video Window" width="320" height="240">

<img src="sloan.jpg" ALT="SpyCam Video Window" width="320" height="240">

<form NAME="form1">
<P>This page will reload in  
<INPUT TYPE="text" NAME="clock" SIZE="3" VALUE=""> seconds.
</form>

<SCRIPT LANGUAGE="JavaScript">
    <!-- HIDING
    var x = 16
    var y = 1
    function startClock(){
        x = x-y
        document.form1.clock.value = x
        timerID = setTimeout("startClock()", 1000)
          }
    // END HIDING -->
</SCRIPT>

      
            


</body>
</html>
0
Comment
Question by:rabbitears
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 8

Accepted Solution

by:
jbirk earned 50 total points
ID: 1837283
Yes there is a way, and it would involve ising JavaScript only instead of the refresh meta tag.  Your would add this to your function:
if (x<=0)
 history.go(0);
That should do it for you!
I will post the entirely new and changed code in a minute here.
-Josh

0
 
LVL 8

Expert Comment

by:jbirk
ID: 1837284
OK, here is the new code.  Note that I changed some of the code a little...  This doesn't actually change the functionality, but I think it's nicer this way (just my manner of style I guess)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Non-Java test</title>
</head>
<body ONLOAD="startClock()">
<img src="alex.jpg" ALT="SpyCam Video Window" width="320" height="240">
<img src="sloan.jpg" ALT="SpyCam Video Window" width="320" height="240">
<form NAME="form1">
<P>This page will reload in  
<INPUT TYPE="text" NAME="clock" SIZE="3" VALUE=""> seconds.
</form>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDING
var x = 15;
function startClock()
 {if (x<=0)
   history.go(0);
  document.form1.clock.value = x--;
  timerID = setTimeout("startClock()", 1000);
 }
// END HIDING -->
</SCRIPT>
</body>
</html>
0
 

Author Comment

by:rabbitears
ID: 1837285
will this work on any browser?
0
 

Author Comment

by:rabbitears
ID: 1837286
will this work on any browser?
0
 
LVL 8

Expert Comment

by:jbirk
ID: 1837287
Yes this will work in all javascript enabled browsers!
-Josh
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html using "Or" in condition 3 40
Telerik RadEditor Control Save 8 39
HTML editor custom button 3 84
Display Flex does not Wrap Items 2 46
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question