Problem:
My Client wants me to create a launch webpage for his product such that there should be no scroll on the page, be any browser or window dimensions.
Doubt: Is this possible using CSS and Javascript?
Some Early Diagnosis: This might be a little similar to this or this but the difference is that I want to resize the dimensions of each and every element in a particular ratio and not just adjust the height of a parent DIV.
So, the statement: I need to change the dimensions of each and every element (images, divs, text ... all) based on a ratio between the (current window size and a reference window size). Perhaps Javascript might have a cure for this?
Question: How to do this?
Just set the height and width of <html> and <body> to 100%, overflow to hidden and use percentages for left, top, width and height of elements:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Proportional resizing</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
div {
position: absolute;
left: 30%;
top: 20%;
width: 40%;
height: 30%;
background-color: #ddd;
}
</style>
</head>
<body>
<div>divthing</div>
</body>
</html>
These percentages are relative to the containing block, which is, in this case <body>.
Update: To answer another question: scaling of background images is almost not supported yet. When the CSS 3 background-size property gains ground (see this table), things will be easier. For now, have a look at this answer (yes, that means: more markup).
Related
I am creating a simple p5.js canvas using the values from it's parent like this:
// Canvas properties
var $musicscape = $("#musicscape");
// p5.js functions
function setup() {
var canvas = createCanvas(
$musicscape.outerWidth(),
$musicscape.outerHeight()) ;
canvas.id("canvas")
canvas.parent($musicscape[0]);
}
My musicscape element has the following sass properties and takes on the right size without creating any scrollbars.
#musicscape
position: absolute
right: 0
top: 0
width: 50vw
height: 100vh
Here is a jsfiddle which shows the error.
However, when I add the canvas which has the exact size as my html, body and #musicscape elements, a vertical scrollbar is added. The only way to remove it is to set the canvas width to $musicscape.outerHeight() - 3 which also creates a small white line at the bottom that isn't part of the canvas. How can I get rid of the vertical scrollbar while keeping the canvas to the size of its parent? I checked and there are no padding or margin anywhere on my page.
I am testing on Chrome btw.
HTML canvas element is by default an inline element (list of inline elements).
So even if you set it's height exactly same as it's parent it overflows because of line-spacing. To prevent it set canvas to a block level element in your SASS file.
#canvas
display: block;
CSS Flexible Box Layout Module
index.html
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="noscrollbars.css">
<head>
<meta charset="UTF-8" />
<script src="p5.js"></script>
<script src="myscript.js"></script>
</head> <body> <main> </main> </body>
</html>
noscrollbars.css
html, body {
height: 100%;
}
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
I'm trying to do something that shouldn't be very hard, but surprisingly I haven't been able to find the solution online.
I want to embed iframes to any random website, without the visitors noticing that it's actually a different frame. I want the iframe to merge with the parent body, extending the body of the parent, so that the non-iframe-part and the iframe-part of the website can be scrolled only using the main scrollbar of the parent page.
This is my code so far:
<h1>Tours</h1>
<div style="background-color: red; color: white; padding: 200px; text-align: center;">
Top part of page
</div>
<iframe id="tourtask-iframe" style="overflow: hidden;" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#tourtask-iframe {
width: 100%;
height: 2000px;
border: none;
}
</style>
When I do a overflow: hidden; on the body of the source file of the iframe archive, the scrollbar disappears, but I'm unable to scroll the iframe portion of the page.
I'd need to update the height of the iframe element to fill up the 100% of the height of this file. I'd also need to update the height of the iframe element whenever I expand/collapse any collapsible content in the frame.
How can this be done? Or is there a better way?
I'd preferably not use any library/framework for the parent page, since I'll need to be able to embed this iframe to totally different webpages.
Thank you!
I found an amazing script for this called iFrame Resizer:
https://davidjbradshaw.github.io/iframe-resizer/
It feels any change in height of iframe source document and updates the iframe container accordingly. It took some tweaking and investigation to get it to work.
Please make sure you're complying with following requirements:
The source iframe document must start with <!DOCTYPE html>.
Make sure the body of the iframe document is not 100% (which it is by default when using Material Design for example).
To successfully embed the correctly resizing iframe to the parent document, I'm now using the following code:
<iframe id="tourTaskIframe" scrolling="no" src="/public/index.php?b=eit&token=abcd1234&p=tours&lang=en">Please upgrade to a browser that supports iframes.</iframe>
<script type="text/javascript" src="/public/js/iframeResizer.min.js"></script>
<script type="text/javascript" src="/public/js/iframeConfig.js"></script>
<link rel="stylesheet" type="text/css" href="/public/css/iframe-parent.css">
iframeConfig.js:
iFrameResize({
heightCalculationMethod : 'bodyOffset'
}, '#tourTaskIframe');
iframe-parent.css:
iframe{
width: 1px;
min-width: 100%;
border: none;
}
body {
margin: 0;
}
In the styles.css for the iframe source document, in addition to any other styles I'm using for aesthetics, I have the following essential lines:
body {
height: auto !important; /* Essential for resizing */
min-height: 0 !important; /* Essential for resizing */
}
And that's it!
I have a really simple page, with a div. Inside that div is an image that sits at the top of the div some text that sits below the image.
My Problem: The image is supposed to have a width equal to the divs width, ie, the image is supposed to stretch to the width of the div. But what happens is that the image stretches only about 80% of the width of the div, so theres a gap on the right side of the image.
How can I make the image stretch all the way to the right so its width is the same as the divs width? I think you can see my problem in JSFiddle(complete with uploaded images): http://jsfiddle.net/ajEmm/ but I also encourage you to show the HTML in IE, the image is a link so it will show.
NOTE: This problem only occurs in IE, in firefox the image correctly stretches to the width of the div
<html>
<head>
<style type="text/css">
<!--
body { background-color: RGB(218,238,248); }
.content { padding-top: 2%; margin: 10px; margin-top: 0; width: 58%;
max-width: 58%; float: left; color: #454545; }
#announcement { margin: 5%; margin-top: 0%; margin-bottom: 5%; border-color: #99CCFF;
border-width:thin; border-style:solid; border-right-width:thick;
border-top-width:0px; border-bottom-width:thick; background-color: #FFFFFF; }
-->
</style>
</head>
<body>
<div class="content">
<div id="announcement">
<img class="anncHeading" src="http://i54.tinypic.com/qs1lsg.png" width="100%" height="60%" alt="1"/>
<p><b>Announcements</b></p>
<p>Planning on hosting an indoor/outdoor event? We have large, modern educational facilities & surounding gardens available for hire & lease at an economical rate.</p>
</div>
</div>
</body>
</html>
Woah, woah woah.
PLEASE write it in a structured, easy-to-digest format. It will help you out in the long run as you learn code (whether it's css, php, js, etc...)
Your code is formatted poorly. I updated your fiddle: http://jsfiddle.net/ajEmm/3/ (plugged everything in the HTML box so you can just copy and paste it into your page file)
Because some users have massive screen resolutions, width: 58%; could be incredibly large. Using a percentage-based width like that is good practice, but usually reserved for site containers and core elements. When using images in fluid layouts, special precautions must be taken (to avoid warping, etc). In your specific case, the image you have IS NOT IDEAL for the code you have. I would suggest one of two things:
Set the container width at 450px, which is the width of your image; or,
Rewrite the way your page works, and use a really long header image without text. If you would like to do this, I'm available to help you. Let me know and I'll make a fiddle and write instructions for ya. :)
I have a div that contains an iFrame and I want to ensure that it always stays stuck to the bottom of the browser window. I need it to remain fixed there when the page scrolls (or at least update its position). I've tried
position: fixed; bottom: 0px; left: 0px
but to no avail. I can do this easily if I want the div at the top of the screen, I just update the div top to the value of document.body.scrollTop. Any help would be greatly appreciated.
Capture the window.onresize event. In that event handler, calculate the x,y position of the div based on the scroll position and of the window. Set the top and left attributes of the div to the x,y coordinates you calculated. You will also want to position the div using the window.onload event to make sure it starts out in the correct position.
Remember to set the doctype, then it should work fine... the following example works in ie7/ie8/firefox/chrome (it will not work for ie6) and probably more browsers:
<!DOCTYPE html>
<html>
<head>
<style>
#stay-at-bottom { position: fixed; bottom: 0; left: 100px; width: 500px; height: 200px; overflow: hidden; background: #f00;}
#stay-at-bottom iframe { width: 500px; height: 200px; position: relative; }
</style>
</head>
<body>
<div id="stay-at-bottom"><iframe src="http://google.com"></iframe></div>
</body>
</html>
I recently asked how to hide the vertical scroll bar using overflow:hidden. While the answer did work (the scroll bar is hidden), I am wondering why it's even appearing in the first place. I would think that including an object inside another page would automatically grow to the size that is needed unless otherwise constrained (which, I don't believe I'm doing). The CSS for my object is:
object {
width: 100%;
height: 100%;
border: none;
}
Any suggestions to allowing the entire object to be the full size it needs to be, instead of hiding it? Thank you.
P.S. For the record, the entire site is run off a local machine - it won't have any network access.
Edit: This SO Question is almost exactly what I'm looking to do, but with an object rather than an iFrmae. However, I can't seem to get this to resize the containing div to the correct size.
html, body, object {
margin: 0;
padding: 0;
border: 0;
position: fixed;
height: 100%;
width: 100%;
outline: none;
}
The <object> will be 100% size of the window with this CSS. <html> and <body> must be included as to set <html>s height to 100%.
Just reset all margins and padding to 0, so that no 'hidden' space is taken up