SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change button state on three buttons in a row.

    I have three buttons, 1,2 & 3, and wont to change their state when clicked.

    Got it so that when you say click 1 it changes, no problem at all.

    Code:
    <img src="../images/home_Featured_Button1_Normal.jpg" name="pic" onclick="window.document.pic.src='../images/home_Featured_Button1_Clicked.jpg';"/>
    What I would like to happen though is then when button 2 is clicked, 1 and 3 return to their normal state, then when 1 is clicked 2 and 3 go back and so on.

    Has anybody got any ideas.

    Is it also possible because its jscript to have the icon change to a finger when the image is rolled-over.

    Im guessing its an if statement inside the click function, but would like some help if thats ok.

  2. #2
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thought about it, and used on click inside a href as below:

    Code:
    <div id="featured_Button_1">
    <a href="#" onclick="window.document.pic.src='../images/home_Featured_Button1_Clicked.jpg';">
    <img src="../images/home_Featured_Button1_Normal.jpg" name="pic" border="0"/>
    </a></div>
    <div id="featured_Button_2">
    <a href="#" onclick="window.document.pic2.src='../images/home_Featured_Button2_Clicked.jpg';">
    <img src="../images/home_Featured_Button2_Normal.jpg" name="pic2" border="0"/>
    </a></div>
    <div id="featured_Button_3">
    <a href="#" onclick="window.document.pic3.src='../images/home_Featured_Button3_Clicked.jpg';">
    <img src="../images/home_Featured_Button3_Normal.jpg" name="pic3" border="0"/>
    </a></div>
    Seems to work fine unless there a better way, but still stuck with the orignal problem of when 1 is clicked, 2 and 3 go back and so on.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by multichild View Post
    Seems to work fine unless there a better way, but still stuck with the orignal problem of when 1 is clicked, 2 and 3 go back and so on.
    The way to do that is to return all of them to being unclicked, and to then set the one that was clicked to being clicked.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, do you have an example please.

    Is it unbind.

    If it is, wouldnt mind an example for my situation if possible.

    Cheers

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by multichild View Post
    Hi Paul, do you have an example please.
    This is a task that is much more difficult to achieve using JavaScript. CSS is by far the better one to use when changing the presentation of elements on the screen.
    For example: see this vidcast on creating a 3-state menu, and the demo
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul, will take a look.

  7. #7
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Swap(img,src){
     if (img.name&&!Swap[img.name]){
      Swap[img.name]=img.src;
     }
     if (Swap.lst&&Swap.lst.name&&Swap.lst!=img){
      Swap.lst.src=Swap[Swap.lst.name];
     }
     img.src=src;
     Swap.lst=img;
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <img name="pic1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
    <img name="pic2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
    <img name="pic2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
    </body>
    
    </html>

  8. #8
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Vic,

    Didnt have time to try this last week and just put it together and it worked perfectly, exactly what I needed.

    One more thing if its possible, can button 1 be seen in the second state when the user enters the page firstly or refreshes the page, so that button 1's contents can be seen, and then the incentive is to click button 2 and 3 to see the other results.

    Cheers

    Lee

  9. #9
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry to ask again, but now its working I can see what I need to do.

    The three buttons are lined up with an area below that will change according to the button click, and that content is coming from a MySQL database using PHP.

    The normal way I suppose would be that when one of those buttons are clicked the page refreshes and some indicator lets the cose know what content to display, whether its 1,2 or 3.

    Is there another way of doing this without having to refresh the page, so its almost like a flash widget I suppose, where the content changes on button click but the page doesnt need to refresh.

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Swap(img,src){
     if (img.name&&!Swap[img.name]){
      Swap[img.name]=img.src;
     }
     if (Swap.lst&&Swap.lst.name&&Swap.lst!=img){
      Swap.lst.src=Swap[Swap.lst.name];
     }
     img.src=src;
     Swap.lst=img;
    }
    
    /*]]>*/
    </script></head>
    
    <body>
    <img name="pic1" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
    <img name="pic2" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
    <img name="pic3" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');" />
    <script  type="text/javascript">
    
    Swap.pic1='http://www.vicsjavascripts.org.uk/StdImages/One.gif';
    Swap.lst=document.images.pic1;
    
    </script>
    
    </body>
    
    </html>

  11. #11
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Vic, yep that worked prefectly.

    Thank you

  12. #12
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you use the same idea to change content placed in a div below these buttons.

    The content which is drawn out of the database using php and mysql needs to show a featured hotel, so when button 2 is then clicked, featured hotel number 2 is shown with a description and an image.

    This sounds very complicated in honesty, and not 100% it can be done.

    Maybe I will have to change tact with the buttons

  13. #13
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #tst {
      position:absolute;left:100px;top:100px;width:200px;height:200px;border:solid red 1px;text-Align:center;background-Color:#FFFFCC;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Swap(img,src){
     if (img.name&&!Swap[img.name]){
      Swap[img.name]=img.src;
     }
     if (Swap.lst&&Swap.lst.name&&Swap.lst!=img){
      Swap.lst.src=Swap[Swap.lst.name];
     }
     img.src=src;
     Swap.lst=img;
    }
    
    
    var zxcHotel={
    
     init:function(o){
      var id=o.ID,nu=o.Display,ms=o.SlideDuration,obj=document.getElementById(id),w=obj.offsetWidth,h=obj.offsetHeight,clds=obj.childNodes,ary=[],z0=0;
      obj.style.overflow='hidden';
      for (;z0<clds.length;z0++){
       if (clds[z0].nodeType==1){
        clds[z0].style.position='absolute';
        clds[z0].style.left=w+'px';
        clds[z0].style.top='0px';
        clds[z0].style.width=w+'px';
        clds[z0].style.height=h+'px';
        ary.push([clds[z0],'dly'+z0]);
       }
      }
      nu=ary[nu]?nu:0;
      ary[nu][0].style.left='0px';
      this['zxc'+id]={
       ary:ary,
       w:w,
       nu:nu,
       ms:typeof(ms)=='number'?ms:1000
      }
     },
    
     GoTo:function(id,nu){
      var o=this['zxc'+id],ud
      if (o&&o.ary[nu]&&nu!=o.nu){
       ud=nu>o.nu;
       clearTimeout(o.ary[o.nu][1]);
       this.animate(o,o.ary[o.nu],0,o.w*(ud?-1:1),new Date(),o.ms);
       clearTimeout(o.ary[nu][1]);
       this.animate(o,o.ary[nu],o.w*(ud?1:-1),0,new Date(),o.ms);
       o.nu=nu;
      }
     },
    
     animate:function(o,ary,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       ary[0].style.left=now+'px';
      }
      if (ms<mS){
       this[ary[1]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
      }
      else {
       ary[0].style.left=t+'px';
      }
     }
    
    
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    
    <img name="pic1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');zxcHotel.GoTo('tst',0);" />
    <img name="pic2" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');zxcHotel.GoTo('tst',1);" />
    <img name="pic3" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');zxcHotel.GoTo('tst',2);" />
    
     <div id="tst" >
      <div class="hotel" >
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
       Hotel 1
      </div>
      <div class="hotel" >
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
       Hotel 2
      </div>
      <div class="hotel" >
       <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
       Hotel 3
      </div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    zxcHotel.init({
     ID:'tst',          // the unique ID of the parent DIV.                (string)
     Display:1,         //(optional) the initial hotel to display.         (number, default = 0)
     SlideDuration:500  //(optional) the islide duration in milli seconds. (number, default = 1000)
    })
    
    Swap.pic2='http://www.vicsjavascripts.org.uk/StdImages/One.gif';
    Swap.lst=document.images.pic2;
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>

  14. #14
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vic, fair play that is a very good bit of code, it works perfectly.

    The way I have it is that I have the three buttons as you know, and then there is a space to their left, and a space below.

    The images that change on each button click are to the left and work perfectly, so the next bit for me to develop is the space below which will have some data in relation to the imagery and will have to come out of the database.

    So is it right that the way to achieve this is in the same way as the imagery in that the data is loaded ready, and then on button click it slides back and forth? Ideally it just appears, but sliding isnt a problem.

    I have included a link below so you can it in action.

    http://roomcheck.csf.dcmanaged.com/more.php

    If you are able to help on this last one that will be it then, and beforehand thank you very much.

  15. #15
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    have made some good progress by replicating the code and playing with the position of the second lot of data, as you will see below:
    http://roomcheck.csf.dcmanaged.com/more.php

    So that I have control of the data to the left (imagery) and below (text).

    As you know I have used your sliding code, but wondered if there was a way of that data below the buttons appearing without sliding.

    This is what I used on the buttons:

    Code:
    <div id="featured_Button_1">
    <img name="pic1" src="../images/home_Featured_Button1_Clicked.jpg" alt="img" onmouseup="Swap(this,'../images/home_Featured_Button1_Clicked.jpg');zxcHotel.GoTo('tst',0);zxcHotel.GoTo('tstD',0);" />
    </div>
    <div id="featured_Button_2">
    <img name="pic2" src="../images/home_Featured_Button2_Normal.jpg" alt="img" onmouseup="Swap(this,'../images/home_Featured_Button2_Clicked.jpg');zxcHotel.GoTo('tst',1);zxcHotel.GoTo('tstD',1);" />
    </div>
    <div id="featured_Button_3">
    <img name="pic3" src="../images/home_Featured_Button3_Normal.jpg" alt="img" onmouseup="Swap(this,'../images/home_Featured_Button3_Clicked.jpg');zxcHotel.GoTo('tst',2);zxcHotel.GoTo('tstD',2);" />
    </div>
    
    <div id="featuredEndBlock"></div>
    <!-- 7 featured_Top --></div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    zxcHotel.init({
     ID:'tst',          // the unique ID of the parent DIV.                (string)
     Display:0,         //(optional) the initial hotel to display.         (number, default = 0)
     SlideDuration:500  //(optional) the islide duration in milli seconds. (number, default = 1000)
    })
    
    Swap.pic1='../images/home_Featured_Button1_Normal.jpg';
    Swap.lst=document.images.pic1;
    
    
    /*]]>*/
    </script>
    <div id="tstD">
      <div class="hotel">Hotel 1</div>
      <div class="hotel">Hotel 2</div>
      <div class="hotel">Hotel 3</div>
    
     <script type="text/javascript">
    /*<![CDATA[*/
    zxcHotel.init({
     ID:'tstD',          // the unique ID of the parent DIV.                (string)
     Display:0,         //(optional) the initial hotel to display.         (number, default = 0)
     SlideDuration:500  //(optional) the islide duration in milli seconds. (number, default = 1000)
    })
    
    /*]]>*/
    </script>
    So basically rather than calling the slide function on button click, it calls a different function that just allows the info to appear rather than slide in.

    Thanks

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,718
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by multichild View Post
    but wondered if there was a way of that data below the buttons appearing without sliding.
    It sounds like what you're after is just a simple 3-state tabbed menu interface, where the content for each tab is already on the page, and the selection of each tab determines which part of that content is shown.

    There really are much simpler ways to achieve (which are also easier to maintain) than what is currently being done here.

    Also, if you don't mind taking advantage of jQuery, you may find that its tabs are useful: http://jqueryui.com/demos/tabs/
    The benefit of using that library for tabs, is that you don't need the content on the page right away either. Tabs can for example pull in ajax content, so that their content is only retrieved when the tab is clicked. There are a number of useful variations available there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just change the slide duration

    Code:
    zxcHotel.init({
     ID:'tstD',          // the unique ID of the parent DIV.                (string)
     Display:0,         //(optional) the initial hotel to display.         (number, default = 0)
     SlideDuration:10   //(optional) the islide duration in milli seconds. (number, default = 1000)
    })

  18. #18
    SitePoint Guru
    Join Date
    Feb 2006
    Location
    Chepstow, South Wales
    Posts
    907
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you guys,

    Very neat.


Bookmarks

Posting Permissions

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