I'm in the process of developing a website which uses the layout of having the navigation iframe on the left, and the content iframe in the middle. Given that some of the pages which will display in the content iframe have significantly less text than others, I don't want to just have some arbitrarily large height value for my content iframe as that will result in unnecessarily large amounts of whitespace for most pages.
Ideally, I should be able to scroll on the content iframe while leaving the rest of the webpage in place, and I should be able to scroll only as far as there is content on the currently loaded page in the content iframe (maybe plus 25 pixels or so just for some nice padding).
Currently, the code for the content iframe is as follows:
<iframe name="content" src="content.html" style="height:2500px; width:1500px; border:none; position:absolute; top:215px; left:205px; scrolling:yes; overflow-y:scroll;" title="Content Pane"></iframe>
I want to avoid JavaScript if at all possible. I've went on probably a dozen different websites now to no avail, but this seems like it should be a simple problem to solve.
Related
I've created a static portfolio site for myself in GitHub Pages that is incredibly simple to keep maintenance easy. I have a 3-line title at the top of every page that acts as a navigation. However, I've somehow created a small (10 or so px) shift between the home page and all of the interior pages.
When I inspect the code in DevTools, I can see that the content for both pages is 600px wide with a 25px padding on either side of the content. The horizontal content margins are set to auto to center the main content block on each page, but on the interior pages, the margins are slightly different than the home page.
The home page - https://www.parkermyers.com
An interior page with a single img - https://www.parkermyers.com/about.html
An interior page with multiple img tags - https://parkermyers.com/nighttrain.html
Hopefully you can see that there is a shift in the margins when navigating from the home page to either of the two provided interior pages.
The furthest I've gotten in troubleshooting is that it's probably related to the img tag that is present on all interior pages but not the home page (could possibly be the surrounding figure tags as well). For example, on the /about page of the site, when I delete the lone img, the content margins shift a bit and realign with the home page.
So my best guess is that there's something to do with the width or size of the image that makes the content slightly larger and thus affects the margins, but I've messed around with the width to no success.
The comment that mentioned the scroll bar helped me troubleshoot more efficiently to find a solution for my problem! The issue was not directly the img tag, but the vertical space that the images took up meant that there was a scroll bar on the interior pages and not the home page.
After using that knowledge to dig further, I found that
body {
overflow-y: scroll
}
created a permanent space for the scrollbar whether it was being used or not. This solved my alignment issue! A small side effect is that the space for the scroll bar is not invisible when not being used, but it's a small price to pay for consistent alignment.
I have created a page which contains 15% space for header and 10% for nav bar and remaining space for iframe. In iframe the displaying of main content will be done.
So coming to my problem how to acquire responsiveness of the website, when i zoom in all the contents just come out of its allocated container. Can anyone help me to solve this
So first, I know that there are a lot of scrollable div questions, but I did not see one that seemed to address my problem, so bear with me!
Here is what I am trying to do:
I need to display some content in an iFrame (it's a report output that I need to embed in my application).
I am hosting the iFrame in a div.
I want for the div and iFrame to size based upon the size of the user's browser window.
If the content in the iFrame is larger than the div, I want for the div to scroll
I can't make the iFrame scrollable, because this is really hosted in a larger UI construct -- if the iFrame had scrollbars, there could be 2 sets of scrolls in my "real" application (in "real life", I won't have control of the Div).
The problem:
I get scrollbars, but a large report is still clipped vertically -- it's as though the scroll does not really take into account the full size of the div.
Here is my HTML:
<div style="width:100%; height:100%; overflow: auto">
<iFrame src="a url" style="width:100%; height:100%" scrolling="no"></iFrame>
</div>
If I remove the overflow style from the div and make the iFrame scrollable, it works, but I can't do that in production, because the host for that iFrame really needs to own the scrollbars.
Unfortunately the code that you have is not going to work. When you have a DIV set to 100% height its looking at the height in relation to the browser window so it stops there. It has no way of knowing how much height is needed that exists inside the iframe.
There may be a way to do what you want with JavaScript. Check this SO question and it may have a solutions you're looking for: Adjust width height of iframe to fit with content in it
Html frames are good choice for some scenarios on web content, especially simple content management.
My page contains a top frame and content frame. My problem is, as the page moves down to end, the top should move too, and if scrolling equals top heiht, the top woldn's be seem.
Note: There is only one top page in this project and many content pages. The content pages do not contains also a top page code. Jus the known frameset template. The only difference is frames are desired to move .
What I could understand is that you tried to create a section of the page that scrolls as you scroll down/up on the page.
In your CSS, if your iframe id is "frame",
then do this
#frame{
position:fixed;
/* specify widths and heights as you like */
}
If you have a header that needs to stay at the top of the page use the
position: fixed;
technique, if im wrong you need to seriously rephrase your question.
My company doc pages need to be laid out as specified in this image:
The iframes are handled by the doc team software, MadCap Flare. The problem we're having is that we'd like the breadcrumbs and topic heading/logo to be fixed elements at the top of the page and have the topic content be scrollable, without disappearing under the fixed elements at the top.
We'd also like for the topic content scrollbar to be the web browser scrollbar, and not an overflow scroller. Additionally, because we have fixed elements at the top, we need to avoid content disappearing under the fixed element such as when the page loads or a link is clicked to an anchor somewhere on the page (anchors load at the top of the page and not the top of the content table cell).
The built content looks like this:
<body>
<table class="superheader">
<tr class="topRow">
<td class="headingBreadcrumbs">
<div class="breadcrumbs">breadcrumb trail</div>
<h1>topic heading</h1>
</td>
<td class="headingLogo">
<img src="logo.png">
</td>
</tr>
<tr class="contentRow">
<td class="content" colspan="2">topic content - full of tables, divs,
paragraphs, lists, etc...</td>
</tr>
</table>
</body>
I'm not married to the inner table. I'll welcome a different solution so long as:
the breadcrumbs/heading/logo are fixed at the top so they're always visible.
topic content does not get hidden under the fixed top element, such as when the page loads or when clicking a link to an anchor.
the user can scroll the content using the browser scrollbar.
Doing it exactly as you mention with the scrollbars being native says Frames to me, though now I have to beat myself silly for suggesting it. Frames were annoying back in the early 90's when I got my start....
Something like JQuery layout would probably end up doing a lot more for you and could add the ability for the user to customize (to an extent) their workspace.
Since iFrames are also not exactly in vogue any more, you could draw that information directly in to the dom via jQuery Ajax or the like. At least that's how I think I would approach it.
Maybe something like this. It lacks equal height columns, but that can be acheived though.
Fiddle
Just a try! - Does not solve the scroolbar problem though. Downvotes desereved.
Try this out:
http://jsfiddle.net/k2R3G/
I have created this jquery plugin to solve a similar issue I was having where I had a centered container (tabular data) and I wanted the header to fix to the top of the page when the list was scrolled. One of the issues was, when the header became fixed, the content below it would jump up the page (not good). This plugin compensates for the "fixed" element and allows the content below it to position and scroll as it should, without having to set margin-top on my content, so the header can vary in height.
In the jsfiddle, I modified your layout a bit to use list items instead of tables.
Here is the link to this jquery plugin that may solve this problem:
https://github.com/bigspotteddog/ScrollToFixed
The description of this plugin is as follows:
This plugin is used to fix elements to the top of the page, if the element would have scrolled out of view, vertically; however, it does allow the element to continue to move left or right with the horizontal scroll.
Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down passed the target position, the element will be restored to its original position on the page.
This plugin has been tested in Firefox 3/4, Google Chrome 10/11, Safari 5, and Internet Explorer 8/9.
Usage for your particular case:
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>
$(document).ready(function() {
$('.topRow').scrollToFixed();
});