jQuery Snippet: Slideout Tab
On 02.26.2010 by Paul Robinson |
A fairly common sight in these modern times of social networking is the famous Twitter tab. This is a tab that floats on the left or right hand side of your browser window & follows you. Here is how to go slightly further than that by making it slide out.
A day or so ago someone asked me how to make one of these, so instead of just telling them I thought I’d post it here as a snippet of code that everyone can use. What you use it for is entirely up to you, but most people use it for social networking such as Twitter.
Here we go.
$(function() {
$('#slideout').hover(function() {
$(this).animate({left:'0px'}, {queue:false, duration: 500});
}, function() {
$(this).animate({left:'-280px'}, {queue:false, duration: 500});
});
});
However that might get a little annoying for the user as it will slide out every time they hover their mouse over it. It would probably be better to slide on click. So to do that you just need to change hover to toggle. Instead of making your whole div clickable though you’ll want to make a box and float or position a box that will be clickable or the user will not be able to interact with the box once it slides out. Your HTML could look something like this.
<div id="slideout">
<div id="slidecontent">
Your Content!
</div>
<div id="clickme">
</div>
</div>
With some CSS like this.
#slideout {
background:#666;
position:absolute;
width:300px;
height:80px;
top:45%;
left:-280px;
}
#clickme {
float:right;
height:80px;
width:20px;
background:#ff0000;
}
#slidecontent {
float:left;
}
Now the jQuery needs to change a little too.
$(function() {
$('#clickme').toggle(function() {
$(this).parent().animate({left:'0px'}, {queue:false, duration: 500});
}, function() {
$(this).parent().animate({left:'-280px'}, {queue:false, duration: 500});
});
});
Now I never claimed to be a great designer so my CSS is correct, but the coloring is awful.
The point is that it works & you can spruce it up until you are happy with it. That’s it. Have fun.
If any regular readers are wondering, these little snippets are just so that the site isn’t left with no new posts for a long period of time. Sometimes I just don’t have any inspiration for new full tutorials, or I might not have enough time to write a massive post. So rather than have a huge gap between posts I’ve decided to post these little tips & snippets. I hope they help new readers & regulars alike.
Discussion: 11 Comments
Hello Paul.
Please allow me to comment not on this specific topic, but on the overall design of your blog, its neatness and cleaness, very comfortable for the eye.
I would like to ask you, how do you make that image you use as a background stretch?
I noticed that you use the image named “box-bgr.gif” everywhere in your blog, in the sidebar, in the content area, in the “about the author”, in the related posts, and here in the comments area. Given that they all use the same one-size background (box-bgr.gif), what css did you use to make the image automatically stretch to fill the whole space horizontally and vertically?
I have been trying to do that for a long time, but to no avail !
I would be thankful if you tell me how
(btw, I tried to copy the css properties you assigned to the background here and apply them to the image on my blog, but that didnt help!).
Hi there Mouad,
Thank you for you kind comments about the design of my site. I wish I could say I designed it, but I didn’t. Artist & illustrator Lisa-Marie (who is a guest author here) did. However I think I can explain what it is you want to know.
The image “box-bgr.gif” is a gradient image that is used in most (if not all) of the content boxes. The CSS is just:
.box { background:url(image/box-bgr.gif) #ffffff repeat-x top left; }the class
.boxis then used in all of the content boxes along with any other classes needed.The big background (behind the header) is just a fairly large compressed jpeg. It reaches about 493 pixels downward & then merges into the background color. The CSS looks like this:
body { background:url("images/bgr.png") repeat-x center top #EAE7E0; }I hope that has answered your question. If not, drop another comment with what it is I haven’t explained properly & I’ll see if I can get Lisa-Marie to come & drop a comment as she might be able the explain it a bit better.
Thank you very much for replying.
You surely noticed, that almost every element in your blog uses the box-bgr.gif file as a background. Yet, you do surely notice that the same image is displayed perfectly in the “advertise here” box in the sidebar, and in the Archives box in the sidebar too, this, although they have different heights, and yet, the image is automatically strethced/expanded, not sure what you call it, to fill the whole space that the widget uses. That is my question, how do you make it automatically stretch ? I am sure it is not a different image suited for each box. I can see it is the same image, and yet it is displayed differently to match the box it sets behind.
Please see this page of my blog, and browse down to the blue box which holds the social icons.
http://cinema.al-rasid.com/2010/02/19/understand_movie_rating/
This is the image I use as bg: (please highlight it to see its edge).
http://cinema.al-rasid.com/wp-content/themes/mobipress-theme/images/blue_white_bg.JPG
Notice that the background image is not fully displayed, it is displayed down till the box’s edge only, so if the height of the box happens to be bigger than the width of the image, there will be an empty space in the lower part of the box, after the image’s bottom limit.
I doubt you understood what I wrote
in simple words, I want the background image to fit in every box or element I use it with, by autoamtically stretching.. just like Windows XP autmatically resizes the wallpaper you choose to fill the whole screen when you set it to “stretch” the wallpaper…
I really wish I clarified what I want
I understand what you mean now. It’s actually an illusion the image in the background is like yours, it is always a set height (239 pixels). The color of it is a gradient that is only slightly off the background color of the boxes anyway. This creates the illusion of it finishing at the right time for every box, it also helps that nearly all of the boxes it is used in are above 239 pixels in height meaning the image does merge into the background.
It currently isn’t possible to do what you are looking for with CSS without making another image… Well it is possible using CSS 3 but it won’t show in every browser, I believe only Safari 4(?) has support for the
background-sizeproperty.There is a cheats way of doing it in most modern browsers by specifying the
min-heightproperty to be the height of your background image, but that just makes sure that the box is that height regardless of the content while still allowing it to increase in height. That’s as opposed to the height property which actually fixes an element to the height specified.I hope that helps & hasn’t just confused things further. In summary though I have just made sure that the gradient isn’t too high & that nearly all boxes are bigger than that height.
Thank you. The min-height actually stretches the box itself, not the image, and not the box till it reaches the edge of the image.
I understand that there is no way to make a background stretch to fill the whole box, and to fit itself to it’s height?
This means I cannot use a normal background (not tileable one) to be the background of comments for instance, because comments might exceed the height of the image, and that will repeat the image vertically, revealing its edges, which will surely ruin the display..
Yes as I said using
min-heightis kind of a horrible cheats way of doing it & only applies in certain circumstances.There is a way, but it isn’t available in all the browsers on the web yet as it belongs to the CSS 3 spec.
That’s right, but you can use the gradient method as long as you try to make sure that the height of the gradient is not lower than that which will be the minimum height of the elements it will be used in.
That’s how my elements work, I know that no element the gradient is used in will be lower in height than 293 pixels. The background is also the same color as the bottom of the gradient & so it looks as if the image stretches when it doesn’t.
I see. Thank you very much for the time you took to answer my queries.
No problem, hope I helped.
I don’t have enough knowledge about jquery but because of this kind of blogs.I’m learning it little by little. Thanks a lot.
What a great information. I really thankful that I have landed here in this blog. There really lot of things I can learn here.
Hi Paul,
It is great that you have decided to post this information. I have save this one on my computer for future reference. Thanks a lot.