TV shows slides, that holds HTML inside. TV's resolution is FullHD (1920x1080).
When editing the slide I want to able to know, how slide will exactly be shown on TV. Although I have a FullHD monitor, I've never worked in the browser in fullscreen mode. Other people, which potentially be working with slides, want to see slides as is too.
Using another word, I need to render 1920x1080 div, then proportionally scale it to fit client's browser. How can be this done using CSS or JS, or jQuery?
Edit: I do NOT need to proportional manipulate the image. I need to see how page will look on FullHD resolution regardless of client's viewport resolution
UPDATED!! Here is the demo: https://jsfiddle.net/8jxk0atm/4/
Old resize 1920x1080 aspect ratio demo: https://jsfiddle.net/8jxk0atm/2/
You can create the div spec with 1920x1080. And put this
// screen zoom out for checking
document.body.style.zoom="40%"
on top of your js code.
It will zoom out your document so you can see what it will look on 1920x1080 div.
HTML
<div id="fullscreen"></div>
CSS
html,
body {
margin: 0;
padding: 0;
}
#fullscreen {
width: 1920px;
height: 1080px;
background: green;
color: #fff;
}
JS
// screen zoom out for checking
document.body.style.zoom="40%"
makeFullHD();
function makeFullHD() {
var value = $(window).outerWidth();
value *= 1;
var valueHeight = Math.round((value / 16) * 9);
$('#vidHeight').text(valueHeight);
$('#videoBox').css('width', value + 'px').css('height', valueHeight + 'px');
$('#videoPlayer').css('width', value + 'px');
$('#fullscreen').css({
width: value,
height: valueHeight
});
// test
$('#fullscreen').text('Width:' + value + '\n' + 'Height:' + valueHeight);
}
$(window).resize(function() {
makeFullHD();
});
Related
I have a background image and I have other images that need to stay at the bottom of the background image, even if the window resizes or there is a different screen size.
This is a ReactJS web app so any javascript or CSS will work.
CSS:
html {
background: url(imageInMemory.png) no-repeat center center fixed;
background-size: contain;
}
Javascript:
// I calculate the ratio for 'background-size: contain'
let A = window.innerWidth;
let B = window.innerHeight;
let W = naturalWidth; // Width of image, I have this hardcoded
let H = naturalHeight; // Height of image, I have this hardcoded
const ratio = Math.min((A/W), (B/H));// this is the ratio to which the image was scaled given the current window size.
// I position images on top of background images where they should be using this new ratio
<div style={{marginTop: ratio * H * .7}}>
<img src='otherImage'/>
</div>
This works on some window sizes, but sometimes the images will not be on top of the right area of the background Image.
I did a responsive layout for one image behind and a floating form resizing and repositioning all fields and texts.
I will not put all my code here, then i said to you create your own code inside a function named like "update_field_positions" running in events window resize and load.
For screens with more than 608px the height of my image is 882px
Then i define the reason of proportion: img_cadastro.clientHeight / 882
And use this value for resize and reposition all the items
I used css too:
#media screen and (max-width:608px) {
.img_cadastro {
width:100%;
height:auto;
}
and
#media screen and (min-width:608px) {
.img_cadastro {
width:608px;
height:882px;
}
A little piece of my working js code:
function update_field_positions() {
.... (some code) ....
var razao = img_cadastro.clientHeight / 882;
bloco_campos_ext.style.top = ((258 * razao) + compensador) + "px";
div_voucher.style.marginTop = ((57 * razao) + compensador_voucher) + "px";
div_voucher.style.marginLeft = ((120 * razao) + compensador) + "px";
nome_voucher.style.fontSize = (24 * razao) + "px";
cod_voucher.style.fontSize = (28 * razao) + "px";
resize_object(bloco_campos_ext, 357, 148, razao, false);
resize_object(bloco_campos_int, 357, 148, razao, false);
}
Use this css to your div:
position:fixed;
bottom:0;
For a responsive screen working when the windows is resized
Your codes of getting ratio and repositioning should be inside a function, you could create a function named update_field_positions for example: update_field_positions()
then your function must be called in 2 events, onload and window.resize
example:
function start() {
update_field_positions();
window.onresize = update_field_positions;
}
<body onLoad="start()">
Tou should use onload, for wait objects become ready before working with them to avoid errors and window.onresize to update values with a new window.innerWidth
The other problem is that the window can be resized to a smaller size than your image
And then you have to create some code to handle these situations:
if (window.innerWidth < naturalWidth) {...}
I find myself struggling to understand why my approach at recalculating width of an element on resize and seeing the result doesn't work.
Scenario:
I have a flex layout, with 3 unequally wide containers divided into 3/7, 1/7 and 3/7 of the width of the page. I use width: calc(100%/7) or width: calc(100%/7*3) to let the browser calculate the relation of these containers.
I am aware of the issue that Chrome rounds the calculated values down in case there is an inaccuracy when calculating the relation. This is visible when resizing the browser window as a subpixel-wide white stripe, where the background shines through between the containers on certain widths. Note: this problem does not happen in Firefox, they seem to round these values differently (?).
What I tried:
I used jQuery and parseFloat(document.getComputedStyle(element).width) to get the values of the containers and calculate the difference in order to "stretch" the middle container to fill in the gap:
jQuery(window).on('resize', function () {
var mainSite = document.getElementsByClassName('site-main')[0];
var leftStart = document.getElementsByClassName('page-trigger left')[0];
var middleStart = document.getElementsByClassName('page-trigger middle')[0];
var rightStart = document.getElementsByClassName('page-trigger right')[0];
var mainSiteWidth = parseFloat(window.getComputedStyle(mainSite).width);
var leftStartWidth = parseFloat(window.getComputedStyle(leftStart).width);
var middleStartWidth = parseFloat(window.getComputedStyle(middleStart).width);
var rightStartWidth = parseFloat(window.getComputedStyle(rightStart).width);
console.log(mainSiteWidth);
console.log(leftStartWidth);
console.log(middleStartWidth);
console.log(rightStartWidth);
var calculatedElementWidth = leftStartWidth + middleStartWidth + rightStartWidth
if (mainSiteWidth > calculatedElementWidth){
var diff = mainSiteWidth - calculatedElementWidth;
var newMiddleWidth = middleStartWidth + diff;
console.log("diff: " + diff);
console.log("new middle width: " + newMiddleWidth);
jQuery(middleStart).css({
flex : "0 0 " + newMiddleWidth + "px",
width: newMiddleWidth + "px",
minWidth: newMiddleWidth + "px",
maxWidth: newMiddleWidth + "px"
});
console.log(parseFloat(window.getComputedStyle(middleStart).width));
}
}).resize();
So far, the values get correctly calculated and even applied to the middleStart element, at least in the DOM inspector, however, the gap is still there, even though the css values indicate, it should have changed.
These were the css settings before the jquery modifications:
flex: 0 0 calc(100%/7); --> translates to 273.562px, Chrome shows as 273.56px
width: calc(100%/7); --> translates to 273.562px, Chrome shows as 273.56px
min-width: calc(100%/7); --> translates to 273.562px, Chrome shows as 273.56px
max-width: calc(100%/7); --> translates to 273.562px, Chrome shows as 273.56px
These are the values in the DOM inspector after that:
flex: 0 0 273.594px;
width: 273.594px;
min-width: 273.594px;
max-width: 273.594px;
I tried to create a jsfiddle but I couldn't reproduce that issue there, since my layout is more complex and has more layers.
Does anybody have an idea, why the css settings, though being applied to the element in the DOM, are not visible?
EDIT: this is what happens, try to resize the browser window horizontally (please ignore the occasional jump of the right element, I had to use float:left; to make it reproducable and it only happens in Chrome: jsfiddle
I have long titles that sometimes slightly overflow the window on small screens, so I made a script that reduces the font-size of the title until it fits its container only when the title overflows its container… It works but I'm sure a lighter solution could be found.
function adaptFontSize(titles) {
$(titles).each(function() {
var title = $(this),
reducedFontSize,
counter = 0;
if (title[0].scrollWidth <= title.innerWidth()) { // if title <= container
title.css('font-size', ''); // remove previously added font-size
}
while (title[0].scrollWidth > title.innerWidth() && counter < 20) { // while title > container
var fontSize = reducedFontSize || parseInt(title.css('font-size')); // current title font-size
reducedFontSize = Math.floor((fontSize - fontSize / 20) * 100) / 100; // reduce the font-size
title.css('font-size', reducedFontSize + 'px'); // apply the reduced font-size
counter++ // counter to limit the loop in case title[0].scrollWidth is not supported
}
});
}
or here's a JSFiddle: https://jsfiddle.net/Raoulito/pek7b3mr/12/
My problem comes when I try to apply the script on $(window).resize(). It actually works but I can feel that the process is heavy. It has to work in both ways:
reduce the font-size if the title's too wide,
increase the font-size when the window gets resized wider, until the title reaches its original font-size.
Here are some of steps I tried but did not manage to achieve:
that it does not fire the function all the way through at each pixel the window is resized, but rather wait until it stops resizing.
when the window gets resized wider, only target—among the titles which are smaller than the window—the ones that have already been resized and might need to get bigger again.
So I'm looking for a way to fix these, or alternatively for a way of reaching this in a much more efficient way.
You can use the VW unit.
1vw equals 1% of the view width, so it's a simple css only solution which works in all modern browsers.
https://jsfiddle.net/pek7b3mr/8/
body {
margin: 1em;
font-family: sans-serif;
}
div {
background-color: yellow;
font-size: 5vw;
margin-bottom: 1rem;
}
<div>ABCDEFGHIJKLMNOPQRSTUVWXYZ 012356789</div>
This question is very similar with other.
The only difference (and for me is a huge difference because I cannot figure it out) is the value of the CSS value increment.
I have an element on the page with negative margin and in the other question I wanted it to increment by 1 pixel each time the screen was larger by 1 pixel, starting on 1400px wide upwards.
.element {
margin-left: -195px;
}
So, if the window size was 1440px wide the margin-left of the element should be -195px, if the window size was 1441px wide the margin-left of the element should be -194px or if the window size was 1451px wide the margin-left of the element should be -184px and so on.
The answers were awesome and I got it resolved (with CSS or javaScript).
.........................
However now that is implemented I noticed that instead of 1 pixel the element's margin needs only 0.1 pixels of increment:
So:
if window size is 1440px wide the margin-left of the element should be -195px.
If the window size is 1441px wide the margin-left of the element should be -194.9px
or if the window size is 1452px wide the margin-left of the element should be -193.8px and so on.
Starting at 1400px wide upwards.
I am aware that the questions are very similar. However I feel this one is a different level somehow.
IMPORTANT NOTE: What I want is a dynamic value for the margin-left that increases based on screen size and not a kind of media query which would make the value always remain the same between an interval of screen sizes. What I want would force me to add a massive number of media queries.
Is this possible with javaScript or jQuery? (or even CSS?)
CSS version:
#media screen and (min-width: 1440px) {
.element {
margin-left: calc(-195px + (100vw - 1440px) * 0.1);
}
}
JS version:
var element = $('.element'), windowWidth, x;
$(window).resize(function () {
if ($(window).width() > 1440) {
windowWidth = $(window).width();
x = (windowWidth - 1440) * 0.1;
element.css('margin-left', -195 + x);
} else {
element.css('margin-left', -195)
}
});
$(window).trigger('resize');
CODEPEN EXAMPLE (CSS)
CODEPEN EXAMPLE (JS)
This code can work, but I don't think that this is the best way to do it ...
var elements = document.getElementsByTagName('element');
window.onresize = function(){
if (window.innerWidth >= 1400) {
var margin, i;
margin = -195 - (0.1*(window.innerWidth - 1400));
for (i=0; i < elements.length; i++) {
elements[i].style.marginLeft = margin + "px";
}
}
}
I have a large banner that contains a slider on my site, the position is absolute, because the banner is so wide when I look at it on smaller screens , all you can see is the left side of it.
I was originally using media screen only to adjust for mobile and various screen sizes, I would basically apply a different left negative left position for every size but this seems inefficient and also it doesnt seem to work perfeclty as I need to take into account every possible size for it to be neat.
Then I thought about javascript, but unfortunately I dont know much of it at all. Im wondering is there is a simple bit of code that I could apply to a div in js that changes its left position automatically based on screen size.
Or even any suggestions based on media screen only would be great thanks. My big issue with that is not knowing what left position I should apply to what resolution.
If you need more info let me know. Thank you
Adrian
I wrote an article a while ago with some useful snippets, this is one of them:
This utility is a simple approach to set width breakpoints when
working on responsive designs. It's a quick way to relate CSS media
queries in your JavaScript code as you go.
function isBreakPoint(bp) {
// The breakpoints that you set in your css
var bps = [320, 480, 768, 1024];
var w = $(window).width(); // or window.innerWidth with plain JS
var min, max;
for (var i = 0, l = bps.length; i < l; i++) {
if (bps[i] === bp) {
min = bps[i-1] || 0;
max = bps[i];
break;
}
}
return w > min && w <= max;
}
Then in your script:
if ( isBreakPoint(320) ) {
// breakpoint at 320 or less
}
if ( isBreakPoint(480) ) {
// breakpoint between 320 and 480
}
I'm not sure why you need to absolutely position a banner, but assuming you need to, if the banner is an image and resizable you can use method 1.
If it has to be in its original pixel-perfect size, use method 2 to center it in the screen.
method 1
#banner {
/* Your normal banner code */
position: absolute;
/* positioning etc. */
}
#media (max-width: {banner-size}px) {
#banner {
position: absolute;
top: 0;
left: 0;
right: 0;
}
}
method 2
#banner {
position: absolute;
top: 20px; /* anything you want */
left: 50%; /* you can adjust to off-center */
margin-left: -{width/2}px;
}