Font-size that expands when you resize the window - javascript

How do I make my font in HTML such that when I expand the window, the size of the text expands also. Sort of like setting a percentage for the text that will take on a percentage of the size of the box it is in.
Here is an illustration of what I would like to happen:
#box #text {
font-size: 50%;
}
Now lets say #box is 200px, #text should be 100px.
Obviously I can't just put a fix width for #text because in the site #box will be a dynamic width.

Do it in jquery.
$(window).resize(function(){
$('#box #text').css('font-size',($(window).width()*0.5)+'px');
});

Use the vh (viewport height), vw (viewport width), and/or vm (viewport minimum (smallest of the dimensions)) units in browsers that fully support CSS3, and for other browsers listen for resize and JavaScript such as in Razor Storm's answer.

In browsers that support it, you can use CSS media queries to change your layout depending on the width of the window.

Related

sass: calculation between vh and px

I have a slideshow on my landing screen that I want it to be fullscreen combined with a 70px height nav bar, I am trying to use sass so that I don't have to write javascript code for this, but
.slideshow{height:100vh-70px}
doesn't work. I don't know how sass calculates it, the CSS turns out to be
.slideshow{height:99.27083vh}
I did a quick search against this issue but couldn't find any useful information. So is this doable at all?
And if no, is there anyway to do it without javascript?
Try using CSS calc. It's pretty widely supported.
.slideshow {
height: calc( 100vh - 70px );
}
No, it isn't.
SASS calculations are performed when the SASS is compiled down to CSS.
The height of the viewport isn't known until the page is loaded into the browser. So you can't take that height, convert it to pixels, and do calculations with it.
I think it's just a space issue
just add space before and after the operator and put it between round brackets, it will work.
.slideshow {
height:(100vh - 70px);
}
The height on css it us used like this below:
height: auto|length|%|initial|inherit;
However, each of these should represent by numbers of px or etc. And the description for each value as following:
auto:(default) The browser calculates the height.
length:Defines the height in px, cm, etc.
%:Defines the height in percent of the containing block.
initial:Specifies that the value of the property should be set to the default value.
inherit:Specifies that the value of the property should be inherited from the parent element.
Example to set the height and width for a paragraph is like this:
P {height: 100px;
Width:100px;}

Set the margin-top of a div, relative to screen resolution

I want a div to be positioned below the screen, but when you scroll it to appears. I can do this using margin-top but this requires a specific number whereas I want it to be relative to the screen it is on, so that it appears when you just start to scroll down on all screens.
How can I do this? Thanks.
Use vh:
iewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document. Only Gecko-based browsers are updating the viewport values dynamically, when the size of the viewport is modified (by modifying the size of the window on a desktop computer or by turning the device on a phone or a tablet).
#myEl {
position: absolute;
top: 100vh;
}
Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/length
Demo: http://jsfiddle.net/tusharj/g8pfow8r/
This can be handled using position:fixed and use top instead of margin-top
div {
position:fixed;
top:100px;
}
if you are using jquery, you can use it like that in your javascript, also in window.resize
var windowHeight = window.innerHeight;
$("#box").css('position','absolute');
$("#box").css('top',windowHeight+'px');
viewport values help you define attributes relative to screen size:
margin-top:20vw;
JSFiddle
Take a look here

Am I stuck with forcing fixed image size for image tags?

I have a website that contains a side bar and sometimes an image of a very large size (about 800 pixels wide) but I scripted the code so that if a screen resolution is too small, the image shrinks and scales into the small space perfectly according to multiple browsers I tested the site on. I tested the site with the demo version of sortsite by powermapper at:
http://try.powermapper.com/Demo/
It then goes on to complain that "Omitting IMG WIDTH or HEIGHT attributes means page text jumps about as images load. Usability.gov 14:3"
I understand that and I try to include those attributes, the image does not scale correctly.
This is the CSS I use on the image itself to scale it if I had a monitor with a max screen width of 800 pixels:
#media screen and (max-width: 600px){#X IMG{width: 100%}}
I specify 600px because I reserved 200 pixels for the sidebar.
I don't think javascript will be an answer because during the page load, the image placeholder will jump to the new size, and if I placed the code near the beginning, it will delay the the rest of the page from loading somewhat.
I was also thinking using div tags and setting the background to the image, but the problem there is that users won't be able to save it and the rest of the images on my site are part of a CSS sprite sheet.
I also am looking for a solution that will work with as many web browsers as possible even if javascript is disabled.
Any ideas for an answer?
This rule, while correct, went out the window when responsive design came into being:
Omitting IMG WIDTH or HEIGHT attributes means page text jumps about
as images load. Usability.gov 14:3
If you're always going to be using a given aspect ratio, then you can set up your code as below. If you set your width and height attributes on your img tag and you set max-width: 100% (or similar) in your CSS, as people often do when developing responsive sites, then your text will still jump around when the image loads, because it's initial height will be what you specify in your markup, and then when the image loads, the browser will maintain the aspect ratio required for max-width: 100% to work and end up shrinking the height - so that doesn't really help you adhere to your usability rule either.
.img {
background-size: cover;
background: center no-repeat;
}
.ar {
height:0;
padding: 0 0 56.25% /* 16:9 aspect ratio */
}
<div class="img" style="background-image: url(https://placekitten.com/g/500/500);">
<div class="ar"></div>
</div>
Try setting the width and height and then just adjusting width and height with your media queries (rather than max-width and percent width). You shouldn't encounter any scaling problems then.
#media screen and (max-width: 600px){#X IMG{width: 100%}}
This means that IMG will have full width of it's first parent. That parent might not be X element. Are you sure you want that?
Example:
<div id='X'>
<div><div><div><div>
<img src=''>
</div></div></div></div>
</div>
If you are trying to fix x:y img ratio that put height:auto; after width:100%;
Calculate width or height and always use auto for other property to preserve image scaling.

how to change the font-size proportionally to the change size of the window in CSS3 or javascript

I do some web app and i have some problem with font-size.
How to change the font-size proportionally to the change size of the window in CSS3 or javascript?
The ideal way to do this is using the vw unit, which is defined as 1/100th of the viewport width (hence the name). So, for instance, if you wanted your text to be 4.5% of the browser's width at all times, you could use the size:
font-size: 4.5vw;
… and theoretically, that should work. Unfortunately, you'll find, it doesn't quite work as expected: there's a bug in WebKit browsers (at least) where the value for font size isn't live-updating (although it is for all other dimensions). You need to trigger a repaint in order for the font size to change, which can be done by updating the z-index property from JavaScript:
window.addEventListener('resize', function(){
document.getElementById('myEl').style.zIndex = '1';
}, false);
This may create a little bit of choppiness, but it means you don't have to calculate any actual dimensions in JavaScript, and you don't need to used "stepped" sizes like with media queries.
The ideal way to do so is to combine between the VW font-size and #media queries. Reasons are:
1) em for itself won't rescale by window size
2) vm for itself will be too small for resolutions / screens lower than 800px.
So the right way to achieve this is:
Define a class - prop-text with VM=1.0 for your desired screen width
Add media queries to fit the font-size with your desired lower resolution grids.
For my responsive grid (which sets a 1/2 column to take 100% width below 768px width) it looks like that:
<style>
.prop-text{font-size:1.0vw}
#media (max-width : 768px) {
.prop-text{font-size:2.0vw}
}
/*other media queries here - fit font size to smartphone resolutions */
</style>
<div class="prop-text">your text is here</div>
Set your base font size (the one you define for your body element in css) in px then everywhere in the rest of your page set font sizes relative to that one using emunit, then you can use media queries to change the font sizes of all your pages by just changing your base font, something like this:
body {
font-size: 15px;
}
#media (max-width: 1000px) {
body { font-size: 1.3em; }
}
#media (max-width: 500px) {
body { font-size: 1.1; }
}
You have 3 ways to do it:
Using http://fittextjs.com/, but pages can start to be slower
Using media queries
Using ems
Now, it depends on what you want to be your final result.
I'd go to option no 3.
I think the best way might be vh, beeing that font-size changes the height of the text. Using vh means that the text will always foolow the size of the page, even if the user resizes the page or the screen is small.

Image scaling size dependent on browser size

Using this site as an example : http://www.reebok.com/en-GB/
The header div height adjusts dependent on the size of the browser, and the inner content has 100% height & width.
Is this controlled by javascript of can this be done solely with CSS?
You can only do this with the help of html & css. Write like this:
img{
width:100%;
height:auto;
}
check this http://jsfiddle.net/e8V47/
In your page, it's actually Javascript which is used.
The height of the container is modified inline (the style attribute)
<div class="module module-hero use-full-width displayed" data-module="Hero" style="height: 232px;">
It's however possible to do a similar thing with CSS, using % in height. For example :
.module{
height:40%; // A percentage relative to the parent element
}
the image in your example is adjusting by browser, it's in , if you only set up the width or height, the browser will adjusts another automatically.

Categories