Javascript not rendering out like it should, ONLY

2019-09-07 04:43发布

Im trying to troubleshoot an IE9 and before compatibility issue. THis is linked to another question at Getting an Error Code: 0 in only IE for javascript file

The error is no longer an issue but now the actual rendering is an issue.

Does anyone have any ideas why this isn't rendering properly in IE. This works with no problems in ALL other browsers but not IE9 and before.

I have posted two pictures:

  1. is the image in IE which is NOT rendering correctly
  2. is the image in Chrome which is correct.

I can give you any code you need I'm just not sure where to start.

Thank you for your help ahead of time.

IE9 and before with rendering problem

IE9 and before with rendering problem

Chrome browser without rendering problem

Chrome browser without rendering problem

Here is the initial code that was causing an error Code:0. that has been resolved but the rendering issue still remains.

// when the contract holder grid loads

var ch_item_class = '.ch-grid-item';
var ch_details_class = '.details';
var ch_container_class = '.container';

var ch_min_class = 'minimized';
var ch_hide_class = 'ch_hide';
var ch_expanded_class = 'expanded';
var ch_shadow_class = 'ch_shadowbox';
var ch_processed_class = 'processed';

var ch_transition_time = 200;
var ch_grid;

jQuery(document).ready(function() {

    // get reference to grid dom element
    ch_grid = jQuery('.ch-grid');

    // minimize all details panes
    ch_grid.find(ch_details_class).hide();

    items = ch_grid.find(ch_item_class);
    items.addClass(ch_processed_class);
    items.addClass(ch_min_class);
    items.find(ch_container_class).append('<div class="' + ch_hide_class + '">close</div>');

    // click callback
    ch_grid.find(ch_item_class).click(function(e){

        var self = jQuery(this);
        container = self.find(ch_container_class);

        if (self.hasClass(ch_min_class)){

            // set width and height to avoid strange bahavior
            var width = self.width();
            var height = self.height();
            self.width(width);
            self.height(height);

            // minimize all other detail panes
            ch_minimize_all();

            // show item details
            self.removeClass(ch_min_class);
            self.find(ch_details_class).slideDown(ch_transition_time);
            container.addClass(ch_shadow_class);
            container.addClass(ch_expanded_class);

            // scroll browser window to this item
            var item_top = self.offset().top;
            var item_center = item_top + 400;
            var window_height = jQuery(window).height();
            var window_scrolltop = jQuery(window).scrollTop();
            var scrolltop_new = item_center - window_height/2 - 32;
            var scrolltop = Math.min(window_scrolltop , scrolltop_new);
            scrolltop = Math.max(scrolltop, scrolltop_new - 200);

            jQuery('html,body').animate({
                scrollTop: scrolltop
            }, 200);

        } else {

            self.addClass(ch_min_class);
            container.removeClass(ch_shadow_class);
            self.find(ch_details_class).slideUp(ch_transition_time, remove_parent_container_shadow);
        }
    });
});

function ch_minimize_all(){
    items = ch_grid.find(ch_item_class);
    items.find(ch_container_class).removeClass(ch_shadow_class);
    items.find(ch_details_class).slideUp(ch_transition_time, remove_parent_container_shadow);
    items.addClass(ch_min_class);
}

function remove_parent_container_shadow(){
    jQuery(this).closest(ch_container_class).removeClass(ch_expanded_class);
}

0条回答
登录 后发表回答