Chrome: What script is setting element height - javascript

I'm working on a wordpress site that has a bunch of plugins...my suspicions point to some script within the theme, but I have a particular element that has it's height set to a fixed pixel size. This is fine except for when trying to add dynamic content. If I set the height to auto, it gets set back to a specified height.
So it seems to me that some javascript is setting the height of this element (maybe with a mutation event). Is there a way in Chrome's web developer tools to see what script is setting the height (or any css) of an element?
I doesn't seem that breakpoints really help me here as the elements tab doesn't seem to update as I step through.
Any thoughts on debugging this one?

If it's done with javascript, it either applies an inline css or a class. so you could find that with chromes developer tool (press F12).

Well, I never did find what was setting the height of the div, but using a $(window).load and then setting the height to 'auto' fixed the problem.

Related

How to get rid of scrollbar popping the page position?

I have a page with tabs that can display various height content, some of which require a scrollbar and some that don't. The visual effect of changing between these contents is kinda annoying though since when the window scrollbar pops into existence, it shifts the whole page left by just a little.
Things I've tried/considered:
always having scrollbar visible - it works but I don't like it.
setting the body width to 98% - apparently thats still 98% of the window which gets resized so still popping. Setting it to a pixel value works but people have different size screens.
compensating the window width loss with a script - was a fairly simple script but funny enough, the window resize triggered by scrollbar appearing doesn't trigger the resize event of the window and I havent found any other suitable event to attach it to.
Does anybody know a good technique for keeping the page container in place?
I guess you could add a class with margin/padding to the body and then remove it with jQuery. The downside of doing this is that different browsers have different width of the scrollbar and for instance safari on mac don't even have a visible scrollbar. So recommendation would be to just have the scrollbar visible all the time.
The correct answer is
html { width: 100vw; }

Need to get HTML Element's Layout information just like Firefox's debugger

I have a aspx.net grid control and i'm trying to copy the grid control's first row information into another table java script.
I'm getting width of each cell by parsing through the grid control's first row using the following code:
gridCtrl.rows[0].cells[x].clientWidth
where x is 1 to last cell
But some how the width doesn't match the width display by Firefox's layout width.
I tried debugging Firefox debugger and explored all the attributes to see if i mix match margin, padding, width etc to get the width displayed by the Firefox's Layout width.
But so far no luck.
I'm wonder any of the experts in the field could provide some help.
I'm looking for Something similar to the layout information provided by the Firefox debugger.
I want to get individual elements like
elements margin, border, padding and the actual width of element.
[Sorry since this is my first post i'm not allowed to post a pic, But if you open fire fox browser and hit F12 and select HTML/Layout. you will see the layout information i'm talking about]
Any help is appreciated.
Thanks,
I can't comment so I must post as a reply :(.
I think that the problem is that the element might have a width set initially, let's say 50px, but it can also adjust based on the amount of text in it. In this case, you should not get the rendered dimension because that one differs from browser to browser.
Also another problem that is see is if the element has a min-width and dynamic width based on the viewport's size. In this case it would not work either.
If I am correct your solution would be to write a JavaScript code that sends you the information.

Find which JS added CSS style to element using Chrome

I am trying to debug some image slideset which turns out with set height on outer div. The height is too short so you see only half of the images. I want to find which JS script sets this height in this div. Is there any way to do it?
go to DOMElement
Right click
Break on
Attribute modification
Execute your code to see which line changed the attribute.

easyXDM adds mysterious extra height to iframe

I have to place the content of service provider in an iframe on parent website.
The height of the iframe content would dynamically change depending on user interaction.
Problem I face is that there is some extra height added to the iframe. I'm not sure where the height is coming from.
Any insight appreciated.
LINK TO PAGE
I don't believe this to be the fault of easyXDM.
It appears that the height being calculated is for the current width of the iframe. If you remove line 28 in your HTML file, you will see that the height is completely filled. (Or the following line) (Or you can leave the code as is, and disable the height style in your developer tools and see the result)
this.container.getElementsByTagName("iframe")[0].style.width = "500px";
Since it's hard to modify the code in the debugger, the next thing I would try is, setting the width to what you would like it to be prior to filling with content and a calculated height.
I had the same problem
When you do assign the height to the iframe element, don't assign it to all iframe. Because it affects iframes in the Ads and social media plugins.
So I did the following
$('#divID iframe').height(easyXDMmessage);
$('#divID iframe').width('100%');
In the case of empty iframes, I ran into an issue where if you set the height to 0px, the parent block element will still show at least one line of empty text. This is because iframes are actually inline elements, so their parent block will still show one line-height of text even if the iframe itself is zero height. Here's the simple fix:
iframe#my_iframe { display:block; }

How do I get the visual size of visible DOM elements on a web page

I am trying to write an algorithm that tries to segment a webpage into its components such as footer, header, main content area based on the spacial organization of the page.
What I plan on doing is to:
First render the page using a web browser (say Firefox).
Then inspect the DOM model produced by the browser
From the DOM model I'd like to get the following:
a. Size of the element (height, width) (I'd like the actual size - not just what is in the style says)
b. Placement of the element on the web page
c. Z-index of the element.
For the purposes of this question -- I'd appreciate help with: 3.a and 3.b
Thanks.
offsetWidth\offsetHeight is what you want for getting element dimensions:
https://developer.mozilla.org/en/DOM/element.offsetWidth
offsetTop\offsetRight is likely what you want to find location of objects:
http://www.quirksmode.org/js/findpos.html
It depends on the browser. This table shows the methods across browsers:
http://www.csscripting.com/css-multi-column/dom-width-height.php
But if you're just using Firefox than you use Firefox handling code / Javascript. You could also look into the source code of Firebug and see how it calculates width / height / z-index.
I think what you want is: offsetWidth, offsetHeight, offsetTop, and offsetLeft.

Categories