Develop Reference

Hide Vertical Scrollbar in Chrome while printing

How can I remove the scrollbar while I print report in Chrome Browser.
Here is my code:
<style>
#media print {
#page {
size: A4 portrait;
margin:1cm;
}
</style>
Here is the picture:

This is the solution I found:
#media print{
#page {
size: A4 portrait;
margin:1cm;
}
::-webkit-scrollbar {
display: none;
}
}

overflow: hidden is the css property you are looking for. It removes the scrollbar and removes overflowing content. See: https://developer.mozilla.org/en/docs/Web/CSS/overflow
<style>
#media print{
#page {
size: A4 portrait;
margin:1cm;
overflow: hidden;
}
}
</style>
Or try to set the overflow hidden without depending on the media query:
html { overflow: hidden; }
If this does not help for printing, maybe have a look at the answer of following question: How to hide the scroll bar and with the content ramaining scrollable?
As mentioned there you could try to set the width of the scrollbar to zero for webkit browsers.

Scrolling div in another div

I want to add scrolling to the second part, it is "chat-messages" div in "chat-bar" div. I want JUST this "chat-messages" to make scrollable, leaving rest of the site with no any scrool. At this moment I have to scroll the whole site to see "input-row" div. It's quite working when i set overflow: auto to the "chat-bar" but then whole input-row is also included in scrolling. Please give me best css/html option how to resolve this problem, or give me simple javascript library.
jsfiddle link:
jsfiddle.net/o9vmfgpx/3
edit:
I made it working, but in some hacky way.
.chat-messages {
overflow-y: scroll;
-ms-overflow-style: none;
}
.chat-messages::-webkit-scrollbar {
display: none;
}
#-moz-document url-prefix() {
.chat-messages {
right: -5%;
padding-right: 3%;
}
}
Works on latest version of IE, EDGE, Chrome, Firefox and Opera (as 10.14.2016)

This should work.
body {
overflow:hidden;
}
.chat-messages {
overflow:scroll !important;
}

Try adding the below css?
.chat-messages {
height:200px;
overflow:scroll;
}

Try this.
.input-row {
position: fixed;
bottom: 10px;
left: 10px;
}

display: none doesn't work

I have web app for making music from javascript. But I have problem with display: none of my .musicBox class.
Here are the index.html code with all important styles & scripts.
My index.html file on CodePen
#media screen and (max-width: 520px) {
.rotateDevice {
display: block;
}
.toneBox {
display: none;
}
}
When I resize the window to under 520px width it will 'display: none' my color Boxes. But why it didn't?

There is something missing above this media query.
Remove the .a above it.

try
.toneBox {
visibility: hidden;
}

Try out this may be it would help you:
Visibility: none;

Responsive Nav Javascript

I am trying to make a responsive nav. I am using some jquery but I don't know javascript very well. I would like the toggle to take place when the window is a certain width (e.g. 1050px) this is the script
function adaptMenu() {
/* toggle menu on resize */
$('nav').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ($(this).parent().width() < $width * 1.05) {
$(this).children('.nav-main-list').hide(0);
$(this).children('.nav-toggled').show(0);
} else {
$(this).children('.nav-main-list').show(0);
$(this).children('.nav-toggled').hide(0);
}
});
}

You can solve this by fixing the given javascript, but javascript is inefficient to handle responsive design. CSS engine is written in c++ and works faster, and automatically when browser is resized.
Better use CSS media query
The following snippet does the same as your javascript but with pure CSS.
<style>
#media (max-width: 1049px) {
nav .nav-main-list {
display: none; /* hide .nav-main-list when browser windows width < 1050px */
}
nav .nav-toggle {
display: initial; /* show */
}
}
#media (min-width: 1050px) {
nav .nav-main-list {
display: initial; /* show .nav-main-list when browser windows width > 1050px */
}
nav .nav-toggle {
display: none; /* hide */
}
}
</style>
EDIT:
As #Roko commented, media query does not work in IE8 and earlier. If you need support that browser, this post may help.

How can I insert a scrollbar in jquery jtable?

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;
}