CODEWITHSUNDEEP
javascriptcssdomwebkitzooming
Aillyn
Aillyn

Reputation: 23783

How can I detect changes in zoom level?

Open this page on Chrome or Safari and fiddle with the zoom level. You'll notice a cute easing effect on its elements when you change the zoom level.

Apparently this only works on Chrome and Safari (webkit?), but how is this done? And is there a cross-browser way to do this?

Upvotes: 3

Views: 2372

Answers (2)

Aillyn
Aillyn

Reputation: 23783

I figured it out. JavaScript is not involved, it's pure CSS.

Namely, webkit's -webkit-transition property: 

/* css */
.box {
   background: #5599ff; text-align: center;
   line-height: 80px; height: 80px; width: 100px;
   font-family: arial, helvetica; color: #FFF; 
   -webkit-border-radius:3px; margin: 10px }

.trans {
    -webkit-transition:all .218s; }

<!-- html -->
<div class="box"> STIFF </div>
<div class="box trans"> FLUID </div>

EDIT: Upon further research, I found out most browsers (ie: everything but IE) support a vendor specific transition CSS property. However, only webkit browsers use transitions when the page is resized.

See demo on jsfiddle

Upvotes: 4

Neel Basu
Neel Basu

Reputation: 12904

I dont think there is any (cross-browser) direct way of listening to page zoom event. There are some backdoors described on Catch browser's "zoom" event in JavaScript . however I think you can listen to Ctrl + + / - OR Ctrl+Mouse Wheel Event.

Upvotes: 0

Related Questions