jQuery glDatePicker plugin not rendering correctly on IE
Question
I'm using the glDatePicker plugin .
Page loads, calendar is hidden (along w/ the box on it's right). switch-view is clicked, calendar is re-rendered and displayed. Chrome, FF, Safari , all is OK. IE , not so much. It looks as though when the calendar is rendered, the width is not being applied as it should.
Chrome
element.style {
z-index: 1000;
width: 382px;
top: 259px;
left: 766.5px;
display: block;
IE
If I change the width to 382px on IE , it displays as it should.
<article id="events" class="clearfix hidden-xs">
<header class="clearfix header-title">
<h2 class="row col-sm-8">Upcoming Events</h2>
<a href="/resource-center/calendar-of-events" class="arrow-link gray-medium col-sm-4">All Events <span class="glyphicon glyphicon-arrow-right"></span></a>
</header>
<div class="row">
<section class="col-md-6 col-sm-6">
<div id="calendar"></div>
</section>
<aside id="event-description" class="col-md-6 col-sm-6 gray-light">
<img src="/content/images/events-backsplash.jpg" class="img-responsive" />
<div id="event-data">
....HTML here - not relevant
</div>
</aside>
</div>
</article>
$('#switch-view').click(function (e) {
var $this = $(this);
if ($this.hasClass('list-view')) {
$('#event-description').hide();
var $cal = $('#calendar').glDatePicker(true);
$.extend($cal.options, {
showAlways: false
});
$cal.render();
$cal.hide();
$('#calendar-list').fadeIn();
$this.removeClass('list-view').find('span').text('Calendar View');
}
else {
$this.addClass('list-view').find('span').text('List View');
$('#calendar-list').hide();
$('#event-description').fadeIn(function () {
var $cal = $('#calendar').glDatePicker(true);
$.extend($cal.options, {
showAlways: true
});
$cal.render();
$cal.show();
});
}
e.preventDefault();
});
I found that I had to extend the options and change the showAlways property to correctly hide/show on IE . If I remove those, then the calendar never hides when calling the $cal.hide() function.
You would think that I could just hide the #calendar , or it's container, but the way this plugin operates is it created a whole new <div> right before the ending <body> tag and does its "position magic".
1 answers
solution1
0 2015-03-24 17:40:38
Probably not THE answer to the question on as to WHY it was doing it, but somehow IE 11 only was not gathering the outerWidth() and offSet() methods properly on page load .
What I ended up doing is determining if the browser was in fact IE 11 and then setting a timeout of 1000ms before the initial setup for the calendar.
If anyone has a better answer I'd love to hear it.
Apprec!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.