...

View Full Version : Floating Background and Text color edit Interface



BlakeE
05-25-2012, 07:21 AM
There is input box where you enter the Id of what you want to change.
then can use buttons to change Hue sateration and Light/darkness
will also return Hex color for copy and paste
i made this to make it easy to test color schems on my pages.

With this code you can copy the Html Body part and past to the bottom of the page to be edited and point to the js and css file.

Sorry non Fire Fox users this isnt a customer end script so i didnt acomadate for other browsers.

JavaScript:

function init(){

killMovers();
}


function fadeOut(obj){
if (!obj.style.opacity){obj.style.opacit=1;} // if no value to opacity yet set to solid
if (obj.fadeTimer!=null){resetOpacit(obj);}
counter = 0;
obj.fadeTimer = setInterval(function(){doFadeOut(obj,counter++);},60);
}
function doFadeOut(obj,counter,value){

if (counter!=11){ //counter hasnt expired do action
value = 10-counter;
obj.style.opacity= value/10;

}else{
obj.style.opacity=.04

clearInterval(obj.fadeTimer);
}
}
function resetOpacit(obj){
obj.style.opacity=1;
clearInterval(obj.fadeTimer);
}


window.onload = init;


function moveLeft(obj,objWidth){
var adder=-4;
if (obj.moveTimer!=null){clearInterval(obj.moveTimer);}
if (document.getElementById("divUp").enableMove == "true"){
obj.moveTimer = setInterval(function(){doHorizontalMove(obj,adder,objWidth);},10);
}
}
function moveRight(obj,objWidth){
var adder=4;
if (obj.moveTimer!=null){clearInterval(obj.moveTimer);}
if (document.getElementById("divUp").enableMove == "true"){
obj.moveTimer = setInterval(function(){doHorizontalMove(obj,adder,objWidth);},10);
}
}

function doHorizontalMove(obj,adder,objWidth){
xpos = parseInt(obj.style.left) ;
if (!xpos){xpos=0;}
if (!xpos && adder==-4){xpos=o; // Keep in Bounds
if (xpos >=(parseInt(window.innerWidth)-objWidth)|| !xpos){
if (adder==4){xpos=parseInt(window.innerWidth)-objWidth;}
}
}
xpos =xpos + adder; //Move
obj.style.left= xpos + 'px'; // Object

}
function stopMove(obj){
clearInterval(obj.moveTimer);
var display = document.getElementById("display");

}
function moveUp(obj,objHeight){
var adder=-4;
if (obj.moveTimer!=null){clearInterval(obj.moveTimer);}
if (document.getElementById("divUp").enableMove == "true"){
obj.moveTimer = setInterval(function(){doVerticalMove(obj,adder,objHeight);},10);
}
}
function moveDown(obj,objHeight){
var adder=4;
if (obj.moveTimer!=null){clearInterval(obj.moveTimer);}
if (document.getElementById("divUp").enableMove == "true"){
obj.moveTimer = setInterval(function(){doVerticalMove(obj,adder,objHeight);},10);
}
}


function doVerticalMove(obj,adder,objHeight){

ypos = parseInt(obj.style.top) ;
if (!ypos){ypos=0;}
if (!ypos && adder==-4){ypos=o // Keep in Bounds
if (ypos >=(parseInt(window.innerHeight)-objHeight)|| !ypos){
if (adder==2){ypos=parseInt(window.innerHeight)-objHeight;};}
}
ypos =ypos + adder; //Move
obj.style.top= ypos + 'px'; // Object
}

function enableMovers(caller){

if (!caller.opclick){caller.opclick =1;}
if (caller.opclick==1){
caller.value ="Hide";
caller.opclick=2;
obj =document.getElementsByName("moveCtrl");
objStore = document.getElementById("divUp");
objStore.enableMove = "true";
var i
for (i in obj){obj[i].style.opacity = 1;}

}else{
caller.value ="Move";
caller.opclick=1;
obj =document.getElementsByName("moveCtrl");
objStore = document.getElementById("divUp");
objStore.enableMove = "disabled";
for (i in obj){obj[i].style.opacity = 0;}
}
}
function killMovers(){
obj =document.getElementsByName("moveCtrl");
objStore = document.getElementById("divUp");
objStore.enableMove = "disabled";
for (i in obj){obj[i].style.opacity = 0;}
}


function hIncrease(){
obj = getObj();
if (obj.timer!=null){clearInterval(obj.timer);}
if(obj.th ==null){startHSL(obj)}
ader = 1;
amount =document.getElementById("getAmount").value;

obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'h');},20);
}
function sIncrease(){
obj = getObj();
if (obj.timer!=null){clearInterval(obj.timer);}
if(obj.th ==null){startHSL(obj)}
ader = 1;
amount =document.getElementById("getAmount").value;

obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'s');},20);
}
function lIncrease(){
obj = getObj();
if (obj.timer!=null){clearInterval(obj.timer);}
if(obj.th ==null){startHSL(obj)}
ader = 1;
amount =document.getElementById("getAmount").value;

obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'l');},20);
}
function hDecrease(){
obj = getObj();
if (obj.timer!=null){clearInterval(obj.timer);}
if(obj.th ==null){startHSL(obj)}
ader = -1;
amount =document.getElementById("getAmount").value;

obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'h');},20);
}
function sDecrease(){
obj = getObj();
if (obj.timer!=null){clearInterval(obj.timer);}
if(obj.th ==null){startHSL(obj)}
ader = -1;
amount =document.getElementById("getAmount").value;

obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'s');},20);
}
function lDecrease(){
obj = getObj();
if (obj.timer!=null){clearInterval(obj.timer);}
if(obj.th ==null){startHSL(obj)}
ader = -1;
amount =document.getElementById("getAmount").value;

obj.timer = setInterval(function(){changeColor(obj,ader,amount--,'l');},20);
}
function changeColor(obj,ader,amount,lookUp){

hader= 0;
sader= 0;
lader= 0;
if (amount>=1){
switch(lookUp){
case "h":
hader = ader;
break;
case "s":
sader = ader;
break;
case "l":
lader = ader;
break;
}
checked = getChecked();

if (checked==1){

obj.th =obj.th+hader;
if (obj.th>360 && ader==1){obj.th=0;} //wrap uper limit
if (obj.th<0&& ader==-1){obj.th=360;} // lower limit

obj.ts =obj.ts+sader;
if (obj.ts>100){obj.ts=100;} //stop at uper limit
if (obj.ts<0){obj.ts=0;} // lower limit

obj.tl =obj.tl+lader;
if (obj.tl>100){obj.tl=100;} //stop at uper limit
if (obj.tl<0){obj.tl=0;} // lower limit

h =obj.th; s =obj.ts ; l =obj.tl ;
obj.style.color = "hsl("+h+","+s+"%,"+l+"%)";
document.getElementById("hexColor").value =cssHex(obj.style.color);
document.getElementById("displayInfo").innerHTML ="hsl ("+obj.th+ " "+ obj.ts +" "+ obj.tl+")";


}else{

obj.bgh =obj.bgh+hader;

if (obj.bgh>360 && ader==1){obj.bgh=0;} //wrap uper limit
if (obj.bgh<0 && ader==-1){obj.bgh=360;} // lower limit

obj.bgs =obj.bgs+sader;
if (obj.bgs>100){obj.bgs=100;} //stop at uper limit
if (obj.bgs<0){obj.bgs=0;} // lower limit

obj.bgl =obj.bgl+lader;
if (obj.bgl>100){obj.bgl=100;} //stop at uper limit
if (obj.bgl<0){obj.bgl=0;} // lower limit
h =obj.bgh; s =obj.bgs ; l =obj.bgl ;

obj.style.backgroundColor = "hsl("+h+","+s+"%,"+l+"%)";

document.getElementById("hexColor").value =cssHex(obj.style.backgroundColor);
document.getElementById("displayInfo").innerHTML ="hsl("+obj.bgh+ " "+ obj.bgs +" "+ obj.bgl+")";

}
}else{
clearInterval(obj.timer);
obj.timer=null;
}

}

function getChecked(){

radios = document.getElementsByName("change");

if (radios[0].checked){rtValue = 1
}else{rtValue =2}
return rtValue;
}


function startHSL(obj){

if(obj.th==null){objstyle = document.defaultView.getComputedStyle(obj, "");}else{objstyle =obj;} // get styles\

fvalue= objstyle.color; // txt color set RGB
obj.style.color=fvalue;
tvalue= fvalue.split(",")
tr = parseInt(tvalue[0].slice(4,tvalue[0].length));
tg = parseInt(tvalue[1]);
tb = parseInt(tvalue[2]);
if (!tr){tr=0;} //---------------------------------------------// fix any errors
if (!tg){tg=0;}
if (!tb){tb=0;}
txtHSL = rgbToHsl(tr, tg, tb); //-------------------------------- // Txt HSL Values
obj.th =txtHSL[0]; obj.ts =txtHSL[1]; obj.tl =txtHSL[2]; // Store HSL th ts tl

fbgvalue= objstyle.backgroundColor; // Background color set RGB
obj.style.backgroundColor=fbgvalue;
bgvalue= fbgvalue.split(",")
bgr = parseInt(bgvalue[0].slice(4,bgvalue[0].length));
bgg = parseInt(bgvalue[1])
bgb = parseInt(bgvalue[2])
if (!bgr){bgr=0;} //-------------------------------------------// fix any errors
if (!bgg){bgg=0;}
if (!bgb){bgb=0;}
bgHSL = rgbToHsl(bgr, bgg, bgb); //----------------------------- // Bground HSL Values

obj.bgh =bgHSL[0]; obj.bgs =bgHSL[1]; obj.bgl =bgHSL[2]; // Store HSL th ts tl


}

function cssHex(values){ // Returns Hex Color based on RGB stored in a variable
// or being sent in the form of obj.style.backgroundColor /obj.style.color

var value= values.split(",")
r = parseInt(value[0].slice(4,value[0].length));
g = parseInt(value[1])
b = parseInt(value[2])
if (!r ){r=0;} // if value color isnt asigned set to black #000000
if (!g ){g=0;}
if (!b){b=0;}
zero="0"
r = r.toString(16);
g = g.toString(16);
b= b.toString(16);
if (r.length==1){r = zero.concat(r);}
if (g.length==1){g = zero.concat(g);}
if (b.length==1){b = zero.concat(b);}
Hcol = "#"+r+""+g+""+b;

idV = document.getElementById("getId").value; //get id from input box
obj = document.getElementById(idV);
return Hcol;
}


function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;

var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;

if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
h =parseInt(h*360);
s =parseInt(s*100);
l =parseInt(l*100);
return [h, s, l];
}

function getObj(){

idV = document.getElementById("getId").value; //get id from input box
obj = document.getElementById(idV); // lookup id of obj
if (obj!=null){
return obj;
}else{
alert("Obj "+document.getElementById("getId").value+" failed to load Check Css For Id");
alert("Item wil defult to textBox");
document.getElementById("getId").value = "colCtrlBox";
getObj();
return obj;
}

}
Html code:

<html>
<head>
<title>Edit Background and text color by Id</title>
<link rel="icon" type="image/x-icon" href="favi.ico">
<link rel="stylesheet" type="text/css" href="Combind.css">
<script type ="text/javascript" src="Combind.js"></script>
<style>

</style>
</head>
<body>



<div id ="fadethis" onmouseover="resetOpacit(this)" onmouseout="fadeOut(this)" >This Is a moving boX<br>
<input type="button" onclick="enableMovers(this)" value="Move" )" />
<div id ="divLeft" name="moveCtrl" onmouseover="moveLeft(document.getElementById('fadethis'),300)" onmouseout="stopMove(document.getElementById('fadethis'))"></div>
<div id ="divRight" name="moveCtrl" onmouseover="moveRight(document.getElementById('fadethis'),300)" onmouseout="stopMove(document.getElementById('fadethis'))"></div>
<div id ="divUp" name="moveCtrl" onmouseover="moveUp(document.getElementById('fadethis'),250)" onmouseout="stopMove(document.getElementById('fadethis'))"></div>
<div id ="divDown" name="moveCtrl" onmouseover="moveDown(document.getElementById('fadethis'),250)" onmouseout="stopMove(document.getElementById('fadethis'))"></div>
<!----------------------------------------------------------------------------------------------------------------------------------------------->
<div Id="colCtrlBox">
Item Id: <input id = "getId" class = "fltEdtCtrl" value="edtBox" type="text" name="edtCtrlId" />
Change Amount: <input id = "getAmount" name="edtCtrlAmount" class = "fltEdtCtrl" type="text" value="10" />
<p id="displayInfo">Info here:</p>
<table Id="colCtrl">

<tr>
<td> <input type="button" value="H +" onclick="hIncrease()" /></td>
<td> <input type="button" value="H -" onclick="hDecrease()"/> </td>
<td> <input type="button" value="Dark" onclick="lDecrease()"/></td>
<td> <label for="textCol">Text </label> <input type="radio" id ="textCol" name="change" value="text" checked/></td>
<td> <label for="backCol"> Background </label> <input type="radio" id ="backCol" name="change" value="background" /></td>
<td></td>
</tr>
<tr>
<td> <input type="button" value="S +" onclick="sIncrease()" /></td>
<td> <input type="button" value="S -" onclick="sDecrease()" /></td>
<td> <input type="button" value="Light" onclick="lIncrease()"/></td>
<td colspan="3"> <label for="hexColor">Hex color Is </label><input type="text" id="hexColor" value=""/><td/>
</tr>

</table>
</div>
</div>

</body>
</html>

Lastly the css file:


#fadethis{
position:absolute;
left:1px; top:1px;
width:auto; height:auto;
background-color:#ff159c;
opacity:0.05;
}
#divLeft{
left:-80; top:-80px;
width:80; height:340;
opacity:0;
}
#divRight{
left:390; top:-80px;
width:80; height:340;
opacity:0;
}

#divUp{
top:-80px;
width:430; height:80;
opacity:0;
}

#divDown{
top:180px; left:-40;
width:470; height:80;
opacity:0;

}
#divDown,#divUp,#divRight,#divLeft{
position:absolute;
background-color:#adcbff;
}
#getId{width:7em;}
#getamount{width:7em;}
#colCtrl{ Top:50; left:120;}
#colCtrlBox{

top:40; left:40;
width:auto; height:auto;
background:hsl(210,65%,75%);
border-style:outset;
}
#edtBox{
position:absolute;
top:300; left:400;
height:200; width:200;
background:#bbff2f;

}
.varholder{
color:hsl(209, 64%, 54%);
background:#bbff2f;
}


Some of the java script calls could have been minamized by customizing one function to do all moves or all color changes, by taking input at the html side.
I gone do that another time im just happy to finish this Much in 4 days.
Im only new to programming so there was a lot of gramatic errors and hours of searching for them.

if some one could write a script that will automaticly insert or create the Html part would love the code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum