Draggable & ThrowPropsPlugin - Container 100% Height...

[rickideeuk]

Hi There

Ive just signed up to Greensock and so far I'm very impressed 

 

I've got a couple of questions that hopefully you can help me with...

 

I've set up a codepen to show you, with 3 different sized boxes...

See the Pen oshwG by rickideeuk (@rickideeuk) on CodePen

 

1. Is there a way to make the container 100% height of whatever screen you're viewing the site on? - I've got it to be 100% of the width, but can't seem to make it 100% height?

 

2. Why on your demo versions have you set a width and height for the .box in the stylesheet, when the actual size of the .box seems to be controlled by 'TweenLite'.

 

3. Finally is there a way to alter the size of the .box depending on the screen resolution?

e.g. the .box is 500px wide if the screen res is 1000px or above. But changes to 250px wide if the screen is 999px or below???

 

Many Thanks

[jamiejefferson]

Welcome to the forums. These questions are just about CSS really, and only tangentially related to GSAP, but here goes:

 

1. If you need 100% height of the window, you need to give the page itself 100% height first, since percentage based height can only be inherited from elements with non-automatic height (well tables are a different story but thats not what you're asking). Add this to your CSS and it should start working:

html, body {
  height: 100%;
}

2. Probably so the page has some styles before javascript loads, but I'm not the author =(

 

3. You'll want to look into media queries. Here's the first article I found. It looks something like this:

.element {
  width: 500px;
}
@media all and (max-width: 999px) {
  .element {
    width: 250px; // overrides when window width < 1000px
  }
}

[Jonathan]

Hello rickideeuk, and Welcome to the GreenSock Forum!

 

Jamie beat me to it... so to add to Jamie's Great advice, I forgot about media queries:

 

Question #1:

You could just get the height of the browser window:

gridHeight = $(window).height();

Modified Example:

See the Pen GsErz by jonathan (@jonathan) on CodePen

 

Question 2:

 

Its always best to define the CSS (width, height, etc.. ) of the element your animating, so you have the defualt values to start from. Or you can use GSAP set() method to set the CSS properties before you start animating them.

 

Question 3:

 

For that type of behavior you would have to setup a resize() event that will listen if the browser is  resized. Then based on the different browser size or width, you could do different  things.

 

Helpful links on resize() event:

 

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

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

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

// resize event using on() method
$( window ).on("resize", function() {
      // resize code goes here
});

// resize event using the shortcut resize event
$( window ).resize(function() {
      // resize code goes here
});

// native javascript resize event
window.onresize = function(){
      // resize code goes here
};

Does that help?

[rickideeuk]

Hi Jamie and Jonathan

 

Thanks for your help, it's now working just how I want it 

 

I'm embarrassed about Question 1 though. I know CSS well, but got too caught up in the idea that it was script for the container that was the problem to realise I'd missed html out of my CSS!!!

 

Thanks again