Mam sobie taki kod jak poniżej, 3linki zmieniają kolor diva na biały, szary lub czarny.
Przy zmianie zapisywane jest ciastko z kolorem.
Problem w tym, ze po odświeżeniu wszystko się resetuje, tak jakby nie czytało stanu ciastka.

Co jest nie tak w tym kodzie?
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  
  4. <style type="text/css">
  5. .white  {
  6. 	background-color:#FFFFFF;
  7. 	color:#333333;
  8. }
  9. .grey {
  10. 	background-color:#999999;
  11. 	color:#FFFFFF;
  12. }
  13. .black {
  14. 	background-color:#333333;
  15. 	color:#FFFFFF;
  16. }
  17. </style>
  18.  
  19. <script type="text/javascript"  src="mootools.js"></script>
  20. <!-- mootools script: http://files-upload.com/files/612093/mootools.js -->
  21.  
  22. <script type="text/javascript">
  23. window.addEvent('domready', function(){
  24.  
  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. Fx.CSS.Styles = ["backgroundColor", "backgroundPosition", "color", "width", "height", "left", "top", "bottom", "right", "fontSize", "letterSpacing", "lineHeight", "textIndent", "opacity"];
  47.  
  48. Fx.CSS.Styles.extend(Element.Styles.padding);
  49. Fx.CSS.Styles.extend(Element.Styles.margin);
  50.  
  51. Element.Styles.border.each(function(border){
  52. 	['Width', 'Color'].each(function(property){
  53. 		Fx.CSS.Styles.push(border + property);
  54. 	});
  55. });
  56.  
  57. var myMorph = new Fx.Morph('container', {wait: false});
  58.  
  59. $('white').addEvent('click', function(e){
  60. 	new Event(e).stop();
  61.  
  62. 	myMorph.start('white');
  63. 	Cookie.set("style", "white", {duration: 15});
  64. });	
  65.  
  66. $('grey').addEvent('click', function(e){
  67. 	new Event(e).stop();
  68.  
  69. 	myMorph.start('grey');
  70. 	Cookie.set("style", "grey", {duration: 15});
  71. });	
  72.  
  73. $('black').addEvent('click', function(e){
  74. 	new Event(e).stop();
  75.  
  76. 	myMorph.start('black');
  77. 	Cookie.set("style", "black", {duration: 15});
  78. });	
  79.  
  80. if(Cookie.get("style") == "black"){
  81. 	myMorph.set('black');
  82. 	}else if(Cookie.get("style") == "grey"){
  83. 	myMorph.set('grey');
  84. 	}else{	
  85. 	myMorph.set('white');
  86. 	} 
  87.  
  88. });
  89. </script>
  90.  
  91. </head>
  92. <body>
  93.  
  94. <div id="container" class="widthwide">
  95.  
  96. <ul style="list-style-type: none;">
  97. <li style="display:inline;"><a href="#" id="white" name="white">white</a></li> 
  98. <li style="display:inline;"><a href="#" id="grey" name="grey">grey</a></li> 
  99. <li style="display:inline;"><a href="#" id="black" name="black">black</a></li> 
  100. </ul>
  101.  
  102. </div>
  103.  
  104. </body>
  105. </html>
[HTML] pobierz, plaintext


-----------------------------
---- UPDATE ------------------
---------------------------------------------------------------------------------------------

Tylko częściowo rozwiązałęm problem. Dałem myMorph.start() zamiast myMorph.set()
działa jednak tylko dla jednego wywołania (jedno ciastko - jedno wywołąnie myMorph.start() )
-czyli np. tylko do obsługi koloru.

Gdy jednak kod rozszerzę o obsługe np. rozmiaru czcioki (tu klasa fontsmall)
...zapiszę drugie ciacho i dodam jeszcze jedno wywołanie myMorph.start() pojawia się znowu problem.
-oto klikam na link fontsmall -ok zmienia rozmiar fontu, klikam na black -zmienia kolor tła, daję odśwież
...i tło się resetuje a czcionka jest ok bo jak powinna zminimalizowana.

Wniosek, przy kilkukrotnym wywołaniu myMorph.start() zastosowane są tylko zmiany z ostatniego
czyli np. dla:
myMorph.start('fontsmall');
myMorph.start('black');

zostanie tylko tło zmienione na czarne, a czcionka pozostanie niezmieniona.

Co i jak zmienić by rozwiązać ten problem?

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  
  4. <style type="text/css">
  5. .white  {
  6. 	background-color:#FFFFFF;
  7. 	color:#333333;
  8. }
  9. .grey {
  10. 	background-color:#999999;
  11. 	color:#FFFFFF;
  12. }
  13. .black {
  14. 	background-color:#333333;
  15. 	color:#FFFFFF;
  16. }
  17.  
  18. .fontsmall {
  19. 	font-size: 10px;
  20. }
  21. </style>
  22.  
  23. <script type="text/javascript"  src="mootools.js"></script>
  24. <!-- mootools script: http://files-upload.com/files/612093/mootools.js -->
  25.  
  26. <script type="text/javascript">
  27. window.addEvent('domready', function(){
  28.  
  29. Fx.Morph = Fx.Styles.extend({
  30.  
  31. 	start: function(className){
  32.  
  33. 		var to = {};
  34.  
  35. 		$each(document.styleSheets, function(style){
  36. 			var rules = style.rules || style.cssRules;
  37. 			$each(rules, function(rule){
  38. 				if (!rule.selectorText.test('\.' + className + '$')) return;
  39. 				Fx.CSS.Styles.each(function(style){
  40. 					if (!rule.style || !rule.style[style]) return;
  41. 					var ruleStyle = rule.style[style];
  42. 					to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
  43. 				});
  44. 			});
  45. 		});
  46. 		return this.parent(to);
  47. 	}
  48. });
  49.  
  50. Fx.CSS.Styles = ["backgroundColor", "backgroundPosition", "color", "width", "height", "left", "top", "bottom", "right", "fontSize", "letterSpacing", "lineHeight", "textIndent", "opacity"];
  51.  
  52. Fx.CSS.Styles.extend(Element.Styles.padding);
  53. Fx.CSS.Styles.extend(Element.Styles.margin);
  54.  
  55. Element.Styles.border.each(function(border){
  56. 	['Width', 'Color'].each(function(property){
  57. 		Fx.CSS.Styles.push(border + property);
  58. 	});
  59. });
  60.  
  61. var myMorph = new Fx.Morph('container', {wait: false});
  62.  
  63. $('white').addEvent('click', function(e){
  64. 	new Event(e).stop();
  65.  
  66. 	myMorph.start('white');
  67. 	Cookie.set("style1", "white", {duration: 15});
  68. });	
  69.  
  70. $('grey').addEvent('click', function(e){
  71. 	new Event(e).stop();
  72.  
  73. 	myMorph.start('grey');
  74. 	Cookie.set("style1", "grey", {duration: 15});
  75. });	
  76.  
  77. $('black').addEvent('click', function(e){
  78. 	new Event(e).stop();
  79.  
  80. 	myMorph.start('black');
  81. 	Cookie.set("style1", "black", {duration: 15});
  82. });	
  83.  
  84.  
  85. $('fontsmall').addEvent('click', function(e){
  86. 	new Event(e).stop();
  87.  
  88. 	myMorph.start('fontsmall');
  89. 	Cookie.set("style2", "fontsmall", {duration: 15});
  90. });	
  91.  
  92. s1=Cookie.get("style1");
  93. s2=Cookie.get("style2");
  94.  
  95. myMorph.start(s1);
  96. myMorph.start(s2);
  97.  
  98. tekst=document.getElementById("tekst");
  99. tekst.innerHTML='style1:'+s1+' style2:'+s2;
  100.  
  101. });
  102. </script>
  103.  
  104. </head>
  105. <body>
  106.  
  107. <div id="container" class="widthwide">
  108.  
  109. <ul style="list-style-type: none;">
  110. <li style="display:inline;"><a href="#" id="white" name="white">white</a></li> 
  111. <li style="display:inline;"><a href="#" id="grey" name="grey">grey</a></li> 
  112. <li style="display:inline;"><a href="#" id="black" name="black">black</a></li>
  113. <li style="display:inline;"><a href="#" id="fontsmall" name="black">fontsmall</a></li> 
  114. </ul>
  115.  
  116. </div>
  117.  
  118. <span id="tekst"></span>
  119.  
  120. </body>
  121. </html>
[HTML] pobierz, plaintext