Search and Top Navigation
Ticket #4502: index.html
File index.html, 10.2 KB (added by gplocke, April 29, 2009 05:12PM UTC)
HTML test case illustrating bug.
<!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><script>if (window.top.location != window.location) { window.console = window.top.console; }</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #fff; }
div#schedule {
width: 150px;
height: 1440px;
margin: 0;
padding: 0;
border: 1px solid #CCCCCC;
background-color: #FDFDFD;
background-image: url(http://webapps-dev.ncsu.edu/garrison/test/bg.png);
background-repeat: repeat-x;
}
.ui-state-disabled, ui-selectable-disabled {
opacity: 1;
filter: Alpha(Opacity=100);
}
.drophover {
background-color: #FF0000;
}
.selectable .ui-selecting {
background: #FECA40;
width: 70%;
}
.selectable .ui-selected {
background: #F39814;
color: white;
}
.selectable {
margin: 0 auto;
padding: 0;
border: 0;
width: 100%;
}
.selectable div.scheduleRow {
margin: 0;
padding: 0;
height: 15px;
}
div.scheduleEvent {
width: 90%;
border: 1px solid #F37816;
float: left;
position: absolute;
margin: 0 0;
padding: 0;
}
div.scheduleEvent div.eventTime {
color: #FFFFFF;
font-size: 11px;
padding: 0 2px;
}
.unselectedEvent {
background-color: #FF00FF;
}
.selectedEvent {
background-color: #FF0000;
}
.bt-content {
font-size: small;
color: #000;
line-height: normal;
padding: 10px 5px;
}
</style>
</head>
<body>
<div id="schedule" class="selectable">
<div class="scheduleRow" id="row_0"> </div>
<div class="scheduleRow" id="row_1"> </div>
<div class="scheduleRow" id="row_2"> </div>
<div class="scheduleRow" id="row_3"> </div>
<div class="scheduleRow" id="row_4"> </div>
<div class="scheduleRow" id="row_5"> </div>
<div class="scheduleRow" id="row_6"> </div>
<div class="scheduleRow" id="row_7"> </div>
<div class="scheduleRow" id="row_8"> </div>
<div class="scheduleRow" id="row_9"> </div>
<div class="scheduleRow" id="row_10"> </div>
<div class="scheduleRow" id="row_11"> </div>
<div class="scheduleRow" id="row_12"> </div>
<div class="scheduleRow" id="row_13"> </div>
<div class="scheduleRow" id="row_14"> </div>
<div class="scheduleRow" id="row_15"> </div>
<div class="scheduleRow" id="row_16"> </div>
<div class="scheduleRow" id="row_17"> </div>
<div class="scheduleRow" id="row_18"> </div>
<div class="scheduleRow" id="row_19"> </div>
<div class="scheduleRow" id="row_20"> </div>
<div class="scheduleRow" id="row_21"> </div>
<div class="scheduleRow" id="row_22"> </div>
<div class="scheduleRow" id="row_23"> </div>
<div class="scheduleRow" id="row_24"> </div>
<div class="scheduleRow" id="row_25"> </div>
<div class="scheduleRow" id="row_26"> </div>
<div class="scheduleRow" id="row_27"> </div>
<div class="scheduleRow" id="row_28"> </div>
<div class="scheduleRow" id="row_29"> </div>
<div class="scheduleRow" id="row_30"> </div>
<div class="scheduleRow" id="row_31"> </div>
<div class="scheduleRow" id="row_32"> </div>
<div class="scheduleRow" id="row_33"> </div>
<div class="scheduleRow" id="row_34"> </div>
<div class="scheduleRow" id="row_35"> </div>
<div class="scheduleRow" id="row_36"> </div>
<div class="scheduleRow" id="row_37"> </div>
<div class="scheduleRow" id="row_38"> </div>
<div class="scheduleRow" id="row_39"> </div>
<div class="scheduleRow" id="row_40"> </div>
<div class="scheduleRow" id="row_41"> </div>
<div class="scheduleRow" id="row_42"> </div>
<div class="scheduleRow" id="row_43"> </div>
<div class="scheduleRow" id="row_44"> </div>
<div class="scheduleRow" id="row_45"> </div>
<div class="scheduleRow" id="row_46"> </div>
<div class="scheduleRow" id="row_47"> </div>
<div class="scheduleRow" id="row_48"> </div>
<div class="scheduleRow" id="row_49"> </div>
<div class="scheduleRow" id="row_50"> </div>
<div class="scheduleRow" id="row_51"> </div>
<div class="scheduleRow" id="row_52"> </div>
<div class="scheduleRow" id="row_53"> </div>
<div class="scheduleRow" id="row_54"> </div>
<div class="scheduleRow" id="row_55"> </div>
<div class="scheduleRow" id="row_56"> </div>
<div class="scheduleRow" id="row_57"> </div>
<div class="scheduleRow" id="row_58"> </div>
<div class="scheduleRow" id="row_59"> </div>
<div class="scheduleRow" id="row_60"> </div>
<div class="scheduleRow" id="row_61"> </div>
<div class="scheduleRow" id="row_62"> </div>
<div class="scheduleRow" id="row_63"> </div>
<div class="scheduleRow" id="row_64"> </div>
<div class="scheduleRow" id="row_65"> </div>
<div class="scheduleRow" id="row_66"> </div>
<div class="scheduleRow" id="row_67"> </div>
<div class="scheduleRow" id="row_68"> </div>
<div class="scheduleRow" id="row_69"> </div>
<div class="scheduleRow" id="row_70"> </div>
<div class="scheduleRow" id="row_71"> </div>
<div class="scheduleRow" id="row_72"> </div>
<div class="scheduleRow" id="row_73"> </div>
<div class="scheduleRow" id="row_74"> </div>
<div class="scheduleRow" id="row_75"> </div>
<div class="scheduleRow" id="row_76"> </div>
<div class="scheduleRow" id="row_77"> </div>
<div class="scheduleRow" id="row_78"> </div>
<div class="scheduleRow" id="row_79"> </div>
<div class="scheduleRow" id="row_80"> </div>
<div class="scheduleRow" id="row_81"> </div>
<div class="scheduleRow" id="row_82"> </div>
<div class="scheduleRow" id="row_83"> </div>
<div class="scheduleRow" id="row_84"> </div>
<div class="scheduleRow" id="row_85"> </div>
<div class="scheduleRow" id="row_86"> </div>
<div class="scheduleRow" id="row_87"> </div>
<div class="scheduleRow" id="row_88"> </div>
<div class="scheduleRow" id="row_89"> </div>
<div class="scheduleRow" id="row_90"> </div>
<div class="scheduleRow" id="row_91"> </div>
<div class="scheduleRow" id="row_92"> </div>
<div class="scheduleRow" id="row_93"> </div>
<div class="scheduleRow" id="row_94"> </div>
<div class="scheduleRow" id="row_95"> </div>
</div>
<script>var zIndex = 0;
var eventId = 0;
var baseUrl = '';
var rowHeight = 15;
$('document').ready(function() {
$("div#schedule").selectable({
filter: 'div.scheduleRow',
stop: function(event, ui) {
var firstRowId = 0;
var numSelected = 0;
numSelected = $('.ui-selected').length;
var newDiv = $('<div></div>');
newDiv.attr('id', 'eventBox_' + eventId++);
var timeDiv = $('<div></div>').addClass('eventTime');
newDiv.append(timeDiv);
newDiv.append('<input class="eventId" type="hidden" value="" />');
$('div#schedule').prepend(newDiv);
firstRowId = $('.ui-selected:first').attr('id');
firstRowId = firstRowId.split('_');
firstRowId = firstRowId[1];
newDiv.addClass('scheduleEvent ui-corner-all');
var parentPos = $('div#schedule').position();
var parentWidth = parseInt($('div#schedule').css('width'), 10);
var parentHeight = parseInt($('div#schedule').css('height'), 10);
newDiv.css('height', parseInt(numSelected * rowHeight, 10) + 'px');
newDiv.css('top', parseInt(parentPos.top + (firstRowId * rowHeight), 10) + 'px');
newDiv.css('width', parseInt((parentWidth * 0.7), 10) + 'px');
newDiv.css('zIndex', zIndex++);
$(".ui-selected").removeClass("ui-selected");
deselectAllEvents();
newDiv.addClass('selectedEvent');
newDiv.click(function() {
deselectAllEvents();
$(this).addClass('selectedEvent');
$(this).css('zIndex', zIndex++);
});
newDiv.draggable({
axis: 'y',
containment: 'parent',
grid: [100, 15],
cursor: 'pointer',
start: function(event, ui) {
$("div#schedule").selectable('disable');
newDiv.trigger('click');
},
stop: function(event, ui) {
$("div#schedule").selectable('enable');
}
});
}
});
});
function deselectAllEvents()
{
$('.selectedEvent').addClass('unselectedEvent').removeClass('selectedEvent');
}</script></body>
</html>
Download in other formats:
Original Format
File index.html, 10.2 KB (added by gplocke, April 29, 2009 05:12PM UTC)
HTML test case illustrating bug.
<!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><script>if (window.top.location != window.location) { window.console = window.top.console; }</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #fff; }
div#schedule {
width: 150px;
height: 1440px;
margin: 0;
padding: 0;
border: 1px solid #CCCCCC;
background-color: #FDFDFD;
background-image: url(http://webapps-dev.ncsu.edu/garrison/test/bg.png);
background-repeat: repeat-x;
}
.ui-state-disabled, ui-selectable-disabled {
opacity: 1;
filter: Alpha(Opacity=100);
}
.drophover {
background-color: #FF0000;
}
.selectable .ui-selecting {
background: #FECA40;
width: 70%;
}
.selectable .ui-selected {
background: #F39814;
color: white;
}
.selectable {
margin: 0 auto;
padding: 0;
border: 0;
width: 100%;
}
.selectable div.scheduleRow {
margin: 0;
padding: 0;
height: 15px;
}
div.scheduleEvent {
width: 90%;
border: 1px solid #F37816;
float: left;
position: absolute;
margin: 0 0;
padding: 0;
}
div.scheduleEvent div.eventTime {
color: #FFFFFF;
font-size: 11px;
padding: 0 2px;
}
.unselectedEvent {
background-color: #FF00FF;
}
.selectedEvent {
background-color: #FF0000;
}
.bt-content {
font-size: small;
color: #000;
line-height: normal;
padding: 10px 5px;
}
</style>
</head>
<body>
<div id="schedule" class="selectable">
<div class="scheduleRow" id="row_0"> </div>
<div class="scheduleRow" id="row_1"> </div>
<div class="scheduleRow" id="row_2"> </div>
<div class="scheduleRow" id="row_3"> </div>
<div class="scheduleRow" id="row_4"> </div>
<div class="scheduleRow" id="row_5"> </div>
<div class="scheduleRow" id="row_6"> </div>
<div class="scheduleRow" id="row_7"> </div>
<div class="scheduleRow" id="row_8"> </div>
<div class="scheduleRow" id="row_9"> </div>
<div class="scheduleRow" id="row_10"> </div>
<div class="scheduleRow" id="row_11"> </div>
<div class="scheduleRow" id="row_12"> </div>
<div class="scheduleRow" id="row_13"> </div>
<div class="scheduleRow" id="row_14"> </div>
<div class="scheduleRow" id="row_15"> </div>
<div class="scheduleRow" id="row_16"> </div>
<div class="scheduleRow" id="row_17"> </div>
<div class="scheduleRow" id="row_18"> </div>
<div class="scheduleRow" id="row_19"> </div>
<div class="scheduleRow" id="row_20"> </div>
<div class="scheduleRow" id="row_21"> </div>
<div class="scheduleRow" id="row_22"> </div>
<div class="scheduleRow" id="row_23"> </div>
<div class="scheduleRow" id="row_24"> </div>
<div class="scheduleRow" id="row_25"> </div>
<div class="scheduleRow" id="row_26"> </div>
<div class="scheduleRow" id="row_27"> </div>
<div class="scheduleRow" id="row_28"> </div>
<div class="scheduleRow" id="row_29"> </div>
<div class="scheduleRow" id="row_30"> </div>
<div class="scheduleRow" id="row_31"> </div>
<div class="scheduleRow" id="row_32"> </div>
<div class="scheduleRow" id="row_33"> </div>
<div class="scheduleRow" id="row_34"> </div>
<div class="scheduleRow" id="row_35"> </div>
<div class="scheduleRow" id="row_36"> </div>
<div class="scheduleRow" id="row_37"> </div>
<div class="scheduleRow" id="row_38"> </div>
<div class="scheduleRow" id="row_39"> </div>
<div class="scheduleRow" id="row_40"> </div>
<div class="scheduleRow" id="row_41"> </div>
<div class="scheduleRow" id="row_42"> </div>
<div class="scheduleRow" id="row_43"> </div>
<div class="scheduleRow" id="row_44"> </div>
<div class="scheduleRow" id="row_45"> </div>
<div class="scheduleRow" id="row_46"> </div>
<div class="scheduleRow" id="row_47"> </div>
<div class="scheduleRow" id="row_48"> </div>
<div class="scheduleRow" id="row_49"> </div>
<div class="scheduleRow" id="row_50"> </div>
<div class="scheduleRow" id="row_51"> </div>
<div class="scheduleRow" id="row_52"> </div>
<div class="scheduleRow" id="row_53"> </div>
<div class="scheduleRow" id="row_54"> </div>
<div class="scheduleRow" id="row_55"> </div>
<div class="scheduleRow" id="row_56"> </div>
<div class="scheduleRow" id="row_57"> </div>
<div class="scheduleRow" id="row_58"> </div>
<div class="scheduleRow" id="row_59"> </div>
<div class="scheduleRow" id="row_60"> </div>
<div class="scheduleRow" id="row_61"> </div>
<div class="scheduleRow" id="row_62"> </div>
<div class="scheduleRow" id="row_63"> </div>
<div class="scheduleRow" id="row_64"> </div>
<div class="scheduleRow" id="row_65"> </div>
<div class="scheduleRow" id="row_66"> </div>
<div class="scheduleRow" id="row_67"> </div>
<div class="scheduleRow" id="row_68"> </div>
<div class="scheduleRow" id="row_69"> </div>
<div class="scheduleRow" id="row_70"> </div>
<div class="scheduleRow" id="row_71"> </div>
<div class="scheduleRow" id="row_72"> </div>
<div class="scheduleRow" id="row_73"> </div>
<div class="scheduleRow" id="row_74"> </div>
<div class="scheduleRow" id="row_75"> </div>
<div class="scheduleRow" id="row_76"> </div>
<div class="scheduleRow" id="row_77"> </div>
<div class="scheduleRow" id="row_78"> </div>
<div class="scheduleRow" id="row_79"> </div>
<div class="scheduleRow" id="row_80"> </div>
<div class="scheduleRow" id="row_81"> </div>
<div class="scheduleRow" id="row_82"> </div>
<div class="scheduleRow" id="row_83"> </div>
<div class="scheduleRow" id="row_84"> </div>
<div class="scheduleRow" id="row_85"> </div>
<div class="scheduleRow" id="row_86"> </div>
<div class="scheduleRow" id="row_87"> </div>
<div class="scheduleRow" id="row_88"> </div>
<div class="scheduleRow" id="row_89"> </div>
<div class="scheduleRow" id="row_90"> </div>
<div class="scheduleRow" id="row_91"> </div>
<div class="scheduleRow" id="row_92"> </div>
<div class="scheduleRow" id="row_93"> </div>
<div class="scheduleRow" id="row_94"> </div>
<div class="scheduleRow" id="row_95"> </div>
</div>
<script>var zIndex = 0;
var eventId = 0;
var baseUrl = '';
var rowHeight = 15;
$('document').ready(function() {
$("div#schedule").selectable({
filter: 'div.scheduleRow',
stop: function(event, ui) {
var firstRowId = 0;
var numSelected = 0;
numSelected = $('.ui-selected').length;
var newDiv = $('<div></div>');
newDiv.attr('id', 'eventBox_' + eventId++);
var timeDiv = $('<div></div>').addClass('eventTime');
newDiv.append(timeDiv);
newDiv.append('<input class="eventId" type="hidden" value="" />');
$('div#schedule').prepend(newDiv);
firstRowId = $('.ui-selected:first').attr('id');
firstRowId = firstRowId.split('_');
firstRowId = firstRowId[1];
newDiv.addClass('scheduleEvent ui-corner-all');
var parentPos = $('div#schedule').position();
var parentWidth = parseInt($('div#schedule').css('width'), 10);
var parentHeight = parseInt($('div#schedule').css('height'), 10);
newDiv.css('height', parseInt(numSelected * rowHeight, 10) + 'px');
newDiv.css('top', parseInt(parentPos.top + (firstRowId * rowHeight), 10) + 'px');
newDiv.css('width', parseInt((parentWidth * 0.7), 10) + 'px');
newDiv.css('zIndex', zIndex++);
$(".ui-selected").removeClass("ui-selected");
deselectAllEvents();
newDiv.addClass('selectedEvent');
newDiv.click(function() {
deselectAllEvents();
$(this).addClass('selectedEvent');
$(this).css('zIndex', zIndex++);
});
newDiv.draggable({
axis: 'y',
containment: 'parent',
grid: [100, 15],
cursor: 'pointer',
start: function(event, ui) {
$("div#schedule").selectable('disable');
newDiv.trigger('click');
},
stop: function(event, ui) {
$("div#schedule").selectable('enable');
}
});
}
});
});
function deselectAllEvents()
{
$('.selectedEvent').addClass('unselectedEvent').removeClass('selectedEvent');
}</script></body>
</html>