How to inspect elements that hide upon clicking inspect [duplicate] - css

This question already has answers here:
How can I inspect html element that disappears from DOM on lost focus?
(12 answers)
How can I inspect disappearing element in a browser?
(12 answers)
Closed 4 years ago.
I'm attempting to inspect the "next month" arrow button on the Enabled/Disabled Dates example calendar on the following site:
http://eonasdan.github.io/bootstrap-datetimepicker/
I want to know what class or ID the next and previous month arrow buttons have assigned to them.
In Chrome, as soon as I attempt to inspect an element in the calendar, the div that the calendar resides in is removed. How would you force this div to stay open so that you can inspect elements of the calendar?
Thanks!

You can pause Javascript execution while the popup is open with F8 and then right click and inspect as usual

Related

Can you customize the alert box in userChrome.css? [duplicate]

This question already has answers here:
How to change the style of alert box?
(13 answers)
Closed 1 year ago.
I recently discovered FireFox's userChrome.css where you can cutsomize about everything with CSS. I tried googling how I can customize the alert box (when I use 'alert()') but I can't find anything. Is this possible?
Welcome to StackOverflow, Normal! According to this answer, Javascript alert boxes are system objects and not modifiable by CSS. However, you should rarely encounter one while using Firefox, and if you're in the process of writing a webextension, it's much better to write your own notification or popup.

Ios7 safari control top and bottom navigation/tool bars [duplicate]

This question already has answers here:
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
(8 answers)
Closed 9 years ago.
I'd like to know if in IOS7 safari there is a method for controlling the position of the address bar and the toolbar. I would basically like them to hide them as soon as the page loads in safari without the user having to scrolldown the page to invoke the hide?
There is currently no known method of doing this.
Source: http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

ie8 input[type=submit] with background image - text not clickable [duplicate]

This question already has answers here:
submit input doesn't get the :active state in IE8 when I click on the button’s text
(4 answers)
Closed 9 years ago.
I have a standard button (input[type=submit) with a problem in IE8.
Because, IE 8 doesn't do filters very well, I resorted to a repeating background image. This works fine in default and hover states, but the background image does not change if I click on the button text, invoking :active state.
Note: It works if I click elsewhere on the button but not on the text. I've tried removing the image in :active state but the button still doesn not change from the hover image.
Has anyone come across this and/or found a solution?
To make it worse jsfiddle doesn't seem to support IE8 anymore, so can't even put together an example.
You can try workaround with :focus
Maybe some like this, I don't have your code but you can try this:
input:active,input:focus
{
background-image: ...
}
You have similar problem here: submit input doesn't get the :active state in IE8 when I click on the button’s text

Controlling browser tooltip(title) in html [duplicate]

This question already exists:
Closed 10 years ago.
Possible Duplicate:
Styling native tooltip from title=“Tooltip text”
Is any way to control browser tooltip in CSS.
like adjust height and width .. something
-spk-
Not for the built in tooltips with title, no.
You can create tooltip-like constructs of your own, though, by using a div (or anything) that is hidden until the user hovers over your element. See the :hover pseudo-class.

How can I see ":hover" and ":active" properties of elements on a webpage? [duplicate]

This question already has answers here:
Firefox: how to stop and inspect new styles added when hovering on an element?
(3 answers)
How to use chrome web inspector to view hover code
(6 answers)
How to debug CSS/Javascript hover issues
(15 answers)
Closed 3 years ago.
In both Google Chrome and Firefox, the hover and active state CSS properties can only be viewed when the element is hovered or clicked. However, as soon as my mouse leaves the element or I release my mouse, I cannot view the properties any more.
Is there a Chrome extension or Firefox addon that can allow me to view the elements in hover or active states?
Click on the element inside the element inspector. Move your mouse over the element, press the up arrow key and then the down arrow key. You'll see the hover properties.
Both Firebug and the DOM Inspector extension for Firefox allow you to inspect :hover and :active state on arbitrary elements, as I recall.

Resources