"Selected" hyperlink button unselecting previously selected one

Ah hello

I have a HTML page that is split into two frames: the left hand frame is an "index" page listing a lot of dates (each one being a hyperlink), clicking a link changes the contents of the right hand frame to be a page showing details relevant to the date that was clicked.  The left hand frame is 20%, the right hand frame is 80% of the overall page.

This works OK but I have an issue in that when I click a date, if there is a lot of content in the right hand frame I can sometimes forget what date I actually clicked after reading it all: there is no mention of the date on each page displayed in the right hand frame apart from in its filename.  Hence, what I would like is a style on the hyperlinks on the "index" page that enables the user to see which "date" they have clicked; kind of a "selected" state.  

This shouldn't be too difficult, but the thing is I need the previously "selected" hyperlink to revert back to its none-selected state when another one is clicked so that only one is ever in the "selected" state at once.  I'd like to achieve this with buttons: the "selected" button has a border around it, and all other buttons don't.

Is this possible?  If so can someone please advise/guide?

Many thanks in advance.
LVL 19
mrwad99Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SteHCommented:
When you first search for the selected one, and remove the "selection" before you highlight the next one, it should be done. I guess the selection is done by a CSS class.

Then something like
$("button.classSelect").removeClass("classSelect");
$("new button").addClass("classSelect");

Open in new window

mrwad99Author Commented:
That is a similar idea to what I come up with, but it doesn't work.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
myActiveButton{
    font-size: 18px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}
</style>
<script language=javascript>
function ChangeStyle(id)
{
    id.class="myActiveButton";
}
</script>
</head>
<body>
<form id="MyForm">
<input type="button"  class ="myActiveButton" value="Hi there!" id="MyButton" onclick="ChangeStyle(this.id)"/>
</form>
</body>
</html>

Open in new window


The code you have posted doesn't look familiar.  Can you adjust what I have above to include it please?  I suppose I could store the currently selected button in a form variable then unset the selected state of it...
SteHCommented:
My proposal used jquery. Without you should do in your button click function something like

oldButton = document.getElementById(oldId);
oldButton.className = "all classes except myActiveButton";
newButton = document.getElementById(id);
newButton.className = newButton.className +"myActiveButton";

Open in new window


if only one button has this class, you can search for it by
oldButton = document.getElementByClass("myActiveButton");

Open in new window

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

sajayj2009Commented:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style>
.myActiveButton{
    font-size: 18px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}
.myButton{
    font-size: 18px;
    border: 2px solid transparent;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}
</style>
<script language=javascript>
function ChangeStyle(id)
{
    document.getElementByClass("myButton").replace("myActiveButton","");
    document.getElementById(id).className = "myActiveButton";
}
</script>
</head>
<body>
<form id="MyForm">
<input type="button"  class="myButton" value="Hi there!" id="MyButton" onclick="ChangeStyle(this.id)"/>
</form>
</body>
</html>

Open in new window

mrwad99Author Commented:
sajayj2009, using your code doesn't give me a button whose border turns red when clicked....nothing happens when I click the button...
mrwad99Author Commented:
Right so I have got the following after experimentation.  Can someone please advise why I cannot change the style of a button more than once - that is, on first click I get the red border, if I click the same button again the border goes, but clicking a third time doesn't restore the border.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script language=javascript>
    function SetFrameURL(URL, ButtonID)
    {
        //parent.chat.location.href=URL;
        if (myForm.SelectedButton.value != "")
        {
            oldButton = document.getElementById(myForm.SelectedButton.value);
            oldButton.className = oldButton.className - "myActiveButton";
        }
        alert(myForm.SelectedButton.value);
        newButton = document.getElementById(ButtonID);
        newButton.className = newButton.className +"myActiveButton";
        myForm.SelectedButton.value=ButtonID;
    }  
    </script>
    <style type="text/css">
    
    .myActiveButton
    {
        border: 2px solid red;
    }
    .myInactiveButton
    {
        border: none;
    }    
    input[type=button] 
    {
    width: 10em;  height: 2em;
    }
</style>
</head>
<body>
<form name="myForm">
<input type="button" id="A1" onclick="SetFrameURL('Individual/July 28th.htm', this.id)" value="July 28th 2015" /><br />
<input type="button" id="A2"  onclick="SetFrameURL('Individual/July 27th.htm', this.id)" value="July 27th 2015" /><br />
<input type="button" id="A3"  onclick="SetFrameURL('Individual/July 24th.htm', this.id)" value="July 24th 2015" /><br />
<input type="button" id="A4" onclick="SetFrameURL('Individual/July 17th.htm', this.id)" value="July 17th 2015" /><br />
<input type=hidden id="SelectedButton" />
</form>
</body>
</html>

Open in new window

Rainer JeschorCommented:
Hi,
the JavaScript code is quite simplier than that:
function SetFrameURL(URL, ButtonID)
{
    var selectedButtons = document.getElementsByClassName('myActiveButton');
    for (var i=0,len=selectedButtons.length;i<len;i++) {
        selectedButtons[i].className = 'myInactiveButton';
    }
    document.getElementById(ButtonID).className = 'myActiveButton';
}  

Open in new window

First get all buttons which have that class of selected and set it to the inactive class. Then set the current active one. Done.

Live sample:
http://jsfiddle.net/EE_RainerJ/nagpy0oe/

HTH
Rainer

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mrwad99Author Commented:
That's great Rainer, thanks!  Would you happen to know how I can fix the style after clicking so that the only thing removed is the red border?  The buttons seems to go a lighter grey and has all the border removed: I'd like the button to be back as it was before the red was added...
Rainer JeschorCommented:
Hi,
:-)
Just do not set a class at all - then it is taking the default style again.
I have updated the jsFiddle:
http://jsfiddle.net/EE_RainerJ/nagpy0oe/

HTH
Rainer
mrwad99Author Commented:
Thanks very much all!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.