lewro’s blog - 3.0 - studying web design and development

I have been recently working a lot with jQuery and I have to say I like it a lot. What is it so good about it? The answer is easy. It makes your life easier. Yes, you need to learn some new syntax but the benefit of that is huge. It simplifies the process of javascript development and gets rid off the dealing with different browser issues.

Standard javascript syntax

Let me give you an example. If you have ever work with javascript, you for sure know how to select element with certain id on the page. There is a build in javascript function getElementById(”id_goes_in_here”). You probably also know that if you want to select element with certain class there is no such build in function in javascript but you can find one done by other people of you can build one yourself.

How would you do it in jQuery

If you want to select element with id you would use $(”#id_goes_in_here”);. Note the hash symbol which is used in css as well. Dolar sign is replacement for jQuery function and it is used every time you want to select and manipulate element on the page. Lets take the second example. You want to select element with certain class. Here is how you would do it in jQuery $(”.class_name_goes_here”);. You can already see where this is going. We use dot in css to specify the class name. As you might have guessed you can use css-like syntax to specify any element on the page.

Manipulate the element

Once we have selected the element we can do all sorts of things with it. We can change any css properties or even provide effects such as fading, animating etc.

Example - Success message fadeout

We have decided that we will inform user that the email has been sent but we want them to have the possibility to get rid off this message because they might find it annoying to see the message for the rest of the time they are on the page. There are many ways how to do it. But for a this example I have chosen to use onclick event with fadeout effect. As you will see it is very simple. First you select the element and then you apply the onclick event using anonymous function.

$(function (){
  $("#id_off_the_message_goes_here").click(function(){
    $(this).fadeOut("slow");
  });
});

You have noticed 2 new things in here. The first one is that the script starts with $(function (){. This just simple means - wait until the page is fully loaded (all DOM elements has been built). We do not want to start manipulating the page if the page has not been loaded because the element we need might to be there at that time. So that is why we use this jQuery function so we can be sure that the page is fully loaded and it is safe to start manipulating the page. Second new thing in this function is $(this). It just simple means that “this” is what we have just selected and clicked. We could also write $(”#id_off_the_message_goes_here”) instead but jQuery have this nice little shortcut so why not use it.

Enought about jQuery lets create script you can use

I have decided to give users the ability to make the form textarea bigger when they need to write more copy so they do not have to scroll. So here is the script step by step. Generate 2 spans with class names assigned to them (window_smaller, window_bigger) and cover them with paragraph with class name (textarea_enhancements). Insert the paragraph in front of every textarea in the form. Asign event handlers for these 2 spans. If user clicks on span with class name “window_smaller” reduce the current height (50px in my case) and for span with class name “window_bigger” increase the current height. That would be it. I have went back and added small enhancement. When the textarea is too small (less then 50px in my case) do not resize it anymore but flash the pink colour in the textarea and fade it out so user can see that something is going on. You could even add a message which would describe that. As I have said it is all pretty straight forward so there is no need to explain every single step if you have already worked with css and know a bit about functions you will find out how it works just looking at the code for few minutes. But if you have any questions let me know I can guide you even more.

$(function (){
  $("textarea").before("
    <p class=\"textarea_enhancements\">
    <span class=\"window_bigger\"
    title=\"make this window biger\">
    make the window bigger</span>
    <span class=\"window_smaller\"
    title=\"make this window smaller\">
    make the window smaller</span></p>");
  $(".window_bigger").click(function(){
    var current_textarea_height = $(this).parent().next().height();
    $(this).parent().next().animate({height: current_textarea_height+50},600);
  });

  $(".window_smaller").click(function(){
     var current_textarea_height = $(this).parent().next().height();
     if (current_textarea_height <= 50){
       // don't make it smaller anymore
       console.log("the window is too small");
       $(this).parent().next().animate({backgroundColor: "#ffebeb"},600);
       $(this).parent().next().animate({backgroundColor: "#fff"},600);
    }else{
      $(this).parent().next().animate({height: current_textarea_height-50},600);
    }
  });
});

I have not implemented this script yet on my blog yet, because I want to create some nice buttons for those two spans but you will see the real world example on my about page pretty soon.