Javascript..

Door Thomas op 08-06-2006 19:08

232 views

Hallo allemaal,

Ik heb dit tot nu toe met javascript

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<script language="javascript" type="text/javascript"> 

   var load  = false; 
   var samen = 200; 

   function procenten(e) 
    { 
     if(load == false) 
      return false; 

     breedte = document.body.clientWidth; 

     if(document.layers) 
      x = e.x; 
     else if(document.all) 
      x = event.clientX; 
     else if (document.getElementById) 
      x = e.clientX; 

     per = x / breedte * 100; 
     per = Math.round(per); 

     if(per > 100) 
      per = 100; 

     links  = Math.round(samen / 100 * per); 
     rechts = samen - links; 

     if(per > 66) 
      document.getElementById('warn_links').src="warning_red.gif"; 
     else if(per > 33) 
      document.getElementById('warn_links').src="warning_orange.gif"; 
     else 
      document.getElementById('warn_links').src="warning_yellow.gif"; 

     document.getElementById('warn_links').width = links; 
     document.getElementById('warn_rechts').width = rechts; 
     document.getElementById('warn_per').innerHTML = per+"% voltooid"; 
      
    } 

   document.onmousemove = procenten; 

   if(top != self) 
    top.location = location; 

  </script> 
</head> 
<body onLoad="load = true">  <br>  
<br> 
<img style="border-left: 1px solid rgb(0, 91, 191);" src="warning_yellow.gif" alt="" id="warn_links" height="13" width="16"><img src="warning_empty.gif" alt="" id="warn_rechts" style="border-right: 1px solid rgb(0, 91, 191);" height="13" width="184"> <br> 
<b id="warn_per">8% voltooid</b> 
</body> 
</html>

Alleen nu wil ik niet dat de procentjes erbij komen als je de muis beweegt, maar dat de balk volloopt tot het zelf intevoeren % ik kwam der voor de rest niet egt meer uit..

Mvg. Thomasv6

Lasse

08-06-2006 21:37

<html>
<head> 
<style type="text/css">
	
#Balk {
		position:absolute;
		left:0px;
		top:0px;
		width:300px;
		background-color:#184EB8;
		filter: Alpha(Opacity=0, FinishOpacity=100,Style=1,StartX=0,StartY=0,FinishX=200,FinishY=20) ;
		height:100%;
		z-index:5000;}
	
#balk_ag {
		position:absolute;
		left:50%;
		top:10%;
		width:300px;
		height:20px;
		border:1px solid #000000;
		background-color:#eeeeee;
		margin-left:-150px;	
		margin-top:-20px;
		text-align:center;}
	
#balk_vg {
		position:absolute;
		left:0px;
		top:0px;
		width:0px;	
		height:100%;
		overflow:hidden; }
	
#balk_tekst {
		color:#000000;
		z-index:10000;
		width:100%;
		height:100%;
		left:0px;
		top:0px;
		position:absolute;		
		font-family:arial;
		font-size:0.8em;
		line-height:20px; }
	</style>
	
<script type="text/javascript">

var progressie,balk_ag,balk_vg,balk_tekst,balk_breedte;
var eenheid = 100;
var huidigePositie = 0;
var stop = 75;//het aantal % dat hij moet stoppen
var snelheid = 50//snelheid in miliseconden
	
function wijzigBalk(stap) {

if(!balk_ag) {
progressie   = document.getElementById('progressie');
balk_ag      = document.getElementById('balk_ag');
balk_vg      = document.getElementById('balk_vg');
balk_tekst   = document.getElementById('balk_tekst');
balk_breedte = balk_ag.clientWidth;}

huidigePositie+= stap;
if (huidigePositie <= stop){
	if (huidigePositie > eenheid) huidigePositie = eenheid;

	var width = Math.ceil(balk_breedte * (huidigePositie / eenheid));
	balk_vg.style.width = width + 'px';

	var procent = Math.ceil((huidigePositie / eenheid) *100);
	balk_tekst.innerHTML = procent + '%';
	}
}
function auto() {
if(huidigePositie < eenheid) {
wijzigBalk(1);
setTimeout('auto()',snelheid);}}
</script>
</head> 
<body onLoad="auto()">  <br>  
<div id="progressie">
<div id="balk_ag">
<div id="balk_vg">
<div id="Balk"></div></div>
<div id="balk_tekst">0 %</div></div></div>
</body> 
</html>

Reageren

Inloggen om te reageren