Dynamically changing the background color of the small control

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

  • Dynamically change the background color of the small control

    Dynamically change the background color of the small control Style changes can control the location and control the size, you can specify parameters to change the background color of the target audience, if not specified, the default body to change t ...

  • ndroid use or ImageViewButton selector dynamically change the background imageView

    Make application, may need to dynamically change the control's background image, if only a simple click, selected by events, so if the program writes the code listening becomes too much trouble, in this case, you can dynamically changing backgrou

  • android using selector dynamically changing background imageView or ImageViewButton

    Make application, you may need to dynamically change the control's background image, if only a simple click, select the type of event, so if the program code to write listening becomes too much trouble, and in this case, you can selector controls the

  • Table background color changing

    Forms the background color is colorless, and when reading data in tabular form, the background color into black, while in the sub-browser specific, when a certain piece of data, which the background color is green. Very interesting ~ To accomplish th ...

  • the use of android or ImageViewButton selector dynamically change the background imageView

    Do apply, you may need to dynamically change the background image control, if only a simple click, select the type of event, so if the program code to write monitor becomes too much trouble, in this case, you can Dynamic changes in the control background

  • How to modify the background color of the window under Ext.Msg .*

    Just need to find in the ext-all.css body.x-body-masked .x-window-plain .x-window-mc { background-color: #ffffff;// In this changing color } Then OK How refreshing background has too much of a change

  • Div + CSS rules of order of 4 - Background background of some of the syntax ~ [update]

    15, some grammar background background background-image: url (background pattern. jpg, gif, bmp); background-color: # FFFFFF; (background color) background-color: transparent; <- set the background for the transparent color -> background-repeat ...

  • Android List Background and item Background

    To make ListVIew more attractive, we can set the background color and Item his background color, the adapter getView () set the background color, to use the view.setBackgroundColor (getRsoures (). GetColor (R.id.color.XXX )) to set the color, if used

  • CSS background. Text. Fonts

    CSS Background CSS allows application of a solid color as the background, but also allows the use of a background image to create complex effects. CSS in this capacity is far above the HTML. Background color Background-color attribute can be used to set t

  • Change picture background

    First time I wrote this program is to set the image after the background color, not knowing how stupid he is, only the picture as a background color as, how to set the background color pictures? ? ? Is set the background color, the color of their ima

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