CODEWITHSUNDEEP
javascriptjquery
hope
hope

Reputation: 117

jQuery when zoom change css function

I use top: x for align an item to center of the screen.

Exemple:

div {
   top: 50%;
}

I would like a script when the screen size shrinks, to resize top: 50% by a certain percentage for example 0.2.

Exemple:

If screen size is 1920 x 1080 top: 50%; If zoom or change device with a smaller one and screen size is 320 x 480 top: 45%;

Every time when screen get smaller then 1920 x 1080 top get a value with - 0.01%

Update

I use fittext.js and now it's work fine on every device at any screen resolution. It is a very useful plugin.

Upvotes: 0

Views: 602

Answers (3)

totallyNotLizards
totallyNotLizards

Reputation: 8569

To answer your question as stated, you could bind an event to window.onresize which could test the window width or height, and update the CSS of your element when it hits certain thresholds.

However, a much better solution would be to center it in a way that doesn't need adjusting - not to mention that javascript should not be used to fix display issues.

A good way to do this, when you know the height of your element, is to use top:50% and a negative margin-top of half the element's height.

There are other ways too, for example see the answers to this question here on SO, or the centering in css article on CSS tricks.

Upvotes: 0

danish farhaj
danish farhaj

Reputation: 1354

if you want to make a js solution

you have to do something linke this

$(window).resize(function() {
   $('#content').css("top", $(window).width() + somevar ); 
   //plus or minus something according to your requirments
});

$(window).trigger('resize');

Upvotes: 2

Vikram
Vikram

Reputation: 3361

it can be done with media queries

@media only screen and (max-width: 1920px) {
  div {
   top: 50%;
  }
}

@media only screen and (max-width: 320px) {
  div {
   top: 45%;
  }
}

make sure you have added following in head to support media queries

<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />

Upvotes: 1

Related Questions