how to use jquery to intialize javascript?

**louisaivy** · 10-04-2011, 01:18 AM

I have a javascript file that doesn't run on page load but instead is triggered by clicks etc. I want to now add jquery to this javascript but i need to get jquery to initalize the javascript. At the moment i have added the

Code:

$(document).ready(function(){
//all my code is in here

});

But all this does is stop the javascript from working, any ideas?

**jscheuer1** · 10-04-2011, 02:11 AM

That tells me that most of your code relies upon functions that are in the global scope. Putting those inside a function, even the $(document).ready function makes them local to that function.

You don't need that to use jQuery. In fact doing that is a lot like doing this in ordinary javascript:

Code:

window.onload = function(){
//all your code in here

};

Functions in there will not be available to the global scope either.

And although it's good practice to write code that doesn't require the global scope, or that only uses it for one master object or function, if you want to use the global scope and use jQuery (like $('#someid').something()) in your code, just go ahead and use it. The $(document).ready function is only for things that you want to have happen after the page has been parsed by the browser.

**louisaivy** · 10-04-2011, 02:22 AM

Hi thanks for the reply. I am making a javascript gallery and need to add jquery for image transitions, i was told that adding the $document.ready function was the best way to do this. But your saying it isn't? Can i just add jquery to the end of the javascript document and it will add the transitions(although im stuck as how to do this as of yet) accordingly?

**jscheuer1** · 10-04-2011, 02:55 AM

jQuery is just a library of techniques. Once it's on the page, you may use its functions. Putting things in the $(document).ready function is not the best way for all cases. Most code that makes use of jQuery has some things inside doc ready and other things outside of it. If you just want a transition, as long as the elements are already on the page, you can do it an any time, like:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div id="mydiv">Click Me!</div>
<script type="text/javascript">
$('#mydiv').click(function(){$(this).fadeOut(3000, function(){$(this).show(1000);});});
</script>
</body>
</html>

If you want to use doc ready you can put it in the head:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function($){
	$('#mydiv').click(function(){$(this).fadeOut(3000, function(){$(this).show(1000);});});
});
</script>
</head>
<body>
<div id="mydiv">Click Me!</div>
</body>
</html>

Thread: how to use jquery to intialize javascript?

Thread Tools

Search Thread

how to use jquery to intialize javascript?

Bookmarks

Bookmarks

Posting Permissions