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... :(

Ok guys, I saw what's wrong, I just need a bit of your help... 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. — gn66, Jun 17 '14 at 15:29
I should probably let you know that your website doesn't work properly with Firefox. The menu or even the menu handle doesn't appear on the screen. I only managed to make this work with Chrome. — António Sérgio Simões, Jun 18 '14 at 09:50
@Bindiya Patoliya hello, you can acess the navigation if you click on the "plus" triangle in the middle on top. — gn66, Jun 18 '14 at 09:57
@António Sérgio Simões Boas, não sei se percebes em Português xD Well I know, i didnt had time to do the proper changes for my website works on firefox unfortunately :(, but thanks for the warning — gn66, Jun 18 '14 at 09:58
I do understand it, I'm portuguese :P But lets keep it in English. Anyway, the problem you're facing is due to the zoom applied to the Body. jQuery's offset Top return values that depend on the window scroll position...which in your case have zoom applied and that will interfere with those values. — António Sérgio Simões, Jun 18 '14 at 10:01
@António Sérgio Simões I shoul'd had made more attention to math classes, I tried a lot of different formulas so I could just re-calculate the offset but unsucessfully. Is there other way to scroll without using offset, perhaps it would be easier :X PS: eu também sou xD — gn66, Jun 18 '14 at 10:04
Have you tried to round the offset value in order to make it a whole value? try this: parseInt(jQuery.offset().top). This will allow you to have a whole value across all browsers. — António Sérgio Simões, Jun 18 '14 at 10:08
Ignore the previous comment...parseInt will actually truncate the decimal part of the number. Can you try using Math.round() and see if it works? But, let me tell you upfront that jquery's offset().top is bugged by nature when you have CSS transforms in place. Here, check this: http://bugs.jquery.com/ticket/8362 — António Sérgio Simões, Jun 18 '14 at 10:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/55828/discussion-between-antonio-sergio-simoes-and-gn66). — António Sérgio Simões, Jun 18 '14 at 10:21

cmroanirgo · Answer 1 · 2014-06-18T11:01:48.887

2

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.

edited Jun 18 '14 at 11:01

answered Jun 18 '14 at 10:39

cmroanirgo

7,297
4
32
38

Ok, thanks for the reply, It was very usefull. Tell some few more things, to just this. I had calculated the changes in the 100%, lets say i want it to be "69%", I tried this: document.getElementsByTagName('html')[0].style.height = "69%". So it didnt worked :X – gn66 Jun 18 '14 at 11:04
Have a look at this: http://jsfiddle.net/8nWJC/. There is no need to be using javascript for what css can be doing for you. You may need to tweak a large part of your site unfortunately to make it work with best practices :( – cmroanirgo Jun 18 '14 at 11:14

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

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

edited May 23 '17 at 10:33

Community

1
1

answered Jun 18 '14 at 12:14

gn66

803
2
12
33

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

2 Answers2