HTML Inspect element changes layout - javascript

I've been noticing some problems with chrome and the inspect element functionality.
When the page I'm currently developing loads, some elements are misplaced (The text in this case):
Whenever I right click and select inspect element on the container of the misplaced element:
The element gets then magically placed as it should be:
You may have noticed I'm using nvd3.js, however this has happened to me before, and without nvd3.js. I don't think it's a nvd3 problem (I may be wrong).
My question is: Does the "inspect element" of chrome trigger some sort of recalculation of the layout?
Thanks in advance.

Youre Using .resize() or css media queries and when you click inspect element and console window opens (fixed in bottom part of chrome) youre screen resizes and some media query or .resize() funcion affects text alignment

Related

Why does the following use of PLupload not work in IE8?

I am having trouble with hiding an element that is used as file select for PLupload.
The following code works in Chrome, Firefox, IE10,...
Click "clickme", then clicking "Me no work in IE" will open a CommonDialogBox to select files, and "Hello!" will appear.
http://fiddle.jshell.net/hZY67/13
For IE8:
http://fiddle.jshell.net/hZY67/13/show
Observation: In IE8 the CommonDialogBox doesn't pop up, but "Hello!" appears
Now remove display:none from the css.=> problem solved
Conclusion: When an element is attached to PLupload as fileselect, and a parent element's display is toggled, the connection between the fileselect and PLupload breaks.
Any light on this situation and possible workaround appreciated :)
http://www.plupload.com/punbb/viewtopic.php?pid=2381#p2381
#E-SPAR, Plupload needs to measure elements to generate file dialog trigger and position it properly, which obviously is not possible on elements having: display:none;. You might want to call refresh, after you show up your dialog.
In case of Plupload UI widget:
$('#uploader').plupload('getUploader').refresh();

How to find elements that are out of page

I'm trying to repair a slideout javascript menu. The problem is, that the 3rd level sub-menu doesn't show although it should. I am sure it has something to do with wrong positioning and the element is showing somewhere outside the page.
Now my question is: is there a browser extension, or some other way to outline an element that is beyond borders of the page?
Thanks!
EDIT: Okay that's weird.. according to the coords it seems to be in the correct position, it also has proper dimensions, is visible and yet I can't see it.. am I missing something?
Yes, use firebug (in Firefox) or Chrome Developer console (CTRL+SHIFT+C) (in Chrome), locate your menu on html tab and checkout the computed styles for that element to see where is it. You can also type any styles you like and see how it affects your menu.
For Firefox, Firebug allows you to inspect the DOM; You can use the HTML tab to find your missing element. When you click on the element, Firebug will highlight it and overlay guides showing you where it is. It will also give you positioning information in the Layout tab on the right, and you can reposition the element by changing its style using the Style tab.
Chrome developer tools already has this built in; Go to Settings->Tools->Developer Tools (or use the keyboard shortcut Ctrl-Shift-I) to activate it. It's very similar to Firebug.

element inserts not showing up immediately in chrome

Ok, I'm having a weird problem:
I have a button that is inserting divs into the DOM. When the button is clicked, the first time, the div always appears immediately on the page. However, subsequent button clicks do not insert any more divs.
Now here's the strange thing, after I insert additional divs, and they don't show up, I select inspect element with the chrome developer tools, and the div instantly appears after invoking the developer tools. I can see the
$('#list').before('<div class="mybox">some text</div>');
It basically doesn't seem like chrome is refreshing, even though the new elements are being input into the DOM, the browser window doesn't reflect the changes until I go into the developer tools. But I can't figure out why?
You're right. It is a weird problem. And it happened to me too.
In my case, I was relying on an external library to create an element for me at startup. I'm still not sure what the root cause is, but I solved it by calling setTimeout(myFunctionThatSetsUpTheElement, 1).
Hope this helps.

Why does my menu bar resort to :hover behavior onload?

I have I'm using the dsmoothmenu jquery plugin to generate a toolbar on the top of my page -- About a month ago, the page started loading (most of the time) with the first item of the menu bar exposed -- as if the user were hovering over the item. I've spent hours trying to figure out what's causing this and haven't made any progress.
I have another page which uses the same exact markup for the menu, and the same dsmoothmenu js/css, but which doesn't exhibit the aforementioned behavior. So I figure it's got somehting to do with perhaps a meta tag, or a style that's being overwritten. By investigating with the inspector, it seems as though the ul#other_cities element is being given display:block by something, which is overriding the default style of display:none, which should be active until the user hovers over the element.
Here's an an example of the problem: http://www.foodtrucksmap.com/la/
And a working example: http://www.foodtrucksmap.com/iphone.html
EDIT: So I've found that the problem will only manifest itself if the mouse is OUTSIDE of the window when the page finishes loaded. If you keep the mouse hovering over the page, the menu bar will not slide down. This along with the fact that it only seems to happen in chrome, leaves me really confused.
I can see your problem in Chrome when I right-click the link and then "Open link in new tab" or " ... new window" which opens the window in the background. This leaves me with this conclusion.
Google's Chrome, for some weird reason, positions a "virtual" pointer at position top:1, left:1 which triggers the script. As soon as we bring in the actual "physical" pointer this position takes over and the problem is gone.
As this seems to be a problem with Chrome we can prevent this only with a little trick. I'd say we give the main div#wrapper some breathing room to the left with a margin? Or maybe something to the top like the second example which works!!!
So far I've been able to find out that the onMouseOver event actually fires when the page is loaded.
Since I don't have direct access to the JS files search for the word 'trigger' in all the file (not the jquery ones) and try to find out if it might be calling that at any point.
I will do more research when I have time.
If Nicklas is correct and hover is for some reason firing onload, try wrapping the js of the hover function in your menu javascript with the following conditional:
if(event.target == this) { //Check if the hover event actually targets the object.
//Hover Code//
}
Hope this helps!

Using Firebug to show DOM Hierarchy

I am currently using FireBug to debug my javascript and HTML code. I was wondering if anyone knows of a feature where I can mouseover my generated web-page and it will display the DOM hierarchy of where my mouse is currently located. So if I have nested floating div elements. And I mouseover one of the divs, it will show the ID of that div, the id of its parent, the id of its parent's parent etc.
Doesn't clicking the inspect button (second from the top-left on Firebug) do something a lot like that?
google chrome, right click and select 'inspect element'. It brings up the dom tree with the clicked on element highlighted
I am not sure of this is what you are looking for. When you rightclick and use "Inspect Element", you will see the DOM and everything else in firefox.
Right click, Inspect Element also works in Firefox / Firebug
You can also use F12, Ctrl + B in IE 9.
This FireFox extension does exactly that
Web Developer Extension
You can set it to outline elements as you hover over them and it will display their info, as well as their position in the dom tree.

Categories

Resources