I'm trying to show an Iframe with only a specific div from a page. I've seen some topics about that, but each of them considers that we know the size of the div, and restricts the Iframe dimensions to the size of the div and prevent scrolling.
In my case, I want to restrict the portal to a specific div which can evolve in the future and have a different size. I've seen topics which use page anchors, with this kind of iframe tag :
<iframe title="Title" ng-src="http://www.exemple.com#anchor"></iframe>
I've tried this but it seems not to care and still display the whole page. the only things I know about the div are its id, its classes. It contains a variable number of other divs.
Is there a way to have an Iframe which adapts to the div size in any case?
By the way I have strict rules on my project, so no jquery, only angular as far as it is possible.
Thank you.
Related
Am designing a site and am quite new to it. So my question may be naive. There are two pages index.html and aboutUs.html.
For this eg, i have removed most of the invalid contents with regards to my question. My question is related to how can we dynamically change or handle the length of the page based on the content. In my case, index.html does not have too much text, so the UI looks fine, however aboutUS.html has too much content, and the content overlaps with the footer. How do I handle such scenarios? For reference, I have added some images below, the first image has no overlap, but the second one has. You can find the source code over at GitHub (https://github.com/vnmshenoy/global)
Images
Your problematic classes seem to be imageDiv and overlap.
Both these have defined heights.
When the content inside the element is larger than this height, it is visible, but is actually spilling outside that position, and so appears on top of the next element. If you set a border on these elements, you will see what I mean.
You could always use the overflow:scroll style here and scrollbars will appear when this happens, but you'd be better making your design a bit more fluid with regard to heights, especially if you plan to make it responsive.
So first, I know that there are a lot of scrollable div questions, but I did not see one that seemed to address my problem, so bear with me!
Here is what I am trying to do:
I need to display some content in an iFrame (it's a report output that I need to embed in my application).
I am hosting the iFrame in a div.
I want for the div and iFrame to size based upon the size of the user's browser window.
If the content in the iFrame is larger than the div, I want for the div to scroll
I can't make the iFrame scrollable, because this is really hosted in a larger UI construct -- if the iFrame had scrollbars, there could be 2 sets of scrolls in my "real" application (in "real life", I won't have control of the Div).
The problem:
I get scrollbars, but a large report is still clipped vertically -- it's as though the scroll does not really take into account the full size of the div.
Here is my HTML:
<div style="width:100%; height:100%; overflow: auto">
<iFrame src="a url" style="width:100%; height:100%" scrolling="no"></iFrame>
</div>
If I remove the overflow style from the div and make the iFrame scrollable, it works, but I can't do that in production, because the host for that iFrame really needs to own the scrollbars.
Unfortunately the code that you have is not going to work. When you have a DIV set to 100% height its looking at the height in relation to the browser window so it stops there. It has no way of knowing how much height is needed that exists inside the iframe.
There may be a way to do what you want with JavaScript. Check this SO question and it may have a solutions you're looking for: Adjust width height of iframe to fit with content in it
I am having trouble with the width of a div not resizing when it's dynamic content is loaded.
As you can see in this screenshot, that the first few divs do not get the width of it's dynamically loaded child images. But as you can see, the later divs that are loaded after the server have time to render the child images DO get the child width.
The site is based on Masonry. I have been trying to solve this problem with a masonry method called:
$('.masonry-container').masonry('reloadItems')
but it is not working.
I have also tried:
window.location.reload()
but all that does is reload the page.
Any thoughts?
If your layout has images, you probably need to use imagesLoaded.
http://masonry.desandro.com/faq.html
Try looking in some Developer tools, like Chrome's and inspect the "half-loaded" image, you should usually see why it's not wrapping the content.
How would I go about having a href image fixed at the top left of a page without stuffing up any content in the current webpage and act pretty much exactly the same regardless of browser and DTD.
The problem I have is I need to supply a block of code to various websites that puts the said image in the same place so someone can easily click through.
I assume I am going to have contain everything within a DIV.
<div style="position: absolute;left:0px;top:0px;">
<a href="some.link.com">
<img src="someimage.jpg" alt="someimage">
</a>
</div>
Or is that as good as it gets?
If you want to make it fixed, i suppose you should use "position:fixed" property.. no?
And maybe z-index will be useful for you too (to place div on the highest layer, then other content).
As i understand, you would like to provide some HTML to some users that will add it to their own websites (or to add it by yourself, like ADS). If i am right, you should also think about other css properties, that are not defined in your div, but that can be defined on different websites (i mean margins, paddings, etc) in css, and will be automatically applied to your div.
I have an IFrame that I am trying to make with dynamically controlled height and width, but it does not seem to be working.
For some reason, the IFrame just adds a scrolling bar when I want it to become bigger. But how do I make the IFrame area itself become bigger?
Here is my current test page:
http://www.comehike.com/outdoors/widget.php?type=hike&hike_id=108&width=200&height=450
You see the height and width params I added to the URL. They are meant to control the IFrame, but all they seem to do is add/remove the scrolling bar.
FYI, the google map inside is also using the height and width. I had meant the map and IFrame to increase and decrease in size in the same proportions. How can I do that?
Thanks,
Alex
Something like this in PHP worked.
style="width:'.$width. 'px;height:'.$height.'px"