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.
Related
I have this page where I tried to create a on page pop-up for an image using JS/JQuery, following this example (http://www.jqueryscript.net/lightbox/Simple-jQuery-Plugin-For-Opening-A-Popup-Window-On-Page-load.html).
Although I succeeded on it, when I try to implement it on my customer page, some divs are on front of my pop-up, no matter how high I configure the "z-index" for it. Also, these divs seem to be dinamically generated, as they have the "wrap" id div around that I can't find on my .php file for this page.
So, no matter what I do, these images are on front of my pop-up (except if I remove them using the "Inspect element" tool or change the z-index on them with Inspect Element, changing the inline style for this automatically generated "wrap" div).
This is the page without any changes on "Inspect Element", the white image boxes with the red arrows are the problem here (they belong to the page under the pop-up and I need them to be under the pop-up): http://imgur.com/waB1igo
This is what happens if I change the z-index of the automatically generated div "wrap" that I can find searching the code with "Inspect element" for one of the boxes (the first one): imgur.com/lDk1eRA
So, any of you guys have a tip for me on how to solve this problem?
I've already tried to create new css rules for this div or the img's tags, using the "!important" and these kind of things, without result.
Thanks very much in advance and sorry for english errors,
Matheus Barreto.
You might want to try setting the position property of the overlay to absolute. Images that have their positions set to absolute will get on top of everything that is not set to position absolute or fixed which can be very annoying. You might need to work around a bit with centering it or other issues that come from setting its position to absolute but this should work.
Try to make sure your overlay DIVs are outside wrappers, inside the </body> tag, before closing scripts... If the DIV is inside another that has a lower z-index, it won't "pop out" of it.
Also, you may try really high z-index, such as 8000 or higher. You should be able to use up to 65535 (higher depending on the browser's implementation).
It's worth noting that you should have a plan for z indexes of fixed/absolutely positioned items.
I have a div with several divs inside. The number of internal divs can change so the height of the outer div is dynamic. Then I have another div on the right of the first whose height must always match, which I want to use as an SVG canvas. I've solved the height issue using table-row and table-cell in CSS. But when I try to add SVG to it using a library such as Raphael or D3 the layout completely breaks. I've tried several variations and fixes suggested online with no success: if the canvas div doesn't change size then the SVG doesn't fill it up properly. Please help. I struggle to understand HTML and CSS layout.
You can see the problem here: http://jsfiddle.net/ofuh701p/4/ by clicking on the button. The black should all turn into red, without any layout changes.
Here is another simpler example of the same problem: http://jsfiddle.net/88f2L4h1/ . In this case I'm using the solution from https://stackoverflow.com/a/8418039/2482744 to achieve equal height divs.
You can explicitly set your SVG element's width and height to the same values as its parent container using clientWidth and clientHeight.
Here's a fiddle demonstrating it using D3.
http://jsfiddle.net/ofuh701p/8/
Here is the kind of thing I want:
http://jsfiddle.net/ofuh701p/6/
I was hoping that this could be solved using just CSS, as this seems like a really simple requirement and I can't understand why the SVG messes things up so much. This solution uses uses javascript to set the height dynamically based on the DOM elements which feels like a hack:
var c = Raphael("braces-canvas", 50, $("#selectable-container").outerHeight());
Also the divs are now using display: inline-block.
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; }
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.
I am trying to generate a html page with css that works as an image preview kind of thing. An example of this is here:
http://www.nomorepasting.com/getpaste.php?pasteid=22463
however this approach has several drawbacks. One of which is the text must always be smaller than the images. I tried using a different attempt here:
http://www.nomorepasting.com/getpaste.php?pasteid=22464
But could not get it to work. Would someone please be able to show me how to modify the code at the second link to work as the first, or to suggest an overall better method?
The error in second one is you haven't specified the height attribute.
Try the following, it worked for me.
.class1{
color:#000;
background-image:url('images/2.jpg');height:1000px;
}
The reason you are not able to see the back ground image is, since there is nothing inside the div, and the height is not specified the height is 0.
Try putting a few elements in the div and you will see that the image is being displayed.
Ramjee