SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to prevent Firefox from rendering during function

    I'm making some sort of a slider for a (vertical) menu.
    The idea is to have several sections. If you click on a section that isn't 'open', that section will slide open while the previously opened one will slide closed simultaneously, giving the impression the new opening one is sliding 'over' the closing one.
    It's working just fine in all browsers except Firefox, which is being a bit overzealous when it comes to rendering changes it seems.
    I use an interval which calls a function that decreases the height of the closing menu and increases the height of the opening menu.
    Firefox is rendering the change after EACH of those height altering statements instead of after the function has ended (and rendering the result, like other browsers), which results in a very choppy animation (because you'll first see an increase in height, then a bigger decrease again.)

    My question is: is there any way to prevent Firefox from rendering during a function and have it wait until the function has finished (or meets an alert, etc.) like all other browsers?

    Maybe it was my imagination, but I think Firefox did it like I want it does for a while while I was working out some bug in IE, so I'm pretty sure there must be a way.

    This the code I use for testing (if it's any use):
    Code:
        window.onload = function () {
            var timer;   
            var menuFrom = $("zoekerMenu");
            var menuTo = $("shopMenu");
            var menuToHeight = fGetDimensions(menuTo)[1];
                    
            function fSlideMenu() {
                var step = 20;
                var cont = true;
                
                if (menuTo.offsetHeight + step < menuToHeight) {
                    menuTo.style.height = (menuTo.offsetHeight + step) + "px";
                    cont = true;
                } else {
                    menuTo.style.height = menuToHeight + "px";
                    cont = false;
                }
    
                if (menuFrom.offsetHeight - step > 0) {
                    menuFrom.style.height = (menuFrom.offsetHeight - step) + "px";
                    cont = true;
                } else {
                    menuFrom.style.height = "0px";
                    menuFrom.style.display = "none";
                    cont = false;
                }
                
                if (!cont) {
                    clearInterval(timer);
                }
    
            }
            menuTo.style.overflow = "hidden";
            menuFrom.style.overflow = "hidden";
            menuTo.style.height = "0px";
            menuTo.style.display = "";
            
            timer = setInterval(fSlideMenu, 20);
        }

  2. #2
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was doing some hopeless messing around to analyse the problem when I noticed that suddenly Firefox was actually not rendering the changes during the functions anymore, hooray!
    Stripping out all the test code that didn't induce this behaviour, the magic seemed to be done by adding this line of code in the right places:
    Code:
    (menuTo.offsetHeight);
    Yes, just "(menuTo.offsetHeight);". I put it before my "if(!to && !from)" check in the fSlideMenu function and also before setting the interval.
    Placing the line in other places like after the variable declarations of the fSlideMenu function results in errors or having no effect.

    I've got no clue as to what or why or how, but it works and that's good enough for me now.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •