top



How do I make it a sidebar on the left of my forum?

WD used to have this before.

On mine, I want this Wink

Google Chrome Icon
FB Icon
Twitter Icon

Keep in mind I have Phpbb3 Wink

A simple code for a sidebar is this,

Code:

<div style="position: fixed; top: 35%; left: 5px;">
<a href="#"><img src="image" border="0" height="32" width="32" ></a></div>
<div style="position: fixed; top: 40%; left: 5px;">
<a href="#"><img src="image" height="32" width="32" border="0"></a></div>
<div style="position: fixed; top: 45%; left: 5px;">
<a href="#"><img src="image" border="0" height="32" width="32" ></a></div>
<div style="position: fixed; top: 50%; left: 5px;">
<a href="#"><img src="image" border="0" height="32" width="32" ></a></div>
<div style="position: fixed; top: 55%; left: 5px;">
<a href="#"><img src="image" border="0" height="32" width="32" ></a></div>

Maybe you can post this at your homepage message?I think that shall work for forumotion's phpbb3 Wink

It works in the homepage message however it causes my forum to go crazy. It causes everything to go left.

@Nick: You forgot the close the tags (I have edited it)

Worked like a charm Wink

Thanks.

Solved & Locked

I have another question.

So, the icons look good, but I want it where its not always their. You guys did something on the top left where you click that thing, and then they appear.

I want a cool something like that. (a bar)

Thanks!

That's jQuery. Since we don't share most of our codes, I'll give you a starter, and leave you too it.

Code:
jQuery(function() {
  jQuery('#sax-sidebar-toggle').click(function() {
    jQuery('#sax-sidebar').toggle('slow');
  });
});

I know nothing about code, so do I just add that to the homepage message and it will work? Do I add that under the code Nick posted.

It's not going to work like that..
You'll need to wrap Nick's creations in #sax-sidebar, and add the trigger.

Im sorry to be a right pain, but could you do it for me.

Everytime I mix something together it never works. I would prefer me just to copy and paste the correct code.

Sorry again to be a pest.

PlatinumWata wrote:Im sorry to be a right pain, but could you do it for me.

Everytime I mix something together it never works. I would prefer me just to copy and paste the correct code.

Sorry again to be a pest.


@japo sorry man i just got owned LOL i had some problems with my javascript that moment Wink & Tongue

Back on topic..

Sorry mate if i sound a little bit "extreme" but you will need to know some basics first.
I can work on the code for you,so read this lines as an intro.

All you have to do is embed the jquery library into your homepage message(Since you say you have phpbb3) and the jquery sax posted above.

So lets get it straight:
Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
This is the latest jquery javascript code.Copy and paste it as it is at the top of your homepage message.
Now after it you will have to post the jquery you have to work with,instead of the library itself.
Heres an example:
Code:

<script type="text/javascript">
$(document).ready(function() { //When document is ready
$("#sidebar a").hover(function() { //When sidebar a is hovered
$("#title").fadeIn(500); //the title fades in in 500 miliseconds
}); //end of hover function
$("#sidebar a").mouseout(function() { //Whne mouse is out
$("#title").fadeOut(500); //The title fades out in 500 miliseconds
}); //End of mouseover function
}); //End of document ready
</script>
<div style="position: fixed; top: 35%; left: 5px;">
<a href="#"><img src="image" border="0" height="32" width="32" ></a></div>
<div style="position: fixed; top: 40%; left: 5px;">
<a href="#"><img src="image" height="32" width="32" border="0"></a></div>
<div style="position: fixed; top: 45%; left: 5px;">
<a href="#"><img src="image" border="0" height="32" width="32" ></a></div>
<div style="position: fixed; top: 50%; left: 5px;">
<a href="#"><img src="image" border="0" height="32" width="32" ></a></div>
<div style="position: fixed; top: 55%; left: 5px;">
<a href="#"><img src="image" border="0" height="32" width="32" ></a></div>

You will also have to style the title in your css with display:none;
Notice:SideBar a represents the anchor tags of your sidebar.Make sure to change them they are just samples.The title as well.