Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

For my purposes, I need to set the div height as quickly as possible.

Using the document.ready() event is not fast enough, so I want to set the inline CSS style of the div.

How can achieve something like this?

<div id="map-container" style="height:javascript(getwindowheight)px;">
    <div id="map">

    </div>
</div>

function getwindowsheight() {
    return window.height;
}

Any suggestions?

share|improve this question
Why not just use height:100% ? Just remember the parent container of #map-container also needs a height for this to work. – vyx.ca Nov 13 '12 at 19:17
Styles belong in CSS. Do you have a really good reason for using JS? – zzzzBov Nov 13 '12 at 19:17
@ComputerArts: It's turtles all the way up? :P - map-container is the most top level div, that's why I want to give it a specific pixel based height. – Serg Nov 13 '12 at 19:18
But you're returning window.height so I'm guessing you want the div to fill the screen from top to bottom. If you set html and body to height:100%, map-container will stretch the entire screen. – vyx.ca Nov 13 '12 at 19:19
@ComputerArts: That is correct. That's the code I had before posting this question and it caused some weird results, which I hypothesized were being caused by not having a div wrapped around #map I used #map, body, html { height: 100%; }- turns out that's not the case I'll be posting another question soon. – Serg Nov 13 '12 at 19:22
show 1 more comment

4 Answers

up vote 2 down vote accepted

Since you want it to be dynamic, you will need to pay attention to the following events:

  • window resize
  • window ready

Set your HTML first:

<div id="map-container"></div>

And then inside your JavaScript, setup a function to detect those:

var applyMapContainerHeight = function() {
  var height = $(window).height();
  $("#map-container").height(height);
};

document.ready(function() {
  applyMapContainerHeight();
});

$(window).resize(function() {
  applyMapContainerHeight();
});
share|improve this answer
up vote 1 down vote 
<div id="map-container">
    <div id="map">
    </div>
</div>

<script type="text/javascript">
document.getElementById("map-container").style.height= $(window).height() + "px";
</script>
share|improve this answer
up vote 0 down vote

Then don't use document.ready

just execute your js after div

<div id="map-container">
    <div id="map">

    </div>
</div>
<script type="text/javascript">
$('#map-container').css({ height: 'your height'});
</script>
share|improve this answer
Could not works if jquery not loaded/not in cache. – roasted Nov 13 '12 at 19:17
it will work if you added link to jQuery in your head section. – Senad Meškin Nov 13 '12 at 19:21
up vote 0 down vote

Provided that jQuery is script files are included in the very beginning of your HTML, place some scripting right after the div declaration:

<div id="map-container">
    <div id="map">

    </div>
</div>
<script type="text/javascript">
    $("#map-container").height(getwindowsheight());
    function getwindowsheight() {
        return window.height;
    }
</script>
share|improve this answer
2  
Won't this return $ is not defined? Jquery might not be loaded yet. – vyx.ca Nov 13 '12 at 19:18
@ComputerArts Usually, external js links are defined at the beginning of the HTML. And they should. I just updated the answer to make sure that's the case. – Adrian Carneiro Nov 13 '12 at 19:21
Not necessarily, I've been seeing more and more javascript files being included at the bottom of the body so that the page (the text) renders faster (without having to wait for all the js libraries to load). – vyx.ca Nov 13 '12 at 19:24
There is no need of using jquery here, plain javascript will be better. – roasted Nov 13 '12 at 19:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.