Bug Tracker

Ticket #6767: testslide.html

File testslide.html, 2.0 KB (added by Alistair, 12 years ago)

Demo of bug

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html>
3
4  <head>
5   
6    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
7   
8    <script type="text/javascript">
9
10      $(document).ready(function() {
11
12        otherShowHide();
13       
14        $("#howhearsel").change(otherShowHide)
15       
16      });
17
18      function otherShowHide(event) {
19
20        var el = $("#howhearsel")
21
22        if (el.val().toLowerCase() == "other")
23        { // show the "other" text box.
24          if (!event) {
25            $("#howhearother").show(); // from document.ready, so just show it.
26          } else {
27            $("#howhearother").slideDown(function() { // slide it down.
28              $("#howhearother input").focus(); // this causes it to disappear in IE7.
29              //$("#howhearother input").get(0).focus(); // this is the fix, use this instead!
30            });
31          }
32        } 
33        else 
34        { // hide the "other" test box.
35          if (!event) {
36            $("#howhearother").hide(); // from document.ready, so just hide it.
37          } else {
38            $("#howhearother").slideUp(); // slide it up.
39          }
40        }
41
42      };
43
44    </script>
45   
46    <style type="text/css">
47      .lblcol { float:left; width:190px }
48      .fldcol { float:left }
49      .clear { clear:both }
50      #howhearother { margin-left: 190px }
51      #howhearother .lblcol { float:left; width: 60px }
52    </style>
53   
54  </head>
55
56  <body>
57
58    <div class="lblcol">How did you hear about us?</div>
59    <div class="fldcol">
60      <select name="howhear" size="1" id="howhearsel">
61        <option>Web Site</option>
62        <option>Other</option>
63      </select>
64    </div>
65    <div class="clear"></div>
66    <div id="howhearother">
67      <div class="lblcol">Other:</div>
68      <div class="fldcol"><input type="text" name="howhearother" size="50"/></div>
69    </div>
70
71  </body>
72
73</html>