In this post I will explain how to simulate a window effect using jQuery and CSS. What we want to achieve is to have a window like this one:
with those little close ("X") and hide/show ("_") buttons. It is very simple, so let's get to the code.
Create the bar
First of all let's create the divs for the bar:
<div class="bar">
<div class="bar_close"><a href="#">X</a></div>
<div class="bar_win"><a href="#">_</a></div>
</div>
As you see, we create 3 divs. The first - with a class named "bar" - is the main container for the bar itself. Inside we place two other divs with the "X" and the "_" that we will use for closing or showing/hiding the window.Second step: we style those classes ("bar", "bar_close" and "bar_win") and the <a> tag:
<style type="text/css">
<!--
.bar {
border: thin solid #999999;
background-color: #CEDCE9;
height: 15px;
width: 250px;
margin: 2px;
position: absolute;
left: 10px;
top: 10px;
color: #000000;
}
.bar_close {
font-family: Verdana, Arial, Helvetica, sans-serif;
position: absolute;
text-align: left;
left: 0px;
margin: 2px;
color: #000000;
font-size: 10px;
font-weight: bold;
}
.bar_win {
font-family: Verdana, Arial, Helvetica, sans-serif;
position: absolute;
right: 0px;
text-align: right;
margin: 2px;
color: #000000;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
a {
text-decoration: none;
color: #000000;
outline: none;
-moz-outline-style: none;
}
-->
</style>
Place the style in the <head> of your page. The style is quite self explanatory. The only things I would like to remark are:
1) the positioning of all the divs is absolute. That means you have to play around with it in order to place your bar in the right place.
2) the <a> tag is styled to remove text decoration and outline. That is done in order to remove those annoying little dots when you click on a link (I really hate them!).
Create the container
Now we will place another div, just after the "bar" div.
<div class="content" >The content of your window goes here. Please notice that it flows correctly.</div>
That div has a class named "content". To style the div we add this code to the our style:
.content {
font-family: Verdana, Arial, Helvetica, sans-serif;
border: thin solid #999999;
height: 200px;
width: 250px;
margin: 2px;
position: absolute;
left: 10px;
top: 29px;
font-size: 12px;
color: #FFFFFF;
background-color: #0066FF;
}
Be careful to the "left" and "top" values. Those will affect - again - the position of the div. "Height" should be changed according to your needs.
Animate!
Now we need to animate it all. First of all, we link to the jQuery library:
<script type="text/javascript" src="../../js/jquery.js" ></script>
Place the snippet just before your style (in the <head> of your page) and obviously change the src according to the library path.Then we create the function to achieve our goal.
<script type="text/javascript" language="javascript">
<!--
$(document).ready(function(){
$(".bar_win").click(function(){
$(".content").slideToggle("slow");
});
$(".bar_close").click(function(){
$(".content").hide();
$(".bar").hide();
});
});
// -->
</script>
When the document is ready, we will have two click functions.One is for the "bar_win" div: when you click it, the "content" div will slide up or down according to its status. To do that, we use the slideToggle function of jQuery.
In order to close the window completely, we have a click function for the "bar_close" div. Clicking on it, the window will be hidden.
Some restyling
I made this example in exactly 10 minutes and - as you may have noticed - I didn't care much about refining the work. However, if you like, you can improve a little bit the example, giving it a more professional look. For example, you can use small icons for the closing and the show/hide buttons. I used text, but small images will definitely look better.At the same time, you might want to place those icons as in Ms Windows near the left end of the bar. To do so, you should change the position of your "bar_win" and "bar_close" divs.
Enjoy and don't forget to share your thoughts!
0 thoughts:
Post a Comment
Comments are moderated. I apologize if I don't publish comments immediately.
However, I do answer to all the comments.