How can I zoom in/out my website without affecting sections

Question

I made this script:

<script>
        $(document).ready(function() {

            var huser = window.screen.availHeight;
            var wuser = window.screen.availWidth ;

            var scr_zoom = Math.round((wuser*69)/1280);

           document.body.style.zoom = scr_zoom + "%"
           document.head.style.zoom = scr_zoom + "%"


});

</script>

That zoom's my webpage according to the size of the user's screen. It works fine, but the problem is that in my navigation:

<div id="panel">
    <ul class="nav">
        <a href="#section1"><li id="hm">home</li></a>
        <a href="#section2"><li id="abt">about</li></a>
        <a href="#section3"><li id="wk">work</li></a>
    </ul>
</div>

I have also a slider attacked to menu:

        $(function() {
            $('ul.nav a').bind('click',function(event){
                var $anchor = $(this);

                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1500,'easeInOutExpo');
                event.preventDefault();
            });
        });

And this defines my sections:

.section{
    margin:0px;
    height:1000px;
    width:100%;
    float:left;
   /* text-shadow:1px 1px 2px #f0f0f0; */
    overflow:hidden;  
    z-index:29;
}

Everytime i click on the "work" section or "about" It just slide's wrong to a different location. Any ideas why this is happening?

You can see the problem, in here:

http://testedesignfranjas.tumblr.com/

What I discovered so far...

In this lines of the slider: scrollTop: $($anchor.attr('href')).offset().top It just don't slide as expected, I thing the &anchor is beeing wrong calculated.

PS: The website doesnt work well on firefox... :(

Answer 1

A suggestion? It looks like what you're trying to do is make your page take up all the available space. In general, this is NOT done with zoom. You can do without the script altogether.

Zoom is generally reserved for use by the user so that they can zoom in and out of your page. (eg for people needing screen readers, etc).

In general people use a solution like this (in their stylesheet):

html, body
{
    height: 100%;
}

However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.

html{
  height: 100%;
}
body {
  min-height: 100%;
}

Just tweak these to suit your needs.

Answer 2

Ok guys, I found the solution for this particulary case.

The problem was I was using .offset().top and since I heard there's a bug in this jquery with transformations. I changed .offset() for the javascript ".offsetTop" and it all started to work fine.

You can see the differences in offset functions in this stackoverflow question:

offsetTop vs. jQuery.offset().top