IE 10/11/Edge: Console Error, Functional Issues in Scrollable DIV

msullivan3430
msullivan3430 Community Member Posts: 42
At work we just upgraded from version 11 to 17, but now my modules have issues. My projects use an external JS file to detach the DIVs for text entry boxes, radios, checkboxes, drag-and-drops, my feedback X's, etc. (all are assigned class names within the UI: teb, rad, chk, msg, drg, form) and then append them to a class I have set called "scrollTextDIV" (basically a textbox that allows a form to be in the background that is scrollable and all of the input elements sit on top and scroll with this form).
   // RUNS onShow of Page
    $("#pageDIV").find("[class=form]").detach().appendTo(".scrollTextDIV");
    $(".form").css("top","0px");
    $(".scrollTextDIV").css("overflow-x", "hidden");
    $("html").css("overflow", "hidden");
    $("#pageDIV").find("[class=teb]").detach().appendTo(".scrollTextDIV");
    $("#pageDIV").find("[class=rad]").detach().appendTo(".scrollTextDIV");
    $("#pageDIV").find("[class=chk]").detach().appendTo(".scrollTextDIV");
    $("#pageDIV").find("[class=msg]").detach().appendTo(".scrollTextDIV");

// THIS IS HOW I GOT EVERYTHING TO REMAIN CENTERED IN BROWSER WINDOW WHEN RESIZED IN IE10
function reflow() {
  var winW = (window.innerWidth) ? window.innerWidth-16 : document.body.offsetWidth-20; // subt width of scrollbar in IE 10
  var winH = (window.innerHeight) ? window.innerHeight : document.body.offsetHeight;
  var calcLeftPos = ((winW - 1024) / 2) - 1;
  return calcLeftPos;
  }
  1. IE 10 (Image attached)
    1. Vertical scrollbar for "scrollTextDIV" is aligned properly with the right edge of the project. I have hidden all other scrollbars.
    2. Console Warning Message ==> HTML1508: Unmatched end tag.
    3. Button onHover works to display instructions and/or supplementary visuals.
    4. Radio buttons have been repositioned, but are not selectable.
  2. IE 11 (Image attached)
    1. Vertical scrollbar is no longer aligned with the right edge of the project as a whole.
    2. No errors in Console.
    3. Button onHover works to display instructions and/or supplementary visuals.
    4. Radio buttons are selectable.
  3. Edge (Similar display as in IE 11, but have lost CSS styling colors)
    1. Vertical scrollbar is no longer aligned with the right edge of the project as a whole.
    2. No errors in Console.
    3. Button onHover no longer works to display instructions and/or supplementary visuals.
    4. Radio buttons are selectable.
Additional Questions:
  • For another project the detached and appended to scrollTextDIV drag-and-drops are no longer draggable.
  • What would I have to do to the above script that repositions my page within the browser window so that the scrollbar is aligned properly on the right for IE 11 or Edge?
THANKS!

 
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!