login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[JS] "Waarschuwingsbox" (Opgelost)

Offline Esli - 28/10/2009 20:23 (laatste wijziging 28/10/2009 22:50)
Avatar van EsliPHP interesse Hallo,

Ik vermoed dat wat ik zoek hoogstwaarschijnlijk met javascript mogelijk moet zijn.

Ik heb met HTML (en PHP regelt de verwerking) een formulier met tal van opties. Nu bij sommige opties zou ik een soort van waarschuwing wil weergeven. Ik leg het even uit aan de hand van een concreet voorbeeldje.

Stel dat ik volgende HTML-code heb:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.   <option>Uit</option>
  3.   <option>Beide</option>
  4.   <option>Enkel optie 1</option>
  5.   <option>Enkel optie 2</option>
  6.   <option>Beide</option>


Stel dat de gebruiker de optie "Uit" heeft geselecteerd, dan zou ik boven dat veld direct een mooi div willen geven dat deze optie niet is aangereden om de reden: blabla. Als men dan beslist om toch die optie niet te nemen en bv. "Enkel optie 1" selecteert, moet die kader weer weg. Ik zou dit trouwens ook op andere HTML-(input)elementen willen gebruiken (zoals een gewoon text-veld)

Nu, ik heb geen flauw benul hoe dit zou kunnen heten / waar ik dit kan vinden. Ik hoop dus dat iemand weet hoe dit noemt / waar ik dit kan vinden.

Alvast bedankt,
Esli  

10 antwoorden

Gesponsorde links
Offline vinTage - 28/10/2009 20:52
Avatar van vinTage Nieuw lid Als ik je goed begrijp zoek je Google.be: modal dialog
Of snap ik je gewoon niet ? 
Offline Esli - 28/10/2009 21:11 (laatste wijziging 28/10/2009 21:11)
Avatar van Esli PHP interesse Als ik zo even google, denk ik niet dat het dat is wat ik zoek.

http://www.imgd...uitleg.png

Dus als de optie uit is geselecteerd (zonder dat er gepost etc. is) moet dat rode vak verschijnen. Indien het een andere optie is, moet er gewoon niet verschijnen. Tevens moet het rode vlak weer weg gaan als er een andere optie wordt gekozen.
Offline vinTage - 28/10/2009 22:26
Avatar van vinTage Nieuw lid Een knullig voorbeeldje (als ik het nu goed snapte iig) 

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. function test(selectlijstid)
  3. {
  4. 	if(selectlijstid.value == 'Uit')
  5. 	{
  6. 		document.getElementById('roodblok').style.display='block'
  7. 	}
  8. 	else
  9. 	{
  10. 		document.getElementById('roodblok').style.display='none'
  11. 	}
  12. }
  14.  
  15.  
  16. <select id="selectlijst" onchange="test(this)">
  17. <option>Kies iets</option>
  18. <option>Uit</option>
  19. <option>Beide</option>
  20. <option>Enkel optie 1</option>
  21. <option>Enkel optie 2</option>
  22. <option>Beide</option>
  24.  
  25. <div id="roodblok" style="background:#F00; display:none">
  26. blablabla
  27. </div>
Offline Esli - 28/10/2009 22:32 (laatste wijziging 28/10/2009 22:32)
Avatar van Esli PHP interesse Ja, dat bedoel ik :-). Kan het dat dit niet werkt in IE8?

Alvast bedankt trouwens
Offline vinTage - 28/10/2009 22:41 (laatste wijziging 28/10/2009 22:41)
Avatar van vinTage Nieuw lid Oh nog even value geven aan de options

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <option value="Uit">Uit</option>
Offline Esli - 29/10/2009 18:04
Avatar van Esli PHP interesse Dat is het inderdaad, erg bedankt. Nu aanvullend heb ik nog een ander vraagje. Ik heb ook al ooit eens gezien dat het met een "slide-effect" ging. Daarmee bedoel ik dat het dus iets trager gebeurd. Nu is het direct als je "Uit" selecteert BAF, het is er. (Eveneens als je weer veranderd) Het zou wat meer show zijn moest die met enige vertraging in het scherm (langzamer dus) inkomen. Naar wat moet ik dan even googel'n?
Offline vinTage - 29/10/2009 18:10
Avatar van vinTage Nieuw lid Elk js framework heeft dat erin zitten.
Voor jQuery :
http://docs.jquery.com/Effects/show
Offline Esli - 29/10/2009 22:15
Avatar van Esli PHP interesse Ik heb echt al van alles geprobeerd, maar ik moet eerlijk toegeven dat ik niet veel (lees als: niets) van javascript kan... (Is ook het enige wat ik nodig heb)

Kan iemand me dus op weg zetten?
Offline vinTage - 29/10/2009 22:36
Avatar van vinTage Nieuw lid met een framework hoef je imo niks te kunnen....
Offline Esli - 30/10/2009 18:18
Avatar van Esli PHP interesse Intussen heeft iemand op een andere community (ML, Tim) een scriptje voor me gemaakt. Ik wil het toch ook even delen met jullie:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 		<title>Selectbox</title>
  6.  
  7. 		<style type="text/css">
  8. 			Body
  9. 				{
  10. 					font: 9pt "Segoe UI";
  11. 				}
  12. 		</style>
  13.  
  14. 		<script type="text/javascript">
  15. 			doCheck = function(Obj)
  16. 				{
  17. 					var Warning = document.getElementById(Obj.id+':warning');
  18.  
  19. 					if(typeof(Warning.style.opacity) == 'undefined' || Warning.style.opacity == '')
  20. 						{
  21. 							Warning.style.filter	= 'alpha(opacity=0)';
  22. 							Warning.style.opacity	= 0;
  23. 						}
  24.  
  25. 					if(Warning.style.display != 'none' || !Obj.selectedIndex)
  26. 						{
  27. 							clearTimeout(Warning.Interval);
  28. 							Warning.style.display = '';
  29. 							Warning.Interval = setInterval("doOpacity('"+Obj.id+"', "+(!Obj.selectedIndex ? 1 : -1)+")", 50);
  30. 						}
  31. 				}
  32.  
  33. 			doOpacity = function(ID, Wat)
  34. 				{
  35. 					var Warning	= document.getElementById(ID+':warning');
  36. 					var Huidig	= (Warning.style.opacity * 10 + Wat) * 10;
  37.  
  38. 					Warning.style.filter			= 'alpha(opacity=' + Huidig + ')';
  39. 					Warning.style.opacity			= Huidig / 100;
  40.  
  41. 					if(Huidig <= 0 || Huidig >= 100)
  42. 						{
  43. 							clearInterval(Warning.Interval);
  44. 							if(!Huidig)
  45. 								Warning.style.display = 'none';
  46. 						}
  47. 				}
  48. 		</script>
  49. 	</head>
  50.  
  51. 	<body>
  52.  
  53. 		<select onchange="doCheck(this);" id="selectbox"> 
  54. 		  <option>Uit</option> 
  55. 		  <option selected="selected">Beide</option> 
  56. 		  <option>Enkel optie 1</option> 
  57. 		  <option>Enkel optie 2</option> 
  58. 		  <option>Beide</option> 
  59. 		</select>
  60.  
  61. 		<div id="selectbox:warning" style="display: none; margin-top: 10px; padding: 5px; background-color: #FFC4C4; border: 1px solid; color: #CC0000;">Deze optie is niet aanbevolen</div>
  62.  
  63. 		<br /><br />
  64.  
  65. 		<script type="text/javascript">	
  66. 		 	doCheck(document.getElementById('selectbox'));
  67. 			// checken op moment van laden ivm autocomplete reload
  68. 		</script>
  69.  
  70. 		<select onchange="doCheck(this);" id="selectbox-nummero2"> 
  71. 		  <option>Uit</option> 
  72. 		  <option selected="selected">Beide</option> 
  73. 		  <option>Enkel optie 1</option> 
  74. 		  <option>Enkel optie 2</option> 
  75. 		  <option>Beide</option> 
  76. 		</select>
  77.  
  78. 		<div id="selectbox-nummero2:warning" style="display: none; margin-top: 10px; padding: 5px; background-color: #B7DBFF; border: 1px solid; color: #06C;">Je hebt deze optie geselecteerd, maar dat kan je beter niet doen, anders kom ik je achterna en sla ik je :')</div>
  79.  
  80. 		<script type="text/javascript">	
  81. 		 	doCheck(document.getElementById('selectbox-nummero2'));
  82. 			// checken op moment van laden ivm autocomplete reload
  83. 		</script>
  84.  
  85. 	</body>
  86. </html>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.201s