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

Change the width of a div when clicked

I have no idea what goes wrong with my code but it gives me errors every time I click the blue Chat Here button. The button's supposed to be shorter when the iframe is hidden then when the iframe slides up, the blue button should take up the whole space the same as the iframe as well.
View Demo
Here's the JS I have so far
function showChat() {
jQuery("#blk-collaboration .chatbox").slideToggle("slow",function(){
jQuery("#blk-collaboration #toggle").css("background","#45A1F1");
});
jQuery('#btn-chat').click(function() {
$(this)//this is a button DOM element. wrapping in jQuery object.
.toggleClass('wide'); // removing wide class so button became smaller.
});
}
$(document).ready(function(){
$('.chatbox').hide();
});
I'd greatly appreciate if you could provide me a demo as well. Been working on this code for two days now and I haven't found the right solution yet.

First of all, you forget to put ; on your height property. Another important thing is that you need to change your class position like this:
.button {
background: #45A1F1;
height: 40px;
width: 620px; /*Width of regular button */
}
.wide {
background: #45A1F1;
height: 40px;
width: 300px; !important; /* Width of wide button */
}
You can simplify your code by using this jQuery:
$(document).ready(function(){
$('.chatbox').hide();
$('#btn-chat').click(function() {
$("#blk-collaboration .chatbox").slideToggle("slow",function(){
$("#blk-collaboration #toggle").css("background","#45A1F1");
});
$(this)//this is a button DOM element. wrapping in jQuery object.
.toggleClass('wide'); // removing wide class so button became smaller.
});
});
Check out this Fiddle..

Remove place holder image from a div once dynamic content has been added to it

If I have a div acting as a container that when empty shows an image, and I want to remove that image when content gets added to the container dynamically, what would be the best Jquery method to accomplish this? Doing the usual -
if ($(".container").html().length <= 0) {
$('.ad').show();
}
does not work in this case since the content being added is dynamic and does not involve a refresh. I tried storing the check in in a setIntercal function that would run every 100ms but the results didn't turn out as expected and it also caused some odd flickering on the page.
EDIT**
Josh Burgess' method would be the one I use in all cases if I didn't have to support IE8. Because of this I'm going to fall back to adding a .hide() method on the when the click event for adding content is fired. Thanks for the help!

Why use jQuery at all?
Try this CSS:
div.myDiv:empty{
background-image: url(path/to/myimage);
height: 50px;
width: 50px;
}
div.myDiv {
background-image: none;
height:auto;
width: auto;
}
--EDIT--
Here's a working example in jsfiddle, and it works in reverse as well

How to change scrollbar css at runtime with javascript?

Is it possible to change the css (e.g. Color) of a scrollbar at runtime, by clicking in a button?
This just needs to work in Google Chrome, so I'm using:
::-webkit-scrollbar {
width:15px;
}
::-webkit-scrollbar-thumb {
background-color:#999;
border:solid #fff;
}
::-webkit-scrollbar-thumb:hover {
background:#777;
}
::-webkit-scrollbar-thumb:vertical {
border-width:6px 4px;
}
I made this example at jsfiddle: http://jsfiddle.net/wZwJz/
Where I added this button:
<button id="changecss">Change CSS</button>
And a jQuery listener:
$("#changecss").on("click", function(){
// Action goes here
});
I tried this: $("::-webkit-scrollbar").css("backgroundColor", "#F00"); but obviously there's no element called ::-webkit-scrollbar, so it's impossible for jQuery to find it...

You can't select psuedo selectors as mentioned here:
link
Your code will need to do something like this:
$("#changecss").on("click", function(){
var ss = document.styleSheets[0];
ss.insertRule('::-webkit-scrollbar {background-color: red}', 0);
});
Scrollbars seem to be even weirder as seen in this fiddle however:
http://jsfiddle.net/wZwJz/4/
The color doesn't change until you hover over it. I'm kind of interested in learning more about this actually. So I'll try to figure something out. However you should be headed in the right direction now at least.
Edit:
So after a little bit of fiddling and googling, I'm going to say this is impossible as of now. Here's the latest fiddle with some notes: link

After some more hours and many tries I figured out how to solve this.
Here is the jsfiddle: http://jsfiddle.net/promatik/wZwJz/18/
So the trick is to add the class before the specific scrollbar css:
.red::-webkit-scrollbar { ... }
.blue::-webkit-scrollbar { ... }
Then the body, must have one of this classes (In jsfiddle I'm adding the class by javascript because I can't control the html manually):
$("body").addClass("blue");
And the button just need to toggle the .red and .blue classes.
$("#changecss").on("click", function(){
$(".red,.blue").toggleClass("red").toggleClass("blue");
});
There's also a problem with the rendering of the scroll bar in Chrome (at least until v25), that can be overcome by removing scrollbars, and adding it again, here is a function for that:
// Hack to force scroll redraw
function scrollReDraw() {
$('body').css('overflow', 'hidden').height();
$('body').css('overflow', 'auto');
}

Creating new definition for my CSS with JavaScript (and mootools if needed). Selectors problem

I'm making some divs clickable with JavaScript. I'd like to use CSS to make the user understand that they are clickable, for example changing the color of links inside a div when mouse enters the div.
In CSS it is:
#menu > div:hover > a {
color: #f00;
}
and it works like a charm.
I'd like the color of the link to change when you mouseover only if JavaScrpt is Enabled, because if it is disabled the div is not clickable, just the link is. I'd like to add this declaration with javascript, something that in mootools should be as simple as:
$$('#menu > div:hover > a').setStyle('color', '#f00');
But that selector doesn't work on mootools. I should go for each div children of #menu and addEvents to it. That seems too much work for me compared to the simple css definition. How can I do that?
Alternative solution (that I don't know how to implement) could be write a with_js_enabled.css to load trough javascript. Is it possible?

Much simpler: set a class on the body element on page load:
document.body.className = "js";
Then modify your CSS;
.js #menu > div:hover > a {
color: #f00;
}
Job done :-)
(Although I assume you're aware that IE 6 doesn't support :hover on anything but links?)

well, since you asked about mootools here...
to change the colours of all A's within the divs of #menu when mouseover is triggered on the div, you could define a class a.red { color: red; }
$("menu").getElements("div").each(function(el) {
el.addEvents({
mouseenter: function() {
this.getElements("a").addClass("red");
},
mouseleave: function() {
this.getElements("a").removeClass("red");
}
});
});
you could also go $("menu").getElements("div").getElements("a") or even $("menu").getElements("a"), then attach the events to the parent (if it happens to be the div) - i guess it really does not matter.