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
Related
I am in the process of reworking a simple web site so that it can run on a thumb drive, aka with no server involved.
On a page on the original I had a "select" control that would execute a script that read a file and loaded images and some text.
Since I can't load files from the client's computer, I put all the information on the page, each entry in a separate div, each with a unique id, and am using style.visible = "hidden" and "visible" to hide the ones I don't want to see and show the ones I do.
Problem is, the page stays the same size (length) as if each of the divs was visible, and the space occupied by the divs I have hidden is not released.
How do I get the hidden divs to give up their space?
Here's the original page: https://www.vintagebankantiques.net/people.html
A css rule like
.class-of-divs{
min-width: 100%
}
or possibly
.class-of-divs{
min-width: 100vw
}
should help. Without having a JS fiddle or something it's hard to say more.
What these rules do is say that those divs must all be 100% of the width of the page, and shouldn't change size based on the presence of the other divs.
A problem you might get is that the divs will still get shifted in position by their neighbours. To prevent that, you could try setting display: none instead of visible: hidden. The key difference is that a div with a visibility of hidden still affects page layout. A div with a display of none does not affect page layout.
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.
Setup:
So, I have a narrow but long table (width:200px, height:2000px ish). This table is wrapped inside another div with fix height (300px) and overflow-y:scroll, giving a fixed height visible area. In the table, there is a lot of cells that are stacked vertically (see image and markup is simple regular table wrapped in a div).
Problem:
Each cell contains images, so if there are lots of cells that the page has to fetch including the images and data before loading the site then it will slow down the site significantly.
Solution Approach:
I am thinking of two approaches.
Apply lazy-load to images only. In this case (for example, from the image above). all three sections (section 1, 2 and 3) will be fully loaded except images that are not visible yet. Although it will minimize the delay if it has to fetch lots of data (for example 100+ cells), then I am not sure if it is the best approach.
Another approach is little bit more complicated but will minimize the delay as much as possible and is really ideal. So, when the page is first loaded, only the section-1 will be visible but section-2 will be also loaded (either with images or lazy-loaded images. Howeversection-3will not be loaded at this point.
When the user scrolls to thesection-2then thesection-3will be automatically loaded but not visible until user scrolls down. Ifsection-3is in the viewpoint, thensection-4` will be loaded but not visible. You get the point.
Any thoughts on it and how-to?
Thanks.
Do both. Make sure your images are always being lazy loaded, and only get the data for the next section when the user is scrolling and gets close to (or at) the bottom.
I use a lazyload image system where I specify my images like this:
<div class="lazyimg" data-src="path/to/image">
</div>
I give .lazyimg a width and height and then, when it scrolls into view, I load data-src and set background-image on the .lazyimg element.
This only works if you can specify a size independent of the actual image size, background-size: cover|contain are your friends here.
EDIT
Alternatively I guess you could load the image and then pop it in the DOM as an img tag, but changing the dimensions of the element could affect any sibling layout which could appear somewhat jarring, even if smoothly animated.
How to do it: onscroll callback.
I have an iframe that has quite a bit of white space tacked onto the end of visible elements. In fact, I know that the iframe is loading the size of all my elements including hidden elements. These elements were meant to be hidden until some knockout questions are answered, at which point the iframe should resize accordingly.
The other battle I am fighting with this is the fact that I am also having to deal with two scroll bars, one for the iframe, and of course the web page scroll bar. This is just very tacky and not very user friendly.
This is a problem I inherited, so I am hoping for a solution involving the iframe. I am also willing to explore other solutions as maybe this is not the most appropriate as it is.
To get rid of scroll bars, try adding scrolling="no" to the iframe.
HTML iframe - disable scroll
You might update the height of the <iframe> from the framed page using JavaScript after a new element is shown.
function resizeParent() {
if (!window.parent) return;
var height = $(document).height();
$(window.parent.document).find('iframe').height(height);
}
Demo
Source of framed page
Note, this will only work if both pages are loaded from the same domain.
Use both the inline style attribute style="overflow:hidden;" as well as the attribute scrolling="no". overflow:hidden is the proper HTML5 counterpart, so it's best to mix both.
Edit: In fact, if it is suited for your case, try using the iframe seamless boolean attribute. It practically makes the iframe styled as if it's part of the containing document, including no borders or scrollbars. I recommend it because it's like a one-stop for what you need to accomplish, and it does the work for you. You can try a combination of all the three attributes I recommended for ideal browser compatibility.
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 ;)