...

View Full Version : BackgroundButtons



arian
02-02-2004, 02:09 AM
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.

<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 :D!

Antoniohawk
02-02-2004, 11:44 PM
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/showthread.php?s=&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

arian
02-03-2004, 02:40 AM
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.

shlagish
02-03-2004, 02:44 AM
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 :)

Antoniohawk
02-03-2004, 02:55 AM
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 :)

shlagish
02-03-2004, 03:28 AM
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.




<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?

Antoniohawk
02-03-2004, 03:34 AM
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.

shlagish
02-03-2004, 03:35 AM
yes, exactly, try my trick, do you know what I mean?

I,ve edited my previous post.

Antoniohawk
02-03-2004, 03:38 AM
Still getting an error :(

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



l='<td width="10px" height="10px" onClick="change("upside down /"+b+"upsidedown /")" bgcolor="#"+n+n+n+"" title=""+m+m+m+""></td>'

shlagish
02-03-2004, 03:40 AM
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

mindlessLemming
02-03-2004, 12:40 PM
Originally posted by shlagish
I have IE5.5

so its true... there are still people using it :rolleyes:

Antoniohawk
02-03-2004, 09:22 PM
On mozilla the script doesnt work. In IE 6 it works fine but throws an error.

shlagish
02-03-2004, 10:09 PM
lol, ok, I guess I'll try "debugging it". But not now, I have to go eat. I'll do it later.

shlagish
02-04-2004, 01:57 AM
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 ):


<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

Paul Jr
02-04-2004, 03:01 AM
Error: Event is not defined. Line 8

shlagish
02-05-2004, 12:53 AM
hmm

Thanks, I'll try to figure that out

shlagish
02-05-2004, 01:03 AM
hmm, I really can't see the problem there.

arian
02-13-2004, 01:32 AM
Originally posted by Antoniohawk
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/showthread.php?s=&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
To fix the Black And White problem, add the folowing code:


<script language="JavaScript">if body.bgColor='black'
{
body.text='white'
}
if body.bgColor='white'
{
body.text='black'
}
</script>

That might solve the problem. I don't know if it's "body.textColor" or "body.text".

shlagish
02-14-2004, 09:35 PM
That's good for black and white, but if you have any other color, it don't work no more. You would have to make hundreds of if statements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum