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"
Related
I have an iFrame within a page and it has a chat-icon that should stick to the bottom of the screen (but of course it will have to remain in the iFrame when scrolled out of the view).
The iFrame stretches outside the main viewport and as it seems, the iFrame is only aware of the bottom of its own document/viewport which in my example resides below the bottom of the browser window. It is not aware of the bottom of the parent page which in this case is the bottom of the browser window..
The question is simply, is there a way to get this to work with CSS only from within the iFrame? I do have the option to post messages with i.e. page height down to the iFrame. I am trying to avoid Javascript solution to position the icon manually on scroll event, due to its flickeryness...
I'm unaware of any way to do this in a CSS only fashion as the iframe is going to be completely unaware of the larger page (and that page's viewport) because it's own viewport is the bounds of the iframe itself, and the screen.
I think the only way to do this is with javascript using postMessage to pass the viewport dimensions down into the iframe where you can adjust the bottom value. To avoid flickering, add a short transition to the icon CSS so it slides into the correct place.
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.
I have an iframe on a page where I display my own HTML content.
I need to scale down the display of this content, but not by CSS's zoom definition, more like zooming with the CTRL+[mouse wheel] in the browser.
For example, if you hold down the CTRL key and scroll down with your mouse wheel, even in the current page you're reading now, you'll notice that everything displays smaller but kept in proportion and scale. The same goes for scrolling up, of course.
I need to do that with JS/JQ/CSS for the content of the iframe, as mentioned.
Just to be clear - not to have the effect of being able to scale down or up, but to get the final result - displaying the page scaled down.
I should mention that when I change the "zoom" CSS definition of the elements in the content, everything does display smaller, but not kept in proportion and thus messing up the page layout and structure.
I would suggest your add the css-rule transform: scale(0.5); to your iframe or the content you want to resize. The example scales your content to 50% size.
Like button push down my web site content by 1 pixel after load? What causes this?
The website:
http://mihalko.eu/
http://screencast.com/t/0YaQlZPmtRv
The iframe height is causing that. Give a height to #facebook_like and that should prevent it from moving changing when the iframe height changes. You can even add it a overflow:hidden.
I'm sorry if the title is not very good, any suggestions are welcome.
The entire page is an iframe onto another website (in this case, jquery.com just for demo purposes). I have an overlay "Hello World", and if you click on the X it minimizes it (click again it will open it).
My issue in this case is that it covers the scrollbar on the right.
I assume the reason is I have a CSS positioning the sidebar at right:0, however since it's an iFrame it doesn't count the scrollbar.
What are my options for working around that?
I thought of giving it some extra space, but how do I know if the page really has a scrollbar, or how big the scrollbar is?
Is there a way to place the overlay at a position WITHIN the iframe instead?
There is no way to detect the remote page's height or even if a scrollbar is present or not. Your only option, besides moving the sidebar to the left, is detecting the browser's scrollbar width and permanently shifting the overlay off the right edge this amount.
yes. just set the right to 40 for example right: 40px;
There is an example here that shows you how to detect if an iframe has a scrollbar:
How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
And there is also an example here that measures the scrollbar width
http://4umi.com/web/javascript/scrollbar.php
Once you know these you can place your overlay however many pixels from the right