slide out side column. . .thingy

[AlterPoser]

Hi,

I'm looking for a 'slide out side column' script. Like maybe the Dynamic-Fx Slide-In Menu (http://www.dynamicdrive.com/dynamicindex1/davidmenu.htm) Or even this ONE (http://www.andrewsellick.com/examples/sliding-side-bar-scriptaculous/#). But instead of links I would like to put content. (i.e. A chatbox or even a contact form on the left side.) Does anyone know a script like that or to modify one. I really don't know anything about scripts or even HTML/CSS so any help would be great. :confused::)

Thanks ahead,

Ap

[jscheuer1]

See (jQuery version):

http://home.comcast.net/~jscheuer1/side/left_menu/

Use your browser's 'view source' to get the page code. Don't follow the link 'To Bad Fx Demo'.

Once you have one setup, you should be able to put whatever you like in it. After all, it's just markup, ex:


<div class="sideBarContents">
<div class="sideBarContentsInner">
<h2>side<span>bar&nbsp;1</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
</div>

</div>


scripts used:

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

and:

http://home.comcast.net/~jscheuer1/side/left_menu/js/side-bar_c_jq.js

You may hot link to the jquery.min.js script if you like or save a copy for your own use. You should right click and 'save as' the side-bar_c_jq.js script, as my server isn't all that reliable, and I may change, move, or delete the file.

images used:

http://home.comcast.net/~jscheuer1/side/left_menu/images/background2.gif

http://home.comcast.net/~jscheuer1/side/left_menu/images/background2.gif

http://home.comcast.net/~jscheuer1/side/left_menu/images/slide-button2-active.gif

http://home.comcast.net/~jscheuer1/side/left_menu/images/slide-button2-active.gif

http://home.comcast.net/~jscheuer1/side/left_menu/images/slide-button2.gif

http://home.comcast.net/~jscheuer1/side/left_menu/images/slide-button2.gif

These images should be saved as well.

[AlterPoser]

I pretty much got it to work and hosted the files that need to be hosted you don't have to worry about that. :)

The only thing now is how do you get only one of them to the right side? Because I want one on both sides.

Thanks so much for replying!
Ap

[jscheuer1]

I thought that might require a change to the script, and for optimal symmetry it may still, but I was pleased to see that a few additions to the css (and of course 'mirror' versions of the images) and the use of one additional class were all that was needed to get it working on the right side (like in the demo you originally linked to - which incidentally was where all of this code came from in the first place*). The right side is easier in certain ways because there is no hard edge for text to wrap against. At the same time, this will create problems (as it would in the original) if your page is wider than the screen because then one must scroll to the right to see it.

Since you don't seem to have any trouble getting the resource files, I will just upload a demo, if you need help with them (getting the resource files), let me know:

http://home.comcast.net/~jscheuer1/side/left_right_menu/

I've optimized all of the images, so if you are using those (as opposed to making your own), you may want to get all of them all over again from this new source.


*I believe Andrew Sellick (the originator as far as I can tell) first made the prototype/scriptaculous version, and then later ported it to mootools. Both of these are right side only and one instance per page only. Someone liked the mootools version because it would work with other mootools code they had, but it was written for an older version of mootools. I ported it to the latest mootools and cleaned it up quite a bit, and made an alternate left side version for them. They were happy. Then I wondered how hard it would be to port to jQuery, so did that. In the process I made it multi-use. That's we we stood at the beginning of this thread.

[AlterPoser]

Okay I pretty much got it down, I think. I changed the image so it would match a little more with the site and it looks good but when I open it and the reverse picture doesn't show. I'm lost.

Um, here the URL (http://alterposer.pl.tc) to my site.

Thanks so much for helping so far and sorry for the late reply.

[jscheuer1]

I don't see the script or anything like a side bar anywhere.

[AlterPoser]

The URL was wrong for some reason THIS (http://alterposer.webs.com) should work. If it's to complicated(for me) can I just keep it facing the same way?

[jscheuer1]

Well, the solution is pretty simple. Whatever the image that is seen at first is, the active one must be named:

image_name-active.ext

So, for:


http://alterposer.webs.com/images/sidebartab.png

you will need a:


http://alterposer.webs.com/images/sidebartab-active.png

for:


http://alterposer.webs.com/images/linkstab.png

you need a:


http://alterposer.webs.com/images/linkstab-active.png

and so on.

[AlterPoser]

lol, Thank you sooooo much. You really helped a lot.

[kumiyare]

Is it possible to make OnMouseOver instead Onclick? I've tried but not succeeded, but I've added fixed position so it will be with the user when scrolling the page.

let me have your comment.

Thanks