Javascript not loading at the right time

beanymanuk · June 7, 2013

I am trying to output my javascript array so it works in a slider

But its not outputting at the correct time I think so that the slider Jquery affects that div

Any ideas on where I am going wrong?

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<meta charset="utf-8">
	<title>Slider</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.flashuser.net/tutorial/jquery-image-grid/js/jquery.flexslider-min.js" type="text/javascript"></script>	
    <script src="http://www.flashuser.net/tutorial/jquery-image-grid/js/prettyphoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>	
	
<script type="text/javascript">
	$(document).ready(function(){

           $('.flexslider').flexslider({
			animation: "slide",
			slideshow: true,
			slideshowSpeed: 7000,
			animationSpeed: 600,  
			prevText: 'Prev',
			nextText: 'Next'
									
			});
		   
		   $(".slides li:not(.clone) a[rel^='prettyPhoto']").prettyPhoto({
						animation_speed: 'normal',
						autoplay_slideshow: true,
						slideshow: 3000
					});

});
	</script>	
	
	<style>	
	.usernamenamelabel {
	width:100px;
	float:left;
	font-size:13px;
	}
	
.flex-control-nav {
display:none;
}

#wrap, #wrap2{
width:366px;
clear:both;
}
</style>
	
</head>
<body>
<script type="text/javascript">
window.onload = function() {
			var str = "test1,test2,test3,test4,test5,test6, test7, test8, test9, test10 ,test11, test12, test13,test14,test15,test16,test17,test18,test19";
			var temp = new Array();
			// split string put into an array
			temp = str.split(",");
			var tt = temp.length;
			var tt2 = tt % 9;
			var tt3 = 9 - tt2;
			//document.write(tt3);
			for (var ai = 0; ai < tt3; ai++) {
			temp.push("");
			}

			var att = temp.length;
			var result = "<section class='flexslider'><ul class='slides'><li><div class='row'>";
			for (var i = 0; i < att; i++) {
			result += "<div class='usernamenamelabel'>"+temp[i]+"</div>";

			if (i % 9 ==  {
					result += "</div></li>";
					if(i !=(att-1)) {
					 result += "<li><div class='row'>";
					}
					
				}
			else {
			if (i % 3 == 2) {
					result += "</div><div class='row'>";
				}
			}	

				
			}

			result += "</ul></section></div>";	
			//document.write(result);
			document.getElementById("wrap2").innerHTML = result;
}
			</script>

	<div id="wrap2"></div>		

<div id="wrap">
	<section class="flexslider">
		<ul class="slides ">

			<li>
				<div class="row">	
					<div class="usernamenamelabel">test1</div>
					<div class="usernamenamelabel">test2</div>
					<div class="usernamenamelabel">test3</div>	
				</div><!--end row-->

				<div class="row">	
					<div class="usernamenamelabel">test4</div>
					<div class="usernamenamelabel">test5</div>
					<div class="usernamenamelabel">test6</div>
				</div><!--end row-->

				<div class="row">	
					<div class="usernamenamelabel">test7</div>
					<div class="usernamenamelabel">test8</div>
					<div class="usernamenamelabel">test9</div>	
				</div><!--end row-->
			</li>

            <li>
				<div class="row">	
					<div class="usernamenamelabel">test10</div>
					<div class="usernamenamelabel">test11</div>
					<div class="usernamenamelabel">test12</div>	
				</div><!--end row-->

				<div class="row">	
					<div class="usernamenamelabel">test13</div>
					<div class="usernamenamelabel">test14</div>
					<div class="usernamenamelabel">test15</div>
				</div><!--end row-->
	
				<div class="row">	
					<div class="usernamenamelabel">test16</div>
					<div class="usernamenamelabel">test17</div>
					<div class="usernamenamelabel">test18</div>	
				</div><!--end row-->
			</li>

            <li>
				<div class="row">	
					<div class="usernamenamelabel">test19</div>
					<div class="usernamenamelabel">test20</div>
					<div class="usernamenamelabel">test21</div>	
				</div><!--end row-->

				<div class="row">	
					<div class="usernamenamelabel">test22</div>
					<div class="usernamenamelabel">test23</div>
					<div class="usernamenamelabel">test24</div>
				</div><!--end row-->

				<div class="row">	
					<div class="usernamenamelabel">test25</div>
					<div class="usernamenamelabel">test26</div>
					<div class="usernamenamelabel">test27</div>	
				</div><!--end row-->
			</li>
		</ul>
	</section><!--end flexslider-->
 </div><!--end wrap-->

</body>
</html>

nogray · June 8, 2013

The jquery ready runs before the window.onload event since it doesn't have to wait for images etc... You can just take your the function from the onload event and put it in the top of your jquery ready (before the flexslider).

Sign In

Javascript not loading at the right time

Recommended Posts

beanymanuk

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information