Is there any javascript, ajax, css or any other method to get a webpage content fitted on a fixed widht iframe? Like mobile device browser does. Thank you.
You define a container div with a fixed width (say 400px) and set that div to overflow hidden. That will force the content of that div to stay within the 400px width. You put all the content that you want to have in the iframe in that container div. And then, you put that div inside the iframe.
I think that'd be the easiest way to do it.
Related
I am making a responsive tool with an iframe. It does not display the correct width because of the scrollbar. Here's what I want to do. I want to hide the scrollbar in the iframe(it will then show the correct width), then I would like it to somehow be scrollable from a scrollbar outside of the iframe. Is this possible???
me and a friend are working on a html app for smartphone (part of an internship).
Im trying to get a webpage to display in a seperate div. I can get this done easily enough with an iframe but the problem is the divs width can be expanded.
What would be the simplest way to get a webpage in a div that resizes to fit the dimensions of the div it is in?
My mate is doing all the javascript and is using jquery and I am focusing on the html and css work. I have very little experience with js.
You can use CSS or width and height attributes of an <iframe> to match its width with the div it is placed in. But whether the webpage resizes exactly to fit in the div so that you don't get horizontal scrollbars depend upon the webpage itself. It will fit if the div is big enough for the webpage or if the webpage has a fluid layout i.e. the width of its contents is defined in %.
Another way would be to send a server side request to another server, then use an XML phaser to get only the body content and then write that HTML to the div. Then you would have to adjust width with css and/or javascript.
But I would advice to do with Iframe, because it's its nature ;)
Is there any way to make an iframe's vertical scrollbar shorter than the iframe itself? For instance have a 500px high iframe with a 450px high scrollbar (but the scrollbar would still fully pan the iframe's content).
(with Javascript, jQuery, or CSS)
Thanks in advance!
You could create a custom scroll bar with JavaScript.
All the usual caveats apply - usability, etc
Hey c'mere grandson, this scroll bar thingo is smaller than the panel, I don't know how to use it. Maybe I'll try another website...
You can always go for the dumb approach and embed a smaller scrollable frame as part of that iframe (which would not need to be scrollable at all then).
I want to make a div that expands to reveal its content when clicked. What I did to date is:
Created a div, set to overflow:hidden
Created a JS function that toggles the height of the div between "minimized" and "maximized" (20px height and XYZpx height).
So far everything works, except I don't know how to get the height of the content inside my div so I can make the div resize to fit the content exactly. So in essence I have hidden content that overflows from the 20px "minimized" div, and I can expand the div to reveal the overflowing content but I don't know by how much to expand it.
Do you have an idea how I could do this?
Thanks in advance!
Here's my stab at the problem. I wasn't sure exactly what you were trying to do.
http://jsfiddle.net/Mw6Ys/2/
Can't you just remove the overflow hidden and height css. And the div will resize the correct height. And if you need to find the exact height. Use javascript to remove the overflow:hidden and height. Then measure the offsetHeight and set that to the height. Though if you are doing this it might be better to remove the element from the DOM then place back in once you are done.
my page has a div on the top of 100px height and an iframe beneath it. I want the iframe to fill teh rest of the page viewport i.e that the iframe's height should adjust as the browser window adjusts so we don't see two scroll bars - I just want that the scrollbar should be visible in the iframe and not in the browsers own viewport.
If I understand you correctly, you should wrap the iframe in a div for which you make a class in CSS that has overflow:scroll;, height:100%; and margin-top:100px;
The height makes you fill the whole page, the margin-top clears room for your top div and the overflow ensures you get scrollbars around your iframe. You might need to play a little with the height.
As far as I know it is not possible to actually change the iframe's height, since you import it from another page.
Hope I could help a bit.