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

Post a Comment

Popular posts from this blog

Simple Example of Using Pipes with C#

Image
So I decided to dig into understanding how Asp.net works under the hood, out of curiosity.  In the articles that I found the authors described the architecture in lower level details.  One of the things that caught my eyes was the use of named Pipes as a means of inter-process communications by the architecture.   So I decided to dig into that portion a little bit deeper.  I discovered that the .Net framework has a namespace for named pipes and it's quite easy to use. I intend to demonstrate a small example that I cooked up rather quickly by setting up a named pipe server and then connecting a pipe client to it.  Before I do that, I want to say as a disclaimer that I don't know that this example demonstrates the best way to use pipes.  What it does do is show the most straightforward way to use them.  Also, before you use pipes you should consider using something else like WCF instead if you need well defined interfaces, as using pipes is pretty raw.   Being the type of perso
Read more

Why I Hate Regular Expressions

I have a love-hate relationship with regular expressions.  I admire their power yet I hate the pain and agony they have caused on more than one occasion. Just recently one of my colleagues used a regular expression for validating passwords. It seems pretty fair to use regular expressions for validating character sequence patterns. After all it seems they were created exactly for that.  However when regular expressions fail they fail hard.  What I mean by that is that they usually fail in the production environment. In case you are wondering what a regular expression is take a look at the wikipedia explanation of regular expressions . So we go live and all of a sudden new users can't be created because the regular expression says that the password is not valid due to one of the complexity rules.  But how?  The regular expression passed all the unit tests.  In fact the application works fine in our development and test deployment.  So what happened? The validation works fine unti
Read more

Putting Files on the Rackspace File Cloud

Recently, I’ve been playing around with Asp.Net MVC and I (along with some friends) am creating an Asp.Net MVC application that can access files from our website. This means that files must display on the site as well as provide a way to download/upload them. I won’t give away all the details of the project but I will say this: Sharing photos is one of the driving forces for our project.  The files are only image type files( jpg, etc) The files must be uploaded by the users and stored somewhere within our system.  We don’t necessarily know at this time how much storage space we need but we think that we will need a little at first but possibly a lot more down the road. This means that the storage of these files must be scalable. The uploading of files must be controlled by our system.  Right off the bat we started our application and were uploading files to the web server with no problem.  We only did it this way to kind of prove our system model. We were just basically writing
Read more