[RD]Multiple Sidebar pull out?

[La Lune Mauve]

okay, well, how do I make that a clickable that hides and shows with a graphic to click on? And for it to stay where it is would be... position: absolute right?

[KELSEY'S GOT A GUN]

No. It would be position: fixed;, as specified in the code. Unfortunately, an onclick or onmouseover event would require JavaScript or jQuery, neither of which I know. I'm sure that if you waited a little bit, one of the master coders here might be able to help you. I would also recommend posting this request (with the image you posted as well, since that helped quite a bit) on other coding resource sites so as to get help in other places.

Also, this page may be of some help.

[Todge]

Just a note to say, that 'position: fixed' will not work with IE, as we can't specify a doctype.

It can be worked around though..

Would something like this work for you? (Put it in your footer)

<div id="fBox">
<table height="175px" style="border: 1px solid black; position: relative; top: 2px;" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="fContent" style="display: none; border-right: 1px solid black; padding: 4px;">
<div id="nvtree"></div>
<hr>
<center><b>Click To View</b></center>
<div id='threadlog'></div>
</td>
<td id="fBoxTab" align="center" valign="middle" width="1" style="font-size: 9px; cursor: pointer; padding: 4px;"><b>N A V T R E E & T H R E A D L O G</b></td>
</tr>
</tbody>
</table>
</div>

<style type="text/css">
<!--
#fBox {
position: absolute;
left: 0px;
top: 0px;
_bottom: expression( ignoreMe=50-document.body.scrollTop+"px");
}
body > #fBox {
position: fixed;
}
#fBoxTab, #fContent {
margin: auto; background-color: #CCCCCC; );
}
-->
</style>

<script type="text/javascript">
<!--
// fBox mechanics..

function fBoxCookieSet()
{
var exdate=new Date();
exdate.setFullYear(exdate.getFullYear()+1);
if(document.getElementById('fContent').style.display == 'none')
document.cookie="fbox=hide;expires="+exdate.toGMTString();
else
document.cookie="fbox=show;expires="+exdate.toGMTString();
return;
}

if(document.cookie && document.cookie.match(/fbox=/))
{
if(document.cookie.split('fbox=')[1].match(/^hide/))
document.getElementById('fContent').style.display = 'none';
else
document.getElementById('fContent').style.display = '';
fBoxCookieSet();
}

document.getElementById('fBoxTab').onclick = function(){
if(document.getElementById('fContent').style.display == 'none')
document.getElementById('fContent').style.display = '';
else
document.getElementById('fContent').style.display = 'none';
fBoxCookieSet();
}
// -->
</script>

[La Lune Mauve]

That's some what of the idea that I'm looking for. But I want more than one, and it just has multiple tables in it that slide in and out of view when you click on a tab. I'd also like it to slide with the forum instead of being in one spot.

[Todge]

Try this in your footer..

<script type="text/javascript">
<!--
// Open/close side tables

function popopen(c)
{
if(c.previousSibling.className == 'pophidden')
{
c.previousSibling.className = 'popshow';
}
else
{
c.previousSibling.className = 'pophidden';
}
return;
}
// -->
</script>

Followed by this..

<style type="text/css">
<!--
.popout { border: 1px solid black;}
.pophidden { display: none; }
.popshow { background-color: #FFFFFF; width: 100px; }
.popclick { cursor: pointer; background-color: #CCCCCC; color: FFOOOO;  height: 150px; width: 20px; }
-- >
</style>

Edit the above stylesheet for colors, dimensions, borders etc..

Then put this for each tab..

<div class="popout" style="position: absolute; top: 50px;"><table>
<tbody>
<tr>
<td class="pophidden">Cell 1 content</td><td class="popclick" align="center" onclick="popopen(this);">C<br>L<br>I<br>C<br>K<br><br>M<br>E</td>
</tr>
</tbody>
</table>
</div>

and edit as follows..

The red number is the distance from the top of the screen the tab will appear..

The blue is the contents of the pop-out cell..

The green is the contents of the tab..

[La Lune Mauve]

it doesn't even show up... I added all of that to the top of my global footers.

EDIT

---

*looks around more* actually, it messes up another css coding I've done :/

[Todge]

What does it mess up?

[La Lune Mauve]

:/ I noticed that the section divide part is smaller now, but it didn't change when I took your code back out, so maybe it's another code that's messing with it. But your code still isn't showing up.

[KELSEY'S GOT A GUN]

Actually, I can see it...on your welcome table. And clicking it leads me to an entirely different forum. Try it at the bottom of your global footers.

[La Lune Mauve]

O.o leading to an entirely different forum? You mean the forum the test site is for? atw=athrivingworld atwtestsite is a test site for the real forum athrivingworld. But other than that, I don't see it anywhere. All I see is what I've been seeing and for some reason, the category that shouldn't be showing. Maybe show me what you're seeing? Because I still don't see it.

EDIT

---

Alright, so putting Todge's code at the bottom of the footer worked. Now it shows and you can click on it. But is there any way I can get the code to work on the exact left side of the forum? That way it looks like it's being pulled out from the side of the sceen instead of the welcome table.

[Todge]

It's doing that because you have the table going off the bottom of the screen.

Try moving the code to the top of the header instead.

[KELSEY'S GOT A GUN]

Jun 8, 2012 12:02:37 GMT -8 Todge said:

It's doing that because you have the table going off the bottom of the screen.

Try moving the code to the top of the header instead.

Just to add onto this, put it above any code that edits or alters the welcome table.

[La Lune Mauve]

That just messed up all the codes I have to make the welcome table what it is. And I can't even click on the tabs anymore.

[Todge]

Change the bottom parts of the code with this..

<div class="popout" style="position: absolute; left: 0px; top: 50px;"><table>
<tbody>
<tr>
<td class="pophidden">Cell 1 content</td><td class="popclick" align="center" onclick="popopen(this);">C<br>L<br>I<br>C<br>K<br><br>M<br>E</td>
</tr>
</tbody>
</table>
</div>

[La Lune Mauve]

bottom parts of what code? I have exactly what you gave me before...