Ticket #4502: index.html

File index.html, 10.2 KB (added by gplocke, 10 years ago)

HTML test case illustrating bug.

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
4<head><script>if (window.top.location != window.location) { window.console = window.top.console; }</script>
5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
6<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
7<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
8<title>Sandbox</title>
9<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
10<style type="text/css" media="screen">
11body { background-color: #FFF; font: 16px Helvetica, Arial; color: #fff; }
12
13div#schedule {
14    width: 150px;
15    height: 1440px;
16    margin: 0;
17    padding: 0;
18    border: 1px solid #CCCCCC;
19    background-color: #FDFDFD;
20    background-image: url(http://webapps-dev.ncsu.edu/garrison/test/bg.png);
21    background-repeat: repeat-x; 
22}
23
24.ui-state-disabled, ui-selectable-disabled { 
25    opacity: 1;
26    filter: Alpha(Opacity=100);
27}
28
29.drophover {
30    background-color: #FF0000; 
31}
32
33.selectable .ui-selecting {
34    background: #FECA40;
35    width: 70%;
36}
37
38.selectable .ui-selected {
39    background: #F39814;
40    color: white;
41}
42
43.selectable {
44    margin: 0 auto;
45    padding: 0;
46    border: 0;
47    width: 100%;
48}
49
50.selectable div.scheduleRow {
51    margin: 0;
52    padding: 0;
53    height: 15px;
54}
55
56div.scheduleEvent {
57    width: 90%;
58    border: 1px solid #F37816;
59    float: left;
60    position: absolute;
61    margin: 0 0;
62    padding: 0;
63}
64
65div.scheduleEvent div.eventTime {
66    color: #FFFFFF;   
67    font-size: 11px;
68    padding: 0 2px;
69}
70
71.unselectedEvent {
72    background-color: #FF00FF;
73}
74
75.selectedEvent {
76    background-color: #FF0000;
77}
78
79.bt-content {
80  font-size: small;
81  color: #000;
82  line-height: normal;
83  padding: 10px 5px;   
84}
85
86</style>
87</head>
88<body>
89
90    <div id="schedule" class="selectable">
91            <div class="scheduleRow" id="row_0">&nbsp;</div>     
92            <div class="scheduleRow" id="row_1">&nbsp;</div>     
93            <div class="scheduleRow" id="row_2">&nbsp;</div>     
94            <div class="scheduleRow" id="row_3">&nbsp;</div>     
95            <div class="scheduleRow" id="row_4">&nbsp;</div>     
96            <div class="scheduleRow" id="row_5">&nbsp;</div>     
97            <div class="scheduleRow" id="row_6">&nbsp;</div>     
98            <div class="scheduleRow" id="row_7">&nbsp;</div>     
99            <div class="scheduleRow" id="row_8">&nbsp;</div>     
100            <div class="scheduleRow" id="row_9">&nbsp;</div>     
101            <div class="scheduleRow" id="row_10">&nbsp;</div>     
102            <div class="scheduleRow" id="row_11">&nbsp;</div>     
103            <div class="scheduleRow" id="row_12">&nbsp;</div>     
104            <div class="scheduleRow" id="row_13">&nbsp;</div>     
105            <div class="scheduleRow" id="row_14">&nbsp;</div>     
106            <div class="scheduleRow" id="row_15">&nbsp;</div>     
107            <div class="scheduleRow" id="row_16">&nbsp;</div>     
108            <div class="scheduleRow" id="row_17">&nbsp;</div>     
109            <div class="scheduleRow" id="row_18">&nbsp;</div>     
110            <div class="scheduleRow" id="row_19">&nbsp;</div>     
111            <div class="scheduleRow" id="row_20">&nbsp;</div>     
112            <div class="scheduleRow" id="row_21">&nbsp;</div>     
113            <div class="scheduleRow" id="row_22">&nbsp;</div>     
114            <div class="scheduleRow" id="row_23">&nbsp;</div>     
115            <div class="scheduleRow" id="row_24">&nbsp;</div>     
116            <div class="scheduleRow" id="row_25">&nbsp;</div>     
117            <div class="scheduleRow" id="row_26">&nbsp;</div>     
118            <div class="scheduleRow" id="row_27">&nbsp;</div>     
119            <div class="scheduleRow" id="row_28">&nbsp;</div>     
120            <div class="scheduleRow" id="row_29">&nbsp;</div>     
121            <div class="scheduleRow" id="row_30">&nbsp;</div>     
122            <div class="scheduleRow" id="row_31">&nbsp;</div>     
123            <div class="scheduleRow" id="row_32">&nbsp;</div>     
124            <div class="scheduleRow" id="row_33">&nbsp;</div>     
125            <div class="scheduleRow" id="row_34">&nbsp;</div>     
126            <div class="scheduleRow" id="row_35">&nbsp;</div>     
127            <div class="scheduleRow" id="row_36">&nbsp;</div>     
128            <div class="scheduleRow" id="row_37">&nbsp;</div>     
129            <div class="scheduleRow" id="row_38">&nbsp;</div>     
130            <div class="scheduleRow" id="row_39">&nbsp;</div>     
131            <div class="scheduleRow" id="row_40">&nbsp;</div>     
132            <div class="scheduleRow" id="row_41">&nbsp;</div>     
133            <div class="scheduleRow" id="row_42">&nbsp;</div>     
134            <div class="scheduleRow" id="row_43">&nbsp;</div>     
135            <div class="scheduleRow" id="row_44">&nbsp;</div>     
136            <div class="scheduleRow" id="row_45">&nbsp;</div>     
137            <div class="scheduleRow" id="row_46">&nbsp;</div>     
138            <div class="scheduleRow" id="row_47">&nbsp;</div>     
139            <div class="scheduleRow" id="row_48">&nbsp;</div>     
140            <div class="scheduleRow" id="row_49">&nbsp;</div>     
141            <div class="scheduleRow" id="row_50">&nbsp;</div>     
142            <div class="scheduleRow" id="row_51">&nbsp;</div>     
143            <div class="scheduleRow" id="row_52">&nbsp;</div>     
144            <div class="scheduleRow" id="row_53">&nbsp;</div>     
145            <div class="scheduleRow" id="row_54">&nbsp;</div>     
146            <div class="scheduleRow" id="row_55">&nbsp;</div>     
147            <div class="scheduleRow" id="row_56">&nbsp;</div>     
148            <div class="scheduleRow" id="row_57">&nbsp;</div>     
149            <div class="scheduleRow" id="row_58">&nbsp;</div>     
150            <div class="scheduleRow" id="row_59">&nbsp;</div>     
151            <div class="scheduleRow" id="row_60">&nbsp;</div>     
152            <div class="scheduleRow" id="row_61">&nbsp;</div>     
153            <div class="scheduleRow" id="row_62">&nbsp;</div>     
154            <div class="scheduleRow" id="row_63">&nbsp;</div>     
155            <div class="scheduleRow" id="row_64">&nbsp;</div>     
156            <div class="scheduleRow" id="row_65">&nbsp;</div>     
157            <div class="scheduleRow" id="row_66">&nbsp;</div>     
158            <div class="scheduleRow" id="row_67">&nbsp;</div>     
159            <div class="scheduleRow" id="row_68">&nbsp;</div>     
160            <div class="scheduleRow" id="row_69">&nbsp;</div>     
161            <div class="scheduleRow" id="row_70">&nbsp;</div>     
162            <div class="scheduleRow" id="row_71">&nbsp;</div>     
163            <div class="scheduleRow" id="row_72">&nbsp;</div>     
164            <div class="scheduleRow" id="row_73">&nbsp;</div>     
165            <div class="scheduleRow" id="row_74">&nbsp;</div>     
166            <div class="scheduleRow" id="row_75">&nbsp;</div>     
167            <div class="scheduleRow" id="row_76">&nbsp;</div>     
168            <div class="scheduleRow" id="row_77">&nbsp;</div>     
169            <div class="scheduleRow" id="row_78">&nbsp;</div>     
170            <div class="scheduleRow" id="row_79">&nbsp;</div>     
171            <div class="scheduleRow" id="row_80">&nbsp;</div>     
172            <div class="scheduleRow" id="row_81">&nbsp;</div>     
173            <div class="scheduleRow" id="row_82">&nbsp;</div>     
174            <div class="scheduleRow" id="row_83">&nbsp;</div>     
175            <div class="scheduleRow" id="row_84">&nbsp;</div>     
176            <div class="scheduleRow" id="row_85">&nbsp;</div>     
177            <div class="scheduleRow" id="row_86">&nbsp;</div>     
178            <div class="scheduleRow" id="row_87">&nbsp;</div>     
179            <div class="scheduleRow" id="row_88">&nbsp;</div>     
180            <div class="scheduleRow" id="row_89">&nbsp;</div>     
181            <div class="scheduleRow" id="row_90">&nbsp;</div>     
182            <div class="scheduleRow" id="row_91">&nbsp;</div>     
183            <div class="scheduleRow" id="row_92">&nbsp;</div>     
184            <div class="scheduleRow" id="row_93">&nbsp;</div>     
185            <div class="scheduleRow" id="row_94">&nbsp;</div>     
186            <div class="scheduleRow" id="row_95">&nbsp;</div>                   
187    </div>
188
189<script>var zIndex = 0;
190var eventId = 0;
191var baseUrl = '';
192var rowHeight = 15; 
193
194$('document').ready(function() {
195       
196        $("div#schedule").selectable({
197                filter: 'div.scheduleRow',             
198                stop: function(event, ui) {
199                       
200                        var firstRowId = 0;
201                        var numSelected = 0;
202                       
203                        numSelected = $('.ui-selected').length;
204                       
205                        var newDiv = $('<div></div>');
206                        newDiv.attr('id', 'eventBox_' + eventId++);
207                       
208                        var timeDiv = $('<div></div>').addClass('eventTime');
209                        newDiv.append(timeDiv);
210                       
211                        newDiv.append('<input class="eventId" type="hidden" value="" />');
212                       
213                        $('div#schedule').prepend(newDiv);
214                       
215                        firstRowId = $('.ui-selected:first').attr('id');
216                        firstRowId = firstRowId.split('_');
217                        firstRowId = firstRowId[1];
218                       
219                        newDiv.addClass('scheduleEvent ui-corner-all');
220                        var parentPos = $('div#schedule').position();
221                        var parentWidth = parseInt($('div#schedule').css('width'), 10);
222                        var parentHeight = parseInt($('div#schedule').css('height'), 10);
223                                               
224                        newDiv.css('height', parseInt(numSelected * rowHeight, 10) + 'px');
225                        newDiv.css('top', parseInt(parentPos.top + (firstRowId * rowHeight), 10) + 'px');
226                        newDiv.css('width', parseInt((parentWidth * 0.7), 10) + 'px');
227                        newDiv.css('zIndex', zIndex++);
228                       
229                        $(".ui-selected").removeClass("ui-selected");
230                        deselectAllEvents();
231                       
232                        newDiv.addClass('selectedEvent');
233                                               
234                        newDiv.click(function() {
235                                deselectAllEvents();                   
236                                $(this).addClass('selectedEvent');
237                                $(this).css('zIndex', zIndex++);
238                        });             
239                       
240                       
241                        newDiv.draggable({
242                                axis: 'y',
243                                containment: 'parent',
244                                grid: [100, 15],
245                                cursor: 'pointer',
246                                start: function(event, ui) {
247                                        $("div#schedule").selectable('disable');
248                                        newDiv.trigger('click');
249                                },
250                                stop: function(event, ui) {
251                                        $("div#schedule").selectable('enable');
252                                }
253                        });
254                       
255                }
256        });
257});
258
259       
260function deselectAllEvents()
261{
262        $('.selectedEvent').addClass('unselectedEvent').removeClass('selectedEvent');
263}</script></body>
264</html>