really really simple javascript question

Question

I'm trying to use this plugin http://www.cssnewbie.com/example/equal-heights/plugin.html but haven't used much javascript before. It says:

Load the jQuery library in your document’s head. - no probs
Load the equalHeights plugin the same way. - fine, I can do that

But then it says: In order for the function to be able to calculate heights accurately, you’ll need to make sure it waits until the page is done loading before running. So wrap the function call (just like you should most all of your jQuery functions) in a $(docment).ready() function, like so:

$(document).ready(function() {
$(".columns").equalHeights(100,300);
});

Now I'm not sure where I put this exactly. In another javascript file I included before that piece of code (or similar) was in the included javascript file already.

Can I just stick that function in the jsfile? or does it need to happen somewhere on the page?

You can put it in a .js file and include it like you just did w/ the jQuery plugin. Or you can write the script directly in the page between <script></script> tags (best put in your <head> section) — John Strickler
– John Strickler, Commented Aug 11, 2011 at 12:55

Cloudy · Accepted Answer · 2011-08-11 12:50:39Z

2

You can put it on the page wrapped in

<script></script>

tags.

answered Aug 11, 2011 at 12:50

Cloudy

7,5297 gold badges64 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

codeandcloud · Accepted Answer · 2011-08-11 12:53:54Z

0

~~Common practice is to wrap it inside the script tag and place it inside head tag just after the plugin reference.~~

Recommended practice is to wrap it inside the script tag and place it at bottom of the page just before the body tag is closed.

Read this: Best Practices for Speeding Up Your Web Site

answered Aug 11, 2011 at 12:53

codeandcloud

55.5k47 gold badges169 silver badges259 bronze badges

Comments

Richard Dalton · Accepted Answer · 2011-08-11 12:51:31Z

0

You can put it pretty much anywhere as long as it is loaded after the two jQuery files.

Either in the page, or in an external js file.

answered Aug 11, 2011 at 12:51

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Comments

Baz1nga · Accepted Answer · 2011-08-11 12:52:20Z

0

you can stick this in the tag or in the body tag, anywhere you want or you can import it from another file make sure its after your jquery file though. just remember to wrap it in a script tag..

generally my recommendation is to keep it in a file.. it separates out the various concerns.. scripts live in a script file.. markup in your markup file etc..

answered Aug 11, 2011 at 12:52

Baz1nga

15.6k3 gold badges38 silver badges63 bronze badges

Comments

hungryMind · Accepted Answer · 2011-08-11 12:52:20Z

0

You can place this code on any external javascript file which is loaded after jquery, or anywhere in html code. Prefer, before html tag is closed. PS. dont forget to wrap under script tag if placing in html code.

answered Aug 11, 2011 at 12:52

hungryMind

7,0214 gold badges32 silver badges46 bronze badges

Comments

Tom Hazel · Accepted Answer · 2011-08-11 12:52:49Z

0

I would put it right before the closing head tag like this

<head>

<!-- Include jQuery here -->

<script>
$(document).ready(function() {
  $(".columns").equalHeights(100,300);
});
</script>
</head>
<body>

</body>

answered Aug 11, 2011 at 12:52

Tom Hazel

3,5322 gold badges24 silver badges20 bronze badges

Comments

Andre Dublin · Accepted Answer · 2011-08-11 12:53:07Z

0

You can put this in a js file, and place it at the bottom of your html page right before the body closing tag. You should move all your js files to the bottom of the html page right before the body closing tag that way it loads the page faster

ex.

<script src=jquery.js></script> 
<script src=equalHeights.js></script>
<script src=myScript.js></script>

This will load the scripts in the correct order.

answered Aug 11, 2011 at 12:53

Andre Dublin

1,1581 gold badge16 silver badges34 bronze badges

Comments

vietean · Accepted Answer · 2011-08-11 12:54:29Z

0

You know, below function means:

<script>
$(document).ready(function() {
    $(".columns").equalHeights(100,300);
});
</script>

Like window.onload = function(){}

After everything is loaded, it will be called. So, you don't worry much about where to set this function. You can set anywhere after referent to jQuery, and your plug-in.

answered Aug 11, 2011 at 12:54

vietean

3,0519 gold badges44 silver badges66 bronze badges

Collectives™ on Stack Overflow

really really simple javascript question

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related