JBDaddy
Well-Known Member
This is mostly a gripe about the software the forum runs on, and not how it's configured or managed here. I love the forum, except for one thing...
I hate that the title of a forum thread I'm reading is usually off-screen at the top. The Tapatalk (Android, at least) app leaves the title partially at the top of the screen no matter how far you scroll, and it's handy. The desktop site doesn't.
UNTIL TODAY (sorta. In Chrome. With an extension.) Here's how it looks for me now (the orange box is only here to highlight what's new):
This was something I could "fix", and thought I'd share how. Caveat emptor. I'm not promising tech support on this if you try it and something goes wacky. Just remove the Chrome extension and you'll be back to normal.
This Google Chrome extension - "User Javascript and CSS" -
https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
... lets you add your own CSS and Javascript code to any web site you visit. So here's my setup:
1: This is what URL(s) the Javascript and CSS should apply to. With the url: http://saddlehunter.com/community/index.php?threads it'll only affect posts I'm reading, not main forum lists, user setup, etc.
2: This is javascript code. You don't really have to know HOW it works, but what it does is "every time this window scrolls, see if the title of the post has gone off the screen, and if it has, stick it at the top of the area showing and keep it there." Here it is, for easy copy/paste:
3: This is CSS code. It is what decorates and positions the title at the top, when it has been stuck there by the Javascript above. Here it is, for easy copy/paste:
.fixed-titlebar {
position: fixed;
z-index: 1000;
background: #fff;
top: 80px;
left: 0;
width: 100%;
border: solid 2px #ccc;
border-width: 0 0 2px 0;
padding: 4px;
}
When you put those blocks of text in the Extension per my screenshot above, click the Save button, then re-load a post at saddlehunter.com, the title of the post should get stuck at the top when it would normally be off-screen. Now as I'm going through 20 tabs of "new posts" which always scroll to the most recent replies, I can see what topic each one is replying to at the top.
Now you all know just how big of a nerd I am.
I hate that the title of a forum thread I'm reading is usually off-screen at the top. The Tapatalk (Android, at least) app leaves the title partially at the top of the screen no matter how far you scroll, and it's handy. The desktop site doesn't.
UNTIL TODAY (sorta. In Chrome. With an extension.) Here's how it looks for me now (the orange box is only here to highlight what's new):
This was something I could "fix", and thought I'd share how. Caveat emptor. I'm not promising tech support on this if you try it and something goes wacky. Just remove the Chrome extension and you'll be back to normal.
This Google Chrome extension - "User Javascript and CSS" -
https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
... lets you add your own CSS and Javascript code to any web site you visit. So here's my setup:
1: This is what URL(s) the Javascript and CSS should apply to. With the url: http://saddlehunter.com/community/index.php?threads it'll only affect posts I'm reading, not main forum lists, user setup, etc.
2: This is javascript code. You don't really have to know HOW it works, but what it does is "every time this window scrolls, see if the title of the post has gone off the screen, and if it has, stick it at the top of the area showing and keep it there." Here it is, for easy copy/paste:
if (1==1) {
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('.mainContent').offset().top;
if (window_top > div_top) {
$('.titleBar').addClass('fixed-titlebar');
$('.mainContent').height($('.titleBar').outerHeight());
} else {
$('.titleBar').removeClass('fixed-titlebar');
$('.mainContent').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
}
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('.mainContent').offset().top;
if (window_top > div_top) {
$('.titleBar').addClass('fixed-titlebar');
$('.mainContent').height($('.titleBar').outerHeight());
} else {
$('.titleBar').removeClass('fixed-titlebar');
$('.mainContent').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
}
3: This is CSS code. It is what decorates and positions the title at the top, when it has been stuck there by the Javascript above. Here it is, for easy copy/paste:
.fixed-titlebar {
position: fixed;
z-index: 1000;
background: #fff;
top: 80px;
left: 0;
width: 100%;
border: solid 2px #ccc;
border-width: 0 0 2px 0;
padding: 4px;
}
When you put those blocks of text in the Extension per my screenshot above, click the Save button, then re-load a post at saddlehunter.com, the title of the post should get stuck at the top when it would normally be off-screen. Now as I'm going through 20 tabs of "new posts" which always scroll to the most recent replies, I can see what topic each one is replying to at the top.
Now you all know just how big of a nerd I am.