What is the label/name of this HTML5 video control (inside the red outline)?
I'm assuming it's for the volume slider?
It appears when I roll over a blank area (that previously had the volume's Mute icon) next to the Full-Screen button. If I click it, it does nothing.
Problem:
I need to hide its visibility. I have used CSS to hide and customise other <video> controls, just unsure what this one is called.
Short version:
It is called -webkit-media-controls-volume-control-hover-background.
For future readers who want other specific options, try accessing <video> tag icons in your CSS as...
Volume icon (for mute/unmute):
video::-webkit-media-controls-mute-button { display: none; }
Volume slider (with range for loudness):
video::-webkit-media-controls-volume-slider { display: none; }
Volume slider's hover background (the dark bar in your shown picture)
video::-webkit-media-controls-volume-control-hover-background { display: none; }
PS: Or just hide the container of all these Volume icons...
Volume control container (for mute button, slider and slider background):
video::-webkit-media-controls-volume-control-container { display: none; }
The above examples should solve the problem, but read further below for extra details.
Full Answer:
"What HTML5 video control is this? I need to hide it. I have hidden and customised other controls, just unsure what this one is. I'm assuming it's for the volume slider (?). It is only happening in Chrome browser.".
Not sure how your code is setup but maybe something below is useful to solving your problem:
(option 1) Try to find out the labels/names from the Chrome source-code.
Search for volume in the text at: mediaControls.css.
Strangely though, they do not list -webkit-media-controls-volume-control-hover-background, the one simple thing that you needed. Still you'll learn something, such as... There is also a video::-webkit-media-controls-fullscreen-volume-slider which you might need to also handle when user goes to fullscreen mode.
PS: I say "might need" because I don't know how much you've already handled, but I see a fullscreen icon (in your shown picture) so be prepared for a possible "Round 2" of this issue when that FS button is pressed.
(option 2) Analyzing a <video> tag's volume icon (in Chrome's Developer Tools) we can see...
Moving the mouse "over" or "out" of the volume icon changes the class=.
class="closed" means only the volume icon is showing (for mute/unmute).
class="" means the volume slider/range part is also now showing.
<input type="range" step="any" max="1"
aria-valuemax="100" aria-valuemin="0" aria-label="volume"
pseudo="-webkit-media-controls-volume-slider"
aria-valuenow="100"
class="closed" style="">
<input type="button" pseudo="-webkit-media-controls-mute-button" aria-label="unmute" style="" class="muted">
You can see there are three pseudo names. One of these names is the one you want to hide that (unwanted) dark bar.
Either you want to make then hidden
Or you want to change their class= setting.
Test the options and ask anything if still stuck.
Related
I'm using bootstrap with bootstrap-toc (https://afeld.github.io/bootstrap-toc/)
Working with the following scenario:
http://jsbin.com/cerozeleya/edit?output (make sure to click "run with Js" to be able to see the sidebar)
As I scroll the view, I would like the sidebar to scroll until a point where the jumbotron is no longer in view. At that point, it should stay affixed while the content scrolls.
I can't get that behaviour to happen with the included jsbin. I tried messing with the data-offset-top/data-offset-bottom attributes within my nav #toc but nothing changes. I found another question here that instructed the following changes on the css:
.affix{ top: 0px;}
.affix-bottom{ position: absolute;}
But that didn't work either. I tried reading the affix and scrollspy documentation, but its either not clicking with me, or I'm not seeing what I'm doing wrong.
Any help appreciated. Thanks!
You have to use data offset top within the tag which you want to affixed
data-spy="affix" data-offset-top="197"
Eg.
<nav id="toc" data-toggle="toc" data-spy="affix" data-offset-top="197"></nav>
Edit the offset value according to your needs
I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.
I posted this a week or so ago:
Position simplemodal modal on top of an existing div
and thought that I had solved my problem, but when the window is scrolled, the modal container moves.
I think I need to change it from fixed to absolute positioning, but when I change it in the script, the right side of the container lines up with the left side of the div (but it does stay in the same place vertically).
Here's what I'm doing now:
$('.slider-caption #large-spot-two').click(function (e) {
$('#basic-modal-content-two').modal({appendTo:"#slider1", autoPosition: false});
return false;
});
What's the best way for me to keep the modal container above the div, whether the page is scrolled or not?
Thanks,
Wendy
The plugin was created to be fixed (not move when the page is scrolled, etc.). Changing the CSS position works until the page is resized or scrolled, as you have found.
The code required to change that behavior would require more work that I currently have time for. You might try BlockUI, as it sounds like that would fit your needs better?
I am having trouble trying to get a jquery ui tab panel's height to grow with floating divs within the panel.
the divs have specific data returning to these divs and I need them to float left and right to save ui real estate.
Does anyone know how i can fix this?
Actually, this is a well-known css issue. A discussion is here:
http://www.quirksmode.org/css/clearing.html
To summarize the article, any <divs> that you wish to function as both a tab pane and a float container should have these styles added to them either in your <style> or css <link> files:
overflow: auto;
width: 100%
This isn't a bug. It's intentional. The floating div literally lifts out of the container, and the container will not be aware of the floating div. At least, that was the goal.
You should do a search on here for "clearing floats" or other related css rules, because using the above will cause issues with certain browsers (in short: 'take care to test this, all the same').
So i am looking to do something like what the apple inspector tool does, but with CSS for a project i am working on.
So, the idea is on a certain page of the site, the site is shaded out (much like a lightbox or thickbox) but certain Divs, & other elements are still visible. This is similar to what Safari does when you inspect an element. It blacks out the rest of the page, apart from that element.
So, any idea?
Cheers!
J
In working with Dojo Javascript widgets, it implements modal dialogs by having one large element be hidden (display:none; background-color:#000; opacity:0.5;) most of the time, though positioned to cover the screen (position:absolute; top:0; left:0; and width and height set by Javascript to the full window size). Then it is given a z-index value and all elements that are intended to be visible are given a z-index above it. If you can relative-ly or absolute-ly position all the elements you want to highlight, this method would work for you.
With just CSS? If so, the best I could come up with is this:
<style>
a:hover *:not(#except)
{
background:green;
}
</style>
<a href="#">
Link
<p>
green
</p>
<p id="except">
black
</p>
</p>
Unfortunately the :not() selector is part of CSS3 and most browsers do not yet support it (but Safari 4 does).
That is one possibility, but not so nice.
Another option would be with Javascript. If you are only working with rectangular block elements how about getting the x and y value of the element to stay normal, then cutting out four pieces (up, down, left, right) of that element. Absolutely position some divs whose background is some semi-transparent PNG.
ie.
------------------
|lef|---up---|rig|
|t--|________|ht-|
|---| normal |---|
|---|________|---|
|---|-down---|---|
------------------