jquery - Is it possible to move and slide table row to the left? -


i have simple html table , want move animate paging action. example, each page loads 3 table rows supposed replace current onscreen table rows. i'd animate first 3 rows slide out left, , next 3 ones slide in right.

i can't seem come solution using html table tag, i'd avoid styled lists or divs if possible.

here's example, active class should visible on first page, when click next button, first 3 rows should slide out left, , second 3 should slide in right. https://jsfiddle.net/ba0alker/

<table>   <tr class="active">     <td>one</td>   </tr>   <tr class="active">     <td>two</td>   </tr>   <tr class="active">     <td>three</td>   </tr>   <tr>     <td>four</td>   </tr>   <tr>     <td>five</td>   </tr>   <tr>     <td>six</td>   </tr> </table> <button id="prev">previous</button> <button id="next">next</button>

here have dirty , quick aproximation. have tweak bit think start point.

first, need have tables on html, , have 1 active class. 1 visible. other tables, set display:none them hidden.

then, in js, change class active next element. added if check next element table, if isn't first table gets active class. 

$("document").ready(function() {      $("#the_button").click(function() {  var next = $(".tables.active").last().next();    if (next.get(0).tagname != 'table') {    next = $(".tables").eq(0)  }    $(".tables.active").removeclass("active");  next.addclass("active");  next.next().addclass("active");  next.next().next().addclass("active");      $(".tables").fadeout(300);  $(".tables.active").delay(300).fadein(300);      });  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table class="tables active">    <tr>  <th>firstname</th>  <th>lastname</th>  <th>age</th>    </tr>    <tr>  <td>jill</td>  <td>smith</td>  <td>50</td>    </tr>    <tr>  <td>eve</td>  <td>jackson</td>  <td>94</td>    </tr>  </table>  <table class="tables active">    <tr>  <th>firstname</th>  <th>lastname</th>  <th>age</th>    </tr>    <tr>  <td>jill</td>  <td>smith</td>  <td>50</td>    </tr>    <tr>  <td>eve</td>  <td>jackson</td>  <td>94</td>    </tr>  </table>  <table class="tables active">    <tr>  <th>firstname</th>  <th>lastname</th>  <th>age</th>    </tr>    <tr>  <td>jill</td>  <td>smith</td>  <td>50</td>    </tr>    <tr>  <td>eve</td>  <td>jackson</td>  <td>94</td>    </tr>  </table>    <table class="tables" style="display:none">    <tr>  <th>foo</th>  <th>bar</th>  <th>foobar</th>    </tr>    <tr>  <td>foo</td>  <td>bar</td>  <td>foobar</td>    </tr>    <tr>  <td>var</td>  <td>foo</td>  <td>foovar</td>    </tr>  </table>  <table class="tables" style="display:none">    <tr>  <th>foo</th>  <th>bar</th>  <th>foobar</th>    </tr>    <tr>  <td>foo</td>  <td>bar</td>  <td>foobar</td>    </tr>    <tr>  <td>var</td>  <td>foo</td>  <td>foovar</td>    </tr>  </table>  <table class="tables" style="display:none">    <tr>  <th>foo</th>  <th>bar</th>  <th>foobar</th>    </tr>    <tr>  <td>foo</td>  <td>bar</td>  <td>foobar</td>    </tr>    <tr>  <td>var</td>  <td>foo</td>  <td>foovar</td>    </tr>  </table>  <button id="the_button">    next table  </button>


-

Comments

Post a Comment

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

i have following question: i have variable value in program declared value. i want convert value byte array.. how can serialize byte array , back? found examples related other types such double or int, not any. this should need. it's pretty similar how 1 in java. import java.io.{bytearrayinputstream, bytearrayoutputstream, objectinputstream, objectoutputstream} object serialization extends app { def serialise(value: any): array[byte] = { val stream: bytearrayoutputstream = new bytearrayoutputstream() val oos = new objectoutputstream(stream) oos.writeobject(value) oos.close stream.tobytearray } def deserialise(bytes: array[byte]): = { val ois = new objectinputstream(new bytearrayinputstream(bytes)) val value = ois.readobject ois.close value } println(deserialise(serialise("my test"))) println(deserialise(serialise(list(1)))) println(deserialise(serialise(map(1 -> 2)))) println(deserialise(seri
Read more

matplotlib support failed in PyCharm on OSX -

any idea how fix ? how can debug might problem ? not seem : https://youtrack.jetbrains.com/issue/py-15520 i in console: python 2.6.9 (unknown, jul 14 2015, 19:46:31) [gcc 4.2.1 compatible apple llvm 6.0 (clang-600.0.39)] on darwin >>> import matplotlib.pyplot plt matplotlib support failed the backend : >>> import matplotlib >>> print(matplotlib.rcparams['backend']) macosx
Read more

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -

i new programming please pardon me if rookie mistake. i writing python script have defined functions create subplots of distributions. i have slider widget end user change value of variables(mu , sigma) , see effect on distribution. here's code import numpy np print np.__version__ import scipy print scipy.__version__ scipy.stats import norm, lognorm, uniform import matplotlib print matplotlib.__version__ import matplotlib.pyplot plt matplotlib.widgets import slider, button, radiobuttons, checkbuttons #####calculating mean , standard deviation##### global mu_a1 mu_a1 = 1 global mu_b1 mu_b1 = 10 global mu_c1 mu_c1 = -13 global sigma_a1 sigma_a1 = 0.14 global sigma_b1 sigma_b1 = 1.16 global sigma_c1 sigma_c1 = 2.87 mu_x01 = -11 sigma_x01 = 1.9 #####_____##### #####generating random data##### a1 = 0.75*mu_a1 + (1.25 - 0.75)*sigma_a1*np.random.sample(10000) b1 = 8*mu_b1 + (12 - 8)*sigma_b1*np.random.sample(10000) c1 = -12*mu_c1 + 2*sigma_c1*np.random.sample(10000)
Read more