ansaurus

Question

Prevent Background Scrolling When Displaying Popup

Answer 1

A:

Don't use the # tag in your links!

It will try to to scroll to the anchor # but because it's empty it will scroll to the top of the page.

Edit your links to:

<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');" class="emailPost">Email this quote</a>

(notice the href="")

Rogier21 2010-02-04 17:55:23

Absolutely do use the hash tag and do not in any case use inline JavaScript. To prevent the browser from redirecting to #, you can use `return false;` at the end of the handler function. http://crisp.tweakblogs.net/blog/313/the-useless-javascript-pseudo-protocol.html

Tatu Ulmanen 2010-02-04 17:59:04

Sorry, Rogier, that did not solve the issue. It also makes it so the page reloads which closes the popup. Thanks though!

Joe 2010-02-04 18:01:10

Yeah, you still will have to use return false ofcourse!But that is really basic JS ;)`<a href="" onclick="javascript: pageTracker._trackPageview('/onclick/emailquote');return false;" class="emailPost">Email this quote</a>`Will work fine.

Rogier21 2010-02-04 18:02:34

What about "javascript:void(0);"?

M28 2010-02-04 18:04:33

Whatever is in the href is immaterial as the 'return false' prevents the browser from going to that address. Keep in mind that you are wasting bandwidth by putting in anything but the _bare minimum_ -- some low traffic sites don't care about such things, obviously.

BryanH 2010-02-04 20:49:45

Answer 2

+2 A:

One option is to temporarily set the overflow property to hidden on body, that will get rid of the scroll bars but causes a small flicker when the page is adjusted.

The other choice is to tap onto the $(window).scroll() event and return false from there. That will also cause a bit of flicker as the browser doesn't react that fast to the return false statement.

Your best bet is to move your click event handlers to a separate file and do the binding there:

$(function() {
    $('.emailPost').click(function() {
        $(window).scroll(function() { return false; });
        pageTracker._trackPageview('/onclick/emailquote');            
    });
});

That should prevent a page from scrolling. Remember to remove the bind after the dialog closes, otherwise the page won't be scrollable anymore! You can remove binds using:

$(window).unbind('scroll');

Tatu Ulmanen 2010-02-04 18:00:42

Thank you. But would this solution cause screen flickering? Also, the pageTracker is passed through a custom field set up in Wordpress, and would not be easy to interface with jQuery.

Joe 2010-02-04 18:18:03

doesn't work in safari 4 and firefox 3.5.7.

DataGreed 2010-02-05 10:53:29

ansaurus

tags:

views:

answers:

Prevent Background Scrolling When Displaying Popup

related questions