How to position contents according to zoom level?


Tags: html,css,css3

Problem :

I see this website:

http://www.uppbroadgatepark.com/

I like it. When I zoom in the navigation adjusts, and if I zoomed to >200% a new button called 'Menu' appears, which groups all the navigation links together when clicked.

I want to know how is this possible? Is it pure CSS or JS included? I tried using percentages for scaling but it does not position as cleanly as the website mentioned.



Solution :

You should use Cross Browser Zoom and Pixel Ratio Detector

Code

$(window).resize(function(){
   var zoom = detectZoom.zoom();
   var device = detectZoom.device();
   alert("zoom: "+zoom +" , device:" +device);
});

DEMO


    CSS Howto..

    How to target tablet devices with CSS queries

    How to make parent div above child div without position absolute?

    How can I display just a portion of an image in HTML/CSS?

    How to make image clipping in css

    How to float 3 divs with margin left & right 0px?

    How to target last row in a list with CSS?

    How to return dynamic CSS with ASP.NET MVC?

    How to use :before for the third
  • element?
  • How to use Firebug to easily find which css file defines a particular style

    How to access smarty variable in css URL attribute?

    How can I apply a vertical scrollbar to a div with a percentage height?

    How to change CSS attribute value based on querystring using jQuery

    How to get CSS background property to work with toggleClass() in jQuery?

    How to change styling of a specific div onhover of another element when divs share an id

    How do I remove a CSS class from a jqGrid cell?

    How to make the opacity layer same size as img

    How to avoid the pain of CSS multi-browser compatibility?

    Making breadcrumbs… not as easy as literally making breadcrumbs, how can I get text to be inside?

    How to achieve a left and right background split leaving middle div visible?

    How to set height of a div element to same as another div

    How to force a responsive element to retain its aspect ratio [duplicate]

    How can I apply some css for all readonly elements on focus in IE8?

    how fix bug with white lines between the cells of the table in IE11

    How to centre and make responsive a row of divs

    how to center text and control user zoom in CSS

    How to make image hover in css?

    How to override facebook share button css

    How to write shorter css code select child?

    How to make a web form with 3 columns?

    How to apply same event to multiple buttons?