...

View Full Version : click n change background color.



NinjaTurtle
07-08-2002, 11:24 AM
dear,

i have a page that have two frames; Top.asp and Down.asp

at the Down.asp page, there are 3 radiobuttons of option that show 3 set of different color to let user choose, when user choose one of the option, the top.asp background color and Down.asp background color will change at the same time. how to do that????

there are some coding from mine.
FRAME.asp
========
<HTML>
<frameset rows="80,*" border="0" framespacing="0">
<frame src="top.asp" name="topFrame" >
<frame src="down.asp" name="downFrame">
</frameset>
</HTML>

TOP.asp
======
<HTML>
<BODY>
Welcome.... blah blah blah...
</BODY>
</HTML>

DOWN.asp
========
<HTML>
<BODY>
Choose a set of color to change ur setting immediately:
<input type="radio" name="radiobutton" value="White;Green">
White &amp; Green</p>
<p>
<input type="radio" name="radiobutton" value="Blue:Yellow">
Blue &amp; Yellow</p>
<p>
<input type="radio" name="radiobutton" value="Gray;Silver">
Gray &amp; Silver
</BODY>
</HTML>

From the down.asp, i'm not sure how the to pass the both color to both asp files... how to do that????

can asp or javascript do that????

QuackHead
07-08-2002, 02:39 PM
Turtle,

What you're trying to do really has nothing to do with ASP.

Javascript can help you accomplish this.

I'm not a mod, but I'm betting that this post will be moved to the JS forum...

I'll get back to you in a few minutes with some tips.

~Quack

adios
07-09-2002, 02:41 AM
<HTML>
<BODY>
Choose a set of color to change ur setting immediately:
<input type="radio" name="radiobutton" value="White;Green"
onclick="top.topFrame.document.bgColor='white';
document.bgColor='green'">
White & Green</p>
.....etc.
.........
</BODY>
</HTML>

NinjaTurtle
07-09-2002, 04:00 AM
TQ..... u r great!

how if i want to change all the font color, font size????

adios
07-09-2002, 04:35 AM
<html>
<body>
Choose a set of color to change ur setting immediately:<br><br>
<input type="radio" name="radiobutton" value="White;Green"
onclick="with (top.topFrame.document) {
bgColor='white';
body.style.font='400 24px helvetica';
body.style.color='red';
}
document.bgColor='green';
document.body.style.font='200 16px helvetica';
document.body.style.color='gold'">
White & Green</p>
<p>
<input type="radio" name="radiobutton" value="Blue:Yellow"
onclick="with (top.topFrame.document) {
bgColor='blue';
body.style.font='200 24px arial';
body.style.color='skyblue';
}
document.bgColor='yellow';
document.body.style.font='600 36px arial';
document.body.style.color='peru'">
Blue & Yellow</p>
<p>
<input type="radio" name="radiobutton" value="Gray;Silver"
onclick="with (top.topFrame.document) {
bgColor='gray';
body.style.font='200 24px monospace';
body.style.color='gold';
}
document.bgColor='silver';
document.body.style.font='200 48px monospace';
document.body.style.color='coral'">
Gray & Silver
</body>
</html>

NinjaTurtle
07-09-2002, 06:53 AM
can this do like a CSS file or do a loop, then i no need to duplicate so many set?

glenngv
07-09-2002, 07:15 AM
The mods are not moving this post to javascript....

DOWN.asp
========
<HTML>
<head>
<script language="javascript">
function changeBackground(colors){
arrColor = colors.split(";");
top.frames["topFrame"].document.style.backgroundColor=arrColor[0];
window.document.style.backgroundColor=arrColor[1];
}
</script>
</head>
<BODY>
Choose a set of color to change ur setting immediately:
<input type="radio" name="radiobutton" value="white;green" onclick="changeBackground(this.value)">
White & Green</p>
<p>
<input type="radio" name="radiobutton" value="blue:yellow" onclick="changeBackground(this.value)">
Blue & Yellow</p>
<p>
<input type="radio" name="radiobutton" value="gray;silver" onclick="changeBackground(this.value)">
Gray & Silver
</BODY>
</HTML>

premshree
07-09-2002, 07:05 PM
The code for the main page:



<html>
<head>
<title>Change Layout</title>
<style type="text/css">
.topFrameStyle1{background:white; font:400 24px helvetica; color:red}
.topFrameStyle2{background:blue; font:200 24px arial; color:skyblue}
.topFrameStyle3{background:gray; font:200 24px monospace; color:******
.thisStyle1{background:green; font:200 16px helvetica; color:******
.thisStyle2{background:yellow; font:600 36px arial; color:peru}
.thisStyle3{background:silver; font:200 48px monospace; color:coral}
</style>
</head>
<body>
<script language="JavaScript">
for(var i=1; i<=3; i++)
{
// Modify this
document.write('<table><tr>');
document.write('<td><table class="topFrameStyle' + i + '"><tr><td>Top Frame</td></tr></table></td>');
document.write('<td><table class="thisStyle' + i + '"><tr><td>Body</td></tr></table></td>');
document.write('</tr></table>');
document.write('<input type="radio" name="radiobutton" onClick="swapStyle(' + i + ')">');
}

function swapStyle(styleNo)
{
top.topFrame.className=topFrameStyle[styleNo];
document.body.className="thisStyle" + styleNo;
return true;
}
</script>
</body>
</html>

adios
07-10-2002, 04:32 AM
<html>
<head>
<script type="text/javascript" language="JavaScript">

var CSS = new Array();
CSS[0] = {
topbackground: 'white' ,
topfont: '400 24px helvetica' ,
topcolor: 'red' ,
downbackground: 'green' ,
downfont: '200 16px helvetica' ,
downcolor: 'gold' //no trailing comma!
}
CSS[1] = {
topbackground: 'blue' ,
topfont: '400 20px monospace' ,
topcolor: 'skyblue' ,
downbackground: 'yellow' ,
downfont: '200 18px "times new roman"' ,
downcolor: 'saddlebrown'
}
CSS[2] = {
topbackground: 'gray' ,
topfont: '400 24px helvetica' ,
topcolor: 'salmon' ,
downbackground: 'silver' ,
downfont: '200 16px helvetica' ,
downcolor: 'darkred'
}

function setFrameCSS(props) {
with (top.topFrame.document.body.style) {
background = props.topbackground;
font = props.topfont;
color = props.topcolor;
}
with (document.body.style) {
background = props.downbackground;
font = props.downfont;
color = props.downcolor;
}
}

</script>
</head>
<body>
<h4>Select a color scheme:</h4>
<p style="padding-left:20px;">
<input type="radio" name="radiobutton" value="White;Green"
onclick="setFrameCSS(CSS[0])">
White & Green</p>
<p style="padding-left:20px;">
<input type="radio" name="radiobutton" value="Blue:Yellow"
onclick="setFrameCSS(CSS[1])">
Blue & Yellow</p>
<p style="padding-left:20px;">
<input type="radio" name="radiobutton" value="Gray;Silver"
onclick="setFrameCSS(CSS[2])">
Gray & Silver
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum