Develop Reference

Javascript function not giving expected results for image

This code when run should resize the height and width that a image to fit the container.
This is the output from the code(from alerts):
2488: Images natural height
3264: Images natural width
450: The containers height
1063: The containers width
612: New height
844: New width
4: The number of times it was divided to get to output
**It should divide it 6 times to provide the outcome of:
New width: 544
New height: 414
**
I am almost certain that the problem is in the Java Script:
function resize(iid, eid) {
//Get the ID of the elements (ele being the container that the image is in and img being the image its self)
var img = document.getElementById('img');
var ele = document.getElementById('contaner');
//makes the var needed
var currentwidth = ele.clientWidth;
var currentheight = ele.clientHeight;
var naturalheight = img.naturalHeight;
var naturalwidth = img.naturalWidth;
var newheight = naturalheight;
var newwidth = naturalwidth;
var x = 0;
//runs a loop that should size the image
while (newheight > currentheight && newwidth > currentwidth){
x = x + 1;
newheight = naturalheight / x;
newwidth = naturalwidth / x;
}
newheight = Math.ceil(newheight);
newwidth = Math.ceil(newwidth);
//alerts out the answers
alert(naturalheight);
alert(naturalwidth);
alert(currentheight);
alert(currentwidth);
alert(newheight);
alert(newwidth);
alert(x);
}
#contaner {
height: 450px;
width: 90%;
margin: 5% auto;
position: relative;
}
#img {
height: 450px;
width: 90%;
}
<div id="contaner">
<img src = "..\..\Resorces\Images\SlideShow\img1.jpg" style="width:652px;height:489px;" id="img"/>
<div id="left_holder"><img onClick="slide(-1)" src="..\..\Resorces\Images\arrow_left.png" class="left"/></div>
<div id="right_holder"><img onClick="slide(+1)" src="..\..\Resorces\Images\arrow_right.png" class="right"/></div>
</div>

The problem is this line:
while (newheight > currentheight && newwidth > currentwidth)
It's stopping as soon as either width or height fits within the container, where as it seems like you want both to fit within the bounds of the container. Change to || and you'll get six iterations:
while (newheight > currentheight || newwidth > currentwidth)

Fading blocks animation fullscreen

I'm trying to make a slider with fading blocks animation, just like here. Trouble is that in my case I'm trying to do it fullscreen, meaning that height and width will be variable. This means that the background-position trick won't work, as it won't resize the background to fit the screen but rather take it 'as is'. It's easier to see here (keep in mind that #slides would be height 100% and width 100% aswell as .slide>img). I've ran out of ideas to fix it, any help would be appreciated. I'd prefer not using jQuery, but if it is necessary, it'll be okay.
Thank you beforehand.
My script so far is:
function animateBlocks(x,y,speed) {
var width = document.getElementById('slides').offsetWidth;
var height = document.getElementById('slides').offsetHeight;
var newWidth = width/x;
var newHeight = height/y;
for (var i = 0; i<(x*y); i++) {
var newDiv = document.createElement("div");
document.getElementsByClassName('active-slide')[0].appendChild(newDiv);
newDiv.className = "slide-block";
newDiv.style.width = newWidth + 'px';
newDiv.style.height = newHeight + 'px';
newDiv.style.backgroundImage = 'url("' + document.getElementsByClassName('active-slide')[0].firstElementChild.src + '")';
newDiv.style.backgroundPosition = ('-' + newDiv.offsetLeft + 'px ' + '-' + newDiv.offsetTop + 'px');
if (i == x*y-1) {
document.getElementsByClassName('active-slide')[0].firstElementChild.style.display = 'none';
}
}
}

After the feedback of the comments, the issue may happen when there's float on window's width. So use document.documentElement.getBoundingClientRect(); to get a precise size, and round down, which may sacrifice some pixels, to ensure that blocks won't overflow to next row. jsfiddle
function animateBlocks(x,y,speed) {
var img = document.querySelector('#slides img');
var viewPortSize = document.documentElement.getBoundingClientRect();
// Round down if there's floating points on width.
var windowWidth = Math.floor(viewPortSize.width);
var windowHeight = window.innerHeight;
var newWidth = windowWidth / x;
var newHeight = windowHeight / y;
var newDiv;
var domFrag = document.createDocumentFragment();
var i, j;
for (i = 0; i < y; i +=1) {
for (j = 0; j < x; j += 1) {
newDiv = document.createElement("div");
domFrag.appendChild(newDiv);
newDiv.className = "slide-block";
newDiv.style.width = newWidth + 'px';
newDiv.style.height = newHeight + 'px';
newDiv.style.backgroundImage = 'url("' + document.getElementsByClassName('active-slide')[0].firstElementChild.src + '")';
newDiv.style.backgroundSize = windowWidth + 'px ' + windowHeight + 'px';
newDiv.style.backgroundPosition = ('-' + newWidth*j + 'px ' + '-' + newHeight*i + 'px');
}
}
for (var i = 0; i<(x*y); i++) {
}
document.getElementsByClassName('active-slide')[0].appendChild(domFrag);
document.getElementsByClassName('active-slide')[0].firstElementChild.style.display = 'none';
}
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden; /* makes the scroll bar disappear. */
}
#slides {
position: relative;
height: 100px;
margin: 0px;
padding: 0px;
}
.slide {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: none;
}
.slide>img {
position: absolute;
left: 0;
top: 0;
height: 100px;
}
.active-slide {
display: block;
}
.slide-block {
float: left;
}
<button onclick="animateBlocks(5,5,0)">Click here to see how it looks</button>
<ul id="slides">
<li class="slide active-slide">
<img src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg">
</li>
</ul>
<br><br><br><br><br><br>
<p>How it should look</p>
<img style="height: 100px;" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg">

Image Resize NaN Error

I am getting NaN back from one of my functions. After doing the research I found out the answer was not a number but I figured that it must be imposable. I am only working with numbers and I am rounding the answer.
function resize(iid, eid) {
//Get the ID of the elements (ele being the container that the image is in and img being the image its self)
var img = document.getElementById('img');
var ele = document.getElementById('contaner');
//makes the var needed
var currentwidth = ele.clientWidth;
var currentheight = ele.clientHeight;
var naturalwidth = img.naturalHeight;
var naturalheight = img.naturalWidth;
var newheight = naturalheight;
var newwidth = naturalwidth;
var x;
//runs a loop that should size the image
while (newheight > currentheight && newwidth > currentwidth){
x = x + 1;
newheight = naturalheight / x;
newwidth = naturalwidth / x;
}
newheight = Math.round(newheight);
newwidth = Math.round(newwidth);
//alerts out the answers
alert(newheight);
alert(newwidth)
}
#contaner {
height: 450px;
width: 90%;
margin: 5% auto;
position: relative;
}
#img {
height: 450px;
width: 90%;
}
<div id="contaner">
<img src = "..\..\Resorces\Images\SlideShow\img1.jpg" style="width:652px;height:489px;" id="img"/>
<div id="left_holder"><img onClick="slide(-1)" src="..\..\Resorces\Images\arrow_left.png" class="left"/></div>
<div id="right_holder"><img onClick="slide(+1)" src="..\..\Resorces\Images\arrow_right.png" class="right"/></div>
</div>

You have:
var x;
And then when you do:
x = x + 1;
x is undefined it get cast to string and then concatenated with the 1. So:
x = 'undefined1';
When x is used on a division it returns NaN.
Solution: Change x declaration:
var x = 0;

NaN is due by this line of code:
var x;
while (newheight > currentheight && newwidth > currentwidth) {
x = x + 1; //<- Here x is undefined
}

centering the full page background image in javascript

I am using the code from this link http://css-tricks.com/perfect-full-page-background-image/
<script>
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
$bg.style.marginTop = (-theWindow.height() / 2) + 'px';
       $bg.style.marginLeft = (-theWindow.width() / 2) + 'px';
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>
<style>
#bg { position: fixed; top: 0; left: 0; z-index:-2;}
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
</style>
<body>
<div id="caseStudies">
<img src="images/caseStudy01.jpg" alt="Case Study 1" id="bg">
</div>
</body>
but I want to center the background image. I have tried to this by using the following code:
$bg.style.marginTop = (-theWindow.height() / 2) + 'px';
$bg.style.marginLeft = (-theWindow.width() / 2) + 'px';
which isn't working. Am I referencing the correct values?

I think you should try with this:
$bg.style.marginTop = ($bg.height()/2-theWindow.height() / 2) + 'px';
$bg.style.marginLeft = ($bg.width()/2-theWindow.width() / 2) + 'px';

How do I make text resizable to browser?

So I want to make the word "WIDTH" resize according to the width of the browser. Right now, only the box around the word resizes, but I want the word to resize as well. I feel like there's something wrong with my calculations.
<!DOCTYPE html>
<html>
<head>
<style>
#header{
margin: 0px;
font-size: 200px;
display:inline;
padding:0px;
position:absolute;
white-space:nowrap;
overflow:hidden;
border:thin solid black;
height:800px;
}
</style>
</head>
<body style="padding:0px;">
<div id="header"> WIDTH </div>
<script>
var text_div = document.getElementById("header");
var size = function (){
var winW = window.innerWidth;
var winH = window.innerHeight;
var win_ratio = winW/winH;
var offset_width = text_div.offsetParent.clientWidth;
var offset_height = text_div.clientHeight;
var offset_ratio = offset_width / offset_height;
text_div.style.width = offset_width + "px";
document.title = winW + ":" + offset_height;
text_div.style.fontSize=String(parseInt(winW/offset_ratio)) + "px";
}
window.onresize=function() {size();}
//size();
</script>
</body>
</html>

If you wrap your text in a span, you can get the text's offsetWidth
<div id="header"><span>WIDTH</span></div>
The div's width is fixed with left: 0px and right: 0px
#header {
position: absolute;
left: 0px;
right: 0px;
border: 1px solid black;
}
and the font-size is then adjusted dynamically. The for is there to prevent an endless loop
var epsilon = 5;
var div = document.getElementById('header');
var span = div.childNodes[0];
function size() {
var dw = div.offsetWidth;
var fs = 200;
span.style.fontSize = fs + 'px';
var cw = span.offsetWidth;
for (var i = 0; i < 10 && Math.abs(cw - dw) > epsilon; ++i) {
fs *= dw / cw;
span.style.fontSize = fs + 'px';
cw = span.offsetWidth;
}
}
window.onresize = size;
size();
JSFiddle

I'm not sure why you were using all the ratio stuff. Here's a simple example based on width alone.
http://jsfiddle.net/tHBpJ/3
var text_div = document.getElementById("header");
var initWinW = window.innerWidth;
var initFontSize = 40;
var size = function () {
var winW = window.innerWidth;
var textFactor = winW / initWinW
text_div.style.fontSize = initFontSize * textFactor + "px";
}
window.onresize = function () {
size();
}

I've used the jquery plugin fittext.js for this kind of thing in the past, and its worked quite nicely.