Two Different Functionalities For One Button

**dwalker_88** · 03-04-2010 05:46 PM

Hello,

I hope someone here can help me find an answer to a problem I have.

I would like to be able to have a group of buttons, that when the user clicks on one of the buttons once it does one function and when it is clicked for a second time it does a different function. Each of the buttons in the group want to do different things - there are four in total.
The functionality of what I'm after is something along the lines of what the BBC have on their 'iplayer' website. Where the user can click a channel number once and it opens a list of recent programs for that channel, when you click the same channel for a second time it loads a new page.
http://www.bbc.co.uk/iplayer/
I know to start off with you could some code which attaches a class to the hyperlink saying if it's active or not.

document.getElementByTagName('a').setAttribute('class', 'active'))

I can't even seem to get that to work across all the buttons though, only the first 'a' tag in the div container. Then I'm snookered after that.

I'm not the most proficient Javascript coder but I do believe this can be done in Javascript, if you know more about it than I do that is. So if anyone was to be ever so kind to help me out, could they explain simply please

Regards
David

**JMRKER** · 03-04-2010 08:58 PM

See if you can do something with this ...

Code:

<html>
<head>
<title>Dual Button Function</title>
<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=225825

function first() {
  document.getElementById('btn1f1').style.display = 'block';
  document.getElementById('btn1').value="Do the second function";
  document.getElementById('btn1').onclick=function(){second();};
}
function second() {
  document.getElementById('btn1f1').style.display = 'none';
  document.getElementById('btn1f2').style.display = 'block';
  document.getElementById('btn1').style.display = 'none';
}
</script>
</head>
<body>
<input id="btn1" type="button" onclick="first()" value="Do the first function">
<div id='btn1f1' style="display:none">This is the action of the<br>first button<br>first function</div>
<div id='btn1f2' style="display:none">This is the action of the<br>first button<br>second function</div>
</body>
</html>

**dwalker_88** · 03-05-2010 06:54 AM

JMRKER,

Thank you ever so much for that code, the functionality is excatly what I'm after. However I'm afraid I didn't explain myself enough in my first post - sorry.

My button is not an input type it is an image with a hyperlink wrapped around it. I thought that the code you gave me would still work but it doesn't, or rather the first function works but it wont call the second function after the first has been activated.

Any clues one a way of getting it do work please?

Thanks again for your help

**JMRKER** · 03-05-2010 08:25 AM

Post the code that's giving you a problem.
My mind reading capabilities suck!

**dwalker_88** · 03-05-2010 08:58 AM

Here is the code..

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
    function first() 
    {
        document.getElementById('twitter').style.display = 'block';
	document.getElementById('btn1').onClick=function(){second();};
				
    }
    function second() 
    {
        document.getElementById('twitter').style.display = 'none';
	document.getElementById('btn1').onClick=function(){window.open('http://twitter.com/TrueReplica', '', '');}
				
    }
		
</script>


</head>

<body>
<div id="wrapper">
<div id="rss_feeds">
    <div id="rss_buttons">
        <a href="#"  title=""><img src="images/flickr_button.jpg" alt="" title="" /></a>
        <a href="#" onClick="first();" id="btn1" title=""><img src="images/twitter_button.jpg" alt="" title="" /></a>
        <a href="#" title=""><img src="images/facebook_button.jpg" alt="" title="" /></a>
        <a href="#" title=""><img src="images/linkedin_button.jpg" alt="" title="" /></a>
				
    </div>
				
    <div id="feeds">
        <img src="images/t_icon.gif" alt="Twitter Feed Icon" title="Twitter Feed Icon" />
    <div id="rss_content">
        <div id="twitter">
           <!-- Get the rss feeds for respective networks -->
            <?php foreach($twitter_feed -> get_items(0, 1) as $item) :
	        $string = $item -> get_description();

		echo $string;

            endforeach; ?>
        </div>

      <!-- ^^ repeat for each of the networks ^^- ->						
    </div>
</div>
</div>
</body>
</html>

So basically what I have is a group of buttons (in <div id="rss_buttons">, when clicked loads rss feeds into <div id="rss_content">. When the button is clicked that already has it's feed open I want it to open the web page of the Social Networking website to open.

Hope you can understand my code.

Thanks

**JMRKER** · 03-05-2010 03:25 PM

I don't know anything about PHP code, so I commented out that section for testing purposes.

I did not have the locations for you image displays, so I entered alt='descriptions' to see button designs

Looks like you had a combination of problems.
1. Un-match <div> </div> tags
2. The 'onClick=...' function should be 'onclick=...' For some reason it REQUIRES lower case to work correctly.
3. I'm not sure you if this is what you wanted, but it requires 3 clicks to get to the twitter site
... A. 1st click un-hides twitter RSS feed
... B. 2nd click hides twitter RSS and sets up 3rd click
... C. 3rd click links to twitter site.

That appears to be your logic. If you only want 2 clicks total, I would move the second onclick action into the first onclick setting.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
// For: http://www.webdeveloper.com/forum/showthread.php?t=225825

    function first() {		// alert('Got to 1st function');	// for testing purposes
        document.getElementById('twitter').style.display = 'block';
	document.getElementById('btn1').onclick=function(){second();};
    }
    function second() {  	// alert('Got to 2nd function');	// for testing purposes
        document.getElementById('twitter').style.display = 'none';
	document.getElementById('btn1').onclick=function(){window.open('http://twitter.com/TrueReplica', '', '');}
    }
		
</script>
</head>

<body>
<div id="wrapper">
  <div id="rss_feeds">
    <div id="rss_buttons">
        <a href="#"  title=""><img src="images/flickr_button.jpg" alt="flickr" title="" /></a>
        <a href="#" onclick="first();" id="btn1" title="twitter">
		<img src="images/twitter_button.jpg" alt="twitter" title="" /></a>
        <a href="#" title=""><img src="images/facebook_button.jpg" alt="facebook" title="" /></a>
        <a href="#" title=""><img src="images/linkedin_button.jpg" alt="linkedin" title="" /></a>
				
    </div>
				
    <div id="feeds">
        <img src="images/t_icon.gif" alt="Twitter Feed Icon" title="Twitter Feed Icon" />
      <div id="rss_content">
        <div id="twitter" style="display:none" >
           <!-- Get the rss feeds for respective networks -->
<!--
            <?php foreach($twitter_feed -> get_items(0, 1) as $item) :
	        $string = $item -> get_description();

		echo $string;

            endforeach; ?>
--> Have no PHP experience<br> Get the rss feeds for respective networks
        </div>
      </div>
      <!-- ^^ repeat for each of the networks ^^ -->						
    </div>
  </div>
</div>
</body>
</html>

Good Luck!

**dwalker_88** · 03-06-2010 05:09 PM

Hi JMRKER,

You legend!

Thank you very much, works exactly how I wanted it to.

**JMRKER** · 03-06-2010 06:53 PM

You're most welcome.
Glad I was able to help.
Good Luck!

Thread: Two Different Functionalities For One Button

Thread Tools

Display

Two Different Functionalities For One Button

Consider this ...

Try this ...

Thank You

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions