5 Replies - 864 Views - Last Post: 04 July 2013 - 09:31 AM

#1 rekha_kj  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 14-September 11

Javascript Animation Failure

Posted 04 July 2013 - 01:02 AM

Hi,
I have to put 3 animations in my home page. Previously, i used flash, all were working fine. But now i am trying to change my site to javascript. But when i use two animations in my home page, one is working and the another one is not working. Can anybody answer my question.

Thanks in advance
Rekha
Is This A Good Question/Topic? 0
  • +

Replies To: Javascript Animation Failure

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,257
  • Joined: 08-June 10

Re: Javascript Animation Failure

Posted 04 July 2013 - 01:20 AM

that depends on the animations you use. if you donít show us these, how shall we answer then?
Was This Post Helpful? 0
  • +
  • -

#3 rekha_kj  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 14-September 11

Re: Javascript Animation Failure

Posted 04 July 2013 - 01:32 AM

hi,
I have attached my file. First one for menu animation, Second is banner animation for which i have used skitter slideshow(using jquery), next is for content (left side) right content is video.

Thanks
Rekha
<!------------ This is for Menu Animation --------------------->
	 
    <link type="text/css" href="jquery/menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript" src="jquery/menu.js"></script>
	
	
	
	<script src="js/jquery-1.6.3.min.js"></script>
	<script src="js/jquery.easing.1.3.js"></script>
	<script src="js/jquery.animate-colors-min.js"></script>
	
	<script src="js/jquery.skitter.min.js"></script>
	
	

	<script>
	$(document).ready(function() {
		
		var options = {};
	
		if (document.location.search) {
			var array = document.location.search.split('=');
			var param = array[0].replace('?', '');
			var value = array[1];
			
			if (param == 'animation') {
				options.animation = value;
			}
			else if (param == 'type_navigation') {
				if (value == 'dots_preview') {
					$('.border_box').css({'marginBottom': '40px'});
					options['dots'] = true;
					options['preview'] = true;
				}
				else {
					options[value] = true;
					if (value == 'dots') $('.border_box').css({'marginBottom': '40px'});
				}
			}
		}
		
		$('.box_skitter_large').skitter(options);
		
		// Highlight
		$('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
		
	});
	</script>
	<style type="text/css">
* { margin:0;
    padding:0;
}
html { background:url(images/blue_background_9.gif); }
body {
    margin:0px auto;
    width:80%;
	height:auto;
	
 /*   height:466px;*/ 
    
   
}





div#copyright { display: none; }
</style>
                                       <!--for left content animation-->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>	
	<script type="text/javascript" src="js\scroll.js"></script>
	
	<style type="text/css">
	body {
		background: #eee;
		margin: 0; padding: 0;
	}
	#image-rotate {
		width: 450px;
		height: 600px;
		overflow: hidden;
		margin: 0px auto;
		box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
		position: relative;
		top: 100px;
	}
	#main-image {
		width: 450px;
		float: left;
		position: relative;
		height: 600px;
		background: #343434;
	}
	#side-images {
		float: left;
		height: 300px;
		position: relative;
	}
	
	#side-images div[id^=image] {
		height: 100px;
		width: 250px;
		overflow: hidden;
		position: relative;
		padding: 0;
		z-index: 3000;
	}
	
	#main-image div { display: none; position: absolute; }
	#main-image img { display: block; }
	#main-image span img { display: none; }
	
	#up-arrow, #down-arrow {
		background: #343434;
		cursor: pointer;
		border-radius: 20px;
		width: 26px;
		height: 21px;
		box-shadow: 0px 0px 20px rgba(255,255,255,1);
		opacity: 0.8;
		z-index: 5000;
		text-align: center;
		color: #fff;
		left: 111px;
		margin: 10px 0;
		position: absolute;
	}
	
	#up-arrow { top: 0; padding: 4px 0 0 0; }
	#down-arrow { bottom: 0; padding: 6px 0 0 0; }
	#side-images img { display: none; }
	#side-images span img { display: block; }
	#up-arrow img, #down-arrow img { display: inline; }
	
	#up-arrow:active, #down-arrow:active {
 		box-shadow: 0px 0px 5px rgba(255,255,255,1), inset 0px 0px 15px rgba(0,0,0,1);	
	}
	

	#header {
		background: #000;
		padding: 20px;
		color: #fff;
	}
	
	#header a {
		opacity: 1 !important;
		color: #fff;
		font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
		font-size: 20px;
		font-weight: bold;
		text-decoration: none;
	}
	
	#header img {
		width: 150px;
		height: 33px;
		float: none;
	}
	
	
	#header .button {
		text-decoration: none;
		color: #fff;
		font-weight: bold;
		padding: 12px 20px;
		font-size: 18px;
		border-radius: 10px;
		background-color: #666666;	
		box-shadow: 0 5px 5px #313131, 0 2px 0 #393939, inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
		position: relative;
		border-bottom: 1px solid rgba(255,255,255,0.2);
		display: inline-block;
		float: right;
		position: relative;
		bottom: 5px;
		text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
	}
	
	#header .button:hover {
		box-shadow: 0 5px 5px #313131, 0 2px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
	}
	
	#header .blue {
		background: #2a8ad8;
		box-shadow: 0 2px 0 #25325e, inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
	}
	
	#header .blue:hover {
		box-shadow: 0 2px 0 #25325e, inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
	}
	#header .blue:active {
		box-shadow: 0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
	}

</style><!--end of left animation-->


Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,257
  • Joined: 08-June 10

Re: Javascript Animation Failure

Posted 04 July 2013 - 01:39 AM

why are you including the jQuery library thrice (lines #4/#9/#72)? that may be a reason.

other than that, have a look at the Error Console for further hints.



PS: IIRC, the current jQuery verion is 1.10/2.0

This post has been edited by Dormilich: 04 July 2013 - 01:41 AM

Was This Post Helpful? 0
  • +
  • -

#5 rekha_kj  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 56
  • Joined: 14-September 11

Re: Javascript Animation Failure

Posted 04 July 2013 - 02:01 AM

Hi,
I have attached my one link where i have uploaded my file. But in the content what i have put 2 animations(left and right), is now video(mp3). But it is not working in mobile. So i want to make it in javascript. That's what i am trying to do.

http://primesource.in/index_div.htm - Link

Thanks
Rekha
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 441
  • View blog
  • Posts: 1,868
  • Joined: 30-April 10

Re: Javascript Animation Failure

Posted 04 July 2013 - 09:31 AM

In the link you posted you have some images that are getting a 404 error and you have to take out all but one jquery library.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1