Button Colours

interrupt · August 26th, 2004, 07:10 AM

Hi guys,

Anyone know how to change the background-color attribute of all the buttons in a page at once?

cheers
interrupt

joefawcett · August 26th, 2004, 07:26 AM

Well there are two types of buttons, INPUTs with a type equal to button and BUTTONs. The code would be:

Code:

function changeButtonBackground(Colour)
{
  var colInputs = document.getElementsByTagName("input");
  for (var i = 0; i < colInputs.length; i++)
  {
    var oInput = colInputs[i];
    if (oInput.type.toLowerCase() == "button")
    {
      oInput.style.backgroundColor = Colour;
    }
  }
  var colButtons = document.getElementsByTagName("button");
  for (var i = 0; i < colButtons.length; i++)
  {
    colButtons[i].style.backgroundColor = Colour;
  }
}

Then somewhere you'd call

Code:

changeButtonBackground("#dd0000");

--

Joe

interrupt · August 26th, 2004, 07:33 AM

Thanks Joe, thats great. Is there a way to write a prompt into that? I want the user to pick their own button colours.....sorry to be a pain!

interrupt

joefawcett · August 26th, 2004, 08:16 AM

How flash do you want it? With IE6 you can use special box, or for older browsers a prompt dialog:

Code:

<html>
<head>
<title>Colour Picker</title>
<script type="text/javascript">

function changeButtonBackground(Colour)
{
  var colInputs = document.getElementsByTagName("input");
  for (var i = 0; i < colInputs.length; i++)
  {
    var oInput = colInputs[i];
    if (oInput.type.toLowerCase() == "button")
    {
      oInput.style.backgroundColor = Colour;
    }
  }
  var colButtons = document.getElementsByTagName("button");
  for (var i = 0; i < colButtons.length; i++)
  {
    colButtons[i].style.backgroundColor = Colour;
  }
}


function getColourFromDialog(InitialColour)
{
    var sInitial = InitialColour;
  var sColour = dlgHelper.ChooseColorDlg(sInitial);    
    sColour = sColour.toString(16);
  var iLength = sColour.length;
    sColour = "000000" + sColour;
    sColour = sColour.substr(iLength);
    return "#" + sColour;
}

function  changeColoursWithPicker(CurrentColour)
{
  var sInitial = CurrentColour;
  var sColour = getColourFromDialog(sInitial);
  changeButtonBackground(sColour);
}

function changeColoursWithPrompt()
{
  var sColour = prompt("Enter a colour.", "#00dd00");
  try
  {
    changeButtonBackground(sColour);
  }
  catch(e)
  {
    alert(e.message);
  }
}
</script>
</head>
<body>
<input type="button" value="Change with colour picker" onclick="changeColoursWithPicker(this.currentStyle.backgroundColor);"><br><br>
<input type="button" value="What's my colour?" onclick="alert(this.currentStyle.backgroundColor);"><br><br>
<button onclick="changeColoursWithPrompt();">Change with prompt</button>

<OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px" VIEWASTEXT></OBJECT>
</body>
</html>

--

Joe

Imar · August 26th, 2004, 12:55 PM

If you want to change the appearance at design time, you can also use CSS:

<style type="text/css">

button, input
{
background-color: red;
}
</style>

This code will change the appearance of all input and button elements. To avoid drop-down and other controls from changing as well, you could create a separate class for the buttons.

Cheers,

Imar

Snib · August 26th, 2004, 01:11 PM

Imar,

I believe Interrupt would like a prompt like Joe's solution.

Also, FWIW, instead of inventing a class to do the job of not changing non-button inputs, I think it's easier to use a CSS2/CSS3 selector like so:

button, input[type=button], input[type=submit]
{
background-color: red;
}

HTH,

Snib

<><

joefawcett · August 26th, 2004, 04:51 PM

Quote:

quote:Originally posted by Snib

Also, FWIW, instead of inventing a class to do the job of not changing non-button inputs, I think it's easier to use a CSS2/CSS3 selector like so:

button, input[type=button], input[type=submit]
{
background-color: red;
}

If you can find a browser that supports it :)

--

Joe (Co-author Beginning XML, 3rd edition)

Snib · August 26th, 2004, 04:57 PM

Actually, I use this...

http://dean.edwards.name/IE7/intro

...and it fixes IE5-6 up like Firefox ;)

HTH,

Snib

<><