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

database - VFP Grid + SQL server 2008 - grid not showing correctly -

-
i having problem, have grid called "gridbasica" , this: thisform.gridbase.recordsource = "sgviemp" sgviemp cursor made executing select sqlserver command sqlexec. when want modify registry, go form , the update there. so, when come form grid, grid isnt grid anymore, big white rectangle. reading around said: delete recordsource , asingt again. thisform.gridbase.recordsource = "" *--i sqlexe here thisform.gridbase.recordsource = "sgviemp" i , works, but, when click button modify again cursos updated modify form doesnt load fields did first time. could me out that? thanks in advance. --------------- edit ------------------ i have been doing recommended: lnselect = select(0) n = sqlexec(thisform.conexion,"select emp_ccodigo codigo, emp_cnombre 'nombre o razon social', emp_cnumrif 'r.i.f' sgviempr","sgviemp1") set echo on suspend select sgviemp zap in sgviemp *-- browse *--zaps correct
Read more

jquery - Set jPicker field to empty value -

-
im using jpicker color selector in form. have clear value set window/icon 'no color selected' state. i've tried following: $(':input[name="color"]').val(''); //access value directly. (does not affect jpicker) 2: $.jpicker.list[0].color.active.val('hex', '', this); //set color black , input value 000000, instead of empty string 3: $.jpicker.list[0].color.active.val(null, '', this); //does nothing none of 3 methods seems behave properly. in advance. this works me :) $.jpicker.list[0].color.active.val('v', null); here example: http://jsfiddle.net/3up7n/
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