Learned about the :hidden filter today

It seems that the more I dig into jQuery the more I realize how vast a library it is.   Also noticed that much of the CSS3 stuff is bleeding off into jQuery territory, but that is a topic for a different day.

I am currently reading the book jQuery in Action.  I am only in Chapter 2 and I've been reading it for about two weeks... sigh.  That should give you an idea of how long it's taking me to tackle the jQuery topic.

The topic of this post is to demonstrate how with my new knowledge of the ':hidden' filter I was able to reduce some code.

I basically went from multiple methods and dynamically adding a CSS class to the latter example marked 'TO simply this' below.


//From this
var checkIfIsExpanded = function(){
                                       
                                if(  $(this)
                                    .parents(".log_entry")
                                    .children(".popup_details")
                                    .is('.expanded'))
                                {
                                        return false;
                                }
                               
                                return true;
                            }

var setExpandedClass = function(){
           
                                $(this)
                                .parents(".log_entry")
                                .find(".popup_details")
                                .addClass("expanded");
                               
                            }
                           
 var removeExpandedClass = function(){
                               
                                    $(this)
                                    .parents(".log_entry")
                                    .children(".popup_details")
                                    .removeClass("expanded");
                            }

//TO simply This
var checkIfIsExpanded = function(){
                                       
                                if(  $(this)
                                    .parents(".log_entry")
                                    .children(".popup_details")
                                    .is(':hidden'))
                                {
                                        return false;
                                }
                               
                                return true;
                            }


I was using the concept of adding a class at run time ('.expanded') to allow me to determine if a particular element was visible.  Whenever I expanded the class (made it visible), I would add a classs to show it was expanded.  Then whenever I hid it I would remove the class.  Well jQuery has an easier way to determine if something is visible or not.  Enter the ':hidden' filter.   With that I was able to remove the two methods for adding and removing the .expanded class and also to know call those methods in my code.

That is all I have today.  You can see the progress on the website as soon as I update the website with this change at:   http://followmetotheweb.apphb.com.

As a disclaimger I also want to point out that I learned about using underscores in my class names.  The short story is "DONT DO IT". In other words don't name your class class='my_class'.  Name your class like this instead class='my-class'.  You should use hyphens instead.  Hyphens allow for special CSS and jQuery filters.  I don't have my notes in front of me but trust me they do.

Until Next Time.  Happy coding.










Comments

Popular posts from this blog

Simple Example of Using Pipes with C#

Difference Between Adapter and Bridge Design Patterns

Remote Access to Your Home Desktop Using No-IP