Jump to content

Javascript not loading at the right time


beanymanuk

Recommended Posts

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>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.