Custom Query (7259 matches)
Results (55 - 57 of 7259)
Ticket | Resolution | Summary | Owner | Reporter |
---|---|---|---|---|
#6134 | invalid | resizable and containment | ||
Description |
When the containment object is out of the parent container the absolute position correction is not working. The example: <!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"> <head> <title>Calendar</title> <script type="text/javascript" src="Script/jquery-1.4.2.js"></script> <script type="text/javascript" src="Script/jquery.ui.core.js"></script> <script type="text/javascript" src="Script/jquery.ui.widget.js"></script> <script type="text/javascript" src="Script/jquery.ui.mouse.js"></script> <script type="text/javascript" src="Script/jquery.ui.draggable.js"></script> <script type="text/javascript" src="Script/jquery.ui.resizable.js"></script> <link rel="stylesheet" href="Theme/jquery.ui.all.css" type="text/css" /> <script type="text/javascript"> counter = 0; function boxproperties(o, pos) { var top = pos.top - 50; var startMin = top * 2.5; var startTime = new Date(1,1,1,6,startMin,0,0); var days = new Array('Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'); var day = parseInt((pos.left - 50) / 80) var length = o.height(); var lengthMin = length * 2.5; o.find('.calendar-item-time').html(days[day] + ',' + startTime.getHours() + ':' + startTime.getMinutes() + ' | ' + lengthMin + ' min'); } $(document).ready(function () { $('#attendance').draggable({ cursor: 'crosshair', grid: [80, 2], opacity: .5, containment: '#calendar_body', helper: 'clone', drag: function (ev, ui) { boxproperties(ui.helper, ui.position); }, stop: function (ev, ui) { counter++; var o = $(this).clone(); o.attr('id', 'attendance_' + counter); o.css({ top: ui.position.top, left: ui.position.left }); o.find('.calendar-item-title').html(o.find('.calendar-item-title').html() + '_' + counter); boxproperties(o, ui.position); $('#calendar_container').prepend(o); o.resizable({ handles: 'all', grid: [80, 2], maxWidth: 80, minWidth: 80, minHeight: 2, containment: '#calendar_body', resize: function (ev, ui) { boxproperties(ui.helper, ui.position); }, stop: function (ev, ui) { boxproperties(ui.helper, ui.position); } }).draggable({ cursor: 'crosshair', grid: [80, 2], opacity: .5, containment: '#calendar_body', drag: function (ev, ui) { boxproperties(ui.helper, ui.position); }, stop: function (ev, ui) { boxproperties(ui.helper, ui.position); } }); } }); }); </script> </head> <body> <div id="middle"> <div id="calendar_container" style="position: relative; top:0px; left: 0px;"> <div id="attendance" class="attendance" style="width: 80px; height: 24px; background-color:Blue; color: Yellow; position: absolute; left: 50px; font-size: 8px; z-index:120"> <span class="calendar-item-title">New attendance</span><br /> <span class="calendar-item-time">Drag it to the calendar</span> </div> <table cellpadding="0" cellspacing="0" style="position:absolute; top:30px;"> <thead> <tr> <td style="width:50px; height:20px;">Time</td> <td style="width:80px;">Monday</td> <td style="width:80px;">Tuesday</td> <td style="width:80px;">Wednesday</td> <td style="width:80px;">Thursday</td> <td style="width:80px;">Friday</td> <td style="width:80px;">Saturday</td> <td style="width:80px;">Sunday</td> </tr> </thead> <tbody id="calendar_body"> <tr style="background-color: #FFFFCC;"> <td style="height:24px;">06:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #CCFFCC;"> <td style="height:24px;">07:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #FFFFCC;"> <td style="height:24px;">08:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #CCFFCC;"> <td style="height:24px;">09:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #FFFFCC;"> <td style="height:24px;">10:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #CCFFCC;"> <td style="height:24px;">11:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #FFFFCC;"> <td style="height:24px;">12:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #CCFFCC;"> <td style="height:24px;">13:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #FFFFCC;"> <td style="height:24px;">14:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #CCFFCC;"> <td style="height:24px;">15:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #FFFFCC;"> <td style="height:24px;">16:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #CCFFCC;"> <td style="height:24px;">17:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #FFFFCC;"> <td style="height:24px;">18:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #CCFFCC;"> <td style="height:24px;">19:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr style="background-color: #FFFFCC;"> <td style="height:24px;">20:00</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> </tbody> </table> </div> </div> </body> </html> The containing element is the <tbody>. The table is positioned absolute/top:30px. The draggable component working well but the resizable is not. |
|||
#6171 | invalid | Calendar displays over text box in some cases in firefox | ||
Description |
The calendar displays over the text box in some cases in firefox. Below is an example that works correctly in IE but does not display properly in firefox. Version of firefox was 3.6.10 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Date Test</title> <link rel="stylesheet" href="css/jquery-ui-1.8.5.custom.css"> <script src="javascript/jquery-1.4.2.js"></script> <script src="javascript/jquery-ui-1.8.5.js"></script> <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> </head> <body> <div id="content"> <h2> Page Title </h2> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Date: <input id="datepicker" type="text"></p> </div> <div id="footer"> Site Footer </div> </body> </html> |
|||
#6200 | invalid | Selecting another month by using selectOtherMonths does not work. | ||
Description |
Trying to select another month by activating selectOtherMonths does not work. After looking at the code and testing, I have found a fix by adding the following after line 867 in _selectDay: if (month != inst.selectedMonth) { if (month > inst.selectedMonth && year < inst.selectedYear) this._adjustDate('#datepicker', -1, 'M'); else if (month < inst.selectedMonth && year > inst.selectedYear) this._adjustDate('#datepicker', +1, 'M'); else if (month > inst.selectedMonth) this._adjustDate('#datepicker', +1, 'M'); else if (month < inst.selectedMonth) this._adjustDate('#datepicker', -1, 'M'); } |