www.webdeveloper.com
Results 1 to 7 of 7

Thread: If tirna is here...

  1. #1
    Join Date
    Jul 2010
    Posts
    28

    Exclamation If tirna is here...

    Hi again, (if someone other then tirna would like to answer this, you can read my post called 'basic question' a few lines down for clarification)

    I ran into another interesting situation.

    I am basically still doing the same thing I was last night except this time using check boxes instead of radio buttons. Here is the code I have.

    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>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title></title>
    <style type="text/css">
    body {background-color:#f7f3e9;}
    .container {margin: 30px auto; width: 800px; height: 500px;}
    .col1 {position: relative; width: 270px;height:500px;float:left;}
    .col2 {width: 500px;float:right; padding: 100px 0 50px; 0px;}
    .box {position: absolute; top: 200px; left:0; width:180px; height: 120px; border: 4px double #adadad;padding:30px;}
    </style>
    
    <script type="text/javascript">
    
        var a=1;
        var b=1;
    
    function newpic()  {
        var radBtns = new Array();
        //get all the radio buttons
        radBtns = document.getElementById("box").getElementsByTagName("input");
        //assign the values to a and b
        for(var i=0; i < radBtns.length; i=i+1) {
            if(radBtns[i].checked && radBtns[i].name == "sub1") a = 2; else a=1;
    		if(radBtns[i].checked && radBtns[i].name == "sub2") b = 2; else b=1;
        }
     document.getElementById("b1").src =a+"/"+b+"/1.png";
    }
    
    </script>
    
    </head>
    <body>
    <div class="container">
     <div class="col1">
      <div id="box" class="box">
    
    	<input type="checkbox" name="sub1" id="dtab1" value="1" onclick="newpic()"> Fire
    <input type="checkbox" name="sub2" id="dtab2" value="2" onclick="newpic()"> Garage
    
      </div>
     </div>
     <div class="col2">
      <a href=""><img border="0" alt="pics" src="1/1/1.png" id="b1" /></a>
     </div>
    </div>
    </body>
    </html>

    The interesting thing is that the code works like this:

    - the way it is now. only the second check box works.
    - if I remove the "else" from the "if" statement for the first check box, the first check box also works when i click it, but obviously does not return to normal when unclicked.
    - if I reverse the "a" and "b" variables between the lines, it is always the second checkbox only that works.
    - if I reverse the checkboxes or their names (sub1/2) it is always the second checkbox only that works.

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    It's not clear to me how you want the 2 checkboxes to function.

    In your other thread you had 4 radio buttons with 4 combinations possible from the 2 sets of radio buttons.

    Do you want to just simply toggle 2 images between the 2 checkboxes. Do you want the check boxesto behave like radio buttons..ie..only 1 checkbox can be checked at a time. Or do you want to allow both checkboxes to be checked at the same time? What do you want to happen if both checkboxes are checked?

  3. #3
    Join Date
    Jul 2010
    Posts
    28
    I want the checkboxes to provide 4 different options:

    ( ) (v) ( ) (v)
    ( ) ( ) (v) (v)

    thus doing the same thing as the 4 radio buttons except using only 2 checkboxes.

    so above the first set would call 1/1/1.png, the second 1/2/1.png, third 2/1/1.png, and fourth 2/2/1.png

  4. #4
    Join Date
    Jul 2010
    Posts
    28
    srry, the formatting got erased. so above each set would be 2 vertical boxes i.e.

    ( )
    ( )

  5. #5
    Join Date
    Mar 2010
    Posts
    2,803
    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>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title></title>
    <style type="text/css">
    body {background-color:#f7f3e9;}
    .container {margin: 30px auto; width: 800px; height: 500px;}
    .col1 {position: relative; width: 270px;height:500px;float:left;}
    .col2 {width: 500px;float:right; padding: 100px 0 50px; 0px;}
    .box {position: absolute; top: 200px; left:0; width:180px; height: 120px; border: 4px double #adadad;padding:30px;}
    </style>
    <script type="text/javascript">
     
        var a,b;
     
    function newpic()  {
         a = (document.getElementById("dtab1").checked)? 2 : 1 ;   
         b = (document.getElementById("dtab2").checked)? 2 : 1 ;
        
         alert(b+"/"+a+"/1.png");
         document.getElementById("b1").src =b+"/"+a+"/1.png";
    }
     
    </script>
    </head>
    <body>
    <div class="container">
     <div class="col1">
      <div id="box" class="box">
     <input type="checkbox" name="sub1" id="dtab1" value="1" onclick="newpic()" > Fire
     <input type="checkbox" name="sub2" id="dtab2" value="2" onclick="newpic()" > Garage
      </div>
     </div>
     <div class="col2">
      <a href=""><img border="0" alt="pics" src="1/1/1.png" id="b1" /></a>
     </div>
    </div>
    </body>
    </html>

  6. #6
    Join Date
    Jul 2010
    Posts
    28
    thanks again. it works.

    unfortunately it's not something i would have ever come up with based on the stuff you gave me before.

    i am guessing that what you did was a simplified version using the id tag directly and that the ? 2:1 is some sort of shorthand notation for the if else which I wouldn't know about.

    but not sure if the way i was doing it would have worked as well with some correction or if it was completely wrong for whatever reason.


    i realize now i am asking for a tutorial as well and don't want to take up any more of your time. what's important is that it works. I believe I now have all the components of what I need to do and will be able to put them together to get the final result which will be a combination of radio buttons and check boxes that will be cycling through all the 16 pics.


    thanks again

  7. #7
    Join Date
    Mar 2010
    Posts
    2,803
    no problem

    Since you had only 2 checkboxes, I thought it was easier to just check whether each was checked or not and assign the appropriate values for a and b using a 'shorhand' version of if-else.

    I then also had to reverse the order of a and b in your image path to get the order of paths to match your required order.

    You could have also done it the way you had as well but you had logic errors in your code. Your code logic was based on your previous scenario where you had 4 radio buttons and so was not correct for this case with 2 checkboxes.

    One way of doing it your way is:

    Code:
    function newpic()  {
        var radBtns = new Array();
        //get all the radio buttons
        radBtns = document.getElementById("box").getElementsByTagName("input");
        //assign the values to a and b
        for(var i=0; i < radBtns.length; i=i+1) {
            if(radBtns[0].checked) a = 2; else a = 1;
            if(radBtns[1].checked) b = 2; else b = 1;
        }
        alert(b+"/"+a+"/1.png");
     document.getElementById("b1").src =b+"/"+a+"/1.png";
    }

Thread Information

Users Browsing this Thread

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

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