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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Feb 2004
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    BackgroundButtons

    BackgroundButtons Is simply just a bunch of buttons that change the background.
    This is useful for someone who's eyes hurt, or just wanna have fun. This file includes a readme and a sample.
    Code:
    <h1>Customization</h1>
    <h2>What do you want the background color to be?</h2> 
    <form>
    <input type="button" Value="Click for Black" onClick="document.bgColor='Black'">
    <input type="button" Value="Click for White" onClick="document.bgColor='White'">
    <input type="button" Value="Click for Green" onClick="document.bgColor='green'">
    <input type="button" Value="Click for blue" onClick="document.bgColor='blue'">
    <input type="Button" Value="Click for red" onClick="document.bgColor='red'"
    </form>
    Enjoy !
    Attached Files Attached Files
    Last edited by arian; 02-02-2004 at 03:43 AM.
    Bring it on

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Good work, but I have some bad news. I'm not so sure that this script meets the requirements man.

    "This is a new (and experimental) category added for seasoned JavaScripters to post a useful script or code snippet to benefit the public or for critiquing. The emphasis here is "seasoned" and "useful." For those new to JavaScript, this is not the forum to showcase "my first script", or ask for help debugging one."

    http://www.codingforums.com/showthre...&threadid=1510

    Since I had to be the guy to bring this to your attention, I'll offer you what every other script in this forum gets, input. I see a problem where when you click on the background black button, the text becomes unreadable. Some suggestions:

    - change text color on click of black
    - change text color on every button to the opposite of that color
    Last edited by Antoniohawk; 02-03-2004 at 12:48 AM.

  • #3
    New Coder
    Join Date
    Feb 2004
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops! i wasn't thinking when I posted this here. Sorry. As for the text... I see your point. However, if u do wish to use more colors, download the update. Back to the subject of "My first script" I'll remember that next time. i'm diss a pointed though . I was working on one for scrollbars.
    Attached Files Attached Files
    Bring it on

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    What would be interesting, that I have tried to do to no avail, is to make the button pop up a "color box" that shows pretty much every color and in witch you could select the color you wish to use as background. Am I clear?

    I've tryed to do this, but the "color box" that has every color is something I'm not able to do... I was able to do it for black and white, wich is pretty fun
    Shawn

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I bet you could do that with javascript and some dom. You could cycle through every color with javascript and then print out a table with each cell a different color. That's a good idea, I might have to try to do that.

    P.S. cyan button doesnt work

  • #6
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well, I had a try in black and white. Tell me what ya think.

    I know there might be a lot of useless stuff in there and bad stuff but you know, it's the first version of the script and it's late. I might clean it up tomorrow, gotta go to bed.
    Enjoy.


    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    
    function appear()
    {
    xPos=event.clientX;
    yPos=event.clientY;
    color_box.style.visibility="visible";
    color_box.style.left=xPos;
    color_box.style.top=yPos;
    }
    
    function change(new_color)
    {
    document.bgColor=new_color;
    color_box.style.visibility="hidden";
    }
    
    function convert(c)
    {
    return parseInt(c, 10).toString(16);
    }
    
    -->
    </script>
    </head>
    <body>
    
    <table id="color_box" align="center" border="0" cellpading="0" cellspacing="1" style="visibility: hidden; position: absolute;">
    <tr>
    
    <script type="text/javascript">
    <!--
    
    for (c = 0; c <= 255; c++)
    
    {
    n=convert(c)
    if (n < 10) 
    {
    n="0"+n
    }
    else
    {
    n=n
    }
    
    if (c%16 == 0){
    
    document.write("</tr><tr>")
    }
    m=n.toUpperCase()
    t="#";
    b=t+n+n+n.toString();
    l='<td width="10px" height="10px" onClick="change(\''+b+'\')" bgcolor="#'+n+n+n+'" title="'+m+m+m+'"></td>'
    document.write(l)
    }
    -->
    </script>
    
    </tr>
    </table>
    <a href="#" onClick="appear()">Click to change</a>
    </body>
    </html>
    Cya

    btw, when you see this line:
    l='<td width="10px" height="10px" onClick="change(\''+b+'\')" bgcolor="#'+n+n+n+'" title="'+m+m+m+'"></td>'

    there sould be an upside down / here: change(upside down / ''+b... and here: b+'upsidedown /')"...

    For some reason, it doesn't appear when I post. Can someone explain?
    Last edited by shlagish; 02-03-2004 at 04:37 AM.
    Shawn

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Not working for me in IEW 6, something to do with missing ' '.

    Edit:
    Lol you posted just as I did. No idea why that is happening, i'll add it to the code and give it a test.

  • #8
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    yes, exactly, try my trick, do you know what I mean?

    I,ve edited my previous post.
    Shawn

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Still getting an error

    Edit:
    Try this, it works... I think so at least.

    Code:
    l='<td width="10px" height="10px" onClick="change("upside down /"+b+"upsidedown /")" bgcolor="#"+n+n+n+"" title=""+m+m+m+""></td>'
    Last edited by Antoniohawk; 02-03-2004 at 04:41 AM.

  • #10
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here is a working link:

    http://www.angelfire.com/pro/shlagish/bgChange.html

    If that still doesn't work, it means that my script is not compatible with your browser. I have IE5.5
    Shawn

  • #11
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by shlagish
    I have IE5.5
    so its true... there are still people using it

    I take no responsibility for the above nonsense.


    Left Justified

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    On mozilla the script doesnt work. In IE 6 it works fine but throws an error.

  • #13
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    lol, ok, I guess I'll try "debugging it". But not now, I have to go eat. I'll do it later.
    Shawn

  • #14
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here, I made some changes, maybe it will work now, don't know. It has always worked for me...
    If it doesn't work, could someone tell me why?
    What am I using that is not correct?

    Here's the new code (don't forget about the missing backward "/"s ):
    Code:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    
    function appear()
    {
    var xPos=event.clientX;
    var yPos=event.clientY;
    document.getElementById("color_box").style.visibility="visible";
    document.getElementById("color_box").style.left=xPos;
    document.getElementById("color_box").style.top=yPos;
    }
    
    function change(new_color)
    {
    document.body.style.backgroundColor=new_color;
    document.getElementById("color_box").style.visibility="hidden";
    }
    
    function convert(c)
    {
    return parseInt(c, 10).toString(16);
    }
    
    -->
    </script>
    </head>
    <body>
    
    <table id="color_box" name="color_box" cellspacing="1" style="visibility: hidden; position: absolute;">
    <tr>
    
    <script type="text/javascript">
    <!--
    
    for (c = 0; c <= 255; c++)
    
    {
    n=convert(c)
    if (n < 10) 
    {
    n="0"+n
    }
    else
    {
    n=n
    }
    
    if (c%16 == 0){
    
    document.write("</tr><tr>")
    }
    m=n.toUpperCase()
    b="#"+n+n+n.toString();
    l='<td width="10px" height="10px" onClick="change(\''+b+'\')" bgcolor="#'+n+n+n+'" title="'+m+m+m+'"></td>'
    document.write(l)
    }
    -->
    </script>
    
    </tr>
    </table>
    <a href="#" onClick="appear()">Click to change</a>
    </body>
    </html>
    and the new link: http://www.angelfire.com/pro/shlagish/bgChange.html

    edit: I've made another update, I'm pretty sure it'll work now
    Last edited by shlagish; 02-04-2004 at 03:25 AM.
    Shawn

  • #15
    Regular Coder
    Join Date
    Dec 2003
    Location
    USA
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Error: Event is not defined. Line 8


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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