Community @ The Turning Gate

Support community for TTG plugins and products.

You are not logged in.

#1 2017-07-18 23:32:19

bonapictura
Member
From: Cuijk - Netherlands
Registered: 2017-07-18
Posts: 8
Website

Top of Page Button

Hi,

I'm working on upgrading my site from CE3 to Backlight and I'm very happy with what I've seen from Backlight so far.
Kudos to Matthew and Ben, and many contributors on this forum, for making this easy to use platform. It's a big step forward compared to CE3.
Now to my question:
In my CE3 site I have a link in the footer to go back to the top of the page. I was searching the forum to do the same in Backlight and I found a post from Monte Trumbull with a much more elegant solution:
http://community.theturninggate.net/vie … hp?id=6175

I tried to implement this in my test site http://bldev.bonapictura.nl
but it's not working properly. I can get the button to display and it works when I click but it's not behaving the same as the one on Monte's site https://www.montetrumbull.com/
It's supposed to appear when you scroll down a bit and disappear when you're back on top of the page. And it should slowly scroll back to top.
So apparently the <script> part is not working on my site. I must be doing something wrong, can anyone help?
I added this to my custom php:

function ttg_footer_bottom( $style, $path ) { 
    echo '
    <a href="#top" class="btn-scroll-to-top" title="Top of page" style="display: inline;"><i class="fa fa-arrow-up fa-lg"></i></a>
    
    <script>
    $(document).ready(function() {
        $(".btn-scroll-to-top").click(function() {
            $("html, body").animate({ scrollTop: 0 }, "slow");
            return false;
        });
        $(window).scroll(function() {
            if ($(this).scrollTop() > 200) {
                $(".btn-scroll-to-top").fadeIn();
            } else {
                $(".btn-scroll-to-top").fadeOut();
            }
        });
    });
    </script>
    ';
}

and this to my css:

.btn-scroll-to-top {
    background-color: transparent;
    display: none;
    position: fixed;
    bottom: 5px;
    right: 5px;
	border: 1px solid;
	height: 32px;
	width: 32px;
	border-radius: 50%; 
    text-align: center;
	line-height: 29px;
	vertical-align: middle;
    text-decoration: none;
    color:#6f7c80;
}
.btn-scroll-to-top:hover {
    text-decoration: none;
    color:#000000;
}

Last edited by bonapictura (2017-07-18 23:35:24)

Offline

#2 2017-07-19 00:32:27

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,806
Website

Re: Top of Page Button

Hi John,

looks like the reason that the button is always appearing is the bold part in this line of your code:

<a href="#top" class="btn-scroll-to-top" title="Top of page" style="display: inline;"><i class="fa fa-arrow-up fa-lg"></i></a>

inline styling will override any css (unless you use !important;) so the display: none; in your custom css for the .btn-scroll-to-top class isn't being used.

So try removing style="display: inline;" from your phplugins code.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#3 2017-07-19 01:24:00

charlie.choc
Member
From: Marietta, GA
Registered: 2014-01-09
Posts: 359
Website

Re: Top of Page Button

I just tried that code and it behaves the same way for me with or without display: inline. The arrow stays at the bottom and does return to the top but doesn't scroll up and down like Monte's.

Last edited by charlie.choc (2017-07-19 01:24:20)

Offline

#4 2017-07-19 01:37:24

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,806
Website

Re: Top of Page Button

you could try comparing Monte's original version (posted some time ago) with what he actually has on his website. Backlight has changed a bit since then and he may have also tweaked his css.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#5 2017-07-19 01:39:52

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,806
Website

Re: Top of Page Button

When I remove style="display:inline;" from the code on John's page using the browser inspector, the arrow disappears from the page.
I haven't tried the code myself yet though.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#6 2017-07-19 01:46:43

charlie.choc
Member
From: Marietta, GA
Registered: 2014-01-09
Posts: 359
Website

Re: Top of Page Button

I actually cut and pasted the code from his site.

Offline

#7 2017-07-19 02:08:52

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,806
Website

Re: Top of Page Button

I just got it to work on a test site.
http://test.barbeephoto.com/galleries/s … -top-test/
The button doesn't showing until you scroll down a bit.

The only changes I made were that I used the ttg_scripts hook and that I removed style="display: inline;" from the html in the phplugins file

I did have to add a little more css. Since this is using a standard Backlight Pangolin page template, the footer bottom-pallet is active and the scroll to top button, while visible, is still below the footer. Adding some z-index to the anchor element fixed that.
I added this to the custom css:

a.btn-scroll-to-top {
	z-index: 3;
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#8 2017-07-19 02:26:24

charlie.choc
Member
From: Marietta, GA
Registered: 2014-01-09
Posts: 359
Website

Re: Top of Page Button

Thanks.

Offline

#9 2017-07-19 02:42:19

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,806
Website

Re: Top of Page Button

John,
this is off-topic but you'll probably soon notice some weirdness in your navigation menu, specifically with the sub-menu items in the flyout menu. It's being fixed for the next update. See this thread if you're curious about it: http://community.theturninggate.net/vie … hp?id=7857


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#10 2017-07-19 03:15:44

bonapictura
Member
From: Cuijk - Netherlands
Registered: 2017-07-18
Posts: 8
Website

Re: Top of Page Button

Thanks a lot Rod,
Now it works. It was probably because I was using the wrong hook. I started with ttg_body_bottom like it says it Monte's original post (CE4). Then I tried ttg_main_bottom and ttg_footer_bottom, to no avail. I only added the style="display: inline;" to make it visible at all.
Putting it in the ttg_scripts hook did the trick.
And thanks for showing the z-index setting, otherwise that would be my next question smile

Offline

#11 2017-07-19 04:43:25

charlie.choc
Member
From: Marietta, GA
Registered: 2014-01-09
Posts: 359
Website

Re: Top of Page Button

I should probably know this, but is there a reason this doesn't work on my blog? Works fine on everything else.

Offline

#12 2017-07-19 07:55:56

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,806
Website

Re: Top of Page Button

my guess is that you can't use the ttg_scripts hook with WordPress. You probably need to create a child theme and enqueue the scripts


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#13 2017-07-19 09:10:36

charlie.choc
Member
From: Marietta, GA
Registered: 2014-01-09
Posts: 359
Website

Re: Top of Page Button

Thanks. I do have a child theme so I'll look at that when I get back off the road.

Offline

#14 2018-05-27 02:35:19

dussel
Member
From: OWL / Germany
Registered: 2013-05-27
Posts: 59
Website

Re: Top of Page Button

Hello Rod,
found your amazing script and tried to add it to my Backlight Pangolin.
but i failed...

i added this code to my phplugin.custom-rl.php

<a href="#top" class="btn-scroll-to-top" title="Top of page"><i class="fa fa-arrow-up fa-lg"></i></a>

<script>
$(document).ready(function() {
$(".btn-scroll-to-top").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$(".btn-scroll-to-top").fadeIn();
} else {
$(".btn-scroll-to-top").fadeOut();
}
});
});
</script>
----------------

This line is Nr. 491 in my phpfie:
<a href="#top" class="btn-scroll-to-top" title="Top of page"><i class="fa fa-arrow-up fa-lg"></i></a>

if i tried to call my testpage i got this Error:


Something went wrong

Unexpected error: syntax error, unexpected '<' in phplugins-pangolin-rl.php on line 491

Please report error at http://community.theturninggate.net
-----------

without this code the site works.

Do you have an idea where my fault is?

I would appreciate any suggestions.
Thanks for your feedback in advance.

Have a lovely day ahead!
Best regards,

Rolf


https://www.rl-foto.de Due to the DSGVO in Europe offline yet

Offline

#15 2018-05-27 02:51:51

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,806
Website

Re: Top of Page Button

the script actually came from Monte Trumbull, I just modified a couple of things.

How did you add the code? Can you post the entire function?

You may have added some code outside of the echo statement

See: http://ttg-tips-and-tricks.barbeephoto. … ght-pages/


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#16 2018-05-27 21:41:36

dussel
Member
From: OWL / Germany
Registered: 2013-05-27
Posts: 59
Website

Re: Top of Page Button

Hej Rod,
i got it... My fault and you are right... i added outside the funktionarea...
So now it works...
Great stuff... Thanks for that and your awesome "wiki"-Page to Backlight and TTG


https://www.rl-foto.de Due to the DSGVO in Europe offline yet

Offline

#17 2019-06-28 20:56:43

Sven
Member
Registered: 2016-01-01
Posts: 30

Re: Top of Page Button

Hey there,
I've tried to integrate the code on my page as well: www.sven-michael.com but unfortunately it is not working.
Here is the php code I've used

function body_bottom() {
    echo '
   
    <a href="#top" class="btn-scroll-to-top" title="Top of page"><i class="fa fa-arrow-up fa-lg"></i></a>
   
    <script>
    $(document).ready(function() {
    $(".btn-scroll-to-top").click(function() {
    $("html, body").animate({ scrollTop: 0 }, "slow");
    return false;
    });
    $(window).scroll(function() {
    if ($(this).scrollTop() > 200) {
    $(".btn-scroll-to-top").fadeIn();
    } else {
    $(".btn-scroll-to-top").fadeOut();
    }
    });
    });
    </script>
   
    ';
}

Any ideas / solutions?

Many thanks in advance and Krgds
Sven M

Last edited by Sven (2019-06-28 21:26:33)

Offline

#18 2019-06-28 21:11:58

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,806
Website

Re: Top of Page Button

Is this in Backlight 1 or 2?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#19 2019-06-28 21:23:12

Sven
Member
Registered: 2016-01-01
Posts: 30

Re: Top of Page Button

Backlight 2

Offline

#20 2019-06-28 23:14:54

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 16,806
Website

Re: Top of Page Button

two problems I see.
one: function body_bottom is not a Backlight 2 phplugins function. Use function scripts() instead

are you starting with the latest phplugins sample file? You should be using the phplugins-pangolin-sample.php file from the current Backlight-2-Installer-xxx/backlight/custom/phplugins/ folder.
That file also lists all of the hooks you can use.

two: your css contains a media query that's not closed properly.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2 test site, Pangolin test site

Offline

#21 2019-06-30 00:59:25

Sven
Member
Registered: 2016-01-01
Posts: 30

Re: Top of Page Button

Hi Rod,

many thanks!

I've changed to the latest phplugins sample file and have corrected the code to "function scripts()".
Not it shows up, but unfortunately at the wrong position (left bottom instead right one) and only below the footer.
The css is also not applied.

The css code I'm using is (the unclosed media query should be fixed now - thx!!):

.btn-scroll-to-top {
    background-color: transparent;
    display: none;
    position: fixed;
    bottom: 5px;
    right: 5px;
    border: 1px solid;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    text-align: center;
    line-height: 29px;
    vertical-align: middle;
    text-decoration: none;
    color:#6f7c80;
}

.btn-scroll-to-top:hover {
    text-decoration: none;
    color:#000000;
}

a.btn-scroll-to-top {
    z-index: 3;
}

Any ideas?

Cheers
Sven M

Offline

#22 2019-06-30 03:01:16

Daniel Leu
Moderator
Registered: 2012-10-11
Posts: 1,425
Website

Re: Top of Page Button

Looks like you got it working now.


Daniel Leu | Photography   
DanielLeu.com
My digital playground: lab.DanielLeu.com

Offline

#23 2019-07-04 01:57:55

Sven
Member
Registered: 2016-01-01
Posts: 30

Re: Top of Page Button

Yes, many thanks Rod :-)

Offline

Board footer

Powered by FluxBB