quellcode von Fabian Mürmann, 14.01.1999 13:00

quellcode

Fabian Mürmann 14.01.1999 13:00

so, jetzt für alle die die WebFX seite ned laden können, weil sie keinen IE4 haben der sourcecode:

<schnipp>
*****************************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Status Bar (WebFX)</title>
<link rel="STYLESHEET" type="text/css" href="../../webfx.css">
<script type="text/javascript">
<!--

function setSB(v, el) {
filterEl = el.children[0];
valueEl = el.children[1];

if (filterEl.style.pixelWidth > 0) {

var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}

filterEl.style.width = v + "%";  
valueEl.innerText = v + "%";

}

window.onload = new Function("setSB(100,sb)")

//-->
</script>

</head>
<body>

<p>Status bars are really easy to do in DHTML. The creation of your own status bar is really easy and
the update of the value is also easy. There is only one real problem: Coordinating the status bar
so it represent some logical status.</p>

<h2>Creation</h2>

<p>The only thing that is needed for a statusbar is some element that can be changed in a logical
way to represent the progress. The easiest is a HR or a DIV with a background color. I choose to do
a little more complex structure using nested DIVs to have a gradient fill of the status. I also
added another DIV that shows the numerical percentage value. Below a show the most simple and my
version of a status bar.</p>

<h2>Updating</h2>

<h3>By loaded text</h3>
<script>setSB(70,sb)</script>
<p>This is maybe the easiest way to update the statusbar. In the html file you add SCRIPT tags at
even intervals that updates the status bar.</p>

<pre>
<script>simpleStatBar.style.width = "20%"</script>

<script>setSB(20,sb)</script>
</pre>

<h3>By loaded images</h3>

<p>All images expose the property <code>readyState</code>. Once the images is fully loaded the
<code>readeState</code> becomes <strong>complete</strong>. Every change in <code>readyState</code>
fires the event <code>onreadystatechange</code> but this event doesn't bubble so you'll have to
catch the event on the object. There are basically two solutions to this. The first is just to check
all images using <code>document.images</code> at an even interval or you could add the event
handlers to all images once. You could also add an array with information about the size of each
image.</p>
<script>setSB(80,sb)</script>
<h3>Other elements</h3>

<p>Basically all element that loads an external file has the <code>readyState</code> attribute.
These are the elements that expose it: IMG, LINK, OBJECT, SCRIPT, STYLE and the document element.
You can also try this property on other frames by checking the document inside the frmae.</p>

<h2>Finishing</h2>

<p>The status bar should (probably) say 100% when the page has finished loaded. This can be acheived
by setting the status bar to 100% when window.onload fires.</p>

<pre>window.onload = new Function("setSB(100,sb)")</pre>

<h2>Getting file size</h2>

<p>I don't know any way to find the file size using client side scripts but using server side
script (such as ASP, SSI, PHP) you could insert the file size inside the html as a string that
can then be accessed by the client sides script.</p>

<h2>Final Words</h2>

<p>Status bar are nice but there isn't any really an easy way to create a general method. You
always need to add some (but easy) code to your html...</p>

<p class="author">Author: Erik Arvidsson</p>

#ftrBox  {position: relative; top: 10; left: 10;
   width: 420; height: 80;
   border: 10 solid #eeeeee;}
#ftrCircle1 {position: relative; top: -140; left: 375; width: 100; cursor: hand;
   font-family: webdings; font-size: 100;
   color: #eeeeee;}
#ftrCircle2 {position: relative; top: -230; left: 385; width: 80; cursor: hand;
   font-family: webdings; font-size: 80;
   color: white;}

#ftrImg1 {position: relative; top: -50; left: 25; width: 100; height: 40;
  color: black; font-size: 40; font-family: arial black; font-style: italic;
  border: 0 solid black;
  filter: gray(), alpha(opacity=20)}

#ftrText {position: relative; top: -90; left: 135; width: 300; height: 50;
  color: #bbbbbb; font-size: 12px; font-family: verdana; font-weight: normal;}

#ftrText a   {color: #aaaaaa; font-weight: bold; font-size: 12px; text-decoration: none;}
#ftrText a:hover {color: navy; font-weight: bold; text-decoration: none;}

#ftrBack   {position: relative; top: -285; left: 395; width: 60; height: 30;
    color: #dddddd; font-size: 20; cursor: hand;
    font-family: arial black; font-weight: normal;}
-->
</style>
<script>
<!--

function high() {
// ftrCircle1.style.zIndex = 99;
// ftrCircle2.style.zIndex = 99;
// ftrBack.style.zIndex = 99;
ftrCircle1.style.color ="navy";
ftrBack.style.color ="navy";
window.status = "This takes you to the main page!";
}

function low() {
toEl = window.event.toElement;
if (toEl == null || toEl.id != "ftrCircle1" && toEl.id != "ftrCircle2" && toEl.id != "ftrBack") {
  ftrCircle1.style.color ="#eeeeee";
  ftrBack.style.color ="#dddddd";
  window.status = "";
}
}

//-->
</script>

<a href="http://webfx.eae.net" target="_top"><img id="ftrImg1" src="http://webfx.eae.net/images/crfoot.gif" width=100 height=40 border=0 alt="Back to Main page"
onmouseover="this.style.filter=''"
onmouseout="this.style.filter='gray() alpha(opacity=20)'"

</a>

<div id="ftrText">
Page designed and maintained by <a href="mailto:erik@eae.net">Erik Arvidsson</a> and <a href="mailto:eae@eae.net" target="_top">Emil A. Eklund</a>
</div>

<div id="ftrBack"
onmouseover="high()" onmouseout="low()" onclick="window.open('http://webfx.eae.net','_top')"

Back</div>

</div>
</div>

</body>
</html>

*****************************************
</schnipp>

Fabian

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Fabian Mürmann: quellcode

Beitrag lesen

quellcode

JavaScript - Ladestatus && Frage Forum allegmein

quellcode

JS: fortschreitende Statusanzeige mit DHTML