Change div color on click event
Change div color after click on a link or button.
Index.html
You can change color of click color box
Screen :
For Demo Click Here
Index.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> | |
| <!--This example for convert all site div color and not change even if refresh the page--> | |
| <script> | |
| function getCookie(c_name) | |
| { | |
| var c_value = document.cookie; | |
| var c_start = c_value.indexOf(" " + c_name + "="); | |
| if (c_start == -1) | |
| { | |
| c_start = c_value.indexOf(c_name + "="); | |
| } | |
| if (c_start == -1) | |
| { | |
| c_value = null; | |
| } | |
| else | |
| { | |
| c_start = c_value.indexOf("=", c_start) + 1; | |
| var c_end = c_value.indexOf(";", c_start); | |
| if (c_end == -1) | |
| { | |
| c_end = c_value.length; | |
| } | |
| c_value = unescape(c_value.substring(c_start,c_end)); | |
| } | |
| return c_value; | |
| } | |
| function setCookie(c_name,value,exdays) | |
| { | |
| var exdate=new Date(); | |
| exdate.setDate(exdate.getDate() + exdays); | |
| var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); | |
| document.cookie=c_name + "=" + c_value; | |
| } | |
| function addRedColor() | |
| { | |
| var CookieValue="Red"; | |
| $('.temp').css('background-color', 'Red'); | |
| setCookie("FunctionName",CookieValue,1); | |
| } | |
| function addPurpleColor() | |
| { | |
| var CookieValue="purple"; | |
| $('.temp').css('background-color', 'purple'); | |
| setCookie("FunctionName",CookieValue,1); | |
| } | |
| function addBlackColor() | |
| { | |
| var CookieValue="black"; | |
| $('.temp').css('background-color', 'black'); | |
| setCookie("FunctionName",CookieValue,1); | |
| } | |
| function OnBodyLoad() | |
| { | |
| var CookieValue=getCookie("FunctionName"); | |
| $('.temp').css('background-color', CookieValue); | |
| } | |
| </script> | |
| <body onLoad="OnBodyLoad();"> | |
| <div style="clear:both;height:10px;"></div> | |
| <div style="background:red;float:left;width:20px; height:20px;margin-right:10px;"> | |
| <a href="javascript: return false;" onClick="addRedColor()" title="Red"> | |
| <img src="images/color-red.jpg" height="10" width="10" /> | |
| </a> | |
| </div> | |
| <div style="background:purple;float:left;width:20px; height:20px;margin-right:10px;"> | |
| <a href="javascript: return false;" onClick="addPurpleColor()" title="Red"> | |
| <img src="images/color-purple.jpg" height="10" width="10" /> | |
| </a> | |
| </div> | |
| <div style="background:black;float:left;width:20px; height:20px;margin-right:10px;"> | |
| <a href="javascript: return false;" onClick="addBlackColor()" title="Red"> | |
| <img src="images/color-black.jpg" height="10" width="10" /> | |
| </a> | |
| </div> | |
| <!--END : Click On Images Event--> | |
| <div style="clear:both;height:10px;"></div> | |
| <div id="dd1" style="background:#CCCCCC; width:200px; height:200px; float:left; margin-right:10px;" class="temp"> | |
| DIV 1 | |
| </div> | |
| <div id="dd2" style="background:#CCCCCC; width:200px; height:200px; float:left; margin-right:10px;" class="temp"> | |
| DIV 2 | |
| </div> | |
| <div id="dd3" style="background:#CCCCCC; width:200px; height:200px; float:left; margin-right:10px;" class="temp"> | |
| DIV 3 | |
| </div> | |
| <div id="dd4" style="background:#CCCCCC; width:200px; height:200px; float:left; margin-right:10px;" class="temp"> | |
| DIV 4 | |
| </div> | |
| </body> |
You can change color of click color box
Screen :
Comments
Post a Comment