Jump to content
Search Community

update var when window is resized

Thales Ribeiro test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 


Link to comment
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?

Link to comment
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

Link to comment
Share on other sites

Hi Jonathan, thanks for your help.

 

I shortened the code in order to work in CodePen.

 

See the Pen ABvqm by anon (@anon) on CodePen

 

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 

Link to comment
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:

See the Pen vyzGw by anon (@anon) on CodePen

 

See if the below example helps! :)

  • Like 1
Link to comment
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.
×
×
  • Create New...