Hello Rodel!
Welcome to the world of jQuery! You only need to call document.ready
once, you can bind multiple functions or call any amount of code
within it.
$(document).ready(function(){
$('#hideheader').click(function(){
$('#header').toggle("fast");
});
$('#hidemenubar').click(function(){
$('#menubar').toggle("fast");
});
$('#hideleftbody').click(function(){
$('#leftbody1').toggle("fast");
$('#leftbody2').toggle("fast");
});
});
Additionally, every event-binding function is passed an "event"
parameter which contains the default browser action of this event
happening. For example, in this code:
$('a[href]').click( function(event){ })
the variable event follows the href of the link. Thus, assuming that
#hideheader, #hidemenubar, and #hideleftbody are anchor elements with
hrefs defined, you should use this parameter in combination with the
preventDefault() function to stop the default browser action:
$(document).ready(function(){
$('#hideheader').click(function(event){
event.preventDefault();
$('#header').toggle("fast");
});
$('#hidemenubar').click(function(event){
event.preventDefault();
$('#menubar').toggle("fast");
});
$('#hideleftbody').click(function(event){
event.preventDefault();
$('#leftbody1').toggle("fast");
$('#leftbody2').toggle("fast");
});
});
Lastly, it may be useful for you to remove #hideheader, #hidemenubar,
and #hideleftbody from your markup and use jQuery to inject the
contents of them using either before(), after(), append(), prepend(),
or html(). This way users of screenreaders or people browsing with
Javascript turned off don't see links that aren't useful to them.
Chuck Harmston
http://chuckharmston.com
On Sun, Apr 5, 2009 at 11:26 PM, Rodel <[email protected]> wrote:
>
> hello everybody! i'm new to jquery and developing a web application
> for office correspondence. i have a problem with regards to this code.
> it seems to run fine but firefox's firebug displays an error. can
> anybody please help me with this?
>
> The Code:
>
> <link rel="stylesheet" type="text/css" href="/wbcs_public/css/
> mainpage.css"/>
> <link rel="stylesheet" type="text/css" href="/wbcs_public/css/
> menutabs1.css"/>
>
> <script type="text/javascript">
>
> $(document).ready(function(){
> $('#hideheader').click(function(){
> $('#header').toggle("fast");
> });
> });
> $(document).ready(function(){
> $('#hidemenubar').click(function(){
> $('#menubar').toggle("fast");
> });
> });
> $(document).ready(function(){
> $('#hideleftbody').click(function(){
> $('#leftbody1').toggle("fast");
> $('#leftbody2').toggle("fast");
> });
> });
>
> </script>
>
>
> The error:
>
> Components is not defined
> ? in jquery-1.3.1...@1258()jquery-1.3.1.js (line 1280)
> ? in jquery-1.3.1...@2476()jquery-1.3.1.js (line 2524)
> ? in jquery-1.3.1...@2807()jquery-1.3.1.js (line 2812)
> ? in jquery-1.3.1...@2902()jquery-1.3.1.js (line 2920)
> ? in jquery-1.3.1...@2934()jquery-1.3.1.js (line 2936)
> [Break on this error] jQuery.cache[ id ][ name ] :
>
> I hope to here from anyone who have an idea about this error.
>
> Thanks in advance,
>
> rodel
>
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en
-~----------~----~----~----~------~----~------~--~---
