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;
}
Related
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 textarea in the my HTML. For the element, i'm using codemirror.js and codemirror.css modules(of CodeMirror).
<md-content flex style="display: flex; flex-flow: column;">
<textarea id="textArea" style="flex:1"></textarea>
</md-content>
I use separate JavaScript file to manipulate the modules.
var textArea = document.getElementById('textArea');
CodeMirror.fromTextArea(textArea, {
lineNumbers: true
});
When I open this in the browser text area is automatically filled horizontally in the window but not vertically (width:100% & height:50%).
I tried adding <style> and setting the width and height. But it changes nothing.
<textarea id="textArea" style="flex:1; width:200px; height:300px"></textarea>
Also,I tried change CSS using JavaScript, again, it didn't change the size of the element.
textArea.style.width = 200;
textArea.style.height = 300;
I wanted that <textarea> to be filled within <md-content>, that's why I have used flex:1. How can i change the size to fill the parent tag's area (same size as the parent md-content).
This is the complete code
https://jsfiddle.net/e86pztkh/1/
.CodeMirror {
position: relative !important;
height: 100% !important;
}
html, body{
min-height: 100%;
position: relative;
height: 100%;
}
Not sure if you have the codemirror css file locally, if you do just modify it and dump the !important declarations.
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>
If I want to set width of a div containing some text and I want to set the width of that div to 0 in IE6 (I have not checked in IE7) does not work!!!
Please check the HTML below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
<style>
#box {
width: 0px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box"><span>hello</span></div>
<script>
$("#box").width(0);
</script>
</body>
</html>
The width of the div stuck to the minimum content width of the div.
Regards,
Munim
Use overflow:hidden if you need the contents to be cut off. Without it, the layout will consider the size of the box to be 0, but the content that doesn't fit will extend outside of its container.
If you want width and height to be 0, then display:none is the usual way to totally hide it.
The actual div does have a width of 0 (you can tell if you put a border around it). If you need the text inside the div to be hidden, but not the other element, I would suggest adding the following css:
#box span {
display: none;
}
As I pointed out in the other answer, stuff that doesn't fit in the box will overflow the fixed size unless you hide it. If you can't use overflow:hidden then positioning is another way to do it:
<style>
#box {
position: relative;
width: 0; }
}
#box span {
position: absolute;
left: -20px;
}
</style>
<div id="box"><span>hello</span></div>
Any element that's positioned using position:absolute is taken out of the document flow and will not affect other elements, including the size of the container, which you can then size to the dimensions you need.
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).