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?
-
1Anywhere after jQuery was loaded is fine.Felix Kling– Felix Kling2011年08月11日 12:51:33 +00:00Commented Aug 11, 2011 at 12:51
-
It just needs to be in a javascript script tag.StuartLC– StuartLC2011年08月11日 12:51:46 +00:00Commented Aug 11, 2011 at 12:51
-
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 Strickler2011年08月11日 12:55:49 +00:00Commented Aug 11, 2011 at 12:55
8 Answers 8
You can put it on the page wrapped in
<script></script>
tags.
Comments
(削除) 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
scripttag and place it at bottom of the page just before thebodytag is closed.
Read this: Best Practices for Speeding Up Your Web Site
Comments
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.
Comments
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..
Comments
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.
Comments
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>
Comments
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.
Comments
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.