login  Naam:   Wachtwoord: 
Registreer je!
 Forum

vervormingsfunctie werkt niet

Offline anton - 12/05/2010 19:36
Avatar van antonLid hey allen,

wegens plaatsgebrek op een pagina heb ik een div gemaakt waar in ongeopende toestand een woord instaat, wanneer er op dat woord geklikt word echter, moet die div vergroten, natuurlijk kan dit door gewoon de width en de height te veranderen, maar als dat zo in een schok is is dat niet echt mooi. Ik heb dus een functie gemaakt, waarmee ik het effect van "openglijden" wou bereiken.

De uitleg is simpel, de width en height steeds met 1px verhogen tot de gewenste hoogte, en dan de left positioning steeds 1tje verlagen. Zo simpel is het in de praktijk dus blijkbaar niet want het werkt niet, en ik heb geen idee hoe.

Ik hoopte hier misschien hulp te vinden.

de css code van de div gaat als volgt:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #vergroting{
  2. 	position:absolute;
  3. 	top:286px;
  4. 	left:48px;
  5. 	width: 125px;
  6. 	height: 58px;
  7. 	background: #0070c0;
  8. 	border: 2px solid #000;
  9. 	z-index: 0;
  10. }


en de functie in javascript:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function morph(id)
  2. 	{
  3. 		var x = document.getElementById(id);
  4. 		var z = x.offsetLeft;
  5. 		for(y = x.offsetWidth; y < 201; y++){
  6. 			x.style.width = y;
  7. 			x.style.left = z - 1;
  8. 		}
  9. 		for(v = x.offsetHeight; v < 101; z++){
  10. 			x.style.height = v + 1;
  11. 		}
  12. 	}


op voorhand al bedankt!

MVG
Anton Vandeghinste

6 antwoorden

Gesponsorde links
Offline Erwt - 12/05/2010 20:43
Avatar van Erwt PHP beginner Je javascript zal uitgevoerd worden binnen een tiende van een seconde, hoe wil je daar een 'effect' uit krijgen?

Bedoel je niet setTimeout / setInterval?
Offline anton - 12/05/2010 22:54
Avatar van anton Lid waarschijnlijk bedoel ik dat , het zou open moeten glijden maar ik kreeg mijn id niet doorgegeven, ik deed als volgt:

setTimeout("morph("+id+")", 1);

maar dat werkte niet...:s
Offline vinTage - 12/05/2010 23:26
Avatar van vinTage Nieuw lid met:
setTimeout("morph("+id+")", 1);

is id undefined ofzo he 

je "tijd" param in setTimeout is trouwens een 1000ste seconde, dat is vast te snel 
Offline anton - 12/05/2010 23:31 (laatste wijziging 12/05/2010 23:33)
Avatar van anton Lid ik wist dat het in 1000ste seconde was ;) als het te snel was vertraag ik het gewoon maar het is toch nied undefined, de functie morph krijgt het id he, en dat gebruik ik dan...???

dan zou het worden:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function morph(id)	{	
  2. 	var x = document.getElementById(id);	
  3. 	var z = x.offsetLeft;
  4. 	for(y = x.offsetWidth; y < 201; y++){	
  5. 		x.style.width = y;
  6. 	x.style.left = z - 1;
  7. 		}
  8. 	for(v = x.offsetHeight; v < 101; z++){
  9. 		x.style.height = v + 1;
  10. 	}
  11.              setTimeout("morph("+ id +")", 1);
  12. 	}


en dat werkte niet bij mij 
Offline vinTage - 12/05/2010 23:43
Avatar van vinTage Nieuw lid zo is het wel goed ja, maar die setTimeout stond niet in je eerste code blok.
ik ging er dus vanuit dat die "zomaar" elders gebruikt werd .
Offline anton - 13/05/2010 00:08
Avatar van anton Lid ok, ondertussen had ik zelf dus al een andere oplossing ontdekt, maar daar is weer een ander probleem met chrome,...

var z = x.offsetLeft;
x.style.left = z - 1;

die twee regeltjes zorgen ervoor dat de div verbreed naar lings toe en niet naar rechts, maar in chrome schuift hij wel op naar links, maar nog steeds meer dan de helft van de div staat naar rechts, wat tot een heel lelijk eindresultaat leid...

code:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function morph(id)
  2. 	{
  3. 		var x = document.getElementById('vergroting');
  4. 		var z = x.offsetLeft;
  5. 		var y = x.offsetWidth;
  6. 		var v = x.offsetHeight;
  7. 		if(y < 401){
  8. 			x.style.width = y + 1;
  9. 			x.style.left = z - 1;
  10. 			if(v < 101){
  11. 				x.style.height = v + 1;
  12. 			}
  13. 		}
  14. 		setTimeout("morph('vergroting')", 1);
  15. 	}


ik snap de browsers toch niet meer hoor 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.206s