a nice jquery toolbar ;)

[Torniquet]

okies. if any of you use or have used facebook, you will know they had the little toolbar down the bottom of the page which contained various things.

well here is my one. http://torni.netii.net/test/test2.html

it scrolls with the page (not overly hard to do i know :p) but it also slides up from the bottom and fades in and out when you mouse in and out

i know on my previous tutorial i said i would probably do this one in video, but due to very unforseen circumstances i think tonight will be the only real chance i will have to make this tutorial... and as i dont finish work until late, people are sleeping when i get in... so i cant make any noise.

so again i will write the tutorial out and break down the code bit by bit like i did the last one.

keep your eyes peeled people xx i shal be back later on

[Jackolantern]

Pretty neat, but on my Firefox it bounces up and down when I try to mouse over it.

[OldRod]

You see this page, because the system administrator of 000webhost.com is currently checking this website for malicious content. This redirect will be removed once we will finish manually checking all files on this account. As far we check over 100 websites, it can take about 2-4 hours to complete. If you are the owner of this website, you will get email confirmation once it's done. If you are a visitor - please come back later.

[Jackolantern]

Maybe they have a JS filtering system that Torn may have accidentally triggered with his bar?

[jpoisson]

site is under malicious review

[OldRod]

Tourniquet is a hacker! Burn him !!! Burn him!!!

[jpoisson]

ill grab the holy water. *Starts upturning his room in search of the holy water.*

[Torniquet]

lol do you think that low of me

nah its because i reactivated the account last night and cuz 000webhost are fags they like to do that kinda thing lol...

@ jack.

the reason it does that is because i havnt given you ample room to safely scroll into lol. there is only like 15px worth of room, so when you scroll in you may have passed over it so it bounces lol. this was only a quick job to see if i could accually pull it off how i wanted it.

anyway will post a tutty after i have eaten xxx

[Jackolantern]

Ahh, that makes sense. I am actually not very familiar with JS, although I do plan to check it out and learn it soon.

[Torniquet]

Ok, here we goes again (i spent a whole hour last night writting out that last one XD and didnt even realise it :s)

To get the ball rolling we will make a simple bar which is stuck to a certain point (in this case the bottom of the page like the facebook toolbar)

a simple set up of styling a normal div.

first we create the div and give it the ID.

<div id="bar"></div>

the only real peice of styling we have to worry about is its position.

so on our CSS document (or in the head, depends where your css styles are held) we need to open up a new id of #bar

#bar {
background-color: #03C;
height: 50px;
width: 100%;
position: fixed;
bottom: 0px;
}

as you can see I have coloured it so you can see where the bar is, you can use an image or what ever it doesnt make no odds to this. the width is 100% so it covers the whole of the page (and will increase/decrease the size of it as you change the width of your browser) obviously it needs some height to it so there is something to look at.

ok the two important elements of this is the 'position: fixed;' and the 'bottom: 0px'. this is telling the bar to stay in a fixed position despite scrolling up and down, and needs to be 0 pixels from the bottom edge.

Ok thats the part everyone should know how to do, or atleast most of it.

now for the jquery part. we need to link the jquery library to the page, so in the head tags you want to add the following.

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

obviously you want to make sure that it is directing the link to the correct location. then we want to open up another set of script tags with a type of text/javascript.
<script type="text/javascript">

</script>

now we have opened the script tags up, we want to go ahead and input the onDocumentReady call out, just like we did on the previous tutorial (so i am not going to go into it all again :p)


<script type="text/javascript">
$(document).ready(function(){

});
</script>

So now because we have set the bar to remain stuck to the bottom of the screen showing the contents (we leave it there so people who havnt got javascript enabled can still see it) we want the page to slide it down asoon as it has been loaded. we are going to use a function known as animate.

but before we can animate anything we need to tel jquery what it is going to be animating. in this case we will be telling it to animate anything with an ID of bar.


<script type="text/javascript">
$(document).ready(function(){
$('#bar').animate();
});
</script>

ok so jquery knows what it is supposed to animate, but it still needs to know HOW to animate it. we are going to slide it down by 40 pixels and change the opacity. so let us first add the opacity command, as it is the easiest. the opacity ranges from 0 to 1. 1 being solid, 0 being invisable. anything in between is a degree of transparency.

so lets turn this bar half transparent and set it to 0.5 opacity.



<script type="text/javascript">
$(document).ready(function(){
$('#bar').animate({opacity: 0.5});
});
</script>

now we want it to slide. now the thing to remember is that because we are referenceing from the bottom, we want to make all our commands be called from the bottom of the page, and bare in mind that using minus figures will cause the bar to slide down, and using positive figures will cause it to move up. where as it would the opposite if you was referencing from the top.

ok so to reference the move from the bottom we use the call 'bottom' and we want to move it down by 40 pixels. remember we need to add in a comma after the opacity.


<script type="text/javascript">
$(document).ready(function(){
$('#bar').animate({opacity: 0.5, bottom: '-40'},{queue:false,duration:500});
});
</script>

what this has now done is to cause the bar to slide 40 pixels down and become transparent.

now we need to tell it to listen for certain events to make the bar come up again when we mouse over the part of the bar that is showing. (you could change this to a little tab that sticks out from the top if you like) then we need to tell it to hide it again when the mouse leaves the bar.

so to start things off, we need to tell it where to listen for the event and what event to listen for. so again we need it to affect the id of bar and we will be using an event of mouseenter, followed by the standard function call.


<script type="text/javascript">
$(document).ready(function(){
$('#bar').animate({opacity: 0.5, bottom: '-40'},{queue:false,duration:500});
$('#bar').mouseenter(function(){

});
});
</script>

now like we did before, we want to tell jquery what to do once the mouse has entered that element. so to return it back to its origonal state, we want to reverse everything we done to make it hide. so we want to move the bar up by 40 pixels and increase the opacity to its solid state. simply by doing adding the following into the newly opened function.

<script type="text/javascript">
$(document).ready(function(){

$('#bar').animate({opacity: 0.5, bottom: '-40'});

$('#bar').mouseenter(function(){

$('#bar').animate({opacity: 1, bottom: '0'},{queue:false,duration:500});

});
});
</script>
Simple hey. well the next bit is just as easy, we want it to return to its state before we hovered over it, and we want to do this when the mouse leaves the element which holds an id of bar.

so beneith the last function we created, we want to add another listener and cause it to return the bar into hiding when the mouse leaves, we use the event of 'mouseleave' and we can copy and past the origional code we used to hide it when the document first loaded up.

<script type="text/javascript">
$(document).ready(function(){

$('#bar').animate(opacity: 0.5, bottom: '-40');

$('#bar').mouseenter(function(){

$('#bar').animate(opacity: 1, bottom: '0');

});

$('#bar').mouseleave(funtion(){

$('#bar').animate(opacity: 0.5, bottom: '-40');

});

});
</script>


anyway, hope you have been able to follow alll that ok. its a real simple script to pull off, and can make a page look real nice, these kind of effects can be used on several different things in several ways... you can move objects, change the size of things... all sorts really.

@jack.

trust me jquery is so easy to get the hang of. i dont understand very much of ajax/JS at all... but the things i want to do in ajax is just made so much simpler with this library.


Edit for new code implant ~

As you will notice i have added the following part to sections of the code.

,{queue:false,duration:500}

by doing this, we are removing the queuing action for the animations, and setting the animation duration (which i missed out to start with lol).

so rather than the animation jumping up and down like it would have done if you moused in and out to quick. it now interupts the current animation and replaces it with the correct animation to run.

so if you have read through this tutorial already, i advise you re-read through because of the changes. it makes everything flow much nicer