Develop Reference

Change html video players css through jquery

I am trying to hide the gradient and the timeline from the HTML video player trough jquery/javascript.
I got it to work on CSS:
video::-webkit-media-controls-panel {
background-image: none !important;
filter: brightness(0);
}
video::-webkit-media-controls-timeline {
display: none;
}
But the CSS should only be there once the video has a source so I want to add this CSS trough javascript. This allows me to add conditions.
I've tried the following, but nothing seem to change when doing this:
$('video::-webkit-media-controls-panel').css({
'background-image': 'none !important',
'filter': 'brightness(0)'
});
$('video::-webkit-media-controls-timeline').css({
'display': 'none'
});
Does anyone know how I can make this work?

I solved this by appending a style tag to the head via JavaScript with the intended styles you provided. The ES6 template literal syntax was used to keep things looking clean. Tested in Chrome.
$(`<style>
video::-webkit-media-controls-panel,
video::-webkit-media-controls-timeline{display: none;}
video::-webkit-media-controls-panel{background-image:none !important}
</style>`).appendTo('head');
jsFiddle

Similar solution to Andy's but works with an editor, like Atto in Moodle, which automatically removes <style>:
var sty = document.createElement("style");
sty.innerHTML = "video::-webkit-media-controls-panel { background-image: none !important; filter: brightness(0); } video::-webkit-media-controls-timeline { display: none; }";
$("head").append(sty);

Why does this css code cut content off in Desktop view?

(Background information)
I have been tasked with fixing a former colleagues documents (html/css/js). I do not have access to all the html documents and none of the javascript because someone thought it would be a great idea to reference a bunch of it from a different branch in a different region with a different permission level than anyone in my department so lots of slow hoops to jump through. While I have been waiting weeks for them to email me or grant me permission into their branch I have to make due with what I have. The websites are being maintained by a CMS
I've come across an issue where the page content disappears in Desktop view, but not Mobile view. The css code affecting this directly is this:
.mobile div.tr-page-container #entry_page_custom_html{
max-height: 300px;
}
these are also in the CSS document related to div.tr-page-container:
div.tr-page-container {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
div.tr-page-container {
border-radius:0;
}
div.tr-page-container div.header-container {
background-color: none;
}
div.tr-page-container div.section-sub-header, #login-div-content .footer-block, div.registration-page-container div.section-sub-header {
display:none;
}
If you view the test page you'll see it affect the content, if you resize the page down to about tablet or smaller view, a "view more" button appears and when you click it, the rest of the content appears.
If I remove this code, the content shows in desktop view, but in mobile view the "view more" button covers the entire content causing you to have to actually click it to read anything (see screen shot).
So I've concluded that the "max-height" function is necessary (i think), but what can I do to allow the content in desktop view appear? If I increase max height to fit all of it, the problem is when we add more content to that test page we'll be back in the same situation.
I really hope someone can advise me on this.
This by the way, is the javascript code for the view more/less, I found it while inspecting the webpage on chrome lol.
Y.use('jquery-ui',function(Y) {
jQuery(function() {
jQuery('.view-content-link').click(function() {
jQuery('#entry_page_custom_html').toggleClass('expand');
jQuery('.view-content-link').toggle();
});
});
});

Why does this css code cut content off in Desktop view?
Because your max-height is set at 300px and the content is more than 300px tall at that browser width so it is "cutting" the content off.
Remove this, and use a media query.
.mobile div.tr-page-container #entry_page_custom_html{
max-height: 300px; //not needed
}
Add this to your script
$('.view-content-link').on('click', function(e) {
$('.table').toggleClass("show");
e.preventDefault();
});
Add this to your css
.show{
display: block !important;
}
#media screen and (max-width: 767px) {
.table{
display:none;
}
}
fiddle

I this part of code, you have a comment before you open brackets in a IF STATEMENT. And if this is comment, max-height:300px never will be recognized to be execute.
Change:
.mobile div.tr-page-container #entry_page_custom_html{
max-height: 300px;
}
To:
.mobile div.tr-page-container {
max-height: 300px;
}

How to hide scroll bar but want to it keep working

Here is code
#scroll{
overflow-y:scroll;
max-height:500px;
width:267px;}
I explored it on Stackoverflow and i got many answers but they were explained with two conatiners in HTML but i have only one div and want to apply it on that. THANKS

You should look into parent child approach as it is the recommended one. Give your element scroll bars, wrap it in a
containing element, and make the containing element element smaller, and give it:
overflow: hidden;
In your current scenario you can do this pure CSS.
Hide scroll bars in Webkit-based browsers (Chrome and Safari).
.element::-webkit-scrollbar { width: 0 !important }
Hide scrollbars in IE 10+.
.element { -ms-overflow-style: none; }
Hide scrollbars in Firefox, but it has been deprecated.
.element { overflow: -moz-scrollbars-none; }
JSFiddle

How to print scrollable DIV content

There is a website that I would like to print the div content of. The problem is that the div is scrollable and I'm not able to print all the content. I've tried display:none on all the divs except the one I want to print and then used the Awesome Screenshot extension for Google Chrome but it won't scroll just that div.
I've read about using Javascript in the HTML, I'm guessing, but I don't know how to use that code. It's not my website so how do I inject that code so that it will print the content?

I'm not sure what website you're using - but in IE you can open up F12 Developer tools, find the div you want to display, and modify the style on the fly:
{
display: block;
width: auto;
height: auto;
overflow: visible;
}
It would then cause the div to display all it's content, without scrollbars... hopefully this helps!

Without seeing the page or knowing its layout, it's hard to know what to suggest that won't look horrible.
But, if hiding all other content (in a print stylesheet, I assume) works, you may then be able add:
#media only print {
#idOfYourDiv {
width: auto;
height: auto;
overflow: visible;
}
}
to show all the contents at once.

Make all parents visible
I've struggled some hours with this and finally noticed the problem was that some of the parent tags where preventing the div to be fully visible, and instead a scrollbar from some parent tags was being visible on the print.
So the final effective solution was to apply all the rules (mentioned in other answers) to all possible parent tags that could be in the middle, including also an !important rule so they wouldn't be bypassed.
Like this:
#media print {
body, .CLASS-of-parent-tag, #ID-of-div-with-long-content {
display: block !important;
position: relative !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
margin-left: 0 !important;
}
}
This applies for almost any case in my projects.

**DANGEROUS APPROACH**
Use this JS function:
Printable DIV is div1
function printpage(){
var originalContents = document.body.innerHTML;
var printReport= document.getElementById('div1').innerHTML;
document.body.innerHTML = printReport;
window.print();
document.body.innerHTML = originalContents;
}

My answer is based on the ones given by #Porschiey and #Paul Roub with a slight addition.
Their given solution did work for me in most cases except for some where the <div> that I wanted to print had a CSS set to position: fixed. In the resulting print, this would usually contain only the content that was able to fit in the actual size of the <div> on the loaded page.
So, I also had to change the position CSS attribute to something like relative so that everything could get printed. So, the resulting CSS that worked for me is this:-
{
display: block; /* Not really needed in all cases */
position: relative;
width: auto;
height: auto;
overflow: visible;
}

Google messages updated their divs. Use this:
(function() {
var originalContents = document.body.innerHTML;
var printReport= document.querySelector("body > mw-app > mw-bootstrap > div > main > mw-main-container > div > mw-conversation-container > div > div > div > mws-messages-list")
document.body.innerHTML = printReport.innerHTML;
document.body.style.display = 'block';
document.body.style.overflow = 'visible';
window.print();
document.body.innerHTML = originalContents;
}())

In case if someone just want to print the scrollable list, use your mouse to select the scrollable list, right click on selected content and print. Ctrl+A or select all or just right click without selection might not work, so you must select the list from start to end to be able to print on multiple pages

Hide iframe scrollbar but allow scrolling [duplicate]

I want to hide any scrollbars from my div elements and my whole body, but still let the user scroll with the mouse wheel or arrow keys. How can this be achieved with raw JavaScript or jQuery? Any ideas?

Like the previous answers, you would use overflow:hidden to disable the scrollbars on the body/div.
Then you'd bind the mousewheel event to a function that would change the scrollTop of the div to emulate scrolling.
For arrow keys, you would bind the keydown event to recognize an arrow key, and then change scrollTop and scrollLeft of the div as appropriate to emulate scrolling.
(Note: you use keydown instead of keypress since IE doesn't recognize keypress for arrow keys.)
Edit: I couldn't get FF/Chrome to recognize keydown on a div, but it works in IE8. Depending on what you needed this for, you can set a keydown listener on the document to scroll the div. (Check out the keyCode reference as an example.)
For example, scrolling with the mouse wheel (using jQuery and a mousewheel plugin):
<div id="example" style="width:300px;height:200px;overflow:hidden">
insert enough text to overflow div here
</div>
<script>
$("#example").bind("mousewheel",function(ev, delta) {
var scrollTop = $(this).scrollTop();
$(this).scrollTop(scrollTop-Math.round(delta));
});
</script>
(This is a quick mockup, you'd have to adjust the numbers since for me, this scrolls a bit slowly.)
keyCode reference
mousewheel plugin
keydown, keypress # quirksmode
Update 12/19/2012:
The updated location of the mousewheel plugin is at: https://github.com/brandonaaron/jquery-mousewheel

What about a purely CSS solution?
Solution 1 (cross browser but more hacky)
#div {
position: fixed;
right: -20px;
left: 20px;
background-color: black;
color: white;
height: 5em;
overflow-y: scroll;
overflow-x: hidden;
}
<html>
<body>
<div id="div">
Scrolling div with hidden scrollbars!<br/>
On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.<br/>
Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>
</body>
</html>
Solution 2 (uses experimental features, may not support some browsers)
Just add the nobars class to any element you want to hide the scrollbars on.
.nobars {
/* Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width */
scrollbar-width: none;
/* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
-ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
/* Chrome/Edge/Opera/Safari: https://css-tricks.com/custom-scrollbars-in-webkit/ */
display: none;
}
Solution 3 (cross browser javascript)
Perfect Scrollbar doesn't require jQuery (although it can utilise jQuery if installed) and has a demo available here. The components can be styled with css such as in the following example:
.ps__rail-y {
display: none !important;
}
Here is a complete example including the implementation of Perfect Scrollbar:
<link rel="stylesheet" href="css/perfect-scrollbar.css">
<style>
#container {
position: relative; /* can be absolute or fixed if required */
height: 200px; /* any value will do */
overflow: auto;
}
.ps__rail-y {
display: none !important;
}
</style>
<script src='dist/perfect-scrollbar.min.js'></script>
<div id="container">
Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>
<script>
// on dom ready...
var container = document.getElementById("container");
var ps = new PerfectScrollbar(container);
//ps.update(container);
//ps.destroy(container);
</script>

You dont have to use jquery or js to make this. Its more performant with simple webkit.
Just add the code below to your css file.
::-webkit-scrollbar {
display: none;
}
Caution !
This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.

I much prefer SamGoody's answer provided to a duplicate of this question. It leaves native scrolling effects intact, instead of trying to manually re-implement for a few particular input devices:
A better solution is to set the target div to overflow:scroll, and wrap it inside a second element that is 8px narrower, who's overflow:hidden.
See the original comment for a fleshed-out example. You may want to use JavaScript to determine the actual size of scrollbars rather than assuming they are always 8px wide as his example does.

To get this working for me, I used this CSS:
html { overflow-y: hidden; }
But I had problems using $(this).scrollTop(), so I bound to my #id, but adjusted the scrollTop of window. Also, my smooth scrolling mouse would fire lots of 1 or -1 deltas, so I multiplied that by 20.
$("#example").bind("mousewheel", function (ev, delta) {
var scrollTop = $(window).scrollTop();
$(window).scrollTop(scrollTop - Math.round(delta * 20));
});

As Baldráni said above
::-webkit-scrollbar { display: none; }
Or you can do
::-webkit-scrollbar{ width: 0px; }
(posted for other people that stumble on this from google search!)

Well, perhaps not the most intuitive in my opinion, but I can imagine you being able to make it a decent experience, give this a try.
overflow:hidden;
make sure the parent object has a height and width, and displays as block