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 ;)
Related
Please excuse me if this has been answered elsewhere, I couldn't find the answer to my exact query, hence this post. I have a website created in pure HTML and CSS, with use of Javascript and jQuery for styling features. However, the website doesn't have a CMS for back-end. It's a somewhat simple website.
However, I am using a PHP script in order to run a mini e-commerce store. The storefront is very simple, it has products, and a simple checkout. The storefront does not have any header, footer or anything else. And this storefront is located fully in a sub-directory (e.g. /store/index.php).
Now, I want to use an iFrame to put the /store/index.php page into the body of my /store.html page, as this has a coherent header and footer, meta tags etc.
When I insert the iFrame into the html page, I make the width 100% and that is fine, because both the html page and the storefront are responsive.
However, when I access the site using a mobile device - or - when I click on a product with a long description, the source-page becomes 'longer' than the height of the iFrame and therefore, scrollbars appear. This is problematic because there are now two scrollbars on the page, and it gets messy when using a mobile device.
Is there any way that I and iFrame's height can be dynamic, dependant on the height of the page it is linked to (the source page) - not just on-page-load, but actually dynamic in real time?
The only other way will be to build a similar header and footer on the storefront, and this will be a long and difficult process as both the front-end and storefront have been built using different CSS sheets etc.
Thanks :-)
Have you tried setting the iFrame's size in viewport height and width instead of a percentage? This would make it more dynamic than saying width='100%' considering that percentage is whatever size the parent element would be, where as vh and vw would be looking at the size of the viewport instead of the element.
I'm looking for a way to fill the viewport with elements based on the viewport size.
Is there a way to use methods like createElement() and load() to do this?
Specifically, I'm trying to fill the viewport with small circle divs. The way I have it set up now, is to just manually code them all into the html and set overflow to hidden, so that the divs beyond the screen size aren't visible.
If this isn't possible, is there a way to tell the JS I'm running to animate only those divs which are visible?
I have a codepen with the divs set up here as a reference for what I'm talking about. At full screen size, you can see that there are divs missing from the bottom of the page.
I have a small iframe which houses a larger content page. The iframe has overflow: scroll so you can scroll around and see the entire content page, however, the content page css has media queries which are getting triggered because of the iframe's small size, even though the actual page is much larger.
Is there a way to either manually pick when to apply these query styles or trick the iframe into thinking it's the full width of the content without actually changing its size?
The only option I've thought of is to break the media queries into separate files and programmatically change an additional link's href to point at them as needed, but that seems kind of messy.
Thanks in advance
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.
Im trying to use this plugin:
http://www.jacksasylum.eu/ContentFlow/
2 points:
I want to know how can I get it into my div and stay inside the volume of the div? As it is right now, my div is 185px, but when I put the coverflow inside of the div, it breaks out of it and plays outside the div.
If I take the height off the div, it will stay inside the div, but... the div MUST remain at height of 185px. I dont really see any padding or margin elements inside the CoverFlow css, so im not sure what im supposed to edit.
I also have plans to put the coverflow into an even smaller div on another page, so I want to know how to scale it and fit into my set-height div properly without problems.
When I load the page into another div thats in another page, the coverflow will not load. So basically, the coverflow only loads in its own page. Ive put the links to the .js and css into the main file that loads the coverflow page, but its still not working.
Can anyone help me figure out these 2 important points?
What is happening there is that ContentFlow completely ignores the container's height; it seems to be using some kind of fixed aspect, with only width being taken into consideration, and the height being calculated from that.
Therefore, the simplest solution, in your case, given that you have a fixed height, is to reduce the width of the container, therefore making ContentFlow calculate an smaller height.