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!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Referencing 1

Status
Not open for further replies.
audiopro

audiopro

Programmer
Apr 1, 2004
3,165
GB
I am a newbie with javascript and I am struggling with the syntax. I write mostly PERL and I am finding javascript quite a challenge. I am used to OOP but the references within Javascript have me confused.
I have created a window with window open.
I want to make the background colour of the new window, the same colour as a cell in the old window.
I have looked into the 'opener' function but have yet to find a reasonable explanation of the syntax.
I need something like
Code: 
document.bgcolor=window.opener.[coloured cell name].value
this of course is only a guess at the correct syntax.

I have tried many similar options but I am struggling.
Would someone please help.


Keith
 
Sort by date Sort by votes
Try this code in the window you open...
Code: 
<script>

color = window.opener.getElementById("theIDofTheCell").style.backgroundColor

alert(color) //just to see what you got

</script>
<body onLoad="this.bgColor=color">


Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
Or you could set the colour from the opening script:

Code: 
function doWin() {
	var w = window.open('test.html', 'newwin', '');
	w.document.bgColor = document.getElementById('cell1').style.background;
}

...

<td id="cell1" style="background: red;">Blah</td>

--James
 
Upvote 0 Downvote
This just gets worse, a quick job that's taking ages.
Tried mwolf00's code
Code: 
alert("start")
color = window.opener.getElementById("wallColoredTD").style.backgroundColor
alert(color) 
alert("end")
If the syntax is ok then there is a problem with the arguement.
No 'color' or 'end' is printed so the code isn't completing.


Keith
 
Upvote 0 Downvote
One thind I noticed while testing my code was that the td had to have it's colour set with actual styles rather than the bgcolor property of the tag, ie:

Code: 
<td style="background: red;">

and not:

Code: 
<td bgcolor="red">

--James
 
Upvote 0 Downvote
The problem seems to be in getting the value from the previous screen rather than actually setting it.
The previous code I posted contains something which stops the function from completing.
How can I check if the link to the actual cell and colour is valid?
Is there a return code of some sort?



Keith
 
Upvote 0 Downvote
Keith,

On the original page (the opener) before you call the new window, see if you can list the color

alert(document.getElementById("myCellId").style.backgroundColor)

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
Code: 
color = window.opener[COLOR=red].document[/color].getElementById("wallColoredTD").style.backgroundColor

--James
 
Upvote 0 Downvote
I really appreciate the time you guys are spending on this.
I am looking for the reference to a table not a cell but that shouldn't make a difference should it?
Testing the original page has revealed a problem.
Code: 
<SCRIPT LANGUAGE=JavaScript TYPE="text/javascript"><!--
var moz_wctd = -1;
function repaintWall() {
	var color = wallColorVals[Math.max(document.studiosoftMainForm.wallColorPicker.selectedIndex-1,0)];
	if (document.getElementsByTagName) {
		if ( moz_wctd == -1 ) {
			var allTDs = document.getElementsByTagName("TABLE");
			for (var i=0;i<allTDs.length;i++) {
				if (allTDs[i].id == 'wallColoredTD')
					moz_wctd = allTDs[i];
			}
		}
		moz_wctd.bgColor=color;
	}
	else if (document.all) document.all.wallColoredTD.style.background=color;
	else if (document.layers) document.layers.wallColoredTD.bgColor=color;


}
//function setWallColor(color) { for(var i=0;i<wallColorVals.length;i++)if(wallColorVals[i]==color)document.studiosoftMainForm.wallColorPicker.selectedIndex=i; }
//-->

alert(color);
alert(document.getElementById("wallColoredTD").style.backgroundColor) 

</SCRIPT>

The var color is assigned to the correct value.
The contents of the second alert are blank.
Looks like the reference to the table is incorrect.
Tried 'wallColoredTD' with and without speech marks.


Keith
 
Upvote 0 Downvote
Is there more than one cell with the id "wallColoredTD"? It looks as if this might be the case (if so, bad form - IDs should be unique).


Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
Only 1 reference to 'wallColoredTD' and it is a table containing multiple cells. Some have their cell colors set to white, to hide the table background colour, others are set to default to show the back color.
The original page works ok without errors as does the newly opened window. I just want the background color to match the selection.
Code: 
<table border="0" width="700" id="wallColoredTD" cellspacing="0" cellpadding="0">
Is there a different reference call to a table rather than a TD?


Keith
 
Upvote 0 Downvote
If you are setting the bgColor for the individual TDs then you can look at one of them to get the color you want. However, if you are setting the bgColor of the table, then you should look at that
Code: 
<table id="myTable" style="background-color: blue;">
  <tr id="myRow" style="background-color: green;">
    <td id="myCell" style="background-color: red;">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>


Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
Can you post your whole first page?

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
The code is running in a PERL script so is created semi-automatically. This is the source code of the active HTML doc. with various links removed.
Code: 
Parsed input call = *exchoose*<br>display head
<!--- selection display --->
<!--- sel_disp_head--->
<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<META HTTP-EQUIV="Expires" CONTENT="0">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>SELECTION DISPLAY</title>

<script language="javascript" type="text/javascript">

function picWindow(picgif) {

picwindow = window.open(picgif, 'picWin', 'titlebar=0, height=600,width=800, top=20, left=10');
picwindow.focus();
}
</script>


</head>

<body topmargin="0" leftmargin="0">
  <center>
  <table border="0" width="700" cellspacing="0" cellpadding="0">
    <tr>
      <td width="100%" bgcolor="#F4FAFF">
        <p align="center"><font face="Verdana" size="5"><font color="#C0C0C0">The
        </font><font color="#99CCFF"><b></b></font><font color="#C0C0C0">
        Collection</font></font></td>
    </tr>
  </table>
  </center>


  <div align="center">
    <center>
    <table border="0" width="700" id="wallColoredTD" cellspacing="0" cellpadding="0">
<form method="post" name="studiosoftMainForm">
      <tr>
        <td width="33%" bgcolor="#F4FAFF">&nbsp;</td>
        <td width="67%" bgcolor="#F4FAFF" colspan="2">&nbsp;</td>
      </tr>
      <tr>
        <td width="33%" bgcolor="#F4FAFF">&nbsp;</td>
    </center>
        <td width="67%" bgcolor="#F4FAFF" colspan="2">
          <p align="right"><font size="1" face="Tahoma" color="#800080">Use
          the Menu Below to change the Colour of the Background</font></p>
</td>
      </tr>
    <center>
      <tr>
        <td width="66%" colspan="2" bgcolor="#F4FAFF">&nbsp;</td>
        <td width="34%" bgcolor="#F4FAFF">
          <p align="center"><font face="Arial" size="1" color="#C0C0C0">
              
              <select onchange="repaintWall();" name="wallColorPicker">
<option value="WONoSelectionString">Select Background Colour</option>
<option value="0">Lt. Grey</option>
<option value="1">White</option>
<option value="2">Ivory</option>
<option value="3">Antique White</option>
<option value="4">Linen</option>
<option value="5">Pale Yellow</option>
<option value="6">Wheat</option>
<option value="7">Lt. Brown</option>
<option value="8">Lavender</option>
<option value="9">Rose</option>
<option value="10">Pale Red</option>
<option value="11">Gray</option>
<option value="12">Mint Cream</option>
<option value="13">Lt. Blue</option>
<option value="14">Sky Blue</option>
<option value="15">Sea Green</option>
<option value="16">Azure</option>
<option value="17">Slate Blue</option>
<option value="18">Crimson Red</option>
<option value="19">Dark Green</option></select>
			<SCRIPT language=JavaScript><!-- 
var wallColorVals = new Array('#cccccc','#ffffff','#fdf5e6','#faebd7','#fafad2','#eee8aa',
'#f5deb3','#d2b48c','#e6e6fa','#bc8f8f','#cd5c5c','#808080','#f5fffa',
'#f0f8ff','#add8e6','#5f9ea0','#6699cc','#666699','#993333','#336633',0);
//-->
</SCRIPT>

<SCRIPT LANGUAGE=JavaScript TYPE="text/javascript"><!--
var moz_wctd = -1;
function repaintWall() {
	var color = wallColorVals[Math.max(document.studiosoftMainForm.wallColorPicker.
selectedIndex-1,0)];
	if (document.getElementsByTagName) {
		if ( moz_wctd == -1 ) {
			var allTDs = document.getElementsByTagName("TABLE");
			for (var i=0;i<allTDs.length;i++) {
				if (allTDs[i].id == 'wallColoredTD')
					moz_wctd = allTDs[i];
alert(color);


			}
		}
		moz_wctd.bgColor=color;
	}
	else if (document.all) document.all.wallColoredTD.style.background=color;
	else if (document.layers) document.layers.wallColoredTD.bgColor=color;


}
//function setWallColor(color) { for(var i=0;i<wallColorVals.length;i++)if(wallColorVals[i]==color)document.
studiosoftMainForm.wallColorPicker.selectedIndex=i; }
//-->

alert(document.getElementById('wallColoredTD').style.backgroundColor) 



</SCRIPT>


             </font>
              
        </td>
      </tr>


      <tr>
        <td width="67%" colspan="2" bgcolor="#F4FAFF">
        <hr color="#DDEEFF" width="90%">
        </td>
        <td width="33%" bgcolor="#F4FAFF">
        &nbsp;
        </td>
      </tr>

      <tr>
        <td width="66%" colspan="2" bgcolor="#F4FAFF">
              <hr color="#FFFFFF" width="80%">
        </td>
        <td width="34%">
              
        </td>
      </tr>
      

     
      <tr>
        <td width="66%" colspan="2" bgcolor="#F4FAFF">
              <p align="center"><b><font face="Verdana" size="2" color="#000080"></font></b></p>
              <p align="center"><b><font face="Verdana" size="2" color="#000080">SCOTTISH LANDSCAPE</font></b></p>
              <p align="center"><b><font face="Verdana" size="2" color="#C0C0C0">45CM&nbsp;
              x 27CM</font></b></td>
        <td width="34%">
              <p align="center">
              
        </td>
      </tr>
      
      
      
      <tr>
        <td width="66%" colspan="2" bgcolor="#F4FAFF">
              <hr color="#FFFFFF" width="80%">
        </td>
        <td width="34%">
              <p align="center">
              <font face="Verdana" size="1" color="#800000">Click Image For More
              details</font>
              
        </td>
      </tr>
      
      
      
      <tr>
        <td width="67%" colspan="2" bgcolor="#F4FAFF">
        <hr color="#DDEEFF" width="90%">
        </td>
        <td width="33%" bgcolor="#F4FAFF">
        &nbsp;
        </td>
      </tr>

      
    
</form>


      <tr>
        <td width="33%" bgcolor="#F4FAFF">&nbsp;</td>
        <td width="33%" bgcolor="#F4FAFF">
          <p align="center"><a href="???">Back to Exhibition
        Menu</a></td>
        <td width="34%" bgcolor="#F4FAFF">&nbsp;</td>
      </tr>
      <tr>
        <td width="100%" colspan="3" bgcolor="#F4FAFF">
        <hr color="#99CCFF" width="90%">
        </td>
      </tr>
    </table>
    </center>
  </div>

</body>

</html>

Keith
 
Upvote 0 Downvote
I'm not sure what you're doing in the function exactly, but I've highlighted my changes that make it work...

Code: 
<SCRIPT LANGUAGE=JavaScript TYPE="text/javascript"><!--
var moz_wctd = -1;
function repaintWall() {
    var color = wallColorVals[Math.max(document.studiosoftMainForm.wallColorPicker.selectedIndex-1,0)];
    if (document.getElementsByTagName) {
        if ( moz_wctd == -1 ) {
            var allTDs = document.getElementsByTagName("TABLE");
            for (var i=0;i<allTDs.length;i++) {
                if (allTDs[i].id == 'wallColoredTD')
                    moz_wctd = allTDs[i];
			alert(color + " here " + i);

            }
        }
        moz_wctd.bgColor=color;
       [b][COLOR=blue] document.getElementById('wallColoredTD').style.backgroundColor = color[/color][/b]
    }
    else if (document.all) document.all.wallColoredTD.style.background=color;
    else if (document.layers) document.layers.wallColoredTD.bgColor=color;

	[b][COLOR=blue]alert(document.getElementById('wallColoredTD').style.backgroundColor)[/color] [/b]
}

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
You could also say

moz_wctd.style.backgroundColor = color

where you have

moz_wctd.bgColor=color

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
Thanks for the suggestions about improvements but we are losing the thread. The Function does work and the problem lies with passing a variable to a child window.
Here's what I am doing.
A screen is visible and contains a menu box which allows the user to change the background colour of the screen.
This section works ok but there is a link on this screen to a larger picture. the user clicks the picture which opens up the large image on a screen created via a perl script, the script being used for setting vars of which image to display with what other information.
I simply want the background of the new screen to be the same colour as the colour previously selected.
I want the var (screen 1) to be accessible from screen 2.
Sounds like it should be simple but I have been struggling getting it to work. I have just started with javascript and from what I have seen up to now it looks useful but as this is my first javascript/perl project I am frequently hitting the syntax issues. Any on-topic help would be appreciated so I can put this problem to bed and move on.


Keith
 
Upvote 0 Downvote
Well, now that we've got the right bgColor on the right ID, the above suggestions should work for you.

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
A var on screen 1 (the opener) is available on screen 2 very easily

Code: 
page.htm  - the opener window

<script>
  page1var = "Some value"
</script>

Code: 
page2.htm - the opened window


<script>
  alert(window.opener.page1var)
</script>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

zen.gif
 
Upvote 0 Downvote
Now I am getting somewhere, thanks for your help.
I was given this code and asked to make it work, thinking it would be a simple job but at least I have learnt something.
The following code has me a little confused. Are curly braces not always required around 'if' constructs, they look a little odd without them.
Code: 
    else if (document.all) document.all.wallColoredTD.style.background=color;
    else if (document.layers) document.layers.wallColoredTD.bgColor=color;

    alert(document.getElementById('wallColoredTD').style.backgroundColor) 
}

Keith
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

furtivevole
  • Locked
  • Question
Referencing another object 1
Replies
2
Views
67
furtivevole
furtivevole
southbeach
  • Locked
  • Question
Referencing to object using dynamic varible 1
Replies
2
Views
55
southbeach
southbeach
spewn
  • Locked
  • Question
script won't work in firefox...don't know if i'm referencing wrong...
Replies
1
Views
52
tsuji
tsuji
starsky51
  • Locked
  • Question
Referencing childNodes by name/id 1
Replies
2
Views
66
starsky51
starsky51
scousethemoose
  • Locked
  • Question
Cross Browser Referencing
Replies
2
Views
53
scousethemoose
scousethemoose

Part and Inventory Search

Sponsor

Back
Top