Setting DIV width and height in JavaScript
I have a div with id=»div_register» . I want to set its width dynamically in JavaScript. I am using this following code:
getElementById('div_register').style.width=500; but this line of code isn’t working. I also tried using the units px like the following, still no luck:
getElementById('div_register').style.width='500px'; getElementById('div_register').style.width='500'; getElementById('div_register').style.width=500px; but none of this code is working for me. I don’t know what’s going wrong. I am using Mozilla Firefox. EDIT
.white_content welcome
Did you check, that div_register is the right id of your element? Maybe give us some html, too. style.width=»500px»; should be right.
i have set document.getElementById(‘div_register’).style.display=’block’, and then set document.getElementById(‘div_regsiter’).style.width=’500px’;
For what its worth, you have typos in the word «document» in lines 3 & 4 of your function. which would most definitely keep it from working.
7 Answers 7
The properties you’re using may not work in Firefox, Chrome, and other non-IE browsers. To make this work in all browsers, I also suggest adding the following:
document.getElementById('div_register').setAttribute("style","width:500px"); For cross-compatibility, you will still need to use the property. Order may also matter. For instance, in my code, when setting style properties with JavaScript, I set the style attribute first, then I set the properties:
document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;"); document.getElementById("mydiv").style.display = "block"; document.getElementById("mydiv").style.cursor = "hand"; Thus, the most cross-browser compatible example for you would be:
document.getElementById('div_register').setAttribute("style","display:block;width:500px"); document.getElementById('div_register').style.width='500px'; I also want to point out that a much easier method of managing styles is to use a CSS class selector and put your styles in external CSS files. Not only will your code be much more maintainable, but you’ll actually make friends with your Web designers!
document.getElementById("div_register").setAttribute("class","wide"); .wide < display:block; width:500px; >.hide < display:none; >.narrow Now, I can easily just add and remove a class attribute, one single property, instead of calling multiple properties. In addition, when your Web designer wants to change the definition of what it means to be wide, he or she does not need to go poking around in your beautifully maintained JavaScript code. Your JavaScript code remains untouched, yet the theme of your application can be easily customized.
This technique follows the rule of separating your content (HTML) from your behavior (JavaScript), and your presentation (CSS).
Setting size to be the same as window?
I’m trying to use jQuery to set the height of a div so that it takes up the entire window + the height of a header (so that you can scroll the header off the page) but no more than that. I would think the height of the div would be the height of the window + the height of the header I’m trying to hide. When I set the div to window height, however, it creates overflow. Here’s the rough code:
var $body = $("#body"), $container = $("#container"), $window = $(window), $content = $("#mainContent"), $header = $("#header"), bodyHeight = window.innerHeight + $header.height(); $body.css("height", window.innerHeight); $container.css("height", bodyHeight);div < display: block; width: 100%; margin: 0; >#body < overflow-y: scroll; >#container < overflow-y: hidden; >#header < overflow: hidden; >#navbar < height: 10px; background-color: brown; >#mainContent < height: 200px; overflow-y: scroll; >#contentP
Why is there overflow if the div is sized to fit in the window? EDIT: So far, answers haven’t helped. This is the site I’m working on. It’s joomla. I want the nav bar to lock at the top of the screen.
$(document).ready(function() < //Declare some variables var $window = $(window), $body = $(".body"), $mainContent = $("#maincontent"), headerGap = parseFloat($("#headerimg").css("margin-top")), headerHeight = headerGap + $("#header").height() + parseFloat($("#navbar").css("margin-top")), navbarHeight = $("#navbar").height(), footerHeight = $("#footer").height(); //set the height of the body and the maincontent resizePage(); //Set the listeners for resizing and scrolling $window.resize(resizePage); $window.scroll(scrollHandler); //When you scroll, see if the navbar is at the top. Set maincontent overflow //to scroll when the navbar is at the top of the window. Set it to hidden otherwise function scrollHandler() < if ($window.scrollTop() < headerHeight - 1) < $mainContent.css("overflow", "hidden"); >else < $mainContent.css("overflow", "auto"); >> //Set the body and the mainContent to be the correct sizes when the window size is changed. In theory, the body should be: // windowHeight + headerHeight // maincontent should be: // windowHeight - (headerHeight + navbarHeight + footerHeight) // But that doesn't quite work out. function resizePage() < //Deal with the changing CSS due to media queries if ($(window).width() >768) < headerGap = parseFloat($("#headerimg").css("margin-top")); headerHeight = headerGap + $("#header").height() + parseFloat($("#navbar").css("margin-top")) - 1; $(".nav.menu.nav-pills").css("width", "92.5%"); >else < headerHeight = $("#header").height(); $(".nav.menu.nav-pills").css("width", $window.width()); >//The header and navbar height change at certain sizes, so grab them again to be safe. navbarHeight = $("#navbar").height(); footerHeight = $("#footer").height(); var windowHeight = $window.height(), contentHeight = windowHeight - (footerHeight + navbarHeight); //if we account for headerHeight too, maincontent is too big resizeContent(contentHeight); resizeBody(windowHeight); > //The body should take up the whole height of the window, plus the header //and margin heights at the top. This way, you scroll to the navbar. // But it doesn't work this way. // -7 and -27 are from eyeballing it. function resizeBody(windowHeight) < if($window.width() >728) < $body.css("height", windowHeight - 7); >else < $body.css("height", windowHeight - 27); >> // The content should go from the bottom of the navbar to the bottom of the footer. // function resizeContent(contentHeight) < $mainContent.css("top", (headerHeight + navbarHeight)); $mainContent.css("bottom", (0 - headerHeight)); //For the background slideshow on the Furniture page // Again, + 5 was eyeballed $("div.moduletable").css("height", contentHeight + 5); if ( (contentHeight + 5) < ($(window).width()) /2 ) < $(".wk-slideshow img").css("width", "100%"); $(".wk-slideshow img").css("height", "auto"); >else < $(".wk-slideshow img").css("height", contentHeight + 5); $(".wk-slideshow img").css("width", "auto"); >> >); It works for a lot of sizes, but one you get to small resolutions it falls apart. EDIT 2: I was able to get the effect I was going for by adding another div. I set the body to be the height of the window and the new div to be the size of the body + the height of the header. The body has «overflow-y: scroll». The container would have «overflow-y: hidden» (See updated snippet). This doesn’t totally answer my question, but at least it helps?
Scale div with its content to fit window
I have a fixed-size
Do you just intend to scale the size of the div or you expect its contents to scale as well? For example, should all images double in size, etc?
What if you set your div size variable using % and then adding the width and height using js after load?
Well if you want you’re div to fit the window size make it adjust using a relative size like 100% but you’re content needs a fixed size so use javascript to change the 100% to the actual width/height after loading. We might be able to better help you out if we have a jsfiddle.net example of what you are trying to accomplish.