Learning jQuery

7 comments

1. karl

   September 3, 2006 at 2:07 pm

   Hey Dan,
   So, a "lambda function" is the same thing as an anonymous function, right?

   Reply
2. Patrick Hall

   September 3, 2006 at 4:03 pm

   Thanks, I finally stumbled across this technique when I got sick of wrapping all the functions I wanted to run in $('document').ready() with function(){} wrappers. This way is much cleaner, it's nice to see that I'm on the right track with that.

   The recursion in prepare_links is also something new to me; I didn't realize that you could self-refer to a function definition in this way. Neat. Confusing, but neat.

   PS this blog is a great idea!

   Reply
3. Jörn

   September 3, 2006 at 4:37 pm

   You could take this one step further and make it as DRY (Do not Repeat Yourself) as possible:

   PLAIN TEXT

   CODE:

   1. do_load = function() {
   2.    $('#calendar').load(this.href, prepare_links);
   3.    return false;
   4. }
   5. prepare_links = function() {
   6.   $('.previous-month, .next-month').click(do_load);
   7. }
   8. $(document).ready(function() {
   9.    prepare_links();
   10. });

   I hope that code is readable...

   Reply
4. Jörn

   September 4, 2006 at 3:53 am

   Oops, it can be written even DRYer:

   do_load = function() {
   $(’#calendar’).load(this.href, prepare_links);
   return false;
   }
   prepare_links = function() {
   $(’.previous-month, .next-month’).click(do_load);
   }
   $(prepare_links);

   Heh.

   Reply
5. Marat

   April 13, 2007 at 9:57 am

   You have forgoten next moment. To set the whole construction callback to null. Your example overflows browser buffer.
   
prepare_links = function() {
prepare_links = false; ///!forgoten

   So, what do you thing about it?

   Reply
6. Sientz

   February 21, 2008 at 2:22 am

   
   prepare_links = function() {
   prepare_links = false; ///!forgotten
   
   

   Do I need to use that =false somewhere in my script? I have created a div_switch function that hides all my functions at the bottom, where would I insert the div_switch = false; if needed??

   
   $(document).ready(function(){
   
     //THIS HIDES ALL LISTED DIVS ON LOADING OF PAGE
     $('div.blackbook').hide();
     $('div.canvas').hide();
     $('div.pencil').hide();
     $('div.murals').hide();
     $('div.shows').hide();
     $('div.tattoos').hide();
     $('div.miscellaneous').hide();
   
     $('a#blackbook').click(function() {
       //HIDE DIVS
       hide_divs();
       //SHOW LISTED DIV
       $('.blackbook').show('fast');
       return false;
     });
   
     $('a#canvas').click(function() {
       //HIDE DIVS
       hide_divs();
       //SHOW LISTED DIV
       $('.canvas').show('fast');
       return false;
     });    
   
     $('a#pencil').click(function() {
       //HIDE DIVS
       hide_divs();
       //SHOW LISTED DIV
       $('.pencil').show('fast');
       return false;
     });    
   
     $('a#murals').click(function() {
       //HIDE DIVS
       hide_divs();
       //SHOW LISTED DIV
       $('.murals').show('fast');
       return false;
     });    
   
     $('a#shows').click(function() {
       //HIDE DIVS
       hide_divs();
       //SHOW LISTED DIV
       $('.shows').show('fast');
       return false;
     });    
   
     $('a#tattoos').click(function() {
       //HIDE DIVS
       hide_divs();
       //SHOW LISTED DIV
       $('.tattoos').show('fast');
       return false;
     });    
   
     $('a#miscellaneous').click(function() {
       //HIDE DIVS
       hide_divs();
       //SHOW LISTED DIV
       $('.miscellaneous').show('fast');
       return false;
     });    
   
   });
   
   //HIDES ANY VISIBLE DIVS
   
   hide_divs = function() {
   
       //HIDE ANY VISIBLE DIVS BEFORE CONTINUING
       if ($('div.main').is(':visible')) {
       $('div.main').hide('fast');
       }
       if ($('div.blackbook').is(':visible')) {
       $('div.blackbook').hide('fast');
       }
       if ($('div.canvas').is(':visible')) {
       $('div.canvas').hide('fast');
       }
       if ($('div.pencil').is(':visible')) {
       $('div.pencil').hide('fast');
       }
       if ($('div.murals').is(':visible')) {
       $('div.murals').hide('fast');
       }
       if ($('div.shows').is(':visible')) {
       $('div.shows').hide('fast');
       }
       if ($('div.tattoos').is(':visible')) {
       $('div.tattoos').hide('fast');
       }
       if ($('div.miscellaneous').is(':visible')) {
       $('div.miscellaneous').hide('fast');
       }
   }
   
   
   

   If there is an easier way to do this, please feel free to educate me, I am a rookie at this scripting stuff.

   Reply
   • Jonas

     January 26, 2009 at 11:12 am

     Sientz :
     You could set an id to a div wrapping the "containers" and simplify the hide_function and even integrate the hide and show_function by sending the object the you want to display in the funcion_calling.

     
     hide_show_divs = function(d) {
       //HIDE ANY VISIBLE DIVS BEFORE CONTINUING
       $("#all_contents div").each(function(){
         if ($(this).is(':visible')) {
           $(this).hide('fast');
         }
       }
       $(d).show('fast');
       return false;
     }
     

     I'm sure this can be optimized

     Reply