Dynamically changing the background color of the small control

sponsored links
Dynamically changing the background color of the small control

Style changes can control the position and control the size, you can change the background color parameter to specify the target audience, if not specified, the default background color to change the body.

<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Change the background color of the control  </title>
<style>
<!--
#idContainer{
        position:relative;
        width:100px;
        height:100px;
        border:solid 5px #777777;
}
.outerLyr{
        background-color:red; 
        position: absolute; 
        height:100%; 
        width: 15%; 
        z-index: 1;
        float:left;
        display:inline;
        left:10%;
}
.outerLyr1{
        background-color:green; 
        position: absolute; 
        height:100%; 
        width: 15%; 
        z-index: 1;
        float:left;
        display:inline;
        left:40%;
}
.outerLyr2{
        background-color:blue; 
        position: absolute; 
        height:100%; 
        width: 15%; 
        z-index: 1;
        float:left;
        display:inline;
        left:70%;
}
.drag{
        position:absolute;
        height: 15%; 
        width: 84%; 
        z-index: 3;
        left:8%;
        cursor: hand;
        bottom:0px;
        background:black;
        top:20%;
}
.innerLyr{
        background-color: #777777; 
        position: absolute; 
        height: 98%; 
        width: 84%; 
        z-index: 2;
        text-align:center;
        left:8%;
        top:1%;
}
.barLyr{
        background-color: #000000; 
        position: absolute; 
        height: 90%; 
        width: 10%; 
        z-index: 1;
        top:5%;
}
-->
</style>
</head>
<body>
<div></div>
<div></div>
<script type="text/javascript">
<!--
var cp = new ColorPalette("idContainer", "idObj");
//-->
</script>
</body>
</html>


Insert the following JS code <head>:

<script type="text/javascript">
<!--
var $ = function(id) {
        return "string" == typeof id ? document.getElementById(id) : id;
};
//  Instantiate an object and calls the object's Initialize method  
var Class = {
        create : function() {
                return function() {
                        this.initialize.apply(this, arguments);
                };
        }
};
// Register an event for an object  
var addEventHandler = function(oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
                oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attachEvent) {
                oTarget.attachEvent("on" + sEventType, fnHandler);
        } else {
                oTarget["on" + sEventType] = fnHandler;
        }
};
//  Log off event for an object  
var removeEventHandler = function(oTarget, sEventType, fnHandler) {
    if (oTarget.removeEventListener) {
        oTarget.removeEventListener(sEventType, fnHandler, false);
    } else if (oTarget.detachEvent) {
        oTarget.detachEvent("on" + sEventType, fnHandler);
    } else { 
        oTarget["on" + sEventType] = null;
    }
};
var BindAsEventListener = function(object, fun) {
    return function(event) {
        return fun.call(object, (event || window.event));
    }
};
var Bind = function(object, fun) {
    return function() {
        return fun.apply(object, arguments);
    }
};
var ColorPalette = Class.create();
ColorPalette.prototype = {
        initialize : function(idContainer, idObj) {
                this.container = $(idContainer) || null;
                this.obj = $(idObj) || document.body;
                if (this.container == null) return;
                this.container.style.position = "relative";

                var outerLyr = '<div><div></div><div><div></div></div></div>';
                var outerLyr1 = '<div><div></div><div><div></div></div></div>';
                var outerLyr2 = '<div><div></div><div><div></div></div></div>';
                this.container.innerHTML = outerLyr + outerLyr1 + outerLyr2;

                var rDrag = $("rDrag"), gDrag = $("gDrag"), bDrag = $("bDrag");
                var rOuterLyr = $("rOuterLyr"), gOuterLyr = $("gOuterLyr"), bOuterLyr = $("bOuterLyr");

                this.fM = BindAsEventListener(this, this.move);
                this.fS = Bind(this, this.stop);

                //  Calculates and sets the color values during initialization  
                var rVal = Math.round(rDrag.offsetTop * 255 / (rOuterLyr.offsetHeight - rDrag.offsetHeight));
                var gVal = Math.round(gDrag.offsetTop * 255 / (gOuterLyr.offsetHeight - gDrag.offsetHeight));
                var bVal = Math.round(bDrag.offsetTop * 255 / (bOuterLyr.offsetHeight - bDrag.offsetHeight));
                this.r = this.getHex(rVal);
                this.g = this.getHex(gVal);
                this.b = this.getHex(bVal);
                this.obj.style.backgroundColor = "#" + this.r + this.g + this.b;

                //  Register the event  
                this.drag = rDrag;
                this.outerLyr = rOuterLyr;
                this.flag = 1; //  Tag is to modify the r, g, b values  (1:r;2:g;3:b)
                var oThis = this;
                addEventHandler(rDrag, "mousedown", function(event) {oThis.drag = rDrag; oThis.outerLyr = rOuterLyr; oThis.flag = 1; oThis.start(event || window.event);});
                addEventHandler(gDrag, "mousedown", function(event) {oThis.drag = gDrag; oThis.outerLyr = gOuterLyr; oThis.flag = 2; oThis.start(event || window.event);});
                addEventHandler(bDrag, "mousedown", function(event) {oThis.drag = bDrag; oThis.outerLyr = bOuterLyr; oThis.flag = 3; oThis.start(event || window.event);});
        },
        start : function(oEvent) {
                this.y = this.drag.offsetTop;
                this.yPos = oEvent.clientY;
                this.dragHeight = this.drag.offsetHeight;
                this.outerLyrHeight = this.outerLyr.offsetHeight;
                addEventHandler(document, "mousemove", this.fM);
                addEventHandler(document, "mouseup", this.fS);          
        },
        move : function(oEvent) {
                var iDrag = this.drag, oldY = iDrag.style.pixelTop, iHeight = this.outerLyrHeight - this.dragHeight;
                var iPos = this.y + oEvent.clientY - this.yPos;
                if (iPos > oldY) {
                        this.dir = -1; //  Down  
                } else {
                        this.dir = 1; //  The up  
                }

                if (iPos <= 0 && this.dir == 1) {
                        iDrag.style.pixelTop = 0;
                        this.dir = 1;
                } else if (iPos >= iHeight && this.dir == -1) {
                        iDrag.style.pixelTop = iHeight;
                        this.dir = -1;
                } else {
                        iDrag.style.pixelTop = iPos;
                }

                this.changeColor();
        },
        changeColor : function() {
                var curHeight = this.drag.style.pixelTop, totalHeight = this.outerLyrHeight - this.dragHeight;
                
                var value = Math.round((curHeight * 255) / totalHeight);
                if (this.flag == 1) {
                        this.r = this.getHex(value);
                } else if (this.flag == 2) {
                        this.g = this.getHex(value);
                } else if (this.flag == 3) {
                        this.b = this.getHex(value);
                }
                this.obj.style.backgroundColor = "#" + this.r + this.g + this.b;
        },
        getHex : function(i) {
                if (i < 0) 
                        return "00";
            else if (i > 255) 
                    return "ff";
            else { 
                    var str = "0" + i.toString(16); 
                    return str.substring(str.length - 2); 
                }
        },
        stop : function() {
                removeEventHandler(document, "mousemove", this.fM);
                removeEventHandler(document, "mouseup", this.fS);
        }
};
//-->
</script>
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb
Tags:

Related Posts of Dynamically changing the background color of the small control

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries