Search the Community
Showing results for tags '#banner'.
Found 1 result
-
Hi - My design is at - https://jsfiddle.net/perfG1/dpLgmh02/10/ I am trying to make my 300px X 250px design responsive by responding to a resize window request. The code I added is: var contentResizeTimer; function scale_content_on_window_resize(outer, inner, natural_width, natural_height) { /* Here we pass in an outer wrapper and an inner wrapper. Our content sits inside the inner wrapper. We then calculate the scale from the original height and width of the outer wrapper. At desktop the scale will be 1.0 but as the browser width decreases the scale will gradualy get smaller. The calculated scale then gets set on the inner wrapper and the height of the scaled element then gets set on the outer wrapper. This is to remove the borders around the scaled inner element. */ var outer_width = outer.width(); if (outer_width > natural_width) { outer_width = natural_width; } var theScale = outer_width / natural_width; // Calculate the actual slides height after its scaled. var processed_height = theScale * natural_height; TweenMax.to(outer, 0.2, { height: processed_height, // width: "inherit", width: outer_width, maxWidth: "100%", ease: Power4.easeOut }); TweenMax.set(inner, { autoAlpha: 1.0, transition: "all 0.2s ease", transformOrigin: "top center", scale: theScale, marginLeft: "0px", marginTop: "0px" }); } // end function scale_content_on_window_resize $(window).resize(function() { clearTimeout(contentResizeTimer); contentResizeTimer = setTimeout(function() { scale_content_on_window_resize($("#banner"), $(".slide"), $(window).width(), $(window).height()); }, 100); }); scale_content_on_window_resize($("#banner"), $(".slide"), 300, 250); To test this, I feed different values in the last line, e. g. 150, 125. This correctly sets the window but does not scale the animation itself. What could I be doing wrong? I am new to this and any help is greatly appreciated! Sree
