pauze in lus

Status
Niet open voor verdere reacties.
phobia

phobia

Terugkerende gebruiker
Lid geworden
4 sep 2006
Berichten
1.777
Ik probeer de hoogte en breedte van een textvlak in stappen te vergroten

Code: 
<HTML>
<HEAD>
 <TITLE>Cursus HTML - IVO Brugge</TITLE>
 <LINK href="../../vb.css" rel="stylesheet" type="text/css">
 <script type="text/javascript">
<!--
x=100;
y=21;
	function wait(){
		teller = 0;
		while(teller<1000){
		teller++;
		}
		return
		}

	function bereken(){
	while(x<300){
		
		document.getElementById('id').style.width= x;
		wait()
		x++}

	while(y<50){
		
		document.getElementById('id').style.height= y;
		wait()	
		y++}
		}


// -->
</script>
</HEAD>
<BODY>

<h1>Toepassing DOM 0</h1>
<form name="f">
<table>
<tr>
       <td>Getal 1: </td>
       <td><input name="g1" type="text" value="10"></td>
</tr>
<tr>
       <td>Getal 2: </td>
       <td><input name="g2" type="text" value="50"></td>
</tr>
<tr>
       <td>Som: </td>
       <td>
	   		<input id="id" type="text" value="tes" style="width: 100px; height: 21px;">
			<input type="button" value="Maak product" onclick="bereken()">
	   </td>
</tr>
</table>
</form>
</BODY>
</HTML>

Maar hiermee wordt er de eerst keer gewacht en daarna loopt hij helijk door naar de eind waarde van de x en de y

hoe moet ik dit oplossen. ik ben nog maar een beginner in de java.

ik heb ook gekeken naar setTimeout maar dat werk ook niet volgens mij.
 
Waarom zou je dat ook op deze manier doen?

Je kunt de functie beter steeds opnieuw aanroepen:

[JS]

var x = 300;
var y = 50;
var inc = 10;

function bereken() {
var obj = document.getElementById( 'id' );
var againx, againy;
if ( obj.style.width < x ) {
obj.style.width += inc;
againx = true;
}
if ( obj.style.height < y ) {
obj.style.height += inc;
againy = true;
}

if ( againx || againy ) {
setTimeout ( 'bereken()', 50 );
}

}
[/JS]
 
haha omdat ik hier in ook een newbee ben.

maar ik zal hiermee eens gaan stoeien!

thnx
 
Bij nader inzien, de code die ik gaf werkt ook niet ;)

[JS]
function bereken() {
var obj = document.getElementById( 'id' );
var againx, againy;
var width = parseInt(obj.style.width);
var height = parseInt(obj.style.height);
if ( width < x ) {
obj.style.width = width + inc + 'px';
againx = true;
}
if ( height < y ) {
obj.style.height = height + inc + 'px';
againy = true;
}

if ( againx || againy ) {
setTimeout ( 'bereken()', 50 );
}

}
[/JS]

die wel.
 
het werkt alleen niet!

Code: 
<HTML>
<HEAD>
 <TITLE>Cursus HTML - IVO Brugge</TITLE>
 <LINK href="../../vb.css" rel="stylesheet" type="text/css">
 <script type="text/javascript">

var x = 300;
var y = 50;
var inc = 10;
 
function bereken() {
  var obj = document.getElementById( 'id' );
  var againx, againy;
  if ( obj.style.width < x ) {
    obj.style.width += inc;
    againx = true;
  }
  if ( obj.style.height < y ) {
    obj.style.height += inc;
    againy = true;
  }
 
  if ( againx || againy ) {
    setTimeout ( 'bereken()', 500 );
  }
 
}

</script>
</HEAD>
<BODY>

<h1>Toepassing DOM 0</h1>
<form name="f">
<table>
<tr>
       <td>Getal 1: </td>
       <td><input name="g1" type="text" value="10"></td>
</tr>
<tr>
       <td>Getal 2: </td>
       <td><input name="g2" type="text" value="50"></td>
</tr>
<tr>
       <td>Som: </td>
       <td>
	   		<input id="id" type="text" value="tes" style="width: 100px; height: 21px;">
			<input type="button" value="Maak product" onclick="bereken()">
	   </td>
</tr>
</table>
</form>
</BODY>
</HTML>
 
Ik heb net een nieuwe code gepost om aan te geven dat het niet werkt.
 
Een kleine verbetering:
[JS] setTimeout ( 'bereken()', 50 );[/JS]
Klik om te vergroten...
setTimeout neemt als 1e parameter geen string, maar een functie. Je moet er dit van maken:
[JS] setTimeout ( bereken, 50 );[/JS]
Een string gebruiken werkt wel, maar is niet 'correct'.


:thumb:
 
maar hoe kan ik die DIV dan eerst vullen met de info die ik wil.
Ik wil dit info opslaan in een php.

Eigenlijk wil ik die DIV dynamisch maken.

Ik probeer het zo, maar dat werkt niet echt!
Code: 
<HTML>
<HEAD>
 <TITLE>Cursus HTML - IVO Brugge</TITLE>
<style type="text/css">
.style1 {

		filter: alpha(opacity=70); // IE syntax 
			-moz-opacity: .70; // Mozilla 
			opacity: .70; // De rest;
		text-align: center;
}
</style>
 <script type="text/javascript">
var x = 500;
var y = 180;
var inc = 10;
 
function bereken() {
		var x = new getObj('id');
		x.obj.innerHTML = '<? include ("test4.php"); ?>';

	var obj = document.getElementById( 'id' );
  obj.style.visibility='visible';
  var againx, againy;
  var width = parseInt(obj.style.width);
  var height = parseInt(obj.style.height);
  if ( width < x ) {
    obj.style.width = width + inc + 'px';
    againx = true;
  }
  if ( height < y ) {
    obj.style.height = height + inc + 'px';
    againy = true;
  }
 
  if ( againx || againy ) {
    setTimeout ( bereken(), 30 );
  }
 
}
</script>
</HEAD>
<BODY>

<h1>Toepassing DOM 0</h1>
<form name="f">
<table>
<tr>
       <td>Getal 1: </td>
       <td><input name="g1" type="text" value="10"></td>
</tr>
<tr>
       <td>Getal 2: </td>
       <td><input name="g2" type="text" value="50"></td>
</tr>
<tr>
       <td>Som: </td>
       <td>
	   		<input type="text" value="tes" style="width: 100px; height: 21px;">
			<input type="button" value="Maak product" onclick="bereken()">
	   </td>
</tr>
</table>
</form>
<div class="style1" style="position: absolute;  visibility: hidden; background-color: gray; width: 34px; height: 22px; z-index: 1; left: 10px; top: 50px;" id="id">

</div>
</BODY>
</HTML>

en de PHP is als volgt:
PHP: 
	<table style="width: 52%; height: 178px" align="right">
		<tbody class="style1" >
			<tr>
				<td class="style2">Test kijken of dit werkt</td>
			</tr>
			<tr>
				<td class="style3">Ziet er wel leuk uit zo</td>
			</tr>
			<tr>
				<td class="style4"><strong><span class="style5">Leren vandaag 
				ook nog iets!!!</span></strong></td>
			</tr>
	</table>
 
Maak van:

[JS]var x = new getObj('id');
x.obj.innerHTML = '<? include ("test4.php"); ?>';
[/JS]

eens

[JS]
document.getElementById( 'id' ).innerHTML = '<?php include ( 'test4.php' ); ?>';
[/JS]

en zet het búíten je functie.

[EDIT]
Ik zie nu dat je helemaal geen textarea meer hebt, en daardoor geen element meer met id="id" ... Logisch dat het dan niet werkt...
[/EDIT]

[EDIT]
Oeps, niet goed gekeken ;)
[/EDIT]
 
Laatst bewerkt:
??? buiten de functie?

waar ik naar toe aan het werken ben, is dat als ik op de knop klik
dat een de Div veranderd word naar de Div die ik met het klikken bepaal

of moet ik eerst een functie maken die de Div verandert en aan het einde van die functie de
functie die nu onder de knop zit?
 
Als je dat stuk binnen de functie laat staan, krijgt de div bij elke functie aanroep die inhoud, lijkt me totaal onnodig, maar bij nader inzien is buiten de functie ook niet handig, want dan is de div nog niet geladen.

Als je wilt dat de inhoud van test4.php de inhoud van de div is, dan moet je die include binnen de div zelf, niet in het javascript.
 
misschien maak dit mijn wens maar duidelijk.

Code: 
<HTML>
<HEAD>
 <TITLE>Cursus HTML - IVO Brugge</TITLE>
<style type="text/css">
.style1 {

		filter: alpha(opacity=70); // IE syntax 
			-moz-opacity: .70; // Mozilla 
			opacity: .70; // De rest;
		text-align: center;
}
</style>
 <script type="text/javascript">
 
function fillDiv(include)
{
document.getElementById( 'id' ).innerHTML  = '<?php include ( ?>'include'<? ); ?>';
bereken();
}
 
var x = 500;
var y = 180;
var inc = 10;
 
function bereken() {
	var obj = document.getElementById( 'id' );
  obj.style.visibility='visible';
  var againx, againy;
  var width = parseInt(obj.style.width);
  var height = parseInt(obj.style.height);
  if ( width < x ) {
    obj.style.width = width + inc + 'px';
    againx = true;
  }
  if ( height < y ) {
    obj.style.height = height + inc + 'px';
    againy = true;
  }
 
  if ( againx || againy ) {
    setTimeout ( bereken(), 30 );
  }
 
}
</script>
</HEAD>
<BODY>

<h1>Toepassing DOM 0</h1>
<form name="f">
<table>
<tr>
       <td>Getal 1: </td>
       <td><input name="g1" type="text" value="10"></td>
</tr>
<tr>
       <td>Getal 2: </td>
       <td><input name="g2" type="text" value="50"></td>
</tr>
<tr>
       <td>Som: </td>
       <td>
	   		<input type="text" value="tes" style="width: 100px; height: 21px;">
			<input type="button" value="test4.php" onclick="fillDiv('test4.php')">
			<input type="button" value="test5.php" onclick="fillDiv('test5.php')">
	   </td>
</tr>
</table>
</form>
<div class="style1" style="position: absolute;  visibility: hidden; background-color: gray; width: 34px; height: 22px; z-index: 1; left: 10px; top: 50px;" id="id">

</div>
</BODY>
</HTML>
 
Dit kan in ieder geval niet:

[JS]function fillDiv(include)
{
document.getElementById( 'id' ).innerHTML = '<?php include ( ?>'include'<? ); ?>';
bereken();
}
[/JS]

De include moet namelijk al bij het laden van de pagina gedaan worden.

Je kunt wel met een xmlHttpRequest werken, maar ik zie niet in wat dat nog met je oorspronkelijke vraag te maken heeft...
 
euhm, met de de begin vraag nix meer.

Dan ff laatste vraag, om de DIV weer te verkleinen.

zo?
Code: 
var x = 500;
var y = 180;
var inc = 10;
var z = 0;


function sluiten(){
	var obj = document.getElementById( 'id' );
  var againx, againy;
  var width = parseInt(obj.style.width);
  var height = parseInt(obj.style.height);
  if ( width > z ) {
    obj.style.width = width - inc +'px';
    againx = true;
  }
  if ( height > z ) {
    obj.style.height = height - inc+ 'px';
    againy = true;
  }
 
  if ( againx || againy ) {
    setTimeout ( sluiten(), 30 );
  }
  obj.style.visibility='hidden';
}
 
Laatst bewerkt:
Euhm, ten eerste wordt de div nu 0x0 px. Of als deze in het begin een breedte en/of hoogte had die geen veelvoud is van 10, zal de grootte zelfs negatief worden. :rolleyes:

[JS]
obj.style.width = width - inc - 'px';
[/JS]

zou moeten zijn:

[JS]
obj.style.width = width - inc + 'px';
[/JS]

Maar je zet in het einde van de functie je visibility op hidden.

Dan kun je ook alleen:

[JS]
function sluiten() {
document.getElementById( 'id' ).style.visibility = "hidden";
// of
document.getElementById( 'id' ).style.display = "none";
}
[/JS]

gebruiken. Bij de eerste van de regels blijft de "ruimte" van de div wel in gebruik, bij de tweede niet, daar merk je niets meer van de aanwezigheid van de div.
 
ik heb het voor elkaar.
Code: 
 <script type="text/javascript">
var x = 500;
var y = 180;
var inc = 10;
var z = 0;
function openen() {
	
	var obj = document.getElementById( 'id' );
  obj.style.visibility='visible';
  var againx, againy;
  var width = parseInt(obj.style.width);
  var height = parseInt(obj.style.height);
  if ( width < x ) {
    obj.style.width = width + inc + 'px';
    againx = true;
  }
  if ( height < y ) {
    obj.style.height = height + inc + 'px';
    againy = true;
  }
 
  if ( againx || againy ) {
    setTimeout ( 'openen()', 30 );
  }
}

function sluiten() {
	
	var obj = document.getElementById( 'id' );
  var againx, againy;
  var width = parseInt(obj.style.width);
  var height = parseInt(obj.style.height);
  if ( width > z ) {
    obj.style.width = width - inc + 'px';
    againx = true;
  }
  if ( height > z ) {
    obj.style.height = height - inc + 'px';
    againy = true;
  }
 
  if ( againx || againy ) {
    setTimeout ( 'sluiten()', 30 );
	  }
  else
  {
document.getElementById( 'id' ).style.display = "none";
}
}
</script>

Nu alleen nog maken dat ik het met 1 knop kan doen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan