I want to know if there is the possibility, by browser inspection of write a new class containing new hover/focus. For example
.CanIDo {
/*something css
(ex.)*/
width: 100;
}
/*my question (BY BROWSER ISPECTOR, i don't want to type it directly in my css using a text editor)*/
.CanIdo a:hover{
opacity: 0.7;
}
I think this is impossible because browser ispector don't admit to change a class directly, but only the containing of that class (right?), but maybe there are browser that have impove that, I think it can be helpful developing a web site.
Thanks!
If I understand your question, you are asking if you can write CSS "on the fly" in a browser Dev Tool and see the effects immediately on your page?
The short answer is yes. The Dev Tools in Chrome, FireFox, and even the latest IE/Edge browsers have that ability. You can tweak applied styles one by one using a DOM inspector or even wholesale update a CSS file in a Sources tab (the name varies slightly between browsers).
And yes, you can write pseudo-class rules like hover and they'll take effect. You can develop or tweak your code and see the results immediately.
Most browsers have inspect tools that allow you to add any class on the fly.
For instance on Chrome if you open Developer Tools you can add any class to your css, be that a :hover variant or any other normal class, pseudo-class.
What you have to do is open the inspector Cmd + Shift + I on OSx and you'll see this on the Elements tab:
You can see that on the Filter you have a "+" button, clicking that you'd be able to stuff like this:
Those two classes a:hvoer and other-class are added via the inspector as you can see on the right is written: inspector-stylesheet
Related
I would like hide everything in the toolbar except the measureTools, which I managed to do using visibility: hidden for all of the other tools.
However, the dark background theme is still visible for all three tool-groups (navTools, modelTools, settingsTools).
Everything disappears if I set
.dark-theme{
visibility: hidden;
{
And if I modify the .dark theme{ background-color: rgba(34,34,34,.0);} it effects the expanded options that shows when the measure tool is clicked.
Any suggestion? Thanks a bunch.
Why not, better use the Headless viewer and add a Custom button that access the Autodesk.Measure Extension? By a headless viewer you can refer to this sample
https://viewer-rocks.autodesk.io/
That one is using custom made extensions that become available when you make the viewer go on full screen mode.
---- EDIT
Is this what you are trying to achieve? Only Measure Tool showing
Here also is how it looks when you try to use it.
If this is what you want, you can try using an extension we have called Control Selector, play with the extension and see how it works.
A live link that uses the extension can be found here.
https://viewer-nodejs-tutorial.herokuapp.com/
And here you can find the Code for the extension, just bare in mind that the extensions were written with ES6 sytanx, so it needs transpiling before it can be used.
https://github.com/Autodesk-Forge/library-javascript-viewer-extensions/blob/master/src/Autodesk.ADN.Viewing.Extension.ControlSelector/Autodesk.ADN.Viewing.Extension.ControlSelector.js
Chrome (and Firefox) both have really awesome tools for changing the current state of an element, e.g. setting it to a hover state so you can examine/modify css:
The problem is that this doesn't seem to set off any JavaScript events.
I'm currently trying to style a tooltip, which is shown on hover. It's difficult to hover over the element manually as the tooltip dissapears when I take the mouse off of said element, and setting the state to hover in the developer tools doesn't seem to set off the jQuery events.
I'm having to resort to adding an ID on the element in the developer tools inspector, then doing the following in the console:
$("#custom-element-hover").mouseover();
Which feels wrong (and is a little cumbersome).
Is there a better way to do this that I don't know about?
In a simple situation I think it is often easier to use the console as you are doing. But within developer tools, you can also find the event listener code and set a breakpoint on it:
You then right click on this handler and do view source, unminimize the source with the {} button and set a breakpoint in this handler function.
If this handler function triggers on unrelated events then you may need to right click on it and make the breakpoint conditional or add Watch Expressions to see when you are at the correct event.
You could also use the same method of breakpoint setting to instead skip over a particular mouseout event.
I can share with what I do in this kind of situations. I open elements tab in chrome debugger and right click on target element. Then I choose "Copy CSS path"
If you do this you will get something like this
#mdhelp-tabs > li:nth-child(1)
And this string can actually be used as legimit selector for jQuery. So this
$("#mdhelp-tabs > li:nth-child(1)")
will give jquery object with target element of dom in it.
So you would not have to assign an ID to every single element you want to deal with.
I am not sure but you can use console to handle tooltip
On this fiddle http://jsfiddle.net/mjmitche/qVdEy/6/, you can see that the alignment of the text inside the popover is perfect, however, when I put the exact same css/js/html on my site, the text is larger than the container!
I'm trying to figure out what is happening using firebug, but I have to move my cursor off the popover to use firebug, and then the firebug disappears. I can't figure out what settings in my code is changing the presentation. The popovers are created using Twitter Bootstrap.js (you can see the resources in the fiddle)
Nobody really answered the question "How to debug a popover" ::: Simply set the popover to open on load >> $('#element').popover('show')
What I do is kind of weird and only seems to work in Chrome, not Firebug.
The steps are:
Open the Chrome inspector in a new window
Make sure part of the inspector is overtop of the button you're
trying to activate (which is in the background window
Activate the browser window and hover over the button (this activates the popup), now hit
alt+tab (cmd+` on OSX) to switch to the inspector window.
This will not trigger the mouseOut event and leave your popup
attached to the DOM body node! Since you're already in the inspector
you can navigate to it and see the css problem.
Well after looking at the popover CSS, it seems there is no explicitly defined font-size: http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css (Just do a find on "popover" and look through the CSS)
Perhaps try adding the following CSS and tweaking it from there:
.popover, .popover h3.title, .popover .content { font-size: 14px; }
Hope that helps :)
This is the kind of thing I created my new HTML box visualizer tool for. Check it out!
HTML Box Visualizer - GitHub
open devtools of the browser, then set a breakpoint of Mouse Click. Just Click the target of popover panel and U will see the opening popover. Just debug it like other normal DOM block
How do I hide the annoying yellow box that appears under html fields when I hover over elements in the Chrome "Developer Tools" elements panel - it's driving me nuts as I can't see the bottom of my labels etc...
From the posted bug: "https://code.google.com/p/chromium/issues/detail?id=282493". If you hold keyboard Control (Ctrl) key before hovering the element (or command on a mac) the tooltip won't show. Not the ideal solution but it works as long as you know about it
You might want to check Chrome 16 which got an improved element tooltip. Please comment on the bug and mention specific issues that you want to get fixed.
You can pretty easily tweak devtools yourself. Basically, follow these instructions to get started.
Then, inside inspector.js, tweak WebInspector.highlightDOMNode, by applying this small patch.
1150,1151c1150
< // Do not highlight the DOM node.
< //this.highlightDOMNodeForTwoSeconds(nodeId);
---
> this.highlightDOMNodeForTwoSeconds(nodeId);
Fore more info, check out this post on extending Chrome DevTools.
There are times when looking at a computed style in Firebug, it's not evident how a value is computed or what its origins are. In some situations, the source is the browser's default. In web sites that are already constructed, it's not feasible to inject a css reset which will result in breaking all the pages.
Is there a way in Firebug, Web Developer or another extension to display an inheritance structure all the way to the browser's default including displaying the value of the default?
Click on the down arrow on the Style tab in the right panel of Firebug. Uncheck "Show Computed Style" and check "Show User Agent CSS".
The blue filename next to each selector is the CSS file where the selector is defined. The Firefox default CSS file is called html.css and its location (when you hover over it) is resource://gre/res/html.css, that's how you know it is the browser default.
Turn off Show Computed Style.
It then breaks it down by declarations and classes and Browser Defaults. It is that little arrow when you hover over Style.
Also, Turn on 'Show User Agent CSS'.