Javascript woes

Dev Zone Web Development
1

I'm very new with JS however I have a fairly basic yet sound understanding of HTML and CSS. I've been working on a joke website of sorts and I want to stretch a picture to fill the entire web browser based on how large the browser window is, my first thought was doing it in JS so I got to work.
So far I have this short bit of code on the JS side of things.

var x = window.innerWidth;
var y = window.innerHeight;
document.getElementById("pic1").height = y;
document.getElementById("pic1").width = x;

I don't have anything in my stylesheet outside of hiding an audio tag and for the HTML side of things I'll only add what's pertinent

...
<img src="images/1.jpg" id="pic1">
...

When I open the page I get an error in my JS console saying "Uncaught TypeError: Cannot set property 'height' of null" on line 3 which to me means that my JS can't find an element with the ID of "pic1" but I obviously have an image with an ID of "pic1" or at least that's what I see.

TL;DR: OP is a dumbass and can't figure out how to resize an image with JS.

2

I left out that the img tag isn't inside of a div if that makes a difference.

3

I wouldn't work directly with document. I would use something like jQuery. Almost all JS is just patching together libraries now anyways.

4

try it like this.

var h = window.innerHeight;
var w = window.innerWidth;
var pic = document.getElementById("pic1");
pic.height = h;
pic.width = w;
5

If you're trying to make an image cover the entire browser window, you can actually do this in CSS. :)

body { background: url(../yourimage.jpg) no-repeat center center; background-size: cover; }

Cover is typically what I use, but it will crop at certain sizes. You can also do 100% 100%, but it will stretch funnily imo.

More info: http://www.w3schools.com/cssref/css3_pr_background-size.asp

6

Given the implementation, I thought the OP wanted the image to change size dynamically instead of just on page load.

7

Sorry for not responding to everyone I've been busy with essays but thanks for all the input I'll try all of these solutions sometime tonight if I can put aside the time and report back on how they worked, again thank you to everyone that contributed.

8

I just tried that and it gives me the same error I think I'll start looking into sgtawesomesauce's suggestion of using JQuery. Also you're correct in your reply to kreestuh I am aiming for a dynamic resizing of the picture.

@kreestuh I think I'll have to settle for this as a quick and dirty solution. I can't believe I had forgotten the background property in CSS.

9

No problem. Perfectly sized background images is a problem we have to solve fairly often for clients but oftentimes there just isn't a perfect option unless you want to spend twice the amount of time (read:cash lol). Background-size:cover and/or 100% will usually get you close enough in most sizes.