Gele balk

Status
Niet open voor verdere reacties.
bartwebdesign

bartwebdesign

Gebruiker
Lid geworden
16 jul 2006
Berichten
443
Is het mogelijk, als mensen op een pagina komen, dat er een gele balk verschijnt?
En dat de balk na elke seconden (5t/m 10) verdwijnt?
 
Wat bedoel je juist met een gele balk? Naar wat ik versta maak je een div aan met gele achtergrondkleur en maak je die dan onzichtbaar na 5-10 seconden.

in de head een stijlblok:
HTML: 
<style type="text/css">
#balk {
    background-color: #FFFF00;
    //width: breedte_balk px;
    //height: hoogte_balk px;
    z-index: 99; //zo ligt ie zeker bovenaan;
}
</style>

en dan zet je onder de <body>-tag
HTML: 
<div id="balk"> </div>

dan hebben we nog een javascript-functie nodig die de balk laat verdwijnen, deze code komt in de head:
HTML: 
<script type="text/javascript">
function hideBar()
{
    document.getElementById("balk").style.display="none";
}
</script>

en deze functie roepen we op 5 seconden nadat de pagina is ingeladen adhv setTimeOut("functie", tijd_in_milliseconden):
HTML: 
<body onLoad="javascript:setTimeOut('hideBar()', 5000);">

Dat zou het ongeveer moeten zijn dank ik,
--Johan
 
Ik bedoel, zo'n gele balk, zoals die balkjes als je iets moet downloaden of installeren in IE
 
Okee, de euro valt, dan zal je de kleur van de div nog wat zachter willen maken wschl, en zijn width op 100% ofzo.

--Johan
 
bartwebdesign zei:
Dat heb ik allemaal al geprobeert. Het werkte niet. Help?
Klik om te vergroten...

Persoonlijk zou ik je liever laten zoeken met Google, dan had je er ook nog een hoop van kunnen leren, maar aangezien je de zetjes in de juiste richting schijnbaar niet weet om te vormen tot een werkend geheel, geef ik je de uitkomst van mijn inspanningen om dit werkend te krijgen.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
#balk {
    background-color: #FFFFBB;
    width: 100%;
    height: 3%;
    z-index: 99; 
	position:absolute;
	top:0;
	left:0;
}
</style>
<script type="text/javascript">

function start(ms)
{
	setTimeout("document.getElementById('balk').style.display='none'", ms)
}
</script>
</HEAD>

<body onLoad="start(5000)">
<div id="balk">&nbsp;Deze balk gaat verdwijnen </div>
</BODY>
</HTML>
 
Even voortbordurend, :) deze balk begint op volle breedte en krimpt vervolgens aan de linker kant:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">
<html>
 <head>
  <title>Voortgangsbalk</title>
  <style type="text/css">
   #balk {
    position: relative;
    float: right;
    width: 100%;
    height: 24px;
    border: 1px solid #000;
    background-color: #ffc;
    }
  </style>
  <script type="text/javascript">
   var width = 100;
   function start() {
    width--;
    var balk = document.getElementById('balk');
    balk.style.width = width + '%';
    if (width > 0) setTimeout('start()',100); else balk.style.visibility = 'hidden';
    };
  </script>
 </head>
 <body onLoad="start()">
  <div id="balk"></div>
 </body>
</html>

Vr.Gr. Egel.
 
Ik vind die van sjunnie het beste, maar als je de de % op 101 zet, is die net iets langer.
 
Egel zei:
Even voortbordurend, :) deze balk begint op volle breedte en krimpt vervolgens aan de linker kant:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">
<html>
 <head>
  <title>Voortgangsbalk</title>
  <style type="text/css">
   #balk {
    position: relative;
    float: right;
    width: 100%;
    height: 24px;
    border: 1px solid #000;
    background-color: #ffc;
    }
  </style>
  <script type="text/javascript">
   var width = 100;
   function start() {
    width--;
    var balk = document.getElementById('balk');
    balk.style.width = width + '%';
    if (width > 0) setTimeout('start()',100); else balk.style.visibility = 'hidden';
    };
  </script>
 </head>
 <body onLoad="start()">
  <div id="balk"></div>
 </body>
</html>

Vr.Gr. Egel.
Klik om te vergroten...

Die is goed gevonden, als je natuurlijk zo'n waarschuwinsbalk wil imiteren lijkt het aanpassen van de hoogte me iets slimmer ;) . En als de tekst die erin staat mee moet opschuiven kan je mss nog beter de positie negatief maken tot ie uit beeld is en dan op hidden zetten. Alhoewel ik geen flauw ID heb of dat laatste in alle browsers gaat werken...

--Johan
 
de balk zelf is dat div-element dus het geheel:
HTML: 
<div id="balk"></div>
Dat is je balk.

De eigenschappen ervan, hoogte, breedte, kleur, ... stel je in via CSS, gebruik makend van het ID, dus dit deel:
HTML: 
<style type="text/css">
#balk {
    background-color: #FFFFBB;
    width: 100%;
    height: 3%;
    z-index: 99; 
	position:absolute;
	top:0;
	left:0;
}
</style>

Als je tekst in de balk wil zet je tekst tussen de <div>tags.

Neem even sjunnie z'n code en verander deze regel:
HTML: 
<div id="balk"></div>
naar
HTML: 
<div id="balk">Hallo, ik verdwijn binnen enkele seconden</div>

en bekijk dat even in je browser, misschien dat alles dan wat duidelijker wordt.

--Johan
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan