If give a html table element a tabIndex > 0 then I can tab into that element. If I click on a table element where tabIndex > 0 then I would expect the focus to change to that element. But in IE it doesn't seem to do it while in Firefox and Chome it does.
If I do the same with a div element then this does focus on mouse click in IE, Firefox and Chrome.
So it seems that IE doesn't automatically focus a table element on mouse click.
Can anyone confirm this? Also is there a workaround? I could capture the mouse click and call focus myself, but IE seems to try and center the element on the screen when focus is called. This looks bad in my app.
Thanks,
AJ
Check out this article: http://nemisj.com/focusable/
Basically, the browsers all differently implement focus on traditionally "non-focusable" elements. With IE, you can use a click event instead (using conditional code and browser detection), or implement one of the workarounds suggested in the linked article.
Related
I'm trying to manually find the innerText and outerHTML of buttons on websites by right-clicking them and pressing inspect, but I don't know where I can find these properties. The screenshot below shows what I see when I right-click --> inspect the 'compose' button in Gmail. Screenshot of inspect window on Firefox after selecting 'compose' button
Any straightforward solution (for Firefox and/or Chrome) would be very much appreciated.
You could find it by right-clicking the element and pressing inspect and after that, by right click on the tag there is an option Edit as HTML.
I think that would solve your problem.
For example I have clicked a button and it has been selected in inspector. I don't fire any events on this button if inspector is opened. Just select elements I want simply clicking on them in document. This is how dragonfly works in opera. I wish to use chrome for all purposes but inspecting DOM is tiring for me without this feature. Or maybe i have missed it in settings?
I found the solution. In inpector window in top-left corner we have loupe button. Just press it and them on DOM element on page.
I need to right click on an element and go to inspect element.
I have tried to right click but since its a touch device emulator that action doesn't make sense, the dropdown doesn't appear.
It works fine when i am not in the emulator mode checking for things, but when i am in the emulator for touch devices (ipad, iphone, galaxy), I lose the right click.
How do it make chrome open that html tag just like the inspect element, so i don't have to dig through the html trying to find the element i want?
thanks in advance! :)
Left click and hold on the element in the emulation window.
The context menu will then appear, and you'll need to move your mouse to Inspect Element before releasing the click to activate it.
You can use either the magnifying glass in the top left corner of the developer tools, or you could turn off the touch sensor emulation by going to Emulation|Sensors|Emulate touch screen and turn it back on after you find your element.
I've got an HTML element that has a CSS hover-state. There's a bug with the margin or padding on hover and every time I mouseover, the contents of the element slide a little, its annoying.
I'd like to debug using FireBug or Chrome Dev Tools, but a common problem I've had with these tools is that after I select the element from Firebug/devtools I obviously need to move the mouse back to the dev tools and the hover state is no longer enabled.
How do I inspect/debug an HTML element using these tools with the element in its hover state?
Chrome Dev Tools has a built-in :hover state selector in the Elements > Styles panel. You can toggle other pseudo-classes (like :active) there as well.
For testing :hover states in Chrome
For testing :hover state in Firefox (You need firebug add on)
Here's a screen shot for firebug & those not sharp enough to see agriboz's comment (like me)
Now you can see both the pseudo-class style rules and force them on elements.
To see the rules like :hover in the Styles pane click the small dotted box button in the top right.
To force an element into :hover state, right click the element.
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
Weird problem. I don't know if anyone can shed some light on this? I have a checkbox inside a div. It works fine in IE but not Firefox. I have to click the space around the checkbox that is occupied by the div (sort of like a label) for the checkbox to tick on and off. Directly clicking the checkbox does not show it as ticked on or off, even though in firebug it is showing that it is in a checked state and an unchecked state.
Only in FF does this happen.....
I think this is a bug in firebug. Disabling firebug will stop this behaviour happening.
I had a similar strange thing happening with radio buttons. Disabling firebug fixed it.