asked on

resize jquery animation

Hi,

My code works but what do I do about responsive design?
When I resize the browser I want the jquery animation to resize as well .
This code is made for a static display on a desktop.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
	<script src="jquery.easing.1.3.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
		
 		 window.img = ["images/bcave1.png", "images/bcave2.png"];
		 window.indexNum=0;
		 setTimeout("animation()",100);
			
			
		});
		
	
		
		function animation(){
			setInterval("sun_raft()",2000);
			setInterval("cloud1()",1000);
			setInterval("pic1()",100);
			setInterval("animatepic1()",100);
		}
		
		function animatepic1(){
			 $("#pic").attr("src", img[indexNum]);
     		 indexNum++;	
      		 if (indexNum >= 2) {indexNum = 0;} 
	   
	    }
		
		
		
		function pic1(){
			$("#pic").animate({left:"650px"},4000).animate({left:"-150px"}, 0);
		}
		
		function sun_raft(){
			$("#sun").animate({opacity:".1"},1000).animate({opacity:"1"},1000);
	
/*			setTimeout("sun_raft()",2000);*/
		}
		function cloud1(){
			/*$("#cloud1").animate({left:"+=850px"},10000).animate({left:"-150px"}, 0)*/
		  $("#cloud1").animate({left:"850px"},1000);

			/*setTimeout("cloud1()",10000);*/
		}
		
	</script>
	<style type="text/css">
	    *{ margin:0; padding:0; }
	    body { text-align: center; background: red; }
			#wrapper{ margin:0px auto; width:700px; }
		#content{ position:relative; width:700px; height:300px; top:30px; overflow:hidden; border:5px solid #f5f5f5; background: url('images/scene_bg.jpg'); }
			#sun{ position:absolute; top:10px; left:30px; }
			#pic{ position:absolute; top:80px; left:30px; }
			#cloud1{ position:absolute; top:60px; left: -150px; z-index:1; }
		#img {  max-width: 100%; }
	</style>
</head>


<body>
<div id="wrapper">
		<div id="content">
        
			<img id ="pic" src="images/bcave1.png" alt="eight ball" />
			<img id="sun" src="images/sun.gif"/>
			<img id="cloud1" src="images/cloud1.png">
		
		</div>
	</div>

Open in new window

jagguy

ASKER

i think by the lack of responsive and my searching for this, jquery for animation for responsive designs is a lemon

David S.

I would suggest that you try using the CSS3 "transform" property to scale it: https://developer.mozilla.org/en-US/docs/Web/CSS/transform#scale

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

For modern browsers, just use the vh and vw units to set the dimensions and sizes and everything should scale to the viewport size.

Cd&

Scott Fell

Good one Cd&. I have not fully adopted all the cool css3/html 5 tricks on a regular basis yet so they are out of mind.