3

I'm developing a site where I would like the user to be able to flip through tables, sort of like a gallery. I would like to see one table at a time, and be able to click on an arrow and see the next table.

These tables will be updated with new data often. Currently I have the tables in TablePress, and they are displayed in kind of a blog format, one below another. The user has to do a lot of scrolling, and it isn't a very clean setup.

I tried looking for a plugin that would do this, but all the ones I found were for images only, and don't work with Tablepress tables.

What can I do to display these tables better?

3

Here is one way to do it. You should be able to create a simple jQuery and CSS slider to better display the TablePress tables.

Here is a good example of a simple jQuery slider you could use: https://codepen.io/doodlemarks/pen/aFcly

You would need to add the CSS and jQuery to your site then insert the required HTML elements in your post / page:

For example (CSS and jQuery from here - https://codepen.io/doodlemarks/pen/aFcly):

HTML

<div id="slider">
    <a href="#" class="control_next">></a>
    <a href="#" class="control_prev"><</a>
    <ul>
        <li>[table id=1 /]</li>
        <li>[table id=2 /]</li>
        <li>[table id=3 /]</li>
    </ul>

CSS

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
    position: absolute;
    top: 40%;
    z-index: 999;
    display: block;
    padding: 4% 3%;
    width: auto;
    height: auto;
    background: #2a2a2a;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    opacity: 0.8;
    cursor: pointer;
 }

a.control_prev:hover, a.control_next:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease;
}

a.control_prev {
    border-radius: 0 2px 2px 0;
}

a.control_next {
    right: 0;
    border-radius: 2px 0 0 2px;
}

.slider_option {
    position: relative;
    margin: 10px auto;
    width: 160px;
    font-size: 18px;
}

jQuery

jQuery(document).ready(function ($) {

    jQuery('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
});

var slideCount = jQuery('#slider ul li').length;
var slideWidth = jQuery('#slider ul li').width();
var slideHeight = jQuery('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

jQuery('#slider').css({ width: slideWidth, height: slideHeight });

jQuery('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

jQuery('#slider ul li:last-child').prependTo('#slider ul');

function moveLeft() {
    jQuery('#slider ul').animate({
        left: + slideWidth
    }, 200, function () {
        jQuery('#slider ul li:last-child').prependTo('#slider ul');
        jQuery('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        jQuery('#slider ul li:first-child').appendTo('#slider ul');
        jQuery('#slider ul').css('left', '');
    });
};

jQuery('a.control_prev').click(function () {
    moveLeft();
});

jQuery('a.control_next').click(function () {
    moveRight();
});

});    

The CSS will need to be edited depending on your table sizes, page layout etc. but it should be enough to get you started :-)

| improve this answer | |
  • This worked perfectly and was a great little jquery refresher for me as well! Thanks – ellen Jul 31 '18 at 23:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.