Javascript conflict

Stev4444 · Mar 8, 2007

I know little of javascript so any help would be grateful

I am trying to 1)change background colors and 2)chang font colors,

I have 2 seperate js files that work independtly but when I use both they conflict.

can I either isolate one when trying to use the other

File 1 is

function executeonload(functionref){
if (window.addEventListener)
window.addEventListener("load", functionref, false)
else if (window.attachEvent)
window.attachEvent("onload", functionref)
else if (document.getElementById)
window.onload=functionref
}

var ddcolorposter={
initialize:function(r,g,b, hexvalue){
this.rvalue=r //store red value
this.gvalue=g //store green value
this.bvalue=b //store blue value
this.hexvalue=hexvalue //store combined hex value
if (typeof this.targetobj!="undefined"){
this.targetobj.value=this.hexvalue //set field to selected hex color value
if (typeof this.divobj!="undefined"){ //set adjacent div to selected hex color value
this.divobj.style.backgroundColor="#"+this.hexvalue
this.divobj2.style.backgroundColor="#"+this.hexvalue
}
}
},
echocolor:function(inputobj, divID, divID2){
this.targetobj=inputobj
this.divobj=document.getElementById(divID)
this.divobj2=document.getElementById(divID2)
this.targetobj.onblur=function(){
if (inputobj.value.search(/^[a-zA-Z0-9]{6}$/)!=-1){ //if field contains valid hex value
document.getElementById(divID).style.backgroundColor="#"+inputobj.value
document.getElementById(divID2).style.backgroundColor="#"+inputobj.value
}
}
},
fillcolorbox:function(inputID, divID, divID2){
var inputobj=document.getElementById(inputID)
if (inputobj.value.search(/^[a-zA-Z0-9]{6}$/)!=-1){ //if field contains valid hex value
document.getElementById(divID).style.backgroundColor="#"+inputobj.value
document.getElementById(divID2).style.backgroundColor="#"+inputobj.value
}
}
}

and file 2 is the same but with backgroundColor changed to color

I have tried changing identities for hours but get nowhere.
I was hoping I may be able to use a start Java2 and end java 2 around the item I want to change, or am I talking rubbish

Steve

monksnake · Mar 8, 2007

Can you post your HTML that calls executeonload??

It looks to me like you are making this WAY more difficult than it has to be.

I'll write up something if I can understand what events have to take place on the webpage for the colors to change.

[monkey]

<.

Stev4444 · Mar 8, 2007

I hope this is what you are asking for, I have included whole page rather than just the bit I think you were asking for (incase it is relevant) sorry it probably looks a right mess to you

Steve

monksnake · Mar 8, 2007

Here is a very small simple example of changing background and foreground color on the fly (works in FF and IE):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en-US" lang="en-US">
<head>
<script type="text/javascript">

function changeBackground(newColor) {
   document.getElementById("div1").style.backgroundColor = newColor;
   document.getElementById("div2").style.backgroundColor = newColor;
}

function changeForeground(newColor) {
   document.getElementById("div1").style.color = newColor;
   document.getElementById("div2").style.color = newColor;
}

</script>
<style type="text/css">

div {
   border:1px solid #000000;
   width:400px;
   margin:10px;
}


</style>
</head>
<body>
   <div id="div1"> Hello background color</div>
   <div id="div2"> Hello background color</div>

Background
<select onchange="changeBackground(this.value)">
<option value="#ff0000">Red</option>
<option value="#ffffff" selected="selected">White</option>
<option value="#0000ff">Blue</option>
</select>

Foreground
<select onchange="changeForeground(this.value)">
<option value="#ff0000">Red</option>
<option value="#ffffff">White</option>
<option value="#0000ff">Blue</option>
<option value="#000000" selected="selected">Black</option>
</select>
</body>
</html>

<.

Stev4444 · Mar 8, 2007

Thanks I think I can use this

can I add a box that viewer can enter code no for the colour as well as the drop down menu?

This would be very helpful

Thanks again Steve

monksnake · Mar 8, 2007

Of course you can, you just need to make sure that valid hex code is being passed to the function.

I did see a regExp search up above.

Code:

if (inputobj.value.search(/^[a-zA-Z0-9]{6}$/)!=-1){ //if field contains valid hex value

You may want to use the .test function instead and only check up to f and F on the letters.

Code:

if ((/^[a-[!]f[/!]A-[!]F[/!]0-9]{6}$/).test(inputobj.value)) { //if field contains valid hex value

<.

Stev4444 · Mar 9, 2007

Sorry to trouble you again

I have been trying in vain to add a box that will show the hex value of the selected colour. This is so the result will be sent in form.

Please could you help

Steve

monksnake · Mar 9, 2007

You say you want to add a box(text box?). Is this ONLY so you can pass the result in a form??

If ONLY to pass in a form, make these inputs with a <form> tag:

Code:

<input id="foregroundColor" type="hidden" value="" />
<input id="backgroundColor" type="hidden" value="" />

Anytime you change the color of the text or background, the following statements will store that value into the hidden inputs in (example I gave above) these functions:

Code:

function changeBackground(newColor) {
   document.getElementById("div1").style.backgroundColor = newColor;
   document.getElementById("div2").style.backgroundColor = newColor;
   [!]document.getElementById("backgroundColor").value = newColor;[/!]
}

function changeForeground(newColor) {
   document.getElementById("div1").style.color = newColor;
   document.getElementById("div2").style.color = newColor;
   [!]document.getElementById("foregroundColor").value = newColor;[/!]

}

That should give you a start.

[monkey]

<.

Stev4444 · Mar 9, 2007

hankyou for your help, I am still having a problem with this, could you pleasse tell me what I am doing wrong

<script type="text/javascript">

function changeForeground(newColor) {
document.getElementById("div6").style.color = newColor;
document.getElementById("div7").style.color = newColor;
document.getElementById("foregroundColor").value = newColor;
}

</script>

</head>
<body>
<div id="div6"> Hello background color</div>
<div id="div7"> Hello background color</div>

Foreground

<select name="select" onchange="changeForeground(this.value)">
<option value="#ff0000">Red</option>
<option value="#ffffff">White</option>
<option value="#0000ff">Blue</option>
<option value="#000000" selected="selected">Black</option>
<option value="#0000ff"></option>
</select>
<form><input id="foregroundColor" type="hidden" value="" /></form>

</body>
</html>

This should be last time then I can leave you in peace and hopefully I will have learnt something

Stve

trollacious · Mar 10, 2007

Try

Code:

onchange="changeForeground(this.options[this.selectedIndex].value)"

Lee

monksnake · Mar 12, 2007

I am still having a problem with this, could you pleasse tell me what I am doing wrong

If you are wanting to pass the color into a form, you have to submit the form. In your example above, you are not submitting the form at all.

Code:

<script type="text/javascript">

function changeForeground(newColor) {
   document.getElementById("div6").style.color = newColor;
   document.getElementById("div7").style.color = newColor;
   document.getElementById("foregroundColor").value = newColor;
}

</script>

</head>
<body>
   <div id="div6"> Hello background color</div>
   <div id="div7"> Hello background color</div>

Foreground

<select name="select" onchange="changeForeground(this.value)">
  <option value="#ff0000">Red</option>
  <option value="#ffffff">White</option>
  <option value="#0000ff">Blue</option>
  <option value="#000000" selected="selected">Black</option>
  <option value="#0000ff"></option>
</select>
 [!]<form id="frm">
       <input id="foregroundColor" type="hidden" value="#000000" />
       <input type="submit" />
   </form>[/!]

</body>
</html>

This code will pass the current foreground color to the form when you click "Submit".

I'm not sure what the question is, so I'm not sure what the answer is.

[monkey]

<.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript conflict

Stev4444

Technical User

monksnake

Programmer

Stev4444

Technical User

monksnake

Programmer

Stev4444

Technical User

monksnake

Programmer

Stev4444

Technical User

monksnake

Programmer

Stev4444

Technical User

trollacious

Programmer

monksnake

Programmer

Similar threads

Part and Inventory Search

Sponsor