Highslide, Auto follow scroll

Question

I was looking for a fix/solution for that and found this topic: http://highslide.com/forum/viewtopic.php?t=3030

 function fixElement(el) {
    var stl = el.style;
    stl.position = 'fixed';
    stl.top = (parseInt(stl.top) - hs.page.scrollTop) +'px';
    stl.left = (parseInt(stl.left) - hs.page.scrollLeft) +'px';
}
function unfixElement(el) {
   var stl = el.style;
   stl.position = 'absolute';
   stl.top = (parseInt(stl.top) + hs.page.scrollTop) +'px';
   stl.left = (parseInt(stl.left) + hs.page.scrollLeft) +'px';
}

if (!hs.ie || hs.ieVersion() > 6) {
    hs.Expander.prototype.onAfterExpand = function() {
       fixElement (this.wrapper);
      if (this.outline) fixElement(this.outline.table);
   };

    hs.Expander.prototype.onBeforeClose = function() {
       unfixElement (this.wrapper);
      if (this.outline) unfixElement(this.outline.table);
   };
}

Got a small hack on the forum topic, but the hack does not work on any Internet Explorer that I tried (IE7, IE8 and IE9).

Does anyone has a "fix" on the hack to make it work on IE?

I think it's something related on this part of the code, this condition:

if (!hs.ie || hs.ieVersion() > 6)

I removed and it worked, but maybe this code could be changed.

Thank you.

Sorry, I wrote a lot, you misunderstood. Removed the link. The thing is, this hack should make Highslide stay stuck and not move follow the scroll. The hack does not work on any IE version for me :(, I made some changes on the original question. Thanks — saulob, Jul 05 '13 at 16:48
Could you provide then example on your site with that issue? — Paweł Fus, Jul 08 '13 at 11:46

score 2 · Accepted Answer · answered Jul 09 '13 at 00:26

The below code is what you need. Live demo: http://www.highslide.com/studies/position-fixed.html
Note: requires highslide-full.js

    // Highslide fixed popup mod. Requires the "Events" component.
    if (!hs.ie || hs.uaVersion > 6) hs.extend ( hs.Expander.prototype, {
      fix: function(on) {
        var sign = on ? -1 : 1,
          stl = this.wrapper.style;

        if (!on) hs.getPageSize(); // recalculate scroll positions


        hs.setStyles (this.wrapper, {
          position: on ? 'fixed' : 'absolute',
          zoom: 1, // IE7 hasLayout bug,
          left: (parseInt(stl.left) + sign * hs.page.scrollLeft) +'px',
          top: (parseInt(stl.top) + sign * hs.page.scrollTop) +'px'
        });

        if (this.outline) {
          stl = this.outline.table.style;
          hs.setStyles (this.outline.table, {
            position: on ? 'fixed' : 'absolute',
            zoom: 1, // IE7 hasLayout bug,
            left: (parseInt(stl.left) + sign * hs.page.scrollLeft) +'px',
            top: (parseInt(stl.top) + sign * hs.page.scrollTop) +'px'
          });

        }
        this.fixed = on; // flag for use on dragging
      },
      onAfterExpand: function() {
          this.fix(true); // fix the popup to viewport coordinates
      },

      onBeforeClose: function() {
        this.fix(false); // unfix to get the animation right
      },

        onDrop: function() {
          this.fix(true); // fix it again after dragging
      },

      onDrag: function(sender, args) {
        //if (this.fixed) { // only unfix it on the first drag event
          this.fix(true);
        //}
      }

    });

Thank you very much. Worked fine on all browsers that I tested. Chrome, Firefox, Safari and IE7, IE8 and IE9. :) Thanks — saulob, Jul 09 '13 at 10:00
@RoadRash, There is a bug in this code. Try to drag when page scroll is not all the way to the top and the dragged element will jump during the drag. Also reproducible in the demo link you provided. — Slava, Nov 01 '17 at 12:04

Highslide, Auto follow scroll

1 Answers1

Linked