|
JavaScript - Js Color Tween
Hello everyone, I have written a color tween script based off of istallkizza's script that he provided for someone else in a different thread (http://codingforums.com/showpost.php...20&postcount=5.) It works, but the more it is used, the faster it runs, can anyone help me diagnose the problem?
Code: var colorArr = new Array();
var colorSym = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
var colorInt;
for (i=0;i<colorSym.length;i++)
{
for (n=0;n<colorSym.length;n++)
{
colorArr.push(colorSym[i]+colorSym[n]);
}
}
function colorTween(celem,r,g,b,time){
initColor = colorToHex(document.getElementById(celem).style.backgroundColor);
origColor = splitColor(initColor);
currColor = splitColor(initColor);
targetColor = [colorArr[r], colorArr[g], colorArr[b]]
colorIncs = [Math.round(diffBetween(origColor[0],targetColor[0])/time),Math.round(diffBetween(origColor[1],targetColor[1])/time),Math.round(diffBetween(origColor[2],targetColor[2])/time)];
startColorFade();
function stopInt() {
if (colorInt) { clearInterval(colorInt); }
}
function startColorFade() {
stopInt();
var colorInt = setInterval("this.colorFader()",time);
}
this.colorFader = function() {
currColor[0] = colorArr[arrayIndex(colorArr,currColor[0]) + colorIncs[0]];
currColor[1] = colorArr[arrayIndex(colorArr,currColor[1]) + colorIncs[1]];
currColor[2] = colorArr[arrayIndex(colorArr,currColor[2]) + colorIncs[2]];
document.getElementById(celem).style.backgroundColor = "#"+currColor.join("");
if (Math.abs(diffBetween(currColor[0],targetColor[0])) <= Math.abs(colorIncs[0])) {
currColor = splitColor("#"+targetColor.join(""));
document.getElementById(celem).style.backgroundColor = "#"+targetColor.join("");
stopInt()
}
}
function arrayIndex(arr,check){
for (var i=0;i<=arr.length;i++)
{
if (arr[i] === check) { return i; }
}
return false;
}
function diffBetween(c1,c2){
var num1 = arrayIndex(colorArr,c1);
var num2 = arrayIndex(colorArr,c2);
return num2-num1;
}
function splitColor(color){
return [color.substring(1,3),color.substring(3,5),color.substring(5,7)];
}
function colorToHex(nhcolor) {
if (nhcolor.substr(0, 1) === '#') {
return nhcolor;
}
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(nhcolor);
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
return digits[1] + '#' + rgb.toString(16);
}
}
The script can be viewed in action he http://www.webskethio.com/websites/index.php Similar Tutorialstween.js is a nice script that moves layers from one location to another. I have a hard time wrapping my head around it because as you all know, my skills are basic at best (I know enough to really screw things up). My problem is I have 3 layers and only one is visible at a time. When you click link one, any layer that is on the page moves down while the layer corresponding to the link moves up into place. My first thought was a sloppy function and repeat for each link: Code: function annomateT1() {
Down1= new Tween(document.getElementById('text02').style,'top',Tween.regularEaseOut,85,580,2,'px');
Down1.start();
Down2 = new Tween(document.getElementById('text03').style,'top',Tween.regularEaseOut,85,580,2,'px');
Down2.start();
Up1 = new Tween(document.getElementById('text01').style,'top',Tween.bounceEaseOut,580,85,4,'px');
Up1.start();
}
Then the link one would be just "javascript:"annomateT1()" The animation works, its just sloppy and doesn't work consistently (the second layer seems to get "stuck"). The tween class has some event handlers and listeners and I tried using them but those scripts didn't even work - I simply don't know enough. Here is a link to the tween.js page for those who are interested: http://jstween.blogspot.com/ Thanks in advance for your help... I have a javascript slideshow and I can't seem to get the thumbnail motion tween to be smooth and consistent on all browsers. the entire script is on one single HTML file. here is a link to it: http://www.mediastream247.com/temp/ss9.html somebody please help. I have been trying for weeks to figure this out and have searched all over the internet, but still no solution. it's slow on IE and choppy on Firefox. On Safari it's OK, but could be better. **just realised I have put this in the wrong section
Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom) Code: <html><head><title></title>
<script language=javascript>
colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];
cRGB = [];
function toRGB(color){
var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
return rgb;
}
for(var i=0; i<colors.length; i++){
cRGB[i] = toRGB(colors[i]);
}
function changeColor(target){
var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;
var set = false;
var xx;
for(var i=0; i<cRGB.length; i++){
if(swapper == cRGB[i]){
if(((i+1)) >= cRGB.length){
xx = 0;
}else{
xx = i+1;
}
document.getElementById(target).style.backgroundColor = colors[xx];
document.getElementById(target).style.backgroundImage.show;
set = true;
i=cRGB.length;
}
}
set ? null : document.getElementById(target).style.backgroundColor = colors[1];
}
</SCRIPT>
</head>
<body bgcolor="#333333">
<div>
<div id="a1" onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
<div id=a2 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
<div id=a3 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>
</body>
</html>
Demo: http://theclutch.com/rollover_color_..._bgndimage.htm Hi, I'm faced with a problem trying to set background color under IE7. I have the following Javascript: Code: function showLayer793BKColor(id)
{
var txtObj = document.all(id);
if (txtObj.style.display == 'none')
{
txtObj.style.display = ''
txtObj.style.backgroundColor = 'grey';
}
}
function hideLayer793BKColor(id)
{
var txtObj = document.all(id);
if ( txtObj.style.backgroundColor == 'grey' )
txtObj.style.display = 'none';
}
These functions are used to show or hide div blocks. These blocks are, for example, specified in the following way: Code: <div id="l_gct5tekst" style="display:none"> <b>GCT 5. Eerste verkenning problematiek</b> and, for example, Code: <div id="l_Keuze" style="display:none"> <br/> <b>GCT 5</b> <br/> </div> The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then. In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other. Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ? Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ? Thanks in advance, Diederick van Elst Hi! all I have a js which change the background color onclick event. This is the code Code: function changeBackground2() {
document.body.style.backgroundColor = '#C6DB2B';
document.getElementById("logo").style.backgroundColor = '#2299EE';
document.getElementById("nav_bar").style.backgroundColor = '#C6DB2B';
document.getElementById("current-ex3").style.backgroundColor = '#2299EE';
document.getElementById("foot").style.backgroundColor = '#2299EE';
document.getElementById("ahead").style.backgroundColor = '#C6DB2B';
}
but i want it to occur slowly like in 3 seconds. I think it can be done with animate but not know how i am not a js expert. Thanks for your help. Hi, I have the following javascript codes. I have two textboxes with id "pano" and "pano2" My function creates numbers randomly and that if random number==1 let the background of textbox2 be pink and if random number==2 textbox1 be red. The code works fine for document.bgColor but it does not work for textboxes how can I modify the code so that I can change the background color of any textboxes ? thanks.. <script> aaa=setInterval("letsgo()",500); function letsgo() { rno=Math.floor(Math.random()*3)+1; document.getElementById("counter").value=rno; if(rno==3) { document.bgColor="green"; } if(rno==2) { var pano=document.getElementById("pano"); document.pano.bgColor="red"; } if(rno==1) { var pano2=document.getElementById("pano2"); document.pano2.bgColor="pink"; } } </script> <input type="text" id="counter" style="position:absolute;top:10px;left:50px;width:60px;height:20px;"> <input type="text" id="pano" style="position:absolute;top:100px;left:100px;width:200px;height:200px;"> <input type="text" id="pano2" style="position:absolute;top:100px;left:400px;width:200px;height:200px;"> I am using a great script i downloaded at http://kryogenix.org/code/browser/sorttable/ to sort tables by the header. my problem is I want to add to this that everyother row should have a gray background. I now do it by assigning a different class to every other row but when you sort it keeps the class. -- is there a way to change the background color of every other row in javascript that I can use with the above script? Hi I have this code to change the color of elements in a div. But I cant code the active,followed and visited links .how to do that? Code: <html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("dv").style.alinkcolor=txt;
document.getElementById("dv").style.vlinkcolor=al;
document.getElementById("dv").style.color=vl;
document.getElementById("dv").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1"><br/><br/>
Text: <input type="text" id="t2" name="txt2"><br/><br/>
Link: <input type="text" id="t3" name="link"><br/><br/>
Active Link: <input type="text" id="t4" name="alink"><br/><br/>
Followed Link: <input type="text" id="t5" name="vlink"><br/><br/>
<input type="button" value="test" onclick="fun();"><br/><br/>
<div id="dv"> hello
This is a Test<br/>
You Have Selected These Colors<br/>
<a href="#">This is a Test Link</a><br/></div>
</body>
</html>
Plz help me. Thnx in advance I'm going to try to explain this without sounding like a total idiot. I'm not even sure if this is the language for this. If not and someone could point me in the direction of a better language, please feel free. Lets say I have a word document, somthing.docx. This document includes text of varying colors. What I am trying to figure out is if there is a way of 'detecting' what color each word is. I would like the output be a txt file, which stores the text and description of formatting, which I can easily do myself. I really just have no idea how to figure out what color the text is, programmatically. Thanks for any help, ~Dave I am using an external style sheet to set the color of my calculator to gray. However, when I open my javascript in Google Chrome, the calculator is red. I've checked the style sheet code and it's correct. Can anyone tell me why this is happening? I posted both the html and css code below. Code: <!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=iso-8859-1" />
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="assignment2.css" />
<div align="center">
<script type="text/javascript">
var title = "<strong>Calculator</br> Aughtman, Zackary</strong>"
document.write(title.fontsize(5));
</script>
</div>
</head>
<body>
</br>
</br>
<div align="center">
<table align = "center" border="1" bordercolor="div1" bgcolor="div2">
<tr>
<td colspan="4">
<input type="text" value="" id="results" class="results" />
</td>
</tr>
<tr>
<td>
<input type="button" style="width:30px" value="7" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="8" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="9" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="/" onclick="EnterOperator(this.value)">
</td>
</tr>
<tr>
<td>
<input type="button" style="width:30px" value="4" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="5" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="6" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="*" onclick="EnterOperator(this.value)">
</td>
</tr>
<tr>
<td>
<input type="button" style="width:30px" value="1" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="2" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="3" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="-" onclick="EnterOperator(this.value)">
</td>
</tr>
<tr>
<td>
<input type="button" style="width:30px" value="0" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="N" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="L" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="+" onclick="EnterOperator(this.value)">
</td>
</tr>
<tr>
<td>
<input type="button" style="width:30px" value="" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="=" onclick="EnterNumber(this.value)">
</td>
<td>
<input type="button" style="width:30px" value="C" onclick="EnterOperator(this.value)">
</td>
</tr>
</table>
</br>
<script type="text/javascript">
document.write("<strong>Instructions</strong></br>");
document.write("Click a number, then an action, then another number, then the equals button.</br>");
document.write("Press C when ready to start over.</br>");
document.write("The N button makes your previous number a negative.</br>");
document.write("The L button requires one number to be available,</br>");
document.write("it will loop through that numberto ten plus that number</br>");
document.write("and add all values and display.</br>");
document.write("For example: 1+2+3+4+5+6+7+8+9+10=55</br></br>");
document.write("<strong>Navigator Info</strong></br>");
document.write("App Name: Netscape</br>");
document.write("Cookes Enable: true</br>");
document.write("User agent Mozilla 5.0 Windows NT 5.1; rv:6.0 Gecko 20100101 Firefox 6.0</br>");
</script>
</div>
</body>
</html>
Code: #div1 {color:#999999}
#div2 {color:#999999}
Hey, been racking my brain for about an hour now, and cant seem to work this one out... I need to in javascript, get the HEX value (#FFFFFF) of a div's background color... Code: style.backgroundColor doesnt seem to work... But it seems to be different in every browser, and i cant seem to make it work... (it must work in IE, FF, Chrome, Safari) I have tried using a couple of examples, but nothing seems to work... Any ideas? Thanks I am writing a greasemonkey userscript that simply just takes the underlying width of a td tag, and prints the text in white font over the table so it is viewable to everyone. I wrote the following code Code:
function main()
{
var page = document.getElementById("container");
var td = page.getElementsByTagName("td");
for(i=0; i<td.length; i++)
{
if(td[i].background-color != "")
{
td[i].style.color = "#ffffff";
td[i].innerHTML = td[i].width;
}
}
}
however, When i installed the script.. firefox tells me that "color" is not defined. Is there another way of doing this? Just wanting the width is white font. For Script http://www.dynamicdrive.com/dynamici...htmlticker.htm How do I change the "subject" color above each message from the default black to white ? Still need assistance, thanks Okay, so here's an example code of what I'm needing: Code: <html>
<head>
<title></title>
<style type="text/css">
#greenrow {
background-color:#090;
}
#redrow {
background-color:#F00;
}
</style>
<script type="text/javascript">
if (calculate.level.value >= calculate.getElementById('shrimp').value){
class = greenrow;
}
else {
class = redrow;
}
</script>
</head>
<body>
<form name="calculate">
<table>
<tr>
<td><label>
Level<input name="level" type="text" size="5" /></label>
</td>
</tr>
<tr id="shrimp">
<td>Shrimp</td>
<td align="center"><label>
<input type="text" name="shrimp" />
</label></td>
<td colspan="3" align="left">10</td>
</tr>
</table>
</form>
</body>
</html>
Okay so what I want to be done is to get information from the input text area "level" and IF "level" is >= 10...for this one certain row, I want it to get the class #greenrow. Else, class = #redrow. Thanks hi folks.. how to start with color picker using a layered div? i would like to have idea about that.. if anyone have any code samples then let me know.. thank you Due to a long story which we don't need to go into here I am trying to change the color of a link after it has been clicked on WITHOUT using CSS. When the link is clicked some javascript is called. I can do this in IE by adding this "this.style.color = 'black'". However this doesn't work in other browsers. Anyone know how I could get this to work in other browsers? I've spend hours on this... Thanks for yuor time! I'm just trying to do something pretty simple which is an alert box which will give me the background color. So simple...that it doesn't want to work, that is! The line the body is onmouseover: Code: <p id="metallic" onMouseOver="switchElementColour('metallic');">metallic c-prints</p>
The function is as follows Code: function switchElementColour(elementName){
var tryId = document.getElementById(elementName);
var yrf = tryId.style.backgroundColor;
alert(yrf);
}
I've tried a number of different variations, including: messing with the quotes 'hard coding' the id ("metallic") in the function (although I don't want to leave it there) changing the code around based on stuff found online ...but I keep coming back to the above. The result is a blank alert box (no errors, just blank). The element name is getting passed, because when I create an alert box in the function that looks like this: Code: alert(elementName); The result is an alert box that says metallic (no quotation marks). Au secours por favore? Hey everyone! My goal here is to have the user type in a color and have that color display as the background of the page. I don't believe the switch statement is being executed by the first function. I think I am overthinking the process - as always! Any help pointing out my mistake(s) would be greatly appreciated. Code:
function show_color()
{
var show_prompt = prompt("Please enter a color name");
var change_body = document.getElementById("body");;
show_prompt = change_body;
change_body = change(this.id);
}
function change(id)
{
switch (id)
{
case 'red':
document.body.bgColor = "red";
break;
case 'green':
document.body.bgColor = "green";
break;
case 'yellow':
document.body.bgColor = "yellow";
break;
case 'blue':
document.body.bgColor = "blue";
break;
case 'pink':
document.body.bgColor = "pink";
break;
}
}
|
|||||||