One more great thing about
You could also do something like this inside a single .js file:
A final note: In a comment to my previous post, Jörn gave this excellent tip for shrinking your code: Even for this little amount of code is a shortcut available:
Code:
<script src="/js/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
$('#slickbox2').hide();
$('#slickbox3').hide();
// shows the slickbox on clicking the noted link
$('#slick-show').click(function() {
$('#slickbox').show();
$('#slickbox2').hide();
$('#slickbox3').hide();
return false;
});
// hides the slickbox on clicking the noted link
$('#slick-hide').click(function() {
$('#slickbox').hide();
$('#slickbox3').hide();
$('#slickbox2').show();
return false;
});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').hide();
$('#slickbox2').hide();
$('#slickbox3').show();
return false;
});
});
</script>
HTML
<div id="slickbox">test1</div>
<div id="slickbox2">test2</div>
<div id="slickbox3">test3</div>
<a href="#" id="slick-show">Show</a>
<a href="#" id="slick-hide">show2</a>
<a href="#" id="slick-toggle">toggle</a>
$(document).ready() that I didn't mention in my previous post is that you can use it more than once. In fact, if you don't care at all about keeping your code small, you could litter your javascript file with them. It's great to be able to group your functions within a file or even across multiple files, and jQuery's flexible $(document).ready() function allows you to do that, pain free. You could, for example, have one .js file that is loaded on every page, and another one that is loaded only on the homepage, both of which would call $(document).ready(). So, inside the <head> tag of your homepage, you would have three references to JavaScript files altogether, like so:
HTML:
- <script src="/js/jquery.js" type="text/javascript"></script>
- <script src="/js/common.js" type="text/javascript"></script>
- <script src="/js/homepage.js" type="text/javascript"></script>
You could also do something like this inside a single .js file:
JavaScript:
A final note: In a comment to my previous post, Jörn gave this excellent tip for shrinking your code: Even for this little amount of code is a shortcut available:
$(function() {
// do something on document ready
});
Code:
Java script
<script src="/js/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
$('#slickbox2').hide();
$('#slickbox3').hide();
// shows the slickbox on clicking the noted link
$('#slick-show').click(function() {
$('#slickbox').show();
$('#slickbox2').hide();
$('#slickbox3').hide();
return false;
});
// hides the slickbox on clicking the noted link
$('#slick-hide').click(function() {
$('#slickbox').hide();
$('#slickbox3').hide();
$('#slickbox2').show();
return false;
});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').hide();
$('#slickbox2').hide();
$('#slickbox3').show();
return false;
});
});
</script>
HTML
<div id="slickbox">test1</div>
<div id="slickbox2">test2</div>
<div id="slickbox3">test3</div>
<a href="#" id="slick-show">Show</a>
<a href="#" id="slick-hide">show2</a>
<a href="#" id="slick-toggle">toggle</a>
-ahmedabad-webs.jpg)
Posts
W
ReplyDelete