Web Analytics Made Easy - StatCounter click n change background color. - CodingForum

Announcement

Collapse
No announcement yet.

click n change background color.

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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++
    Tags: None
  • #2
    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

    Comment

    • #3
      <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>

      Comment

      • #4
        TQ..... u r great!

        how if i want to change all the font color, font size????
        Last edited by NinjaTurtle; Jul 8, 2002, 11:11 PM.
        Thanks.
        =====================================================
        From NinjaTurtle
        ++http://ohmygoh.blogspot.com|http://technology.ohmygoh.com++

        Comment

        • #5
          <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>

          Comment

          • #6
            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++

            Comment

            • #7
              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
              vBulletin Mods That Rock!

              Comment

              • #8
                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:gold}
.thisStyle1{background:green; font:200 16px helvetica; color:gold}
.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>
                Scripting | JavaScripts | PerlScripts | Python Scripts | Articles | My Journal

                Comment

                • #9
                  <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>

                  Comment

                  Previous template Next
                  Working...
                  X