login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[Mootools] Loader

Offline tomie94 - 29/03/2008 20:56 (laatste wijziging 29/03/2008 21:16)
Avatar van tomie94PHP interesse Hallo,

Ik heb de volgende code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Loader - Mootools</title>
  5. <style type="text/css">
  6. .bar {
  7.      width: 70%;
  8.      height: 30px;
  9.      border: 1px solid #000;
  10.      background-color: #A1571E;
  11. }
  12. .bar_loaded_start {
  13.      width: 0%;
  14.      height: 30px;
  15.      background-color: #2A31A1;
  16. }
  17. .bar_loaded_end {
  18.      width: 100%;
  19.      height: 30px;
  20.      background-color: #2A31A1;
  21. }
  22. </style>
  23. <script type="text/javascript" src="mootools.js"></script>
  24. <script type="text/javascript">
  25. Fx.Morph = Fx.Styles.extend({
  26.  
  27. 	start: function(className){
  28.  
  29. 		var to = {};
  30.  
  31. 		$each(document.styleSheets, function(style){
  32. 			var rules = style.rules || style.cssRules;
  33. 			$each(rules, function(rule){
  34. 				if (!rule.selectorText.test('\.' + className + '$')) return;
  35. 				Fx.CSS.Styles.each(function(style){
  36. 					if (!rule.style || !rule.style[style]) return;
  37. 					var ruleStyle = rule.style[style];
  38. 					to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
  39. 				});
  40. 			});
  41. 		});
  42. 		return this.parent(to);
  43. 	}
  44.  
  45. });
  46.  
  47. Fx.CSS.Styles = ["backgroundColor", "backgroundPosition", "color", "width", "height", "left", "top", "bottom", "right", "fontSize", "letterSpacing", "lineHeight", "textIndent", "opacity"];
  48.  
  49. Fx.CSS.Styles.extend(Element.Styles.padding);
  50. Fx.CSS.Styles.extend(Element.Styles.margin);
  51.  
  52. Element.Styles.border.each(function(border){
  53. 	['Width', 'Color'].each(function(property){
  54. 		Fx.CSS.Styles.push(border + property);
  55. 	});
  56. });
  57.  
  58. var myMorph = new Fx.Morph('loader', {wait: false});
  59.  
  60. $('start_loader').addEvent('click', function(e){
  61. 	new Event(e).stop();
  62.  
  63. 	myMorph.start('bar_loaded_end');
  64.  
  65. });
  66.  
  67.  
  68. </script>
  69. </head>
  70. <body>
  71. <div class="bar"><div id="loader" class="bar_loaded_begin"></div></div><br />
  72. <a href="#" id="start_loader">Start Loader</a>
  73. </body>
  74. </html>


nu is de bedoeling dat de loader van hoger wordt. Alleen gebeurd er niks.

Edit

Het probleem is al gevonden. Ik heb nu dir:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Loader - Mootools</title>
  5. <style type="text/css">
  6. .bar {
  7.      width: 100%;
  8.      height: 30px;
  9.      border: 1px solid #000;
  10.      background-color: #A1571E;
  11. }
  12. .bar_loaded_start {
  13.      width: 0%;
  14.      height: 30px;
  15.      background-color: #2A31A1;
  16. }
  17. .bar_loaded_end {
  18.      width: 100%;
  19.      height: 30px;
  20.      background-color: #000;
  21. }
  22. </style>
  23. <script type="text/javascript" src="mootools.js"></script>
  24. <script type="text/javascript">
  25. window.addEvent('domready', function() {
  26.  
  27. Fx.Morph = Fx.Styles.extend({
  28.  
  29. 	start: function(className){
  30.  
  31. 		var to = {};
  32.  
  33. 		$each(document.styleSheets, function(style){
  34. 			var rules = style.rules || style.cssRules;
  35. 			$each(rules, function(rule){
  36. 				if (!rule.selectorText.test('\.' + className + '$')) return;
  37. 				Fx.CSS.Styles.each(function(style){
  38. 					if (!rule.style || !rule.style[style]) return;
  39. 					var ruleStyle = rule.style[style];
  40. 					to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
  41. 				});
  42. 			});
  43. 		});
  44. 		return this.parent(to);
  45. 	}
  46.  
  47. });
  48.  
  49. Fx.CSS.Styles = ["backgroundColor", "backgroundPosition", "color", "width", "height", "left", "top", "bottom", "right", "fontSize", "letterSpacing", "lineHeight", "textIndent", "opacity"];
  50.  
  51. Fx.CSS.Styles.extend(Element.Styles.padding);
  52. Fx.CSS.Styles.extend(Element.Styles.margin);
  53.  
  54. Element.Styles.border.each(function(border){
  55. 	['Width', 'Color'].each(function(property){
  56. 		Fx.CSS.Styles.push(border + property);
  57. 	});
  58. });
  59.  
  60. var myMorph = new Fx.Morph('loader', {wait: false});
  61.  
  62. $('start_loader').addEvent('click', function(e){
  63. 	new Event(e).stop();
  64.  
  65. 	myMorph.start('bar_loaded_end');
  66.  
  67. });
  68. });
  69.  
  70. </script>
  71. </head>
  72. <body>
  73. <div class="bar"><div id="loader" class="bar_loaded_start"></div></div><br />
  74. <a href="#" id="start_loader">Start Loader</a>
  75. </body>
  76. </html>


nu is, als ik op de link klik, de bar zo'n 15% van de lengte van wat hij moet zijn

0 antwoorden

Gesponsorde links
Er zijn nog geen reacties op dit bericht.
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.204s