www.webdeveloper.com
Results 1 to 8 of 8

Thread: Two Different Functionalities For One Button

  1. #1
    Join Date
    Mar 2010
    Posts
    13

    Question Two Different Functionalities For One Button

    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

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410

    Consider this ...

    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>

  3. #3
    Join Date
    Mar 2010
    Posts
    13
    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

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410
    Post the code that's giving you a problem.
    My mind reading capabilities suck!

  5. #5
    Join Date
    Mar 2010
    Posts
    13
    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

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410

    Lightbulb Try this ...

    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!

  7. #7
    Join Date
    Mar 2010
    Posts
    13

    resolved Thank You

    Hi JMRKER,

    You legend!

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

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410
    You're most welcome.
    Glad I was able to help.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles