Where to insert this javascript?

Question

I have the same problem as AndyHin does (CSS HTML - DIV height fill remaining space) but can't see where to insert the javascript when Hussein says to. I must admit that I am quite new to writing in js.

I have tried including it between the head tags as below and I have also tried inserting it into the jquery with no avail.

<head> 

<script> 

Hussein's answer 

</script> 

</head>

aha,now i got it. That guy is using jQuery, you have to insert jQuery as well. — Bojan Kovacevic, Mar 11 '13 at 13:58
add this : before . Also use ready as Stefan and Anthony told you. — Bojan Kovacevic, Mar 11 '13 at 14:02
Thank you all for your help. I tried each piece of advice and I couldn't seem to get it to work leading me to the unsavoury truth that I must be doing something very wrong! I have thought of a better way of describing it and I have temporarily loaded my site onto my website. The site I am creating is at the very start so please don't hate too much! You can see the problem though. I am trying to make the 'middle-left' div's text expand and collapse whilst the banner-slider remains at a constant width. The CSS and JS I've used are: — INSERT_BRAIN_HERE, Mar 11 '13 at 14:52
And then: #middle-left { max-width: 55%; min-width: 15%; width: 30%; position: relative; float: left; } If you need to see anything else I can of course provide that too. Thank you again. — INSERT_BRAIN_HERE, Mar 11 '13 at 14:56
please use [fiddle](http://jsfiddle.net/) and put your html,javascript and css code there. This way it is hard to follow. — Bojan Kovacevic, Mar 11 '13 at 14:59
Ok! I've never used fiddle but here it is. http://jsfiddle.net/fkXt4/ I put in all the CSS that surrounds the S3slider and the relevant div. — INSERT_BRAIN_HERE, Mar 11 '13 at 15:02
you also need to put relevant HTML, and in javascript area you dont need — Bojan Kovacevic, Mar 11 '13 at 15:04
Is that any better? I really appreciate your help thank you. — INSERT_BRAIN_HERE, Mar 11 '13 at 15:08
after making changes in fiddle,you need to click on Update button and then paste new url here. — Bojan Kovacevic, Mar 11 '13 at 15:09
it seems to be that javascript does calculate fine,always let middle-left div height to be window size - slider div size. I dont know what do you want ... — Bojan Kovacevic, Mar 11 '13 at 15:28
I'm trying to get it so that on the site, when you resize the browser window, then the three columns at the bottom resize to the full width (which they currently do on the site) and also that the middle-left div containing Heading 1 and the corresponding text also resize to fit the available space between the middle-left of the page and the banner-slider. I apologise if I'm describing this poorly. — INSERT_BRAIN_HERE, Mar 11 '13 at 15:32

Anthony Grist · Accepted Answer · 2013-03-11T14:07:22.340

It relies on elements on the page, so you need the script execution to be delayed until after the DOM has finished being constructed (so the required elements can actually be selected). You have two options for that:

Place the <script> tag at the end of the body of the HTML document:
```
<script>
    // code here
</script>
</body>
```
Place the <script> tag inside the <head> tag (or anywhere inside the <body> since it doesn't actually matter), and use a DOM ready event handler:
```
<script>
$(document).ready(function() {
    // code here
});
</script>
```

Stefan · Answer 2 · 2013-03-11T16:43:36.127

1

Put right before the closing body tag (</body>) (best solution), or wrapp all code of the script with

$(function() { Hussein's answer });

If you don't add the script at the end of thedocument or use $(document).ready(), the code gets executed before the dom is ready, therefor your javascript find the dom elements, and does nothing (in the best case)!

Here is in article about $(function() {}) (the short form of $(document).ready())

edited Mar 11 '13 at 16:43

answered Mar 11 '13 at 13:58

Stefan

14,826
17
80
143

Yes, putting it right before the body tag is the best solution (first sentense of my anser, even before highlighting it). The pages loads faster this, way because it can display the html elements before interpreting the JavaScript. – Stefan Mar 11 '13 at 15:44

score 0 · Answer 3 · answered Mar 11 '13 at 14:01

Add the following reference in head part

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

You can insert anywhere on the page.

<script>

$(document).ready(function(){
    var one = $('#col_1').height(),
    two = $('#col_2').height(), 
    remaining_height = parseInt($(window).height() - one - two); 
    $('#col_3').height(remaining_height); 
});

<script>

Where to insert this javascript?

3 Answers3