How can I insert a scrollbar in jquery jtable? - javascript

I am using the great jquery plugin jtable.
But I can't find any examples showing a vertical scrollbar.
I tried setting a height and overflow.auto on the div that contains it - the scrollbar then scrolls the whole table including header - I only want to scroll the rows not the header and not the footer.
Has anyone found a way to do this?
A solution that works some way is inserting:
$('.jtable').wrap('<div class="jtable-main-container scroll-content" />');
and
.scroll-content {
overflow-y: auto;
width:100%;
}
div.jtable-main-container {
height:100%;
}
And setting height on the div.
However it also scrolls the table header - but it is better than scrolling the whole jtable - I tried to make a solution where jtable generates 2 tables - one with header and one with body but the header gets out of sync.
see it here: http://jsfiddle.net/j5Q4L/3/

$('.jtable').wrap('<div class="jtable-main-container scroll-content" />');
and
.scroll-content {
overflow-y: auto;
width:100%;
}
div.jtable-main-container {
height:100%;
}
Thank you!

<style type="text/css">
#StudentTableContainer {
width: 100%;
display: block;
}
#StudentTableContainer tbody, .jtable tbody {
height: 100px;
overflow-y: auto;
display: block;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#StudentTableContainer').jtable({
//...
});
});
</script>
<div id="StudentTableContainer" class="jtable"></div>

Add this to css
table.jtable{
overflow-y: scroll;
display:block;
overflow-x: hidden;
}

Related

Adding a custom Java script to Qliksense

I admit that I am a newbie in Web development. I am finding a way to freeze the header while keeping the horizontal and vertical scroll.
Currently, I am trying to configure the CSS and JS for my Qliksense extension.
However I meet an issue when trying to add the JS part into my JS file. Here is their instruction, but I don't understand
http://help.qlik.com/en-US/sense-developer/2.2/Subsystems/Extensions/Content/extensions-load-resources.htm
Basically, I need to add the below JS to the file.
$('table').on('scroll', function () {
$("table > *").width($("table").width() + $("table").scrollLeft());
});
Can anyone help me this subject :(.
in the js file right after $element.html(html); add:
$('table').on('scroll', function () {
$("table > *").width($("table").width() + $("table").scrollLeft());
});
In the css file remove the overflow: auto;:
.qv-object-horizontal_scroll_table div.qv-object-content-container {
overflow: auto; <-- Need to be removed
}
Also in the css file add the css from the fiddle example:
table {
border-collapse: collapse;
width: 300px;
overflow-x: scroll;
display: block;
}
thead {
background-color: #EFEFEF;
}
thead, tbody {
display: block;
}
tbody {
overflow-y: scroll;
overflow-x: hidden;
height: 140px;
}
td, th {
min-width: 100px;
height: 25px;
border: dashed 1px lightblue;
}
After this the header row is not moving while scrolling. The result:
Also remove all the code that is under //start adding customized function. If you want to include external js/css file you need to use RequireJS. For more info about this take a look at this Load local Javascrtip files. In general take a look at the whole project/tutorial

How can i make a div that slides up to reveal a page without completely hiding it?

I have a div that I want to be able to click and shrink to the top ~10% of a page. I have code similar to this where one DIV should cover everything, then the second DIV would have the content for the page:
<div id="cover">Optimized the javascript so that all code is based on jQuery.
</div>
<div id="content" style="height:300px;" class="hide" >Optimized the javascript so that all code is based on jQuery.
</div>
This is a partial example of what I want to do:
JSFiddle
The problem with this is that the slideUp() function seems to completely hide the "cover" DIV rather than shrink it to part of it's size. The other problem I have is that the background doesn't scale with the DIV. I would like the background image to shrink to a reasonable size in the cover DIV. Is this possible? In my example JSFiddle, the white space should have the "cover" DIV, and a smaller version of the background image.
jQuery slideToggle(); is actually supposed to hide or show an element completely due the fact that you're not supposed to hide or show it with the element you're hiding / showing.
So to solve your problem I've created an extra div that will hide or show the element giving it the appearence of only partly hiding the element. You can find the fiddle here:
JSFiddle
I've also scaled the background for you.
I would use jquery's animate() for this and replace background-attachment:fixed with background-size: 8em;
Tweak this part depending on the size of your divs { "height": "30%","background-size": "6em" }
$(function () {
$('#cover').click(function () {
$(this).animate({ "height": "30%","background-size": "6em" }, 400, function () {
$(this).next().show();
});
});
});
* {
margin: 0px;
padding: 0px;
}
html {
width:100%;
height:100%;
}
.hide {
display: none
}
.show {
}
#cover {
background-color: black;
width:100%;
height: 100%;
top:0;
left:0;
position:fixed;
background-size: 8em;
margin: 0 auto;
background-image: url('http://i.stack.imgur.com/JVX13.png');
background-repeat:no-repeat;
background-position:center;
}
#content {
background-color: #CCCCFF;
padding: 5px 10px;
width:100%;
height: 100%;
top:30%;
left:0;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="cover">Optimized the javascript so that all code is based on jQuery.</div>
<div id="content" class="hide">Optimized the javascript so that all code is based on jQuery.</div>

JQuery to make div customized scroll bar always visible

I have a table content marked with div with height of 200px. Table content is user input & dynamic . I am using JQuery to modulate scroll bar but if i use overflow-y: scroll !important; normal scroll appears at the beginning..
If the div content crosses 200px height then JQuery scroll bar appears along with normal scroll bar.
What I Want is :
I want to show the JQuery scroll bar always visible irrespective of div height but not with normal scroll bar as shown in below image.
Error Snapshot:
CSS:
<style type="text/css">
#boxscroll {
height: 200px;
width: 230px;
overflow-y: scroll !important; }
</style>
JQuery:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.min.js"></script>
Download JQUERY here... https://jquery-nicescroll.googlecode.com/files/jquery.nicescroll.340.zip
<script>
$(document).ready(function() {
var nicesx = $("#boxscroll").niceScroll({touchbehavior:false,cursorcolor:"#CCC",cursoropacitymax:0.8,cursorwidth:4,autohidemode:false});
});
</script>
HTML :
<div id="boxscroll">
<TABLE id="ItemTable" width="230" border="0" cellspacing="0" cellpadding="0">
....content goes here....
</TABLE>
</div>
<script>
$(document).ready(function() {
var nicesx = $("#boxscroll").niceScroll({nativeparentscrolling: false,touchbehavior:false,cursorcolor:"#CCC",cursoropacitymax:0.8,cursorwidth:4,autohidemode:false});
});
</script>
<style>
#boxscroll {
height: 200px;
width: 230px;
overflow-y: hidden; }
</style>
This should work.
For displaying the scroll bar at any height:
.nicescroll-rails div{
display: inline !important;
min-height: 30px;
}
.nicescroll-rails {
display: inline !important;
}

jScrollPane not working for full page scrallbar

i'm trying to implement jScrollPane in my whole page to change scrollbar of page,but it doesn't working.
my code is as css:
html,body {
height: 100%;
width: 100%;
overflow: hidden;
}
#main-wrap {
height: 100%;
}
jquery:
jQuery(document).ready(function ($) {
"use strict";
$('#main-wrap').jScrollPane();
});
and html:
<div id="main-wrap">
all other contents...
</div>
and all the things that are given in the jScrallPane.
the problem is:
scrollbar appears but the page doesn't scroll directly with pinch scroll or mouse scroll.
please help and thanks in advance.
did you try to specify a width for #main-wrap in css
#main-wrap{
width:400px;
overflow:auto;
}

Add/remove CSS will cause IE9 to increase the table's height

I add a mouse event to the HTML TR when user mouse-over/out the TR to change some CSS color. But in IE9 seems to have an issue that the table's height will keep increasing each time the CSS changed.
Note: the issue only occurs when the horizontal scrollbar appears.
Here is the HTML.
<div style="width:100%;height:100%;">
<div class="grid">
<div class="grid-body">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout:fixed;">
<tbody>
<tr>
<td style="width:3040px;" class="item">
<div>
Please mouse-over me and out
</div>
</td>
<td class="item">
<div>
Please mouse-over me and out
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Here is the Javascript
$(document).ready(function (){
$('.item').mouseover(function () {
$(this).parent().addClass("item-over");
}).mouseout(function() {
$(this).parent().removeClass("item-over");
});
}
);
Here is the CSS setting
html, body {height:100%}
body {
margin: 0; padding: 0 5px;
}
div.grid {
background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden; zoom: 1;
}
div.grid-body {
background: red; border: 0; overflow: auto; width: 100%; position: relative;
}
tr.item-over {
color: #6eadff;
}
You can run the full example here.
Here's another possible fix that also seems to work in my case.
Setting ANY margin (top, right, bottom, left, or any combination) to 'auto' seems to solve it.
div.grid-body {
margin: 0px auto;
}
Or:
div.grid-body {
margin-top: auto;
}
Etc.
Another possible fix suggested in the blog post IE9 Hover Bug Workaround:
div.grid-body {
min-height: 0%;
}
In case anyone came here looking for a fix for datatables jquery plugin, the proper class to add this fix to is:
.dataTables_scrollBody
{
margin-top:auto;
}
Took a bit of digging to find the proper div, so I figured I would try to save someone time.
I might have just solved it.
Try:
width: 100%;
display: inline-block;
on the containing element ("div.grid-body" in this case).
Open Developer tools and remove the table-layout:fixed rule from the table that is the child of grid-body. it should work may be.
It stops doing it and yet does the mouse hover effect by setting:
div.grid-body {
background: red; border: 0; overflow: hidden; width: 100%; position: relative;
}
instead of overflow:auto. Mabe you'd prefer to use overflow:scroll or visible. And make it trigger this as an extra property only for the IE9 case.
remove with form the first 'TD' element <td style="width:3040px;". It will help.
Do you need so huge "td" there ?
just to see
div.grid {
background: #DAE7F6; border: 1px solid #86A4BE; overflow: hidden;
zoom: 1;
width:100%;
}
what about this:
width:100% !important;
if you can change the overflow try this
div.grid-body {
background: red; border: 0; overflow: hidden; width: 100%; position: relative;
}
else
change your script to this (the problem is in the add/remove class)
$(document).ready(function (){
$('.item').mouseover(function () {
$(this).parent("tr").css("color", "#6eadff");
}).mouseout(function() {
$(this).parent("tr").css("color","#000");
});
});
why do you do it with JS and not with the css?
i.e:
.grid-body table tr:hover {background:red}
Maybe you should just "memorize" the height of the element in a variable when the mouseover event is fired, and then set it back to that value again when the mouseout event is fired.
$(document).ready(function (){
$('.item').mouseover(function () {
// store the height in a variabile (keep also in mind margins and paddings)
$(this).parent().addClass("item-over");
}).mouseout(function() {
$(this).parent().removeClass("item-over");
// now set back the original height
});
}
);
should work to just add a fixed height to the table row
so the containing table row reads:
<tr height="50px">
you can see it working here http://jsfiddle.net/f3TDb/
I'm assuming that you're not doing it wisth divs and css:hover for a specific reason?
i realize i'm months behind on this, but this stumped me yesterday and found this thread. hopefully my answer helps:
it's the overflow: auto in div.grid-body that's messing things up. you'll have to change this to scroll, possibly:
div.grid-body {
overflow-x: scroll;
}
if you don't want the vertical scrollbars.
note that you'll have to code your js to determine if you need a scrollbar so you can set overflow-x to visible (the default) if there are no overflows and scroll if there are, simulating auto.

Categories

Resources