javascript - Creating a jQuery vertical scroll loop -

-

i'm trying write jquery script continually scroll these <p> tags within <div> parent. got idea this site.

function shuffle(){        $('#wrapper > p').each(function(){          h = ($(this).offset().top + 130);          if( h > 500 ){              console.log(h);              $(this).css ('top', 0 );              return;          }            if( h == 270 ){              $(this).addclass('current' );          }            if( h == 360 ){              $(this).removeclass('current' );          }                    $(this).animate({              top: h,              easing: 'easein'          }, 500, '');                    if( h > 1350 ){              $(this).css ('top', 0 );          }      });        window.settimeout(shuffle, 2500);  }    var = 0;            $('#wrapper > p').each(function(){      starter = $(this).css('top', ((i * 90) ) + 'px' );      starterwhite = ($(this).offset().top + 130);      if((i*90) == 270)          $(this).addclass('current');      $(this).css('top', starter );      i++;  });    window.settimeout(shuffle, 2000);
#wrapper {      height: 500px;      overflow: hidden;      position: relative;  }    p {      position: absolute;      margin: 0;      padding: 0;  }    .current {      color: red;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="wrapper">      <p>1</p>      <p>2</p>      <p>3</p>      <p>4</p>      <p>5</p>      <p>6</p>      <p>7</p>  </div>

problem when try make scroll <p> tags overlap, , highlighted tag doesn't change. idea how make work? here's jsfiddle of got far.

check this out:

// constants, can play  var step = 90;  var current_index = 3;    // variables calculating  var currenttop = step * current_index;  var nextforcurrenttop = step * (current_index + 1);  var $numbers = $('#wrapper > p');  // in case = 7  var count = $numbers.length;  var secondtolasttop = step * (count - 1);    $numbers.each(function(i) {      var $this = $(this);      $this.css('top', * step + 'px');        if (i === current_index) {          $this.addclass('current');      }  });    window.settimeout(shuffle, 2000);    function shuffle() {      $numbers.each(function() {          $this = $(this);          // calculating new position of element          h = parseint($this.css('top')) + step;            // in case = 540          if (h > secondtolasttop) {              $this.css('top', 0);              return;          }            // in case visually = 3rd element          if (h === currenttop) {              $this.addclass('current');          }            // in case visually = 4th element          if (h === nextforcurrenttop) {              $this.removeclass('current');          }            $this.animate({              top: h,              easing: 'easein'          }, 500, '');      });        window.settimeout(shuffle, 2500);  }
#wrapper {      height: 500px;      overflow: hidden;      position: relative;  }    p {      position: absolute;      margin: 0;      padding: 0;  }    .current {      color: red;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="wrapper">      <p>1</p>      <p>2</p>      <p>3</p>      <p>4</p>      <p>5</p>      <p>6</p>      <p>7</p>  </div>

i improved , commented code example, removed magic numbers. can play constants.


Comments

Post a Comment

Popular posts from this blog

c# - Better 64-bit byte array hash -

-
i need hash algorithm produces 64-bit hash code ( long ) fewer collisions string.gethashcode() , fast (no expensive calls cryptographic functions). here's implementation of fnv still shows 3% of collisions after testing 2 million random strings. need number way lower. void main() { const string chars = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!#@$%^&*()_+}{\":?><,./;'[]0123456789\\"; const int n = 2000000; var random = new random(); var hashes = new hashset<long>(); int collisions = 0; for(int = 0; < n; i++) { var len = random.next(chars.length); var str = new char[len]; (int j = 0; j < len; j++) { str[j] = chars[random.next(chars.length)]; } var s = new string(str); if(!hashes.add(get64bithash( s ))) collisions++; } console.writeline("collision percentage after " + n + " random strings: " + ((doubl
Read more

webrtc - Which ICE candidate am I using and why? -

-
[questions in bold below] i have setup kurento media server 5.1.3 in datacenter behind firewall running os ubuntu 14.04. has 2 network cards: 222.222.222.222 (eth0 - private ip) 111.111.111.111 (eth1 - public ip) attached below sdp (setremotedescription) when browser connected kurento media server type: answer, sdp: v=0 o=- 5487318114793304426 0 in ip4 0.0.0.0 s=kurento media server c=in ip4 0.0.0.0 t=0 0 a=group:bundle audio video m=audio 59068 rtp/savpf 111 0 c=in ip4 111.111.111.111 a=rtpmap:111 opus/48000/2 a=rtpmap:0 pcmu/8000 a=sendrecv a=rtcp:59068 in ip4 111.111.111.111 a=rtcp-mux a=ssrc:669011897 cname:user39019747@host-6e83e4c2 a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time a=mid:audio b=as:20 a=ice-ufrag:ymdk a=ice-pwd:lylifk5ueqzpwm91ddj37e a=fingerprint:sha-256 ff:0f:81:8c:41:4e:b4:b6:c6:d8:36:f3:d6:5f:09:fd:5f:af:13:b3:9d:fc:12:66:ac:f3:56:d6:5b:0a:73:5d a=candidate:1 1 udp 2013266431 111.111.111.111 55239 typ host a=candidate:2 1 udp
Read more

php - Zend Framework / Skeleton-Application / Composer install issue -

-
i trying create zend framework application using skeleton in netbeans. when run composer install, following error message: "c:\php\php.exe" "c:\composer\composer.phar" "--ansi" "--no-interaction" "update" "--dev" using deprecated option "dev". dev packages installed default now. loading composer repositories package information updating dependencies (including require-dev) requirements not resolved installable set of packages. problem 1 - package requires php >=5.5 php version (5.4.42) not satisfy requirement. problem 2 - installation request zendframework/zendframework 2.5.1 -> satisfiable zendframework/zendframework[2.5.1]. - zendframework/zendframework 2.5.1 requires php >=5.5 -> php version (5.4.42) not satisfy requirement. done. apparently, zend framework only needs php 5.3+ contradicts above. need use php 5.4. my composer.json following: { "name": "
Read more