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---|---|
------------------
Related
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.
Where To Find Me?
Lorem ipsum..
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
Bootstrap 3 reads:
Use .container-fluid for a full width container, spanning the entire
width of your viewport.
The other counterpart of .container-fluid is .container. Bootstrap 3 doc says:
Use .container for a responsive fixed width container.
Means .container is responsive but has intervals. Bootstrap applies fixed CSS width style for each media breakpoint (xs, sm, md, lg). .container-fluid expands to fill the available width (using % width).
So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your .container element will have a width of 970px. You then slowly widen your browser window. The width of your .container won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.
Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.
Consult here for more details.
you can define this code under the HTML element "col-lg-3" for bg-3 bootstrap this code work also with bootstrap 4 and bootstrap3.
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
In the following code, I have two <div> tags that display different colored columns, one red, one green:
<html>
<body>
<style>
html, body {
height: 100%;
}
#red {
width:50%;
background: #f00;
height: 100%;
}
#green {
width: 250px;
background: #0f0;
height: 100%;
}
</style>
<div id="red">
</div>
<div id="green">
</div>
</body>
</html>
When it is displayed, the red div tag completely covers the green div tag due to the percentage width of the red area being greater than the pixel width of the green. (You can see this on JFiddle)
The problem I'm having is that in Selenium, I can't find a way to programmatically verify whether or not the green div is visible to the user. Trying greenDivWebElement.isDisplayed() returns true with the above code, despite the fact that the user cannot see it.
I did discover that doing greenDivWebElement.click() does reveal that the green div is not visible as the following error is thrown:
org.openqa.selenium.WebDriverException: unknown error: Element is not clickable at point (133, 361). Other element would receive the click: <div id="red">...</div>
However, this solution won't work for me in the real world because the sort of things I want to check the visibility of do something when clicked and while I want to make sure that they are visible to the user, I don't want for them to be clicked.
So how can I check if a WebElement is visible to the user if it is covered due to CSS?
I ran into a similar requirement recently. I do not have the complete solution implemented yet but at a high level these are the steps I am taking. To verify element A is not overlapped by any other element
Get the element in question, bind the click() event of the element to a function that does nothing.
Click on 9 points of the element - center; top: left, center, right; middle: left, right; bottom: left, center, right. Selenium clicks on an element at the center point by default. The other points can be calculated by DOM positioning of the element and then moving to the respective points.
Wrap the call block in step 2 in a try/catch to check for Element not clickable... exception.
If an exception is thrown, element is overlapped by another at one of the click points.
The challenge here is definitely the bind/unbind of the click event. For my particular case it is straight forward using JQuery to achieve the binding.
One other way I initially thought of handling the click problem is to disable Javascript in the driver before running the test. But of course this approach will only work if there is no JS trickery involved in rendering page elements.
Part two of the challenge is the granularity of the click points. 8 points along the edges usually works but if there is overlap outside of the click points then the number of click points has to be bumped up.
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').