I want my website to scale a <div> based on the resolution of the screen on which it's viewed.
I'm currently using this code in a function which runs as the body loads (gameCanvas is the <div> I'm talking about):
var WIDTH = window.screen.availWidth/2,
HEIGHT = window.screen.availHeight/2;
var c = document.getElementById("gameCanvas");
c.setAttribute("style","width:"+WIDTH+"px;height:"+HEIGHT+"px");
c.style.width=WIDTH;
c.style.height=HEIGHT;
It does the job, but it also overwrites my CSS stylesheet and it forces me to put all the styling information in the javascript instead of separating the style from the logic.
Is there a way to dynamically determinate those parameters in the CSS, or to just change those two parameters without overriding the whole stylesheet? I've already tried
c.setAttribute("height", HEIGHT);
c.setAttribute("width", WIDTH);
but it does nothing since they're not attribute by themselves.
EDIT:
My stylesheet (for now it's embedded in the index.html but it's already in the CSS form):
<style>
body {
background-color: black;
}
#gameCanvas {
background-color: black;
width: 800px;
height: 600px;
margin: auto;
align: center;
}
#scoreboard {
text-align: center;
font-family: Segoe UI, Helvetica, Ubuntu, sans-serif;
color: white;
}
#scores {
font-size:600%;
padding:0;
margin:0;
color: white;
}
#title {
background-color: white;
color: black;
}
</style>
Using JavaScript is one option. As an alternative I'll offer 2 CSS-only solutions. There are 2 solutions that come to mind first.
Option #1
The first is pretty standard - set the height and width to 100%. The caveat here is every parent parent container needs it's height and width set to 100% too. Like this:
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
main {
width: 100%;
height: 100%;
}
#gameCanvas {
background-color: red;
width: 100%;
height: 100%;
}
<main>
<div id="gameCanvas"></div>
</main>
Option #2
The more elegant solution would be to use vw and vh units. vw and vh units are equal to 1% viewport width and height respectively. So 1vw would be 1% of the viewport width. To make an element full-screen you can set the width and height to 100vw and 100vh respectively. Like this:
html,
body {
margin: 0;
padding: 0;
}
#gameCanvas {
background-color: red;
width: 100vw;
height: 100vh;
}
<main><div id="gameCanvas"></div></main>
Related
TL;DR: How to keep the div children proportional to the div itself?
I have a div, containing various elements like text, images, icons etc. It keeps 16:9 aspect ratio and fills as much viewport it can, while resizing the browser window, the div (with background different from the body background) changes size well, though the contents are staying the same size which is bad because I'm trying to make a presentation website which needs to look the same at various resolutions. How do I make the child elements align and resize properly inside the div?
I tried using viewport units though it didn't turn out really well.
My Code:
I tried using % units to set font size and then use em to scale other things but it didn't work. I also tried using only % units to set all properties but it did not work either
body {
background: black;
user-select: none;
margin: 0;
height: 100vh;
}
.container2 {
overflow: auto;
box-sizing: border-box;
resize: both;
overflow: auto;
max-width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.presentation-place {
user-select: none;
background: white;
top: 50%;
transform: translate(0, -50%);
position: absolute;
align-items: center;
aspect-ratio: 16 / 9;
}
#media screen and (max-aspect-ratio: 16 / 9) {
.presentation-place {
width: 100vw;
}
}
#media screen and (min-aspect-ratio: 16 / 9) {
.presentation-place {
height: 100vh;
}
}
.slide {
font-size: 100%;
position: absolute;
top: 0;
bottom: 0;
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
background: red;
background-position: center center;
}
.title1 {
margin-left: 1em;
font-size: 6em;
position: absolute;
margin-top: 2em;
}
<html>
<body>
<div class="container">
<div class="presentation-place">
<div class="slide s1">
<h1 class="title1">test</h1>
</div>
</div>
</div>
</body>
</html>
Make sure to avoid specific units like cm, px etc because those are fixed units no matter the scale of the site itself or the monitor, the use of Units like % since vh/vw didnt work. % scales relative to the size of the monitor or website, so this should help. Alternativly you could use aspect-ratio because it scales relative to the size of the parent element
I need to set text over image. The size of the image\div containing the image is fixed. I got some input above the image that the user insert some text.
the text is injected via props to the "image component" and then i need to display it over the image. the trick is that the text have fixed place to be. at the bottom of the image. the text should not overflow the image borders of course and need to span at the maximum. I mean that if the text is "short" (low amount of characters) the font size should increase and vice versa using java script function.
the problem with my function its not "flexible" enough, the ratio between the font size and the text length is too "hard coded" with fixed values that changed the desired result.
<template>
<div class="img-container z-depth-4">
<img class="img-to-edit" :src="this.urlChanges">
<p class="text-append">{{textToAppend}}</p>
</div>
</template>
<script>
export default{
props: ['urlChanges', 'textToAppend'],
data () {
return {
limit: 25,
font: 35,
offset: 0
}
},
mounted() {
let self = this
$( document ).ready(function() {
//that's an input from the parent component
$('#textarea1').on('keypress', function(e) {
let that = $(this);
let textLength = that.val().length;
if(textLength+self.offset > self.limit) {
$('.text-append').css('font-size', self.font + 'px');
self.font -= 5;
self.offset -=5;
}
});
});
},
}
</script>
and the style
<style scoped>
.img-container {
width: 800px;
height: 430px;
overflow: hidden;
background: #ccc;
margin: 10px;
line-height: 150px;
position: relative;
text-align: center;
color: white;
}
.img-to-edit {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
.text-append{
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
</style>
im not sure about my css definition.
You can use the vh or vw for font size the ratio will remain the same for almost very resolution
font-size: 5vh
or
font-size: 10vw
So i have a div with a background image and i would like to make the div same size as the background image when i resize the window, so i can place some text in the center of it and i want to image to be responsive and so the div also.
my html for the image and text:
<div id="headerimg" class="header">
<h1>Welcome to my website</h1>
</div>
and my cc for it so far:
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: cover;
width:100%;
}
.header{
height: 700px;
width: 100%;
margin: auto;
padding: 20%;
color: white;
text-align: center;
font-size: 50px;
}
i am just using a random image from google atm, ill replace later; but anyway.. how can i get the height to align whenever? Jquery maybe? -but im not realy familiar with jquery much...and yes, i want the div to be full width of the site all the time.
Would something like the following work for you:
https://jsfiddle.net/44k0320v/
I've updated your header width to use 50vw units, your example image has an aspect ratio of arount 2:1 meaning that if you want the div to maintain the correct height you need to set the height to be half of the viewport width (the measurement across the width of the screen is 100vw).
I have also updated the background image to have a size of 100% rather than cover so it's width will scale with the div.
I've also updated the font size to also use vw units.
New css below:
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: 100%;
}
.header{
box-sizing: border-box;
height: 50vw;
width: 100%;
margin: auto;
padding: 10% 20%;
color: white;
text-align: center;
font-size: 3.5vw;
}
A similar solution to jazibobs, also using the vw height but with more "flowy" text. Currently the background will respond to pretty much any width however at narrow widths it doesn't really make much sense with the text. For this you could use media queries to possibly even hide the background at smaller widths or just set the text smaller.
https://jsfiddle.net/kzhzasot/
#headerimg{
background: url(http://images.huffingtonpost.com/2016-06-25-1466835058-3172856-DKCWebDesignBanner.jpg) no-repeat top center fixed;
background-size: 100% auto;
width: 100%;
height: 100vh;
}
.header{
margin: 0px;
padding: 0;
color: white;
text-align: center;
font-size: 50px;
display: table;
}
h1 {
display: table-cell;
vertical-align: middle;
}
I want to make the div 30% of the height of the window and then on click make it 90%. The thing is I'm only being allowed to specify widths in percentages but with height it breaks unless its px. Any thoughts? Here's a link:
http://codepen.io/chris86/pen/avvWwJ
Here's the html:
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<div id="button" class="banner" value="Switch Class"></div>
Here's the CSS:
.banner {
background-color: #c3c3c3;
height: 100px;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 200px;
width: 80%;
padding: 0;
margin:0 auto;
}
And the jQuery:
$(function() {
$('#button').click(function(){
$(".banner").switchClass("banner","bannerbig",'fast');
$(".bannerbig").switchClass("bannerbig","banner",'fast');
return false;
});
});
The reason your code breaks is because using percentage as the value for height or width is dependent on the height of the parent. As far as the DOM is concerned, the only element that has absolute height / width by default is the document object.
So, you have to specify the first DOM elements which don't have absolute height by default as a percentage of the document's height, like so:
html, body {
height: 100%;
}
Then use the appropriate percentage heights for your .banner and .bannerbig classes in CSS:
.banner {
background-color: #c3c3c3;
height: 30%;
width: 50%;
padding: 0;
margin:0 auto;
}
.bannerbig {
background-color: #000000;
height: 90%;
width: 80%;
padding: 0;
margin:0 auto;
}
Hope this helps.
I want my page to be displayed in full without the need (or ability) to scroll down. I want to have a footer that will display at the bottom of the screen. I've found so many answers on here and Google that will probably work, but I am a noob and can't make too much sense of them or how to apply the information to my code.
here is my STYLE code:
<style>
#font-face {
font-family: 'gooddogregular';
src: url(GoodDog.otf)
}
html {
text-align: center;
font-family: sans-serif;
}
body {
width: 100%;
height: 50%;
margin: 0 auto 0 auto;
text-align: left;
background-image: url("border.png");
background-repeat: no-repeat;
background-size:cover;
}
header {
width: 100%;
display: table;
}
nav {
width: 950px;
border: 2px;
}
article {
width: 700px;
display: table;
font-family: gooddogregular;
}
h1 {
font-family: gooddogregular;
font-size: 50px;
}
</style>
My body tag is just a body tag, nothing added to it or anything. Essentially I want the page to not scroll, and all content just rest in the middle (or middle left and middle right).
Maybe a better question would be how do I position elements such as footer, images, articles etc with precision? Anyway to use coordinates that are not based on pixel, such as percent?
I tried adding height: to my body style, but no matter what I set the height, it has zero effect.
If you want nothing to happen when you scroll, position the elements with fixed positions like this:
position: fixed;
bottom: 0px;
left: 10%;
When you scroll, fixed position elements do not move.
To disable scrolling altogether, use this CSS:
body, html {
height:100%;
}
body {
overflow:hidden;
}