pragmaMx Support Forum pragmaMx Support Forum

GO TO TOP Button

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline fjuergens

  • *****
  • 596
  • +0/-22
  • Geschlecht: Männlich
  • Gruß aus Athen
    • Veranstaltungen in Athen und andere Informationen aus Athen und Umgebung
GO TO TOP Button
« am: 17 März 2018, 10:06:35 »
Nachdem mich einige angeschrieben habe wie ich den GO TO TOP Button
eingebaut habe, hier die Anleitung.....

Wers gebrauchen kann... viel Spass damit.....

---------------------------------------------------------------
Nimm die header.php und füge nach den Mega-Tags, also nach:
<meta name="generator" content="pragmaMx 2.4.2 - by http://pragmaMx.org" />
<meta name="copyright" content="2018 by Athen-Magazin News" />
<meta name="description" content="Veranstaltungen in Athen und andere Informationen aus Athen und Umgebung" />
usw.

 folgendes ein:



<style>
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #cc6600;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #555;
}
</style>

dann gehe ins System > Einstellungen > Fuß-Nachrichten
und in eine der 4 Zeilen oder auch hinter was anderes folgendes einfügen:
(Du kannst es auch in die footer.php vor </BODY> einfügen

<button onclick="topFunction()" id="myBtn" title="Go to top">go back to Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

den Titel und die Farbe kannst Du in dem Bereich der in den Header kommt ändern....

mit netten Grüßen aus Athen / GR
F.Juergens

Offline TerraProject

  • ******
  • 1.855
  • +2/-0
  • Geschlecht: Männlich
Re: GO TO TOP Button
« Antwort #1 am: 17 März 2018, 10:35:35 »
Danke
Besser aufgehoben is der Code aber direkt im theme in der theme.php eingebunden über pmxHeader::add_style_code und add_script_code

Bei Updates vom pmx wäre das dann ansonsten wech ....
g

Olaf
...:::

Kein Support über PN, Mail !
Bitte die Fragen im Forum stellen, nur so helfen die Antworten auch den anderen Usern.
Bitte auch die Boardsuche nicht vergessen, oft ist genau dein Problem schon an anderer Stelle gelöst worden!


Offline fjuergens

  • *****
  • 596
  • +0/-22
  • Geschlecht: Männlich
  • Gruß aus Athen
    • Veranstaltungen in Athen und andere Informationen aus Athen und Umgebung
Re: GO TO TOP Button
« Antwort #2 am: 17 März 2018, 10:41:29 »
Da hast Du natürlich recht..........
mit netten Grüßen aus Athen / GR
F.Juergens

Offline fjuergens

  • *****
  • 596
  • +0/-22
  • Geschlecht: Männlich
  • Gruß aus Athen
    • Veranstaltungen in Athen und andere Informationen aus Athen und Umgebung
Re: GO TO TOP Button
« Antwort #3 am: 17 März 2018, 16:47:04 »
Hallo Olaf,
könntest Du das bitte näher erklären wo das in der theme.php hin muss....????

Danke im voraus..
mit netten Grüßen aus Athen / GR
F.Juergens

Offline TerraProject

  • ******
  • 1.855
  • +2/-0
  • Geschlecht: Männlich
Re: GO TO TOP Button
« Antwort #4 am: 17 März 2018, 18:29:43 »
in meinen Themes, d.h. alle, die mit tp_ angangen ist der Aufbau immer gleich....

Voraussetzung ist ein pmx ab V 2.4.x

in der themes.php des Themes am Ende der Datei folgendes einfügen
pmxHeader::add_style_code("#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #cc6600;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #555;
}");
pmxHeader::add_style_code("#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: #cc6600;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 10px;
}
#myBtn:hover {
background-color: #555;
}");
 
pmxHeader::add_body_script_code('

 window.onscroll = function() {scrollFunction()};
 function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}');

in der Theme.html am Ende vor dem </body>-Tag folgendes einfügen...
<button onclick="topFunction()" id="myBtn" title="Go to top">go back to Top</button>
 :drinks:
g

Olaf
...:::

Kein Support über PN, Mail !
Bitte die Fragen im Forum stellen, nur so helfen die Antworten auch den anderen Usern.
Bitte auch die Boardsuche nicht vergessen, oft ist genau dein Problem schon an anderer Stelle gelöst worden!


Offline fjuergens

  • *****
  • 596
  • +0/-22
  • Geschlecht: Männlich
  • Gruß aus Athen
    • Veranstaltungen in Athen und andere Informationen aus Athen und Umgebung
Re: GO TO TOP Button
« Antwort #5 am: 21 März 2018, 06:54:20 »
D A N K E...... :thumbup:
mit netten Grüßen aus Athen / GR
F.Juergens