Ticket #3669: TestPage.htm

File TestPage.htm, 7.3 KB (added by bowyer99, 14 years ago)

example file to demonstate the issue, try in IE (works) then Firefox(not working)

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3<html xmlns="http://www.w3.org/1999/xhtml">
4<head>
5    <title></title>
6<script src="http://www.google.com/jsapi" type="text/javascript"></script>
7<script type="text/javascript">
8    // You may specify partial version numbers, such as "1" or "1.2",
9    //  with the same result. Doing so will automatically load the
10    //  latest version matching that partial revision pattern
11    //  (i.e. both 1 and 1.2 would load 1.2.6 today).
12    google.load("jquery", "1.2.6");
13
14    google.setOnLoadCallback(function() {
15        // Place init code here instead of $(document).ready()
16    });
17</script>
18
19
20<style type="text/css">
21.CollapsingPanel_Variation2a 
22{
23         width:100%;
24         margin:0px auto;
25         min-width:20em;
26}
27
28/******************************************************/
29/*                                      Header Styling                                    */
30/*****************************************************/
31
32
33.CollapsingPanel_Variation2a .HeaderRow .HeaderRight,
34.CollapsingPanel_Variation2a .HeaderRow .HeaderLeft
35{
36         font-size:1px; /* ensure minimum height */
37         height:28px;
38}
39
40
41.CollapsingPanel_Variation2a .HeaderRow 
42{
43         background:transparent url(CollapsingPanelSprite.gif) repeat-x 0px -40px;
44         height:28px;
45}
46
47.CollapsingPanel_Variation2a .HeaderRow .HeaderText
48{
49        margin-left:-18px;
50        line-height:28px;
51        position:relative; /* Required for negative margins in IE */
52}
53
54.CollapsingPanel_Variation2a .HeaderRow .HeaderLeft 
55{
56         background:transparent url(CollapsingPanelSprite.gif) no-repeat left 0px;
57         float:left;
58}
59
60
61.CollapsingPanel_Variation2a .HeaderRow .HeaderRight 
62{
63         background:transparent url(CollapsingPanelSprite.gif) no-repeat right -90px;
64         float:right;
65}
66
67/******************************************************/
68/*                                      Body Styling                                      */
69/*****************************************************/
70
71
72.CollapsingPanel_Variation2a .ContentRow 
73{
74        clear:both;
75        float:left;
76        width:100%
77}
78
79.CollapsingPanel_Variation2a .ContentRow .ContentLeft
80{
81        background:url(CollapsingPanelSprite-Vertical.gif) repeat-y left top;             
82    width:100%;
83}           
84.CollapsingPanel_Variation2a .ContentRow .ContentRight 
85{
86        background:url(CollapsingPanelSprite-Vertical.gif) repeat-y right top; 
87}
88
89.CollapsingPanel_Variation2a .ContentRow .Content 
90{
91        padding:10px 10px 0px 10px;
92        margin-bottom:-10px;
93        position:relative; /* Required for negative margins in IE */
94}
95
96
97/******************************************************/
98/*                                      Footer Styling                                    */
99/*****************************************************/
100
101
102.CollapsingPanel_Variation2a .FooterRow .FooterRight,
103.CollapsingPanel_Variation2a .FooterRow .FooterLeft,
104.CollapsingPanel_Variation2a .FooterRow
105{
106        height:18px;
107        font-size:1px;
108}
109
110.CollapsingPanel_Variation2a .FooterRow 
111{
112         background:transparent url(CollapsingPanelSprite.gif) repeat-x 0px -203px;
113         clear:both;
114}
115
116.CollapsingPanel_Variation2a .FooterRow .FooterLeft 
117{
118         background:transparent url(CollapsingPanelSprite.gif) no-repeat left -151px;
119         float:left;
120}
121
122.CollapsingPanel_Variation2a .FooterRow .FooterRight 
123{
124         background:transparent url(CollapsingPanelSprite.gif) no-repeat right -260px;
125         float:right;
126}
127
128.CollapsingPanel_Variation2a .FooterRow .FooterRight,
129.CollapsingPanel_Variation2a .FooterRow .FooterLeft,
130.CollapsingPanel_Variation2a .HeaderRow .HeaderRight,
131.CollapsingPanel_Variation2a .HeaderRow .HeaderLeft
132{
133        width:28px;
134}
135
136
137/************************************************/
138/*                              Collapsed Styling                               */
139/************************************************/
140
141
142.CollapsingPanel_Variation2a.Collapsed .HeaderRow .HeaderLeft,
143.CollapsingPanel_Variation2a.Collapsed .HeaderRow .HeaderRight
144{
145        width:30px;
146        height:28px;
147}
148
149.CollapsingPanel_Variation2a.Collapsed .HeaderRow
150{
151        background:transparent url(CollapsingPanelSprite.gif) repeat-x 0px -439px;
152        height:28px;
153}
154
155
156.CollapsingPanel_Variation2a.Collapsed .HeaderRow .HeaderLeft 
157{
158         background:transparent url(CollapsingPanelSprite.gif) no-repeat left -319px;
159         float:left;
160}
161
162
163.CollapsingPanel_Variation2a.Collapsed .HeaderRow .HeaderRight 
164{
165         background:transparent url(CollapsingPanelSprite.gif) no-repeat right -379px;
166         float:right;
167}
168
169.CollapsingPanel_Variation2a.Collapsed .ContentRow,
170.CollapsingPanel_Variation2a.Collapsed .FooterRow
171{
172        display:none;
173}
174</style>
175
176</head>
177<body>
178<script type="text/jscript">
179
180     $(document).ready(function() {
181         $("div.AgoraLiveCollapsingPanel").children(".HeaderRow").click(function() {
182             //$(this).css("background-color", "blue");
183             if ($(this).parent().hasClass("Expandable")) {
184                 if ($(this).parent().hasClass("Collapsed")) {
185                     $(this).parent().addClass("Expanded");
186                     $(this).parent().removeClass("Collapsed");
187
188                 }
189                 else {
190                     if ($(this).parent().hasClass("Expanded")) {
191                         $(this).parent().addClass("Collapsed");
192                         $(this).parent().removeClass("Expanded");
193                     }
194                 }
195             }
196         }); // End of .Click Function
197     });  //End of .Ready function
198     
199 </script>
200
201
202    <div id="CollapsingPanel2_divCollaspingPanel" class="AgoraLiveCollapsingPanel CollapsingPanel_Variation2a Collapsed Expandable">
203                            <div id="CollapsingPanel2_divHeaderRow" class="HeaderRow">
204                                <div id="CollapsingPanel2_divHeaderLeft" class="HeaderLeft">
205                                </div>
206                                <div id="CollapsingPanel2_divHeaderRight" class="HeaderRight">
207                                </div>
208                                <span id="CollapsingPanel2_spanHeaderText" class="HeaderText">HeaderText</span></div>
209                            <div id="CollapsingPanel2_divContentRow" class="ContentRow">
210                                <div id="CollapsingPanel2_divContentLeft" class="ContentLeft">
211                                    <div id="CollapsingPanel2_divContentRight" class="ContentRight">
212                                        <div id="CollapsingPanel2_divContent" class="Content">
213                                            Content<br />
214                                            Content<br />
215                                            Content<br />
216                                            Content<br />
217                                            Content<br />
218                                            <span id="Label2">qwe</span>
219                                        </div>
220                                    </div>
221                                </div>
222                            </div>
223                            <div id="CollapsingPanel2_divFooterRow" class="FooterRow">
224                                <div id="CollapsingPanel2_divFooterLeft" class="FooterLeft">
225                                </div>
226                                <div id="CollapsingPanel2_divFooterRight" class="FooterRight">
227                                </div>
228                                <span id="CollapsingPanel2_spanFooterText" class="FooterText"></span>
229                            </div>
230                        </div>
231   
232   
233</div>
234</body>
235</html>