Sizing embedded <object>s while trying to get the wrapping div expand with the size of the embedded -in this case- html page really is a pain.
The last hours I tested many solutions and even the javascript resize onload ones don't seem to work in this case. Iframes didn't help either.
<style>
.outer {
width:100%;
position:relative;
overflow: visible;
}
.inner {
min-height: 1600px;
width: 100%;
position:relative;
overflow: visible;
}
</style>
<section id="loadersection" class="outer">
<object id="loader" class="inner" type="text/html" data="/static/index.html">
</object>
</section>
The embedded html page is rather a javascript app and therefore scrollHeight at $(document).ready(), onload, $(window).load() returns a height of 150px. The real height when completely loaded is about 1400 px. Are there any events which report a loaded child object?
Is there a way to embed a html page in its full size without scrollbars into a div which expands if e.g. an accordion-menu is expanded within the child object?
Related
I have tried almost anything on the internet to remove scrollbar from my HTML Page. I am continuously getting dual scrollbars, which I don't want. I have made a page and have a menu bar on the top and want a page to be embeded below the menu bar. But all I get is an output like this: Take a look at this picture and notice the dual scrollbar. I have tried the following code in my html:
<style>
#container{width: 100%; height: 100%; overflow: hidden;}
iframe{width: 100%; height: 100%; border: 0;}
body {
margin: 0;
}
</style>
<body>
<div id="container">
<iframe src="http://myurlhere.somedomain"></iframe>
</div>
</body>
Any ideas what should I do?
PS: I want to retain the body scrollbar but remove the iframe scrollbar and also I want results in full browser width and height. Please don't post answers like
<iframe src="url" scrolling="no"></iframe>
or
frameborder="0"
or
iframe
{
overflow-x:hidden;
overflow-Y:hidden;
}
Because all these methods DON'T WORK!
I need to scroll the iframe but without scrollbar. Hope I'm clear enough with the question.
Try using iframe resizer https://github.com/davidjbradshaw/iframe-resizer
It hides iframe scrollbar and adjusts it based on parent window size.
From your screenshot it looks like you're using a top frame which includes a menu, and load the content in an iframe at 100% height.
The reason you're getting a double scrollbar is because the 100% height does not subtract the height of the menu.
Since the parent window won't know the height of the iframe contents (unless you use quite some javascript) you're better off making sure the parent window won't show the scrollbar and use the scrollbar from the iframe. This does have the effect of leaving the menu always at the top of the window, which may or may not be desired.
Depending on the browsers you'd like to support there are a few css only methods you could try.
(Edit: clearly labelled the different methods)
Method 1: css flex
The cleanest way to achieve this is using display: flex. By giving your body a display: flex; flex-direction: column and your #container a flex: 1 makes the #container fill the remaining height after the header. Example: https://jsfiddle.net/Ldyb418y/
Method 2: css calc
If the header has a fixed height, you could use css's calc() to make the height 100% - the height of the header: #container { width: 100%; height: calc(100% - 30px); overflow: hidden; }. Example: https://jsfiddle.net/jgdyqe1t/
Method 3: box-sizing and padding
If for some reason you can't or won't use calc and your header has a fixed height, you can use #container { width: 100%; height: 100%; overflo: hidden; box-sizing: border-box; padding-top: 30px; } in combination with position: absolute on the header. This places the header on the top padding of the iframe. Example: https://jsfiddle.net/dtk9ed8f/
Method 4: set iframe height from javascript
If you don't want the menu to always stay on top, you're stuck with using javascript. In this case you need to make the iframe tall enough to fit all the contents. However that means you will need to access the iframe's content in some way to get its height. This will only work if the parent frame and the iframe are on the same domain.
Using the method as described by hjpotter92 in Make iframe automatically adjust height according to the contents without using scrollbar?
Snipped from the post above:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And on the iframe:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
You will need to remove the overflow: hidden from your #container. Example: https://jsfiddle.net/wbznd35n/
I am trying to make a parallax scrolling website and its template is as follows:
HTML
<div id="content">
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>
</div>
CSS
#content {
height:auto
}
#container1, #container2, #container3 {
position:relative;
height:100%;
width:100%;
background-size:cover;
overflow:hidden;
}
#container1 {
background-color:#FF0000;
}
#container2 {
background-color:#000;
}
#container3 {
background-color:#363636;
}
Problem: If you scroll down to either #container2 or #container3 and resize the browser, the website appears to scroll.
I suspect that the height:100%; is causing issue. In particular, resizing causes all three containers to resize, creating a weird offset.
Things I have tried:
Binding the resize event and dynamically changing the height of the divs
Adding a min-height property so that the resize locks after resizing
Hiding the div that is no longer in the view
Is there any simple way of fixing this? The last attempt fixes it, but I feel like there should be a better way rather cluttering my JS file with several .hide() and .show() events.
I'm trying to center an image on a site. As I want it to be centered both horizontally and vertically I used a table/table-cell layout as following:
<div id="mainContainer>
<div id="horizon">
<img src="url">
</div>
</div>
Here mainContainer ist set to display: table and horizon is set to display: table-cell.
Unfortunately the image is no longer resizing proportionally as it becomes part of this structure. As soon as I move it into the table/table-cell divs it resizes to its original size (instead of being resized proportionally because of max-width: 100% and max-height: 100%)
see: http://jsfiddle.net/U8KcN/
EDIT:
My bad. I just tried to simplify the issue. I want to build a little slideshow for images. The problem here is that I do not know which sizes the images are (referring to someone else using the slideshow). So in simple terms I need a specific CSS that 1) centers the image vertically and horizontally in the div if its width and height are smaller than the div's dimensions, 2) resizes the image automatically if it is bigger than the div's dimensions (unnecessary to add, it is unknown whether it's width or height is bigger).
source: OP Comment
Every time I hear someone talk about the evils of using tables and then see them create a complete table structure out of DIVs with pretty much the same amount of markup -- sometimes more -- it really gets on my nerves.
By the way, have you ever developed a site for someone who wanted to do some of their own layouts in the content area using a CMS like Wordpress? The only way someone with almost no HTML knowledge can do that well is by allowing them to use table tools in Tiny MCE or another editor. So yes, tables are still important.
Recently, I had to do just that for a customer, but the images in the table cells were not responding and shrinking for smaller screen sizes. All I had to add to my CSS to care of that problem was:
table {
table-layout: fixed;
}
Now the images in the table cells are growing and shrinking accordingly, and the horizontal scrollbar is no longer appearing. Oh, of course you have to use percentages in your table width and td widths as well.
How about dropping that "CSS-table" stuff and doing it a bit easier?
<div style="width:auto;height:auto;margin:25%;text-align:center;vertical-align:middle">
<img src="URL">
</div>
At least, that’s how I would handle it...
EDIT:
Please note that I've put the CSS inline to show you what element should get what style. In production, you should — as a comment to this answer correctly stated — always separate style from code like. So, practically, you'll end up with something like this:
<style>
.centerimg {
width:auto;
height:auto;
margin:25%;
text-align:center;
vertical-align:middle
}
</style>
...
<div class="centerimg">
<img src="#">
</div>
EDIT 2:
Replying to the related comment, here's the update to make the image fit it's parent proportionally:
If your image has a bigger width than height...
<style>
...
img{
max-width:100%;
height:auto
}
</style>
or, if your image has a smaller width than height...
<style>
...
img{
max-height:100%;
width:auto
}
</style>
EDIT 3:
Looking at your fiddle, I came up with this which works like you want it to work:
<style>
*{
width:100%;
height:100%;
margin:0;
text-align:center;
vertical-align:middle
}
img{
width:auto;
height:100%;
}
</style>
I've forked your fiddle to show the updates: http://jsfiddle.net/LPrkb/1/
EDIT 3:
As the OP doesn't seem to be able to decide what he needs, I'm adding this final edit due to his latest comment.
You could also use a CSS background-image with "background-size:contain" on the "mainContainer" and be done with it... check http://jsfiddle.net/HGpfJ/2/ or look at this 100% working example taking a completely different approach which results in just the same effect/functionality:
<!DOCTYPE HTML>
<html itemscope="itemscope" itemtype="http://schema.org/WebPage">
<head>
<title>Example</title>
<style>
html,body{width:100%;height:100%;margin:0;padding:0}
#centerimg{
width:100%;
height:100%;
background:transparent url(http://oi42.tinypic.com/v9g8i.jpg) no-repeat scroll center;
background-size:contain;
}
</style>
<body>
<div id="centerimg"></div>
</body>
</html>
Let's face the facts: depending on where in the document structure you want to have the image "centered", there are more than a dozen of ways to do it.
If OP needs specific code, we will need the complete document structure from OP and not simply a "generalized" code-snippet which could be anywhere in whatever document structure.
Using tables (display: table-cell) for layout is a web development anti-pattern these days. Try using the <span> element with display: inline-block to vertically and horizontally center the image, as this method will work all the way back to IE 6. Also, you can change the image size to be a percentage if you want it to resize according to its container:
http://jsfiddle.net/hHWy8/1/
HTML:
<span class="horizontal">
<span class="vertical">
<img src="url" />
</span>
</span>
CSS:
span {
display: inline-block;
}
span.horizontal {
text-align: center;
width: 100%;
}
span.vertical {
vertical-align: middle;
border: 1px solid black; /* put a border on container for display purposes */
line-height: 1000px; /* this sets the vertical height */
overflow: hidden;
white-space: nowrap;
}
span.vertical img {
height: 50px; /* set your image height (could be percent) */
width: 50px; /* set your image width (could be percent) */
}
span.vertical br {
display: none;
}
To resize your image you could use this css:
html,body,div,img{
height:100%;
}
img { width:100%}
It sets the html and body's height to 100%, this is needed so the height of your page takes all available space
I have these two divs:
<div id="ing" style="position:relative;">
<div id="comm" style="position: absolute; width: 27% !important; height: 141px; right: 18px; top: 1px; ">
</div>
</div>
And then in JS I set tinymce to the "ingredients" div. How to make these two divs share a scrollbar like this: http://jsfiddle.net/userdude/hThsx/
Problem her is that your editor uses a contenteditable iframe with an own document.
So this iframe has an own scrollbar and you cannot do anything about it except adjusting the iframe dimensions to the inner documents dimensions. In this case there won't be a scrollbar for the editor iframe.
Now you may follow Cobra_Fasts idea of putting a wrapper div around your two divs and let it have a scrollbar.
I have a <div>...</div> section in my HTML that is basically like a toolbar.
Is there a way I could force that section to the bottom of the web page (the document, not the viewport) and center it?
I think what you're looking for is this: http://ryanfait.com/sticky-footer/
It's an elegant, CSS only solution!
I use it and it works perfect with all kinds of layouts in all browsers! As far as I'm concerned it is the only elegant solution which works with all browsers and layouts.
#Josh: No it isn't and that's what Blankman wants, he wants a footer that sticks to the bottom of the document, not of the viewport (browser window). So if the content is shorter than the browser window, the footer sticks to the lower end of the window, if the content is longer, the footer goes down and is not visible until you scroll down.
Twitter Bootstrap implementation
I've seen a lot of people asking how this can be combined with Twitter Bootstrap. While it's easy to figure out, here are some snippets that should help.
// _sticky-footer.scss SASS partial for a Ryan Fait style sticky footer
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -1*($footerHeight + 2); /* + 2 for the two 1px borders */
}
.push {
height: $footerHeight;
}
.wrapper > .container {
padding-top: $navbarHeight + $gridGutterWidth;
}
#media (max-width: 480px) {
.push {
height: $topFooterHeight !important;
}
.wrapper {
margin: 0 auto -1*($topFooterHeight + 2) !important;
}
}
And the rough markup body:
<body>
<div class="navbar navbar-fixed-top">
// navbar content
</div>
<div class="wrapper">
<div class="container">
// main content with your grids, etc.
</div>
<div class="push"><!--//--></div>
</div>
<footer class="footer">
// footer content
</footer>
</body>
If I understand you correctly, you want the toolbar to always be visible, regardless of the vertical scroll position. If that is correct, I would recommend the following CSS...
body {
margin:0;
padding:0;
z-index:0;
}
#toolbar {
background:#ddd;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}
I just want to be clear on what your saying here:
bottom of the web page (the
document, not the viewport)
Naturally, a div will be at the bottom of the "document", depending on your layout.
If it's not going to the bottom of a document, or not paying attention to how tall your columns are, is it because your floating? Clear: both; would be in order to solve that.
The sticky footers are what I think your looking for, but when you say document, and not the viewport, I get a bit confused. Sticky footers typically do this: Watch for short pages, and if its shorter than the view port, the sticky footer tacks the footer div to the bottom.
Here's some sticky footers (there's gajillions of em, but this is in order of my favorites):
http://www.cssstickyfooter.com/
http://css-tricks.com/sticky-footer/
http://ryanfait.com/sticky-footer/ (listed previously)
http://brassblogs.com/blog/sticky-footer
http://alistapart.com/ (theres one there I just can't find it)
Maybe if you gave a quick illustration or were a bit more specific on what you want? Hope this helps :D
-Ken
Try this: Fixed footers without Javascript. I don't know if it will be a perfect fit, but I think it's close enough.
You can just give the div a:
clear:both; text-align:center;
and put the div as the last element before the closing body statement. That would force it to be the last element without anything next to it.
Your best bet is to use javascript to determine the size of your page. You can get the height with window.innerHeight with non-IE browsers and document.documentElement.clientHeight with IE. With that value you should be able to absolutely position your element on the page setting top to that value minus the height of your div. If the height of your div is variable you will need to check the div's offsetHeight property to get the real height.
For centering use the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.wrapper
{
width: 100%;
padding-left: 50%;
}
.test
{
width: 400px;
margin-left: -200px;
border: 1px solid black;
padding-left: -200px;
}
</style>
</head>
<div class="wrapper">
<div class="test">This is a test</div>
</div>
</html>
You have a wrapper div around the div you want centered. The wrapper div has a width of 100% the inner div has a width set to whatever you want it to be. Give the wrapper div a left padding of 50% and the inner div a negative left margin equal to half of its width.