Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

Pages: (2) 1 2  ( Go to first unread post ) Add ReplyNew TopicNew Poll

 Help? Sidebar code messing up board
#
SO my site is here: http://conjuringfate.jcink.net


It's someone else's skin, but since the board is so long, I wanted that section of the sidebar with the chat to hover on the side, stay visible like it was fixed. WIth the banner the way it is, I can't JUST make it fixed so I found codes that work. Yay! Except, now the board's forums are all wonky! They won't go to the top where the sidebar is! Everything is fine once you scroll down far enough, but I can't get the forums and board itself to be in place at the top with where the sidebar starts!
PM
#
Okay, so the chat has two behaviors. First it is static - then when you scroll down i is fixed. Is that what you want, or did you want it to behave another way?

Edit: itlinks needs to be inside infoWrap and probably floating or absolutely positioned or something like that - the method you've used with margins here only works on your monitor size and gets wonky at any other size.

This post has been edited by owl: Jan 12 2017, 08:46 PM

signature
user posted image
#
Nope, that's what I wanted it to do, so that once you scroll to it, it stays there so you can always see it!
PM
#
QUOTE (owl @ Jan 12 2017, 08:35 PM)
Edit: itlinks needs to be inside infoWrap and probably floating or absolutely positioned or something like that - the method you've used with margins here only works on your monitor size and gets wonky at any other size.


Oops, accidentally did a ninja edit.

So what specifically are you wanting to fix?

signature
user posted image
#
When I scroll down, the chat and stuff is right there, but the forums don't show up until I scroll even further. I'd like them to be starting at the same point. Chat on the left, forums on the right.
PM
#
Is this what you mean? (Screenshot below.)

Try changing this:

<script>
$(function(){
var stickyHeaderTop = $('#sidebar-container').offset().top;

$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#sidebar-container').css({position: 'fixed', top: '95px'});
$('#sticky').css('display', 'block');
} else {
$('#sidebar-container').css({position: 'static', top: '95px'});
$('#sticky').css('display', 'none');
}
});
});
</script>


To this:

<script>
$(function(){
var stickyHeaderTop = $('#sidebar-container').offset().top;

$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#sidebar-container').css({position: 'fixed', top: '95px'});
} else {
$('#sidebar-container').css({display: none});
}
});
});
</script>

If it doesn't work please leave the code intact and let me troubleshoot it as best I can.

This post has been edited by owl: Jan 12 2017, 08:54 PM

Attached 1 File(s)
Attached Image

signature
user posted image
#
yes on the screenshot, and the code fixed the forums, but made the chat always in the corner, even over the banner. Instead of next to the forums and THEN fixed as you scroll to it.
PM
#
Hmm. I wish I was more familiar with javascript syntax. Try this one maybe:

<script>
$(function(){
var stickyHeaderTop = $('#sidebar-container').offset().top;

$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#sidebar-container').css({position: 'fixed', top: '95px'});
$('#sticky').css('display', 'block');
} else {
$('#sidebar-container').css({position: 'static', top: '-460px'});
$('#sticky').css('display', 'none');
}
});
});
</script>


Try this in your CSS instead:

#sidebar-container {margin-bottom: -475px}

Edit: Also this for the scroll back up:

#banner, #infoTable, .important {position: relative; z-index: 100}

This post has been edited by owl: Jan 12 2017, 09:06 PM

signature
user posted image
#
It fixed the sidebar container but the forums still won't match up, I'm not sure, I tried fixing wrapper andboard numbers as well and it just stays down there!
PM
#
Did you see all my edits and apply them as well? Sorry, this forum seems to combine edits to avoid double-posting, and sometimes the behavior is a little confusing.

If not, what do you mean by "the forums still won't match up" - are you still talking about the same thing as in my screenshot?

signature
user posted image
#
Okay I did the updates and the forum is where it needs to be! Thank you so much!!!
PM
#
No problem, I'm happy to help. If you want to fix the other problem I mentioned earlier you can add the following:

#infoTable {max-width: 1400px; margin: 0 auto}

Then change:

.itlinks {
height: 235px;
width: 267px;
position: absolute;
margin: 10px 40px 0px 480px;
}


to:

.itlinks {
height: 235px;
width: 267px;
position: absolute;
margin: 10px 40px 0px 445px;
}

This post has been edited by owl: Jan 12 2017, 09:17 PM

Attached 1 File(s)
Attached Image

signature
user posted image
#
All right added those codes as well!
PM
#
Looks like it's missing:

#sidebar {margin: 0 0 -475px}

For some reason it looks like it's getting over-ridden when it targets #sidebar-container instead, I'm guessing because of the javascript you're using but hopefully this will do the same thing. But other than that it's looking really sharp!

This post has been edited by owl: Jan 12 2017, 09:29 PM

signature
user posted image
#
You have been so incredibly helpful! I kind of know coding but it's someone else's and I was worried about screwing it all up trying to change it!
PM
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

OptionsPages: (2) 1 2  Add ReplyNew TopicNew Poll