load - jQuery fadein when loaded with timer -

-

i want build script loads external file div when page loaded, , fades content in content has been loaded completely. want display first div 60 seconds, , fadeout first div , fadein second div has loaded completely.

now have different processes in script reloads content of div while it's visible... want reload div before fades in, , display 60 seconds, , same process next div.

can me out? i|ve been trying lot of things here, can't work want to.

this code have far;

<html> <head> <title>     title </title>  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>  <script type='text/javascript'>//<![cdata[ $(window).load(function(){ var divs = $('.fade');  function fade() {     var current = $('.current');     var currentindex = divs.index(current),         nextindex = currentindex + 1;      if (nextindex >= divs.length) {         nextindex = 0;     }      var next = divs.eq(nextindex);      next.stop().fadein(3000, function() {         $(this).addclass('current');     });      current.stop().fadeout(3000, function() {         $(this).removeclass('current');         settimeout(fade, 60000);     }); }  fade(); });//]]>  </script>  <script type="text/javascript"> $.ajaxsetup( {     cache: false,     async:false }); $(document).ready(function(){      $('#div1').load('content1.php');     $('#div2').load('content2.php');     $('#div3').load('content3.php');     $('#div4').load('content4.php');     $('#div5').load('content5.php');  }); function div1() {  $('#div1').load('content1.php'); } setinterval('div1()', 50000);  function div2() {  $('#div2').load('content2.php'); } setinterval('div2()', 50000);  function div3() {  $('#div3').load('content3.php'); } setinterval('div3()', 50000);  function div4() {  $('#div4').load('content4.php'); } setinterval('div4()', 50000); </script>  <style> body {margin:0;} .fade {position:absolute; top:0; left:0; display:none;} .current {z-index:999;} </style>  </head> <body>  <div id="wrapper">     <div id="div1" class="fade current"></div>     <div id="div2" class="fade"></div>     <div id="div3" class="fade"></div>     <div id="div4" class="fade"></div>     <div id="div5" class="fade"></div> </div>  </body> </html>

here's 1 concept doing this:

$.ajaxsetup({     cache: false,     async:true          // want allow async ajax });  $(document).ready(function(){      var divs = $();      function markloaded() {         var self = $(this);         self.data("loaded", true);          function next(item) {             // if we're current item , loaded             // show us.  if we're not yet loaded,             // nothing here , shown when             // markloaded called             if (item.hasclass("current") && item.data("loaded")) {                 item.fadein(3000, function() {                     // move current next 1                     item.removeclass("current");                     var index = (divs.index(item) + 1) % divs.length;                     var nextitem = divs.eq(index);                     // display 60 seconds before fading out                     item.delay(60 * 1000).fadeout(3000, function() {                         nextitem.addclass("current");                         // hidden , we're temporarily done with,                          // reload content div next time displayed.                         // preload content should ready                         // when it's time display div.                         item.data("loaded", false);                         item.load(item.data("url"), markloaded);                         // next item going                         next(nextitem);                     });                 });             }         }         next(self);     }      // hide divs , start content loading them     (var = 1; <= 5; i++) {         var item = $("#div" + i);         var content = 'content' + + '.php';         item.data("url", content);         divs = divs.add(item);         item.hide().load(content, markloaded);     } });

simulation working here: http://jsfiddle.net/jfriend00/selet/

here's general logic:

  1. always use async ajax calls - non-async locks browser bad user experience.
  2. the divs loaded in loop (rather duplicating code).
  3. when div has finished loading, displayed if has class="current" (only 1 have that)
  4. this show div1 first since 1 class="current"
  5. after div1 fades in, removes "current" class itself
  6. it calculates div next, fades out 1 displaying, adds "current" class new 1 , calls next(nextitem).
  7. as div finishes fading out, reset it's state , tell load new content again have fresh content next time displays (preloads content)
  8. if div has finished loading, starts fade in
  9. if hasn't yet finished loading, code nothing , displayed when finishes loading , markloaded called on it.

Comments

Post a Comment

Popular posts from this blog

C# random value from dictionary and tuple -

-
i have following code, , need random item contains string "region_1" dictionary. public static dictionary<int, tuple<string, int, currencytype>> itemarray = new dictionary<int, tuple<string, int, currencytype>>() { { 0xb3e, new tuple<string, int, currencytype>("region_1", 1500, currencytype.fame) } }; public static int generateitemid(string shopid) { var generateditem = itemarray.elementat(new random().next(0, itemarray.count)).key; } how select this? it's not possible efficiently... first create static random @ class level... prevent non-random behaviour if run query on short period of time... (it's seeded discrete clock) static random rnd = new random(); then: var item = itemarray.values .where(t => t.item1 == shopid) .orderby(_ => rnd.next()) .firstordefault()
Read more

cgi - How do I interpret URLs without extension as files rather than missing directories in nginx? -

-
so i'm trying install zoneminder , have run under nginx, has few compiled files need run using fast-cgi. these files lack extension. if file has extension, there no issue , nginx interprets file , return 404 if can't find it. if has no extension, assume it's directory , return 404 when can't find sort of index page. here have now: # security camera domain. server { listen 888; server_name mydomain.com; root /srv/http/zm; # enable php support. include php.conf; location / { index index.html index.htm index.php; } # enable cgi support. location ~ ^/cgi-bin/(.+)$ { alias /srv/cgi-bin/zm/; fastcgi_pass unix:/run/fcgiwrap.sock; fastcgi_param script_filename $document_root/$1; include fastcgi.conf; } } the idea is, under cgi-bin directory goes through fastcgi pipe. any idea on howi can fix this? upon closer inspection, realized zoneminder has 2 cgi sc...
Read more

.htaccess - htaccess convert request to clean url and add slash at the end of the url -

-
ok , searched more 4 days , more 20 posts here in stach or in websites without kind of success first here htaccess file rewriteengine on rewriterule ^([a-za-z0-9_]+)/?$ index.php?page=$1 [nc] rewriterule ^([a-za-z0-9_]+)\/([a-za-z0-9_]+)\/?$ index.php?page=$1&action=$2 [nc] i tried many codes 1 worked me can call request , works me www.example.com/pagename => www.example.com/index.php?page=pagename here questions , please provide me information "in detail" understand code well 1- how convert request automatically www.example.com/index.php?page=pagename www.example.com/pagename 2- if tried add slash @ end shows me page without images or styling mean www.example.com/pagename => works www.example.com/pagename/ => doesn't work that's :) for first part need 301 rule this: rewritecond %{the_request} /index\.php\?page=([^\s&]+) [nc] rewriterule ^ /%1? [r=301,l] for second part use absolute path in css, js, images files r...
Read more