FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!

Day 05 – Quick nifty hacks you’re proud of




Some JavaScript (jQuery actually) sliding

Let me give you a demo of what we are going to create here:
Demmmoowwww

So, I was browsing the web the other day and I came across Mark Boultons website, who is a great designer by the way. And I saw this nice effect on portfolio page: here. Well that is what we are going to create today but a bit better in my opinion. Razz

So, let's start with 2 images (Scroll down to use the images I used). One normal one and then the one we want on top when we hover the image. We put them together in one "div" so we can align them properly in real designs and it will also serve as a real container.

Code:
<html>
<head>
   <title>jQuery Tutorial</title>
</head>
<body>
   <div class="picture">
      <img src="1.jpg" />
      <img src="2.jpg" class="top" />
   </div>
</body>
</html>


Ok, now let us style this a bit. So begin by putting the style-tags in the <head>. Then we are going to style the div at first. We will first add a float to it, so you can put multiple div's next to eachother. For the same reason, we also set the position to relative.

Code:
.picture {
         float: left;
         position: relative;
      }


Now, we want to make the div exactly the size of the image, so we add that the width and the height should be 100px.

Code:
.picture {
         float: left;
         width: 100px;
         height: 100px;
         position: relative;
      }


So now, we want to concentrate on the images inside the div. So, we want both pictures to be on top of each other but with 1 set to invisible when we don't hover it. So two pictures on top of each other, suggests a position absolute with a know top and left (both zero, as we want the pictures to start in the top left corner).

Code:
.picture img {
         position: absolute;
         top: 0; left: 0;
      }
      .top {
         display: none;
      }



So, now you should have 3 pictures (1.jpg) next to each other in your browser. Doing nothing, when you hover them. But that's all going to change with a bit of jQuery. jQuery is basically a library that "adds" new functionality. Things that were hard to achieve with javascript, can be done with jQuery in just one line. (So to speak)

So, download the jQuery production package on their website, and put a link to it in your document (Also between the header tags):

Code:
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>


Now we want to use those jQuery commands, to make our thing work. Therefor you need to write some Javascript code, so in your header make some script tags:

Code:
<script type="text/javascript">
      
   </script>


So the basics of jQuery is to begin with this:

Code:
$(function() {
      // DO SOMETHING

});

 


So now, we want to say "You take the div with class 'picture' and when we hover it, something is going to happen. We can do this like this:

Code:
$(function() {
    $(*YOUR CLASS OR ID*).*SORT OF EVENT*(function() {
        //DO SOMETHING
    });
});


In our case, the *Your class or ID* becomes .picture and the sort of event is hover. (You can also have "click", so when a user clicks the div, to this...)

Code:
$(function() {
    $('.picture').hover(function() {
        //DO SOMETHING
    });
});


So back in the days, a hover needed 2 things: One line to say what it needed to do when the mouse went in the hover area and one line to say what it needed to do when the mouse went out of the hover area. But know you can also give it just one line. But let's just do it with two lines. I'm not that talented either with javascript. Razz (Link to the docs)
// For the record: "one line" is actually not really the word to describe this but I can't think of another word right now.

So our code is going to look like this:

Code:
$(function() {
    $('.picture').hover(
    function() {
        //DO SOMETHING 1
    }
    ,
    function() {
        //DO SOMETHING 2
    }
    ); // Closing the hover tags.
});


jQuery makes it really simple to fade something in and to fade something out. You just use fadeIn and fadeOut.

So what we want to do is to take the .top image, which is currently invisible because of the display: none. And make it fade in smoothly and make it fade out smoothly when the cursor leaves the hover area.

Code:
$(function() {
    $('.picture').hover(
    function() {
        $(this).children('.top').fadeIn(800);
    }
    ,
    function() {
        $(this).children('.top').fadeOut(300);
    }
    ); // Closing the hover tags.
});


Let me explain the code. First we start by saying what we want to change. We use "this" when we want to speak of .picture, the class or id specified one level above. If you are not quite sure about using this, just type '.picture' . It can save you some time. Smile Now we don't just want the class picture, we want the image that is set to invisible. As you might have seen, we have given this picture, its own class in the very beginning so we can specify it easily now, by just using the "children" command. Then we use the fadeIn function with a parameter set to 800, which means the picture will be set from invisible to visible in the period of 800 milliseconds (1 second = 1000 milliseconds). jQuery will make sure it is smooth. Wink

Now, although it should work, we can optimize this code a bit. If you go to your example and start hovering in and out and in and out and in and out etc. You will notice that jQuery can't follow and it will fadeIn and fadeOut until it is done. Now that is not something we want...

Yet there is a simple solution to this problem, just add stop() after the two lines. This will stop the fading in or out, when your mouse isn't hovering anymore.

Code:
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(function() {
         $('.picture').hover(function() {
            $(this).children('.top').stop().fadeIn(800);
         
         }, function() {
            $(this).children('.top').stop().fadeOut(300);
         
         });
               
      });
   </script>


Now, a nice effect would be if we wouldn't make the top image fully visible so we can see some of the original too. Like an opacity of 80%.

Well, yet again this is fairly simple with jQuery, we just use the animate function. Smile

Just add animate({tag1 : value1, tag2 : value2, ... }); This gives us (as we only need opacity):

Code:
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(function() {
         $('.picture').hover(function() {
            $(this).children('.top').stop().fadeIn(800).animate({"opacity" : .8});
         
         }, function() {
            $(this).children('.top').stop().fadeOut(300);
         
         });
         
      
      });
   </script>




2 blog comments below

Now, the script is 100% ready. Smile But let me give the full source code again:

Code:
<html>
<head>
   <title>jQuery Tutorial</title>
   <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(function() {
         $('.picture').hover(function() {
            $(this).children('.top').stop().fadeIn(800).animate({"opacity" : .8});
         
         }, function() {
            $(this).children('.top').stop().fadeOut(300);
         
         });
         
         // Do something
      
      });
   </script>
   <style type="text/css">
      .picture {
         float: left;
         width: 100px;
         height: 100px;
         position: relative;
      }
      .picture img {
         position: absolute;
         top: 0; left: 0;
      }
      .top {
         display: none;
      }
      
   </style>
</head>
<body>
   <div class="picture">
      <img src="1.jpg" />
      <img src="2.jpg" class="top" />
   </div>
   <div class="picture">
      <img src="1.jpg" />
      <img src="2.jpg" class="top" />
   </div>
   <div class="picture">
      <img src="1.jpg" />
      <img src="2.jpg" class="top" />
   </div>
</body>
</html>


The use of this effect

You can make for example a gallery of pictures and give extra info when a user hovers that image.

Download

Download the images (right click, save as):

and

I have all the rights on this tutorial but you may use the images and the source code freely (for whatever purpose).


Well that's it for today. Smile

adri
adri on Tue Jun 21, 2011 11:09 am
Interesting and useful information and example of altering graphics with JQuery. I notice that some effects can be done with css only, for example using a hover conditional (I forget the exact details), but I'm sure you can do a lot more with JQuery.

I was wondering about similar changes using asp.net (preferably in the cross-platform Mono version). As far as I can see, something like JQuery is still needed. At some point I'd like to consider classes allowing a .net program to have the same interaction with a user whether it is running on a client machine or on a webserver.
SonLight on Fri Jul 01, 2011 11:57 pm



FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.