Several useful items ⇒ A solution to anchor links if you're using Fixed NavBar extension!

[kaspir]

This solution will fix the scroll position of anchor links in the FAQ page and on any post target links, especially if you're using Fixed NavBavs extension!

For those who don't use the extension, this may not be as useful. But if you've been using it, you probably noticed the top floating bar covers a potion of your post title, author, etc when you click on any post target url, like form the index.

I know we all don't go there enough.. the phpBB FAQs page. For instance, click the FAQ topic here: Why Can't I Register, and in doing so, you will be directed to an anchor on the FAQs content page, for the specified FAQ. (You'll see what I mean, that is until Dmzx uses this fix!)

NOTICE how the page loads past the actual anchor topic you clicked or the Fixed Top Bar covers the anchored title. Creating confusion, forcing the user to scroll up or search.

This is an issue that has bothered me for a while, but never got around to.. here's the solution. Resulted to jQuery url detection.. I'm not that great with scripts but here goes..

---

Add the custom CSS for a new class 'adjust-anchor' (or name whatever you want)

Code: Select all

.adjust-anchor{ //keep both the same
	padding-top: 55px;
	margin-top: -55px;
}

Adjust as necessary, this one is only for the FAQ page.


Next, open the overall_footer_after.html from the Fixed Nav bar extension theme/template folder. OR, inject into your themes overall_footer.html below the <!-- EVENT overall_footer_after -->

Add after everything else Add these lines on a new blank line after the preceding line(s) to find

Code: Select all

<script type="text/javascript">
$(document).ready(function () {
	if(window.location.href.indexOf("p=") > -1) { // post target links
		window.scrollBy(0, -55);
	}
	if(window.location.href.indexOf("faq") > -1) { // FAQ page
		$('.faq > dt').addClass('adjust-anchor');
	}
});
</script>

Save, upload and purge cache.


This has been another nuke by yours truly!

[kaspir]

Unfortunately, I just realized that window.scrollBy(x, y); only works in Firefox.

I'll come up with more for IE and Google another day. Just my luck..

[kaspir]

Best I could come up with all afternoon.. and man did I google and try many things. This may be a cheap ass solution, but it's the only thing that works for me right now in Chrome (so there your sign, I'm done!). Still a great addition to Fixed Header ext. Anyone wanna test in IE and/or let me know if a better solution, thanks.

EDIT: Final version (because I found bugs on dumb shit like first post.. so far so good)
This is combined copy I'm running now, works way better with some cleaned up mistakes (note: the added .post-container change in CSS)

CSS:

Code: Select all

.adjust-anchor, .post-container {
	padding-top: 60px;
	margin-top: -60px;
}

footer script:

Code: Select all

<script type="text/javascript">
$(document).ready(function () {
	if(window.location.href.indexOf("p=") > -1) { // default post target links
		if(window.location.href.indexOf("posting.php") > -1) {
			// do nothing, while posting & editing (fixes the bug)
		} else {
			$('html, body').animate({scrollTop: $(window.location.hash).closest(".post-container").offset().top}); // Firefox & Chrome tested, untested on IE
		}
	}
	if(window.location.href.indexOf("faq") > -1) { // FAQ page
		$('.faq > dt').addClass('adjust-anchor'); // work all browsers
	}
});
</script>

EDIT: Took out 'window.scrollBy(0, -60);' because I discovered .animate works great with Firefox too! Screw IE..

[ambren]

I'm having trouble with clearfix and the fixed position navbar. The first div immediately following the navbar is hidden below and I can't figure out how to get it to display below the navbar.

Any help or suggestions would be greatly appreciated!!