Develop Reference

Render div content in fullhd then proportional scale

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();
});

Increment negative value of property based on window size by less than 1px

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";
}
}
}

Control table width with Jquery issue

I have a question regarding the IE7
I want to make every column of my table has the same width no matter what contents they have
$("table").each(function(){
var column =0;
var totalWidth = $(this).width();
$('tr:nth-child(1) td',this).each(function(){
column ++;
})
var cellWidth = totalWidth / column;
$('td', this).css('width', cellWidth);
})
My codes work perfect on chrome and FF but not IE 7. I am not sure why. Can anyone help me about it? Thanks a lot!

nth-child is CSS3 selector and does not supported by IE 7. Try something else.

Why don't you just put a class on all of your columns and then set it in CSS? That is just a waste of jQuery code.
<td class="col">...</td>
Then...
.col {
width: 50px;
}
Or if you need it to be a certain percent of the page/table...
.col {
width: 20%; /* if 5 columns in the table, make each 20% of table width */
}

Set the table's table-layout to
table-layout:fixed;
and provide a width shouldn't need jquery then

media queries vs javascript for changing div position based on screen size

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;
}

Re-sizing the webpage content

In my project I have a webpage which has 2 div areas right and left. The left div takes almost 60% of the whole page width and the right one takes around 36% of the page. I wanted to resize the both div areas in a proper ratio when I shrink the browser from the right side or left side. The UI is getting generated from Javascript. This is the code.
boardHolderPadding = $board.outerHeight() - $board.height();
$board.height(viewportHeight - siblingsHeight - boardHolderPadding);
this.$('#board .droptarget').setWidthAsRatioOfHeight(this.options.ratio);
$('#sidebar').width($(window).width() - $board.find('#board').width() - 50);
I tried with JQuery resize plugin but couldnt get the proper result I'm looking for. Anyone have suggestion?
Thanks

See jsfiddle example but I think you just need to set your widths as percentages rather than trying to calculate them - note display is set to inline-block
<div>
<div class="small-left-column">this is the left column</div>
<div class="large-right-column">this is the right column</div>
</div>
<style>
.small-left-column {
width: 30%;
background-color: #aeaeae;
display: inline-block;
}
.large-right-column {
width: 60%;
background-color: #aeaeae;
display: inline-block;
}
</style>
So I think for your example your would have something like this
$(document).ready(function () {
$('#sidebar').addClass('small-left-column');
$('#board').addClass('large-right-column');
});

Maybe you're looking for the pure-Javascript version of the above:
$(document).ready(function () {
$('#sidebar').css( {
width: '30%'
backgroundColor: '#aeaeae',
display: 'inline-block'
});
$('#board').css({
width: '60%',
backgroundColor: '#aeaeae',
display: 'inline-block'
});
});

I did it in a different way in Javascript and I hope this will help someone to fix if they come across an issue like that
relativeSize : function(width, height){
var boardWidth = this.$("#board").width(),
boardHeight = this.$("#board").height(),
newcard = this.$("#newCard").width(),
space = width - boardWidth - newcard;
ratio = space / width * 3; //used to increment the ratio with 3 as the ratio is very tiny value, this will help to increase minimizing size
bheight = boardHeight - 25; // used to reduce the height by 25px, u can use any amount to match ur ratio
var relHeight = (space < ratio) ? bheight : height;
return relHeight;
}
Thanks