Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
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.

 

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 

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:

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

 

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×