beanymanuk Posted June 7, 2013 Share Posted June 7, 2013 I am trying to output my javascript array so it works in a sliderBut 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> Link to comment https://forums.phpfreaks.com/topic/278888-javascript-not-loading-at-the-right-time/ Share on other sites More sharing options...
nogray Posted June 8, 2013 Share Posted 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). Link to comment https://forums.phpfreaks.com/topic/278888-javascript-not-loading-at-the-right-time/#findComment-1434779 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.