Maintain scroll position

[hiddenman]

Hi,

Thank you for your great product!

Just got a little issue: i have a # href, which is handled like:

$('.ratesbtn1').click(function(e){
ratesPopup1();
e.preventDefault();
return false;
});

In the ratesPopup1() i have:

var rates_popup = document.createElement('iframe');
rates_popup.style.width = "820px";
rates_popup.style.height = "550px";
rates_popup.setAttribute("src","mysrc");
alertify.alert(rates_popup).set('resizable',true).resizeTo(900,700).set('title', 'My Title').set('maximizable', true);

Everything works fine except default event - i can't get rid of it and when user click OK, browser scrolls him to the top. Issue exixts in Chrome on Linux and Safari on iOS. Firefox doesn't scroll user even without preventDefault();

I tried everything with preventDefault at any place, didn't help.

Thank you.

[hiddenman]

I even removed the href attribute and it still scrolls page to the top.

[hiddenman]

As far as i can see, even plain alertify.alert("test"); scrolls page to the top after clicking OK.

[MohammadYounes]

That's because you are using # as your href, use <a href="javascript:void(0);" ...></a> instead.

[hiddenman]

Hi,

I already tried that. Actually, it's not about the HREF. It even scrolls just after any alertify call. Haven't found what it causes yet. It intersects somehow with another jQuery code but i can't see where. Still looking into it.

Do you have any tips how to debug JS code? I set a breakpoint, but it didn't help, just passed it and that's all.

Thank you.

[hiddenman]

I just commented ALL my code and leave only:

$(document).ready(function() {
$('.ratesbtn2').on('click', function(e){
e.stopPropagation();
alertify.alert("123");
e.preventDefault();
return false;
});
}

and it's still reproducible.

[hiddenman]

Just found. Setting CSS like:

body, html {
width: 100%;
height: 100%;
}

makes Alertify behave like i described. Do not know why. Is it a my mistake?

Thank you.

[MohammadYounes]

I was able to reproduce this using Safari on windows, Seems related to setting focus to the dialog while body overflow is removed.

Setting tabindex="0" on your link will make the dialog return focus to the element when the dialog is closed.

Also you can use a custom alert that sets no focus to any of the dialog elements:

alertify.dialog('customAlert', function () {
  return {
    setup: function () {
      return {
        buttons: [
          {
            text: alertify.defaults.glossary.ok,
            key:  27/*ESC*/,
            className: alertify.defaults.theme.ok,
          }
        ],
        focus: {
          element: function(){
            /*Returning false will focus nothing, but it will make
               contents behind the modal accessible via Tab key.
            */
            return false;
          },
          select: false
        },
        options: {
          maximizable: false,
          resizable: false
        }
      };
    },
  }
}, false, 'alert');

I need to investigate this more...

[MohammadYounes]

Include this in your document.ready function to maintain scroll position:

var lastX,lastY;
alertify.alert().set({
      'onshow':function(){
        lastX = window.scrollX;
        lastY = window.scrollY;
      },
      'onfocus':function(){
        window.scrollTo(lastX, lastY);
      }  
  }); 

I'll add this to the core script on next update.

Thanks.

[hiddenman]

Hi,

Thank you for your help!