I need help putting a side scroll bar

[POETICDRINK2U]

I need help adding a side scroll bar to my website so I can add a twitter feed. I also need help centering my photo on my main page. Any help is appreciated. Boxing Game Wishlist

[Wormopolis]

over on the right?

[POETICDRINK2U]

Aug 8, 2013 14:29:41 GMT -8 Wormopolis said:

over on the right?

Yes.Thanks for the reply back.

[Wormopolis]

ok.. thats on a custom page right?

[POETICDRINK2U]

Aug 9, 2013 22:14:15 GMT -8 Wormopolis said:

ok.. thats on a custom page right?

My main page is custom. I don't know if my forum is considered as custom even though I made a few color changes. I'm willing to give you the privileges on my site if you can help my situation. I'm not that good at these things.

[Wormopolis]

nah I dont need it. I just needed to know what I was looking at to make sure I told you where to put what I am working on. its basically just going to be adding the content directly into your custom page then. before the V5 upgrade, this forum has a small box that scrolled on the side of the forum with some links and a thread tracker in it. I am cleaning up the code for it and making it where you can choose its top most position before scrolling (like the bar that floats while viewing posts).

[POETICDRINK2U]

Aug 10, 2013 17:10:25 GMT -8 Wormopolis said:

nah I dont need it. I just needed to know what I was looking at to make sure I told you where to put what I am working on. its basically just going to be adding the content directly into your custom page then. before the V5 upgrade, this forum has a small box that scrolled on the side of the forum with some links and a thread tracker in it. I am cleaning up the code for it and making it where you can choose its top most position before scrolling (like the bar that floats while viewing posts).

Oh, Ok, Let me know when you are finished. Thanks!

[Wormopolis]

I havent stopped working on it. Im really close. the way I used to do it isnt allowed by PB anymore, so I am doing it a new way with jQuery.

[Wormopolis]

ok, what you are going to do:

on your custom page, make a new HTML widget

paste this code into it:


<style type="text/css">
   #floatNav {z-index: 50; position: absolute; width:12%; right:10px;}
</style>
<table  id="floatNav" cellspacing="1" cellpadding="0" border="0" align="left" valign="top">
   <tr>
       <td style="height:100%">
           <!--  This is where content goes -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </td>
   </tr>
</table>

<script type="text/javascript">
<!--
// floating NavBox script

function floatNav() {
   var topStart=180;  //this is how many pixels from the top to start the box
   
           $('#floatNav').css({'position':'absolute','top':topStart+'px'});
   $(window).scroll(function(){
       if ($(window).scrollTop()  < 180) {
           $('#floatNav').css({'position':'absolute','top':topStart+'px'});
       } else {
           $('#floatNav').css({'position':'fixed','top':'0px'});            
       }
   });
   //$(document).prepend($('#floatNav').show());
}
floatNav();
//-->
</script>





the 3 things you need to edit:

the CSS at the top. the "right" is how far from the right edge you want it. you might have to play around with numbers. the "width" is how wide you want the box. it will wrap automatically

the content itself. you will see a comment showing where your content needs to go (where all the Latin is). you replace the latin stuff. if you are putting in more HTML, that is fine, but it has to be valid. dont leave any unclosed tags or it will ave adverse effects.

in the script, the variable at the top is how far down the page the box starts. when the page is scrolled up, the box will start there. as you scroll down the page, if the top of the page moves past that point, it will start scolling with the top of the page. if you scroll back up, it will scroll up with the page until it gets back to where it started and then stick there.


let me know how that turns out

[Wormopolis]

did that not work?

[POETICDRINK2U]

Aug 16, 2013 2:11:10 GMT -8 Wormopolis said:

ok, what you are going to do:

on your custom page, make a new HTML widget

paste this code into it:


<style type="text/css">
   #floatNav {z-index: 50; position: absolute; width:12%; right:10px;}
</style>
<table  id="floatNav" cellspacing="1" cellpadding="0" border="0" align="left" valign="top">
   <tr>
       <td style="height:100%">
           <!--  This is where content goes -->
<a class="twitter-timeline" href="https://twitter.com/SimBoxing" data-widget-id="365448928046481410">Tweets by @SimBoxing</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>


       </td>
   </tr>
</table>

<script type="text/javascript">
<!--
// floating NavBox script

function floatNav() {
   var topStart=180;  //this is how many pixels from the top to start the box
   
           $('#floatNav').css({'position':'absolute','top':topStart+'px'});
   $(window).scroll(function(){
       if ($(window).scrollTop()  < 180) {
           $('#floatNav').css({'position':'absolute','top':topStart+'px'});
       } else {
           $('#floatNav').css({'position':'fixed','top':'0px'});            
       }
   });
   //$(document).prepend($('#floatNav').show());
}
floatNav();
//-->
</script>





the 3 things you need to edit:

the CSS at the top. the "right" is how far from the right edge you want it. you might have to play around with numbers. the "width" is how wide you want the box. it will wrap automatically

the content itself. you will see a comment showing where your content needs to go (where all the Latin is). you replace the latin stuff. if you are putting in more HTML, that is fine, but it has to be valid. dont leave any unclosed tags or it will ave adverse effects.

in the script, the variable at the top is how far down the page the box starts. when the page is scrolled up, the box will start there. as you scroll down the page, if the top of the page moves past that point, it will start scolling with the top of the page. if you scroll back up, it will scroll up with the page until it gets back to where it started and then stick there.


let me know how that turns out

Thanks, I guess this will work. I'm very grateful for your effort .

[Wormopolis]

Were you looking for something different?

[POETICDRINK2U]

Aug 18, 2013 2:05:40 GMT -8 Wormopolis said:

Were you looking for something different?

Yes, I wanted it to be more like on this site www.fightnews.com/

The one you have for me is like this boxinggamewishlist.proboards.com/

[Wormopolis]

the one on fightnews is just a regular side box. I dont see any scrolling action with it?

[POETICDRINK2U]

Aug 18, 2013 21:36:35 GMT -8 Wormopolis said:

the one on fightnews is just a regular side box. I dont see any scrolling action with it?

Yeah, that's what I wanted. The actual side box itself will scroll down. I want to be able to add side boxes like that. I wanted to use side boxes for affiliates too.
I guess my major want is being able to place my twitter feed like fightnews.

Thanks for replying back.