Floating Sidebar Menu - Dreamweaver Tutorial - 2 of 2

[Zoske1]

with CSS3 is WAAAY easier!

[DreamWeaverTutorial]

@Zoske1 place the code below if it is so easy.

[Zoske1]

@DreamWeaverTutorial is easier, but it's a lot more code. basically you just give a static proprety to the body and you make a transition in the CSS proprety: height; and set the timing as ease. too long proces maybe..

[McGrawTV]

I cant get it to scroll down with everything? Where could I have messed up?

[sureshrp1962]

As usual great tutorial. Please start an episode of joining form with log in session.

Thank you

[GeeBi]

If I want it position on the right instead how do I do that? I tried changing left to right, but doesn't work.

[DreamWeaverTutorial]

@GeeBi Hi GeeBi, go into the sidebar.js file and you will see a targetX and targetY. change the targetX to -60 and that will put it on the right.

[lauArg1]

ummm this video is great, but why not just use #floatdiv {position:fixed;} ??

it would be much easier I think, but then again i am just a beginner..

please don't take this in a wrong way; i am just a curious kitty :P

[DreamWeaverTutorial]

@lauArg1 because this animates. you cant animate with position:fixed on its own.

[scottstobbe]

This script doesnt work in Internet Explorer 8 : ( works great in Firefox tho. Any ideas on a compatability fix?

[DreamWeaverTutorial]

@scottstobbe hi, it works in IE8. the only browser where there might be an issue is IE6 because of alpha transparency. You should check back on your code - James

[herc753]

Great tutorial BTW.

one problem i am having. I have created 2 bars. One for the left and one for the right. I can get the left to work if I take out the right, but when i put in the right bar, it will float and the left is stationary. What is the problem i am running into?

Also, you say to attach the script files in the head tag but when you do they dont float and they have to be referenced in the body.

I am new to this so bear with me if my questions are not so smart.

thanks for the help.

[TheVirusInfection]

WILL U MARRY ME ALL VIDEOS HELP ME U ARE THE BEST !!!!

[DopeBeatsProductions]

how do i add this to a existing template?

[DreamWeaverTutorial]

@DopeBeatsProductions pretty much the same way. go to my website, the link is in part 1 and follow the instructions from the written tutorial - James

[MPKempson]

Thanks for your last post, worked a treat!

Sorry to be a pain (again!) but can you have two of these floating bars on the same page? i.e. one on the left and one on the right?

[DreamWeaverTutorial]

@MPKempson yes you can, if you know javascript you can create a new variable. if you dont know javascript then duplicate the sidebar.js file and call it sidebar2.js and rename the variable inside from

var floatingMenuId = 'floatdiv';

to

var floatingMenuId = 'floatdiv2';

and rename any other instance in the script as well. then create the html and name the div to floatdiv2. then attach the scripts in the head tags.  sounds like a lot of work but should take you 10 mins.

-James

[MPKempson]

@DreamWeaverTutorial Im really sorry to be a massive pain but im a relative novice and don't really understand

would you be able to send me a more detailed description for me to follow if i gave you my email address?

[MPKempson]

Worked fine thanks!

How would I make it float on the right hand side instead of the left side?

Thank you ever so much for your help!

[DreamWeaverTutorial]

@MPKempson glad you liked it, go into the sidebar.js file from the top of the document window and adjust the targetX property to say:

targetX -65, <--- (thats minus 65 )

keep adjusting until you get it positioned how you want it. hope that helps. - James

[DustyMooseHamilton]

@DreamWeaverTutorial Thanks for the great tutorial. I do have one question though. In Dreamweaver (CS4) I've got it set up all nice, however, when I load it in my browser, the div tag starts floating approximately halfway down the page. I've checked my margins, padding, etc. and they all seem to be set to 0. I'm trying to have the div tag start floating right below the header.

Any thoughts?

You do great tutorials. Keep them coming.

[DreamWeaverTutorial]

@DustyMooseHamilton Hi, next to source code and css file there will be a file called sidebar.js , go inside ot it and you will see a javascript selector which says:

targetY:300 <-- in red

this is your vertical Y axis so set it to 0 to appear at the very top.

hope that helps - James

[Dexon25]

tnx man u help me a lot

[rg0702]

Wow!! One of the BEST tutorials I have seen! Thanks so much for your time & effort ... it's much appreciated.

[DreamWeaverTutorial]

@rg0702 Oh thanks, Im glad you liked it !

[Naladra]

Thanks!

[tirathmistry]

Excellent tutorial

I ve seen so many Dreamweaver tutorials in so many languages by so many ppl, and yours is by far the best, not just because what you do is technically superior than others, but becos u are able to explain so clearly that even a newbie like me can look good using Dreamweaver !

Thanks! There's so much to be learned from your tutorials. Anyone offering their skills is appreciated, and none are better than yours.

*clap clap!!!!

[DreamWeaverTutorial]

@tirathmistry Thanks for your comments! Its good to know that people appreciate them!