Make buttons highlight when selected

**ketanco** · 04-07-2011, 07:30 PM

Hi please see

robofight.com/test/

when i click a button to go to a page, i want that button to stay highlighted. (so whichever page i am on, i want that button highlighted). how can I do that?

**JMRKER** · 04-07-2011, 08:13 PM

How about showing the code you are having problems with?

**misfitplanet** · 04-07-2011, 09:02 PM

Originally Posted by ketanco

Hi please see

robofight.com/test/

when i click a button to go to a page, i want that button to stay highlighted. (so whichever page i am on, i want that button highlighted). how can I do that?

I'm new to Javascript and I've got something working great. Here is the basic concept on how I do what you are asking.

All my buttons are divs.

Code:

var button1 = document.createElement('div');
var button2 = document.createElement('div');
var button3 = document.createElement('div');

when I want to highlight one of those I just set the sytle different, like it's background image or it's background color this way:

Code:

button2.setAttribute("style", "background-image:highlightedButton.png")

All the others get the regular button png this:

Code:

button2.setAttribute("style", "background-image:button.png")

I add them to a main div using appendChild like this:

Code:

mainDiv.appendChild(button2)

Then I finally add the main div to the body which causes the page to be drawn:

Code:

body.appendChild(mainDiv)

Now, for keeping the page aligned with a button, like you want. I attach my event to buttons they know the page they turn to because of this code: ( you must add the events before you add mainDiv to body)

Code:

button.setAttribute("onclick", "changePage(buttonsPage)")

When the mainDiv is added to the body element the page is redrawn and the highlighted button gets a different background. It's event is set to specific page.

The changePage function actuall removes the old main div and adds the new div you create each time there is a button click. It looks something like this:

Code:

function changePage(highlightedPage)
{
    
    var oldButtonBar = document.getElementById("buttonBar");
    
    var newButtonBar = buttonBarDivFunction("buttonBar", highlightedPage)  // events added inside this div function

    newButtonBar.appendChild(mainDiv(newButtonBar))
    
    var body = document.getElementsByTagName("body")[0];
 
    body.removeChild(oldButtonBar);
    
    body.appendChild(newButtonBar);
}

**JMRKER** · 04-07-2011, 09:15 PM

From where can I access your button images / color schemes?

**JMRKER** · 04-07-2011, 10:30 PM

Here's a version without the images.
You should be able to add them to the CSS command structure from the example.

Code:

<html>
<head>
<title> DIV Buttons </title>
<script type="text/javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?p=1148532#post1148532

function selectBtn(IDS) {
  var sel = document.getElementById('DIVbtns').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) {
	sel[i].style.backgroundColor = "yellow";
  }
  document.getElementById(IDS).style.backgroundColor = 'cyan';
}

</script>
<style type="text/css">
  .btnDIV { height:50px; width:100px; border:1px solid black; }
  #button1 { background-Color: yellow; }
  #button2 { background-Color: yellow; }
  #button3 { background-Color: yellow; }
</style>
</head>
<body>

<div id="DIVbtns">
<div id="button1" class="btnDIV" onclick="selectBtn(this.id)">Button 1</div><br>
<div id="button2" class="btnDIV" onclick="selectBtn(this.id)">Button 2</div><br>
<div id="button3" class="btnDIV" onclick="selectBtn(this.id)">Button 3</div>
</div>

</body>
</html>

Thread: Make buttons highlight when selected

Thread Tools

Display

Make buttons highlight when selected

Something to try ...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions