responsive-tables
responsive-tables copied to clipboard
jQuery solution to display visual-scroll-cue if table has more than X amount of td elements.
Here is another option to add a visual cue. I only want to display the visual cue if scrolling is really necessary when there are several td elements. In my case after 3 ths.
1 ) JQuery that adds a div with a bg-image(visual cue) via css to the responsive table
$("table.responsive").each(function(){
if ( $("th", this).length > 3) {
$(this).before("<div style='position:relative;'><span class='MobiScroll'></span></div>");
}
});
- CSS to position the div (this goes in the mobile media query )
.MobiScroll {
background-image: url(image.png);
width: 62px;
height: 38px;
display: block;
position: absolute;
bottom: 30px;
right: 0;
}
Here is a fiddle: http://jsfiddle.net/design4lifeblog/SetvX/