Control Style in Other Frame [Archive]

View Full Version : Control Style in Other Frame

JohnKrutsch

09-03-2002, 05:22 PM

Ok, at work I have to use a gimpy content managemnt system. It generates most of the layout and allows you to do very little to customize the pages. In one instance they generate a menu with some horrid colors and font faces and it is always the same garbarge no matter what the rest of the pages look like I have control of a frame just bellow this one and want to change the style of the links in the ugly frame. Here is what I am trying:

function doit(){
var x=top.uglyFrame.document.getElementsByTagName('a');
for(var i=0;i<x.length;i++){
x[i].setAttribute("style","color:green; background-color:orange")
}
}

the page in the ugly frame looks like this:

<STYLE TYPE='text/css'>

</STYLE>
<BODY BGCOLOR="#FFFFFF">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"><TR><TD HEIGHT="2"></TD></TR></TABLE>
<TABLE WIDTH="100%" BORDER="0" CELLPADDING="0" CELLSPACING="0"><TR><TD>
<FONT CLASS="menu">ACTION MENU:</FONT>
<A CLASS="nav" HREF="prev.php">Previous</A>
<A CLASS="nav" HREF="next.php">Next</A>
<A CLASS="nav" HREF="cont.php">Contents</A>
<A CLASS="nav" HREF="retr.php">Retrace</A>
<FORM NAME="titles_form">
<INPUT TYPE="HIDDEN" NAME="courselogo_html" VALUE="Overriding the Course Logo">
<INPUT TYPE="HIDDEN" NAME="myavatar_html" VALUE="Using an Avatar">
<input type="button" onclick="doit()" value="test">
</FORM>

So I need to overwirte those styles in order to match the rest of the site. Keep in mind that I don't have any access to the ugly frame.

Any ideas?

joh6nn

09-03-2002, 05:40 PM

dunno. your way looks good, but newfangled. i'm more /old\-(fashioned|skool)/

function doit(){
var x = top.uglyFrame.document.links;
for ( var i = 0; i < x.length; i++ ) {
x[i].style.color = "green";
x[i].style.backgroundColor = "orange";
}
}

JohnKrutsch

09-03-2002, 05:50 PM

Yeah, I tried that too. Neither worked out, I am thinking it is because the do not have a style attribute explicitly set in the first place.

Any other ideas?

joh6nn

09-03-2002, 06:54 PM

not true. try this here in the forum:

javascript:x = document.links; for ( var i = 0; i < x.length; i++ ) { x[i].style.color = "green"; x[i].style.backgroundColor = "orange"; } void 0;

joh6nn

09-03-2002, 07:04 PM

is it simply not working, or is it throwing an error? if so, what error?

JohnKrutsch

09-03-2002, 07:21 PM

Cool, thanks to you I have made progress, this works out for the links:

window.onload=function(){
var x=top.uglyFrame.document.links;
for(var i=0;i<x.length;i++){
with(x[i].style){
color="green";
backgroundColor="orange";
fontFamily="Times";
fontSize="18pt";
}
}
}

But I still cant change the style of this bit:

<FONT CLASS="menu">ACTION MENU:</FONT>

joh6nn

09-03-2002, 07:23 PM

try setting className to "" first, and then playing with it.

nice use of with(), by the way.

brothercake

09-03-2002, 09:08 PM

This might sound a bit brutal ... but you could write inside the font tag .. with another font tag, something like

var fontText = fontTagObj.innerHTML;

fontTagObj.innerHTML = '<font color=red>' + fontText + '</font>';

:)

btw - what's with() ? - i've never encountered that before

JohnKrutsch

09-03-2002, 09:15 PM

Spot on! This is the final function:

window.onload=function(){
// Background color for action menu frame
var doc=top.bottom_parent.main_win.button.document;
doc.bgColor="#000092";

// Style for action menu links
var lnk=doc.links
for(var i=0;i<lnk.length;i++){
with(lnk[i].style){
color="green";
backgroundColor="orange";
//fontFamily="Times";
//fontSize="18pt";
}
}

// Style for action menu tab
var fon=doc.getElementsByTagName('font');
for(var i=0;i<fon.length;i++){
fon[i].className="";
with(fon[i].style){
//color="green";
backgroundColor="orange";
fontWeight="bold";
fontFamily="Arial";
fontSize="10pt";
}
}
}

By the way the with() statement comes in hady in several situations, check this out:

http://javascriptkit.com/javatutors/varshort4.shtml