Phplugins

Rainer Goergen · 2018-09-12 20:24:11

Hi, no problem with installation of BL 2.

What have I to change in this phplugin file, that it works again:

<?php function ttg_scripts( $style, $path ) {
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>
';
}
?>

Thanks, Rainer

Ben · 2018-09-12 20:44:16

Hi Rainer, see if this works. Note the addition of the class at the top and closing it at the bottom, the change of function name to just scripts, and the removal of the parameters passed to that function.

<?php

class PHPlugins extends APHPlugins
{
	function scripts()
	{
		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>
		';
	}

}
?>

Rainer Goergen · 2018-09-12 20:48:33

Thank you Ben, I am no programmer and I have no knowledge about phplugins.

Works !!!

Rainer

Ben · 2018-09-12 20:58:39

I'm glad to hear that worked!

bdfisher · 2018-09-13 02:12:16

Ben,

I join Rainer in thanking you. I followed the changes shown in your post and now my own phplugin file is now working.

Barry

Ben · 2018-09-13 07:32:56

Thanks, Barry

Markus · 2018-12-29 09:11:56

Hi Ben,

I have now arrived at Backlight 2 and am trying to take over the already working settings from Pangolin (version 1.2.3).

Like Rainer, I also had the "Scroll-to-top-button" installed in the old version, which didn't work after the update.

With your code I get the arrow displayed, but unfortunately only at the bottom left when I have reached the end of the page.
On the Pangolin page the arrow already appeared when the upper edge disappeared. I also adjusted the arrow with my custom.css.

Unfortunately I can't get the change with my custom.css. Although I have already tested some things. With the Inspector I have to practise a bit first to find the right selector again, because it has obviously changed.

Will I be able to do the same as in Pangolin in Backlight 2? Here are my custom.css:

/* ----- Scroll to top button styling ----- */
/* ======================================== */
.btn-scroll-to-top {
    background-color: transparent;
    display: none;
    position: fixed;
    bottom: 7px;
    right: 15px;
    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:#ff0000;
		border-color: red;
}

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

and the links to the Pangolin Page: https://backlight.der-canonier.de/ausruestung/
and Backlight 2 - page: https://pangolin.der-canonier.de/ausruestung/

I would be happy to receive tips.

Many greetings
Markus

rod barbee · 2018-12-29 09:37:49

Hi Markus,

there appears to be an error in your custom css file.

Look at lines 57 to 62. There you have a portion of the code commented out. Line 57 starts with /* and line 62 ends with */. But in between there are other sections commented out (for example, /* IE6-9 */) and when that close comment after IE6-9 is encountered, it ends the commented section begun on line 57.

In the inspector, when I deleted lines 57 -62, the scroll-top button appeared where it should be.

So either remove lines 57 - 62 or, remove those internal comments or, instead of using the official comment syntax of /* .... */, you can use the line comment of // in front of what you want to comment out. At least that worked when I used it in the inspector.

Markus · 2018-12-30 03:42:46

Hello, Rod,
perfect - many thanks for finding the error. Now I like that again

On to the next point...

Best regards

Markus · 2019-01-13 23:43:36

Hi,

how can I make the "Scroll-to-top-button" appear on a large monitor in the .page__pallet__bottom or correspond with it?

So this is about the place.

So the position should be fixed, but related to the .page__pallet__bottom - area.

If I change "right" in custom.css, the position moves logically when the monitor widths change.

Many greetings
Markus

rod barbee · 2019-01-13 23:55:18

You don’t want it popping up as the user scrolls down the page, but only appear in the footer area?

Community @ The Turning Gate

#1 2018-09-12 20:24:11

Phplugins

#2 2018-09-12 20:44:16

Re: Phplugins

#3 2018-09-12 20:48:33

Re: Phplugins

#4 2018-09-12 20:58:39

Re: Phplugins

#5 2018-09-13 02:12:16

Re: Phplugins

#6 2018-09-13 07:32:56

Re: Phplugins

#7 2018-12-29 09:11:56

Re: Phplugins

#8 2018-12-29 09:37:49

Re: Phplugins

#9 2018-12-30 03:42:46

Re: Phplugins

#10 2019-01-13 23:43:36

Re: Phplugins

#11 2019-01-13 23:55:18

Re: Phplugins

Board footer