Preview window
In this guide you will lern how to make a box that shows a preview of the description on mouseover
We will be using jQuery for the animations.
First of all we have to set up our design for theese boxes! I won't descripe in depth why and how this works, just breafley.
HTML and css
|
#wrapper
{
width:900px;
position:relative;
top:0px;
left:0px;
margin:0 auto 0 auto;
}
#logo
{
width:507px;
position:relative;
top:0px;
left:0px;
margin:0 auto 0 auto;
}
#preview1
{
float:left;
width:250px;
height:185px;
background-image:url('previewHolder.png');
margin:35px 0 0 0;
position:relative;
top:0px;
left:0px;
}
#preview2
{
float:left;
width:250px;
height:185px;
background-image:url('previewHolder.png');
margin:35px 0 0 80px;
position:relative;
top:0px;
left:0px;
}
#preview3
{
float:right;
width:250px;
height:185px;
background-image:url('previewHolder.png');
margin:35px 0 0 0;
position:relative;
top:0px;
left:0px;
}
.imgPre
{
position:absolute;
top:7px;
left:7px;
}
#slide1
{
width:250px;
height:35px;
background-image:url('slideBg.png');
position:relative;
top:150px;
left:0px;
}
#slide2
{
width:250px;
height:35px;
background-image:url('slideBg.png');
position:relative;
top:150px;
left:0px;
}
#slide3
{
width:250px;
height:35px;
background-image:url('slideBg.png');
position:relative;
top:150px;
left:0px;
}
|
|
<div id="wrapper">
<div id="logo"><img src="style/logo.png" alt="d-zig - Preview window" /></div>
<!--Preview windows-->
<div id="preview1">
<img class="imgPre" src="images/bil-efter.jpg" />
<div id="slide1">
<h2>Moving car</h2>
<p class="slideContent">ndustry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries,
</p>
</div>
</div>
<div id="preview2">
<img class="imgPre" src="images/hus efter.jpg" />
<div id="slide2">
<h2>Living room</h2>
<p class="slideContent">ndustry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries,
</p>
</div>
</div>
<div id="preview3">
<img class="imgPre" src="images/road efter.jpg" />
<div id="slide3">
<h2>Endless road</h2>
<p class="slideContent">ndustry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries,
</p>
</div>
</div>
<!---->
</div>
|
I'm just going to descripe theese 3 "preview" divs. There is three because i want to show you three different animations later!
First there is the outer container. Inside that we have a image(Product image) and bellow another div, containing our short description(Preview of a bigger description).
The main idea is for this description container to be positioned on top of our image but at the bottom of the image, so that only the head text is vissible. See illustration bellow
Then on mouseover the slider will grow to fill the whole box like in illustration bellow
jQuery
First i want to show you the whole script for theese three preview boxes. And bellow give you a detailed description.
I know that this script seems very long? But it's actualy quite simple! So just take a quick look at it, and then cuntinue to the description.
<script type="text/javascript">
$(document).ready(function () {
var preview1 = $(this).find("#preview1");
var preview2 = $(this).find("#preview2");
var preview3 = $(this).find("#preview3");
var slideContent = $(this).find(".slideContent");
slideContent.hide();
preview1.mouseenter(function () {
stopAnimations(preview1);
var slide = $(this).find("#slide1");
slide.css({ opacity: 0.2 });
slide.animate({ height: 185 + "px", top: 0 + "px", opacity: 1 }, 300, function () {
$(this).find(".slideContent").show(100);
});
});
preview2.mouseenter(function () {
stopAnimations(preview2);
var slide = $(this).find("#slide2");
slide.animate({ top: 0 }, 300);
slide.animate({ height: 185 + "px" }, 300, function () {
$(this).find(".slideContent").show(100);
});
});
preview3.mouseenter(function () {
stopAnimations(preview3);
var slide = $(this).find("#slide3");
slide.animate({ width: 35 + "px", height: 185 + "px", top: 0 + "px", left: 215 + "px" }, 300);
slide.animate({ width: 250 + "px", left: 0 + "px" }, 300, function () {
$(this).find(".slideContent").show(100);
});
});
preview1.mouseleave(function () {
var slide = $(this).find("#slide1");
slide.animate({ height: 35 + "px", top: 150 + "px" }, 300, function () {
$(this).find(".slideContent").hide();
});
});
preview2.mouseleave(function () {
var slide = $(this).find("#slide2");
slide.animate({ height: 35 + "px", top: 150 + "px" }, 300, function () {
$(this).find(".slideContent").hide();
});
});
preview3.mouseleave(function () {
var slide = $(this).find("#slide3");
slide.animate({ height: 35 + "px", top: 150 + "px" }, 300, function () {
$(this).find(".slideContent").hide();
});
});
});
//Stops all animations and childs animations plus queues//
function stopAnimations(element) {
element.children().stop(true);
element.stop(true);
}
</script> |
You might have realized that the three mouseenter animations are allmost the same, just with some small changes to the animation? And that's why i only descrpe the most complex of them bellow.
But now let's start with the stopAnimations function that we will be using a lot!
This function simply stops all ongoing animation on a given element, plus everything in queue for this element. But on top of this we also make it stop all childrens animations and queues.
The function should descripe it self now that you know what it does.
function stopAnimations(element) {
element.children().stop(true);
element.stop(true);
} |
Next i will descripe our most complex animation of the three.
preview3.mouseenter(function () {
stopAnimations(preview3);
var slide = $(this).find("#slide3");
slide.animate({ width: 35 + "px", height: 185 + "px", top: 0 + "px", left: 215 + "px" }, 300);
slide.animate({ width: 250 + "px", left: 0 + "px" }, 300, function () {
$(this).find(".slideContent").show(100);
});
}); |
Be aware of that we will be using mouseenter end mouseleave for all our animations! I will go in depth with this later.
-
So we have our mouseenter function. In this function we start calling our stopAnimations, to stop all ongoing animations and queues on this element and it's children.
-
After that we create a new variable to store our slider element in (So we don't have to find it everytime we have to call it).
-
Now we use the element from our slide variable and animate it to have a new width(35px) and a new height(185px). Plus set it's actual "top" value to 0(The amount of pixels it positions from the top of the outer element) and the "left" value to 215(it's position from left and out). Last we set the animationSpeed to 300 "These figures are calculated in relation to the actual size of our div and only works if your own setup has the same size as our example here.” (top, left, width and height is just css properties that we change using jQuery).
-
Then we add a new animation for queue, until the previous is finished, that will animate our slider to have the same size as the our preview box. The modifications in this animation are simular to the ones in our prevoius animation! Just with different values.
-
Inside our animation number two we make a function to call when the actual animation is finished. This function will show the content (our “p” tag) with the id”slideContent” to fadeIn using the .show() animation, with a speed of 100.
Now for the mouseleave to this slider.
preview3.mouseleave(function () {
var slide = $(this).find("#slide3");
slide.animate({ height: 35 + "px", top: 150 + "px" }, 300, function () {
$(this).find(".slideContent").hide();
});
}); |
This is not as complex as our mouseenter animation.
-
As allways we create a variable for our slider
-
Then we animate that back to it's original state(The state we have defined in our css)
-
This animation should make sense, as there is nothing in this function that we haven't used in our previous mouseenter function.
That was it! The other two animations is made the same way but again, just a little different as we animate the slider in a different way. And all mouseleave animations are the same.
Besides these above mentioned functions we have this at the top of our script
var preview1 = $(this).find("#preview1");
var preview2 = $(this).find("#preview2");
var preview3 = $(this).find("#preview3");
var slideContent = $(this).find(".slideContent");
slideContent.hide(); |
Above we just create 4 variables for our sliders and our content inside the slider(the "p" tag that we hide and show during the animations).
Then we start our script by hiding our slideContent, so that it won't be visible before the animations have run.
And now i want to show you why we use mouseenter and mouseleave instead of mouseover and mouseout.
It is because of that everytime you mouserover on a child element of the actual element, the mouseover event will be triggeret once again.
If a user dragged the mouse through this illustration bellow and there was a mouseover function placed on the "Outer element". Then that client would trigger 5 mouseovers and that is just a waste of resources!
Done!!
Try making the other two animations by your self and if you have trouble figuring it out? Then leave a comment :D
Don't forget that this tutorial can be downloaded for free!