jQuery help please

Discussion forum for Extension Writers regarding Extension Development.
User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 2306
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

jQuery help please

Post by HiFiKabin » Mon Aug 28, 2017 10:51 am

... or maybe CSS, I'm not sure.

re my sticky bar ext viewtopic.php?f=456&t=2436091

the navbar 'detaches' and stays at the top of the screen perfectly, but if you 'goto' a post it covers the top of that post. Both the navbar and forum post and fixed to the top of the browser screen. What I would like is the 'goto' post to appear under the navbar.

... as a photo tells a thousand words. If i click to goto post 3573
screenshot_28.png
this is what shows
screenshot_29.png
and what i would like to happen is
screenshot_30.png
jQuery below

Code: Select all

$(document).ready(function() {

var fixedNav = function(){
	var fixedTop = $('#page-header > .navbar').offset().top,
		fixedWidth = $('#page-body').width(),
		scrollTop = $(window).scrollTop();

	if (scrollTop > fixedTop) {
		$('#static-header').addClass("shown").removeClass("not-shown").width(fixedWidth);
	} else {
		$('#static-header').addClass("not-shown").removeClass("shown").width(fixedWidth);
	}
};

fixedNav();

$(window).scroll(fixedNav);
$(window).resize(fixedNav);
});
demo here http://phpbb.hifikabin.me.uk/

I assume its possible, but not with my limited knowledge.

TiA

User avatar
Ger
Registered User
Posts: 1155
Joined: Wed Jan 02, 2008 7:35 pm
Location: 192.168.1.100
Contact:

Re: jQuery help please

Post by Ger » Mon Aug 28, 2017 3:08 pm

If I'm not mistaken, this should help you: https://gist.github.com/HoundstoothSTL/5510082
Of course this is based on the click event and you'd need to tailor it to your identifier for the sticky header.
Checkout my extensions: Simple CMS, Feed post bot, Modbreak, Magic OGP links and Live topic update

Like my work? Buy me a coffee to keep it coming. :ugeek:

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 2306
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: jQuery help please

Post by HiFiKabin » Mon Aug 28, 2017 3:24 pm

Thanks for the link Ger. I'll have a play with it and see if I can get my poor little brain around it all.

User avatar
Ger
Registered User
Posts: 1155
Joined: Wed Jan 02, 2008 7:35 pm
Location: 192.168.1.100
Contact:

Re: jQuery help please

Post by Ger » Mon Aug 28, 2017 5:29 pm

Just yell if you can't get it to work. The code is solid, so I can help you if I have a wider timeframe
Checkout my extensions: Simple CMS, Feed post bot, Modbreak, Magic OGP links and Live topic update

Like my work? Buy me a coffee to keep it coming. :ugeek:

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 2306
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: jQuery help please

Post by HiFiKabin » Mon Aug 28, 2017 5:33 pm

Cheers mate, I'll keep on hitting things and see if I can get it all together.

... but then JS/jQuery isn't my strongest area. (but other than sleeping, what is? :roll: )

User avatar
Ger
Registered User
Posts: 1155
Joined: Wed Jan 02, 2008 7:35 pm
Location: 192.168.1.100
Contact:

Re: jQuery help please

Post by Ger » Tue Aug 29, 2017 7:30 am

If I'm not mistaken this should do the trick to scroll to the right position when requesting a specific post in a topic:

Code: Select all

(function($) {  
    var headerHeight = $("#static-header").height();
    var anchor = window.location.hash.substring(1);
	var target = $('#' + anchor)
    if (target.length) 
    {
        $('html,body').animate({
          scrollTop: target.offset().top - headerHeight
        }, 100);
        return false;
    }
})(jQuery);
As I'm writing this, I think you need to create a separate function for this, and call this both when loading a direct request ($(document).ready()) and when clicking an element on the page (click()).
Checkout my extensions: Simple CMS, Feed post bot, Modbreak, Magic OGP links and Live topic update

Like my work? Buy me a coffee to keep it coming. :ugeek:

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 2306
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: jQuery help please

Post by HiFiKabin » Tue Aug 29, 2017 4:33 pm

Many thanks, I've been busy today, bit I should have time to look at it properly tomorrow

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 2306
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: jQuery help please

Post by HiFiKabin » Sat Sep 02, 2017 1:03 pm

Sorry for the delay in getting back to you, but I have finally got some energy to get round to doing some more work on this.

Adding the jQuery which is executed by either

Code: Select all

$( document ).ready(function() {
    console.log( "ready!" );
});
or

Code: Select all

$( document ).click(function() {
    console.log( "click!" );
});
works perfectly on the forum page (ie goto a post and it is NOT hidden under the sticky bar) but in the FAQ and goto an anchor it is still hidden under the sticky header.

I can find how to execute the code with a defined anchor, but not with every anchor. Can it be done? ... or maybe hiding the sticky bar on non app.php pages might be easier :?

User avatar
3Di
Registered User
Posts: 11872
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milano - Frankfurt
Name: Marco
Contact:

Re: jQuery help please

Post by 3Di » Sat Sep 02, 2017 6:50 pm

You may define an ID or class for that specific anchor in CSS, maybe surrounding the actual HTML with a new DIV .. (I use a similar method) .. there are multiple options here. It would have been easier to lurk at the whole code at github, easier than making speculations or guesses. Downloading a package usually is not the option IMO.

html

Code: Select all

<a class="my_awesome_class">SOME_THING _HERE</a>
css

Code: Select all

/* That's a hackish workaround to make the anchor not interfere */
.my_awesome_class {
	/* do your magic .. or nothing */
}
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 2306
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: jQuery help please

Post by HiFiKabin » Sun Sep 03, 2017 8:53 am

I'll have another go with GitHub. I just don't think it likes me as it always wins.

User avatar
3Di
Registered User
Posts: 11872
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milano - Frankfurt
Name: Marco
Contact:

Re: jQuery help please

Post by 3Di » Sun Sep 03, 2017 9:22 am

HiFiKabin wrote:
Sun Sep 03, 2017 8:53 am
I'll have another go with GitHub. I just don't think it likes me as it always wins.
It seems so hard I know, I faced that stuff some time ago.
Now it goes like a charm, ask me if you need help.

Basicly, and for this use case, just create a repo and upload all the extension's files from your PC (there is a button there) called... guess what? "upload files" ;)
Want to compensate me for my interest? Donate
Please PM me only to request paid works. Thx.
Extensions, Scripts, MOD porting, Update/Upgrades

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 2306
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: jQuery help please

Post by HiFiKabin » Sun Sep 03, 2017 9:42 am

Cheers Marco. I'll have a play with it later

User avatar
Ger
Registered User
Posts: 1155
Joined: Wed Jan 02, 2008 7:35 pm
Location: 192.168.1.100
Contact:

Re: jQuery help please

Post by Ger » Mon Sep 04, 2017 9:31 am

Have you tried to check if the target element is found? E.g.:

Code: Select all

    if (target.length) 
    {
        console.log('hello there');

        $('html,body').animate({
          scrollTop: target.offset().top - headerHeight
        }, 100);
        return false;
    }
    else 
    {
        console.log('nope...');
    }
Checkout my extensions: Simple CMS, Feed post bot, Modbreak, Magic OGP links and Live topic update

Like my work? Buy me a coffee to keep it coming. :ugeek:

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 2306
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: jQuery help please

Post by HiFiKabin » Mon Sep 04, 2017 10:16 am

:oops: didn't think of that, I am getting way out of my comfort zone here. Guess I need to do some more reading to understand whats going on.

Thanks for the help

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 2306
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: jQuery help please

Post by HiFiKabin » Thu Sep 21, 2017 4:04 pm

OK, after lots of swearing/steam from the ears/hitting things I have finally managed to upload the current files to github (correctly I hope)

https://github.com/HiFiKabin/stickybar/

The stickybar currently appears on index/viewforum/viewtopic only (switch in overall_header_navbar_before.html ) as it overlays the top of the page in all app.php pages. What I would like is for it to appear as it does now, but on all pages.

I guess its a simple fix if you know how (which obviously I don't :roll: )

Post Reply

Return to “Extension Writers Discussion”

Who is online

Users browsing this forum: No registered users and 9 guests

cron