Thales Ribeiro

update var when window is resized

Recommended Posts

Hi there,


 


i'm working on a responsive website right now and the issue i'm having implementing greensock to it is when the user resizes the window and a few values like height/width of elements don't get updated unless user refreshes the browser.


 


I was wondering if there's a way to update a few variables everytime the user resizes the window?


 


Cheers,


Thales 


Share this post


Link to post
Share on other sites

Hello Thales Ribeiro,

 

You could use the resize event:

 

Native JavaScript way:

 

https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

// fires on resize of browser
window.onresize = function(event) {
      // code goes here
};

If you are using jQuery, then you can use:

on() : https://api.jquery.com/on/

resize() : https://api.jquery.com/resize/

// using on() method - fires on resize of browser
$(window).on("resize", function() {
      // code goes here
});

// shorthand method - fires on resize of browser
$(window).resize(function() {
      // code goes here
});

If you have issues when resizing where the event is fired sporadically and inconsistently, then you can try the Debounce resize() jQuery Plugin, from this link below:

 

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

 

Does that help?

Share this post


Link to post
Share on other sites

Hi,

yeah i think what i need is the resize event,

the only thing i'm not sure about is the code that would refresh the variables.

for example:

bgHeight = $(element).find(".text-box").height()+25;

 

The height of the element changes as the window resizes but the variable remains the same.

 

Cheers, 

Thales

Share this post


Link to post
Share on other sites

Hi Jonathan, thanks for your help.

 

I shortened the code in order to work in CodePen.

 

http://codepen.io/anon/pen/ABvqm

 

What i'm trying to fix is the rollOver state,

you will notice that the green panel should always cover the text with a 25px padding.

 

this comes from this variable

bgHeight = $(element).find(".text-box").height()+25;

The issue is that when you resize the window, you will notice that the green panel will not cover the text properly, but if you refresh the preview area, it will be fine.

 

Let me know if that makes sense.

 

Cheers,

Thales 

Share this post


Link to post
Share on other sites

Hello .. Thanks for the limited codepen example. It helps with debugging your code.

 

Basically you would put your code that will be used over again in a function. Then when the page loads and when the page is resized this function will be run. This way you don't have to write the code for the height animation twice. There are other ways to do it, but you get the point.

 

I forked your example and edited it: http://codepen.io/anon/pen/vyzGw

 

See if the below example helps! :)

  • Like 1

Share this post


Link to post
Share on other sites

Hi Jonathan, 

thanks for the example, i can see myself using it for the rest of the animations as well.

For some reason i had to use another syntax for the onresize event tho.

window.onresize = function(){
mainAnimation();
};

Cheers :)

Share this post


Link to post
Share on other sites

If your not using jQuery in your site than window.resize should work just fine. Glad you got it figured out! :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.