Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    358
    Thanks
    2
    Thanked 0 Times in 0 Posts

    click n change background color.

    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????
    Thanks.
    =====================================================
    From NinjaTurtle
    ++http://ohmygoh.blogspot.com|http://technology.ohmygoh.com++

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    344
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    <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>

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    358
    Thanks
    2
    Thanked 0 Times in 0 Posts
    TQ..... u r great!

    how if i want to change all the font color, font size????
    Last edited by NinjaTurtle; 07-09-2002 at 05:11 AM.
    Thanks.
    =====================================================
    From NinjaTurtle
    ++http://ohmygoh.blogspot.com|http://technology.ohmygoh.com++

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    <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>

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    358
    Thanks
    2
    Thanked 0 Times in 0 Posts
    can this do like a CSS file or do a loop, then i no need to duplicate so many set?
    Thanks.
    =====================================================
    From NinjaTurtle
    ++http://ohmygoh.blogspot.com|http://technology.ohmygoh.com++

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Mumbai, India
    Posts
    218
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The code for the main page:

    Code:
    <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>

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •