jQuery tutorial

jQuery tutorial


Usiamo alcune semplici funzioni di jquery per creare alcuni effetti di sicuro successo.

Realizziamo un semplice javascript che ci permetterà di far comparire e scomparire alcune slide a seconda del pulsante premuto, in seguito ricliccando sul pulsante torneremo alla fase iniziale.

Let’s start designing our html, what we want is a simple structure made of a div containing our buttons, we will use some image as buttons, and the section we want to hide/unhide.

  <div id=”catalogo_description”>
    <div id=”image_catalogo”>
    <img src=”images/marketing.jpg” class=”imgcatalogo” align=”middle” alt=”Marketing” title=”Marketing” name=”Marketing” id=”marketing_catalogo” />
    <img src=”images/siti-web.jpg” class=”imgcatalogo” align=”middle” alt=”Web Site” title=”Web Site” name=”Web Site” id=”website_catalogo” />
    <img src=”images/software.jpg” class=”imgcatalogo” align=”middle” alt=”Software” title=”Software” name=”Software” id=”software_catalogo” />
  </div>
  <div id=”marketing-text” class=”catalogo-text” style=”display:none;”>Section 1 Marketing</div>
  <div id=”website-text” class=”catalogo-text” style=”display:none; “>Section 2 Web Site</div>
  <div id=”software-text” class=”catalogo-text” style=”display:none;”>Section 3 Software</div>
</div>

As you can see we have created a container whose id is catalogo_description and 4 child:

  1. id: image_catalogo => this div contain our menu, in this example it consist in 3 images
  2. id: marketing-text => this div contain our first section
  3. id: website-text => this div contain our second section
  4. id: software-text => this div contain our third section

We have included some default style in our section “display:none;” this cause javascript have problem in changing the display properties inside an externalCSS

Let’s add some CSS style to this you can add it inside an external CSS as in a style tag in your html.

.imgcatalogo {
  position: absolute;
}
#website_catalogo{
  left: 2%;
  z-index: 0;
}
#software_catalogo {
  left:50%;
  margin-left: -100px;
  z-index: 1;
}
#marketing_catalogo{
  left:98%;
  margin-left: -200px;
  z-index: 2;
}
#image_catalogo {
  width: 240px;
  height: 500px;
  float:left;
  text-align:center;
}
.catalogo-text {
  position:absolute;
  z-index: -1;
  padding-left: 250px;
}

As you can see it’s a simple formatting css, the only important properties are the absolute positioning of the element.

Now we can add our effect.

<script type=”text/javascript”>
  var detailed = false;
  var interrupt;
  $(‘.imgcatalogo’).click(function() {
    if (detailed == false) {
      detailed = true;
      clearTimeout ( interrupt );
      $(“.imgcatalogo:not(#” + $(this)[0].id + “)”).animate({
        left: ’2%’,
        marginLeft: ’0px’
      }, 1500 );
      $(“.imgcatalogo:not(#” + $(this)[0].id + “)”).slideUp();
      $(this).animate({
        left: ’2%’,
        marginLeft: ’0px’
      }, 3000 );
      interrupt = setTimeout(‘ $(“#’ + $(this)[0].id.replace(“_catalogo”, “-text”) +’”).slideDown(“fast”)’, 3000);
    }
    else {
      detailed = false;
      clearTimeout ( interrupt );
      $(‘.catalogo-text’).slideUp();
      $(“.imgcatalogo:not(#” + $(this)[0].id + “)”).slideDown(“fast”);
      $(“img#marketing_catalogo”).animate({
        marginLeft: ‘-200px’,
        left: ’98%’
      }, 1500 );
      $(“img#website_catalogo”).animate({
        left: ’2%’
      }, 1500 );
      $(“img#software_catalogo”).animate({
        left: ’50%’,
        marginLeft: ‘-100px’
      }, 1500 );
      $(“.imgcatalogo”).slideDown(“fast”);
    }
  });
</script>

Let’s explain what we do.

First we create a var “detailed” this is usefull to store the state of the page, it say if we have just opened a section or if the sections are all closed.

Next we associate an onclick event to the “imgcatalogo” class.

At first we want to make all the buttons exept the one clicked to disappear, thi is done easily with the SlideUp function of jquery, as selector for this effect we want all the elements that has class “imgcatalogo” except the one clicked, well we have the id of the clicked one so it’s easy  :

$(“.imgcatalogo:not(#” + $(this)[0].id + “)”).slideUp();

Why not add a special effect before the slide? lets move all the image not clicked to the left side and then made ‘em disappear:

$(“.imgcatalogo:not(#” + $(this)[0].id + “)”).animate({
  left: ’2%’,
  marginLeft: ’0px’
}, 1500 );

This line remove the css property margin-left and set the position to left 2%, it takes 1,5 sec to do it so we will be able to see the moving elements.

Let’s move the one clicked too but slowly so we can see what’s appening:

$(this).animate({
  left: ’2%’,
  marginLeft: ’0px’
}, 3000 );

Now we want to make our section appear, well of course we have to wait till the effect for the images are over, let’s use a timer so:

setTimeout(‘$(“#’ + $(this)[0].id.replace(“_catalogo”, “-text”) +’”).slideDown(“fast”)’, 3000);

The id of the section is the same as the id of the image clicked except the last word, we made it SlideDown fast.

Ok now the first half of our javascript is over, let’s see how to make the section disappear and the button come back at their position.

Now it comes to hand the “detailed” var so we can know in which of the two cases we are, show the section or hide it.

First of all we want the section to disappear, we can use the slideUp effect as before:

$(‘.catalogo-text’).slideUp();

Next we want the image to comeback so we made them slideDown:

$(“.imgcatalogo:not(#” + $(this)[0].id + “)”).slideDown(“fast”);

And finally we restore the CSS as it was at start:

$(“img#marketing_catalogo”).animate({
  marginLeft: ‘-200px’,
  left: ’98%’
}, 1500 );
$(“img#website_catalogo”).animate({
  left: ’2%’
}, 1500 );
$(“img#software_catalogo”).animate({
  left: ’50%’,
  marginLeft: ‘-100px’
}, 1500 );

Demo here

Update 11/04/2209 – We have modified some line of code to make it more solid since there was problem if you click on image while they are moving, the line modified are in bold character.