CODEWITHSUNDEEP
javascripthtmlcssangularjs
lobengula3rd
lobengula3rd

Reputation: 1851

watching window.innerWidth for changes in the browser resolution using $watch with javascript

i am in need of knowing the current screen resolution of my clients in their browsers.

i need this information in order to do calculations.

this will be my function:

  scope.$watch('**??what,should,go,here??**', function() {
     scope.screen = (window.innerWidth / 2) - 150;
  });

as you can see i want to use a regular $watch function. my problem is that i don't know what to watch. i tried watching window.innerWidth but this doesn't worked. i supposed because this will only give a value for the first time.

i believe there is a simple solution probably.

thanks.

Upvotes: 3

Views: 10454

Answers (3)

Defender52
Defender52

Reputation: 1

You can also use this:

window.onresize = changingOnResizing;

function changingOnResizing() {
// enter your code
}

Upvotes: 0

Zach Saucier
Zach Saucier

Reputation: 25944

You can use this

 window.addEventListener("resize", function () {
     // scripts
 }

But it looks like you want to style the page based on the window size, so using .clientWidth along with it I believe is what you're looking for

window.addEventListener("resize", function () {
    if (document.clientWidth < 900) {
        // scripts
     }
}

Or, assuming it is for styling purposes, you could use CSS @media queries like so

@media (max-width: 900px) and (min-width: 300px) {
    // CSS
}

Upvotes: 6

Explosion Pills
Explosion Pills

Reputation: 191729

Bind to onresize, e.g.

window.addEventListener("resize", function () {
    // check width
});

Upvotes: 8

Related Questions