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.
Related
I've made rock paper scrissor game using html,css and js.When window is resized to small, some left portion of the page disappears .Using horizontal scrollbar i can scroll to right but not left.
I've checked for absolute positionings and negative margin but none worked.
What should i try ?
I expect to get entire page without any portion getting clipped off.
Hard to answer this without the code, but I would use devtools first to see what margins are being applied. You can look at the box model for each element in your dom and see what is being applied. Also, how small are you resizing? Do you have any explicit widths? If you are sizing down to 200px, but you have a div that is 250px, it clearly is going to have overflow. Devtools can also help with analyzing different devices too. Use the tool to set a size and see how your page responds, you can change the width of elements in the devtools to see if it removes the overflow.
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 have a number of width: 100%; divisions as part of my HTML page, however when I zoom in on the page or view on a low resolutions such that some of the content goes past the horizontal limit of the screen (and hence a horizontal scrollbar appears), I find that scrolling to the right results in my 100% width division cutting off.
This effect is demonstrated below:
The same happens with this web page, here on Stack Overflow. If you zoom in using FF5.0, the footer and headers are "cut" when you scroll right. This is because the content div has to overflow on the right.
I think you want to avoid having overflows on the side (it's not aesthetically pleasing, and it's harder to navigate through the page).
A solution could be to not have divs that have a minimal width (eg 960px for the div#content of this web page), but rather are variable (50%). If you zoom in, width=50% will stay 50%, it will not overflow.
PS: but it might be better to have some JavaScript code to do the zoom for you, so that you can more or less control what the end-user sees when they click on the zoom button that you'd provide, on the page.
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"
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