Neuigkeiten
  • Die modified eCommerce Shopsoftware ist kostenlos, aber nicht umsonst.
  • Damit wir die modified eCommerce Shopsoftware auch zukünftig kostenlos anbieten können:

Autor Thema: MODUL: MITS Back-To-Top for Admin and Frontend  (Gelesen 2427 mal)

Offline Hetfield

  • modified Team
  • *****
  • Beiträge: 746
    • Teile Beitrag
MODUL: MITS Back-To-Top for Admin and Frontend
« am: 01. August 2017, 15:36:28 »
Hallo zusammen!

Dieses Mini-Modul ist ein nützliches kleines Helferlein für den Adminbereich. Es fügt im Adminbereich einen "Nach oben scrollen"-Button ein, der beim nach unten scrollen automatisch engeblendet wird. So entfällt das lästige wieder nach oben scrollen mit der Maus. Für alle Anwender, welche die "Pos1"-Taste nicht mögen. :D

[ Für Gäste sind keine Dateianhänge sichtbar ]

Zusätzlich gibt es das Helferlein auch für das Frontend. Hier kann es je nach Template eventuell notwendig sein, dass die CSS-Anweisungen angepasst werden müssen.

Beide Module sind übrigens für die Shopversion ab 2.x und sind updatesicher.

MfG Hetfield  8)

Linkback: https://www.modified-shop.org/forum/index.php?topic=37550.0

Offline woodpecker

  • Fördermitglied
  • *****
  • Beiträge: 47
  • Geschlecht: Männlich
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin
« Antwort #1 am: 01. August 2017, 16:21:57 »
Super, vielen Dank   :thx:

Sonnige Grüße
Rene

Offline FräuleinGarn

  • Fördermitglied
  • *****
  • Beiträge: 3.322
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin
« Antwort #2 am: 01. August 2017, 22:09:25 »
Danke dafür. Gibts das hier im Forum auch als Frontend Variante? Über die Suchfunktion mit "Back to top" nichts gefunden.

Oder muss quasi der selbe Code nur in einen anderen Ordner, damit es im Frontend funktionieren würde? Im Code selbst steht ja nichts davon, dass es nur im Backend funktioniert. Deshalb geh ich davon aus, dass es am Ordner liegt, wo es gespeichert wird.

Gruss Timm

Offline awids.de

  • Experte
  • *****
  • Beiträge: 2.572
  • Geschlecht: Männlich
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin
« Antwort #3 am: 01. August 2017, 22:28:27 »
index.html (Ende, vor "{if ($smarty.const.TRACKING_COUNT_ADMIN_ACTIVE == 'true'..."):

Code: PHP  [Auswählen]
<button onclick="topFunction()" id="myBtn" title="nach oben"><i class="fa fa-arrow-up "></i></button>

general_bottom.js.php (beliebige Stelle, z. B. nach "<?php require DIR_FS_CATALOG . DIR_TMPL_JS . 'get_states.js.php'; ?>"):

Code: PHP  [Auswählen]
<script type="text/javascript">
window.onscroll = function() {scrollFunction()};

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

function topFunction() {
    document.body.scrollTop = 0; // Chrome, Safari and Opera
    document.documentElement.scrollTop = 0; // IE and Firefox
}
</script>

stylesheet.css (z. B. ans Ende):

Code: CSS  [Auswählen]
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #EE7600; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px 14px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
}

#myBtn:hover {
    background-color: #eee; /* Add a dark-grey background on hover */
    color: #333; /* Text color */
}

CSS lässt sich bekanntlich immer stylen. ;-)

Demo

Offline Hetfield

  • modified Team
  • *****
  • Beiträge: 746
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin and Frontend
« Antwort #4 am: 02. August 2017, 09:15:40 »
Danke dafür. Gibts das hier im Forum auch als Frontend Variante? Über die Suchfunktion mit "Back to top" nichts gefunden.

Oder muss quasi der selbe Code nur in einen anderen Ordner, damit es im Frontend funktionieren würde? Im Code selbst steht ja nichts davon, dass es nur im Backend funktioniert. Deshalb geh ich davon aus, dass es am Ordner liegt, wo es gespeichert wird.

Gruss Timm

Hier noch die Frontend-Variante. Es muss tatsächlich nur der Code anders platziert werden und man hat den "Nach oben"-Button updatesicher auch im Frontend.

Das Modul für das Frontend ist auch im ersten Beitrag zu finden: MITS Back-To-Top for Frontend

MfG Hetfield  8)

Offline FräuleinGarn

  • Fördermitglied
  • *****
  • Beiträge: 3.322
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin and Frontend
« Antwort #5 am: 02. August 2017, 10:40:52 »
Ich danke euch beiden für die schnelle Hilfe. Beides schöne Lösungen.   :king:

Vorteil Hetfield:
updatesicher
fade in fade out des Pfeils
kein abruptes hochscrollen, dass der Kunde auch sieht, was passiert (könnte nur noch etwas schneller sein)

Vorteil awids:
Einbindung der font awesome bibliothek; dadurch keine imagedatei; schärferes, leicht austauschbares icon

Könnte man das nicht beides kombinieren?

Gruss Timm

Offline awids.de

  • Experte
  • *****
  • Beiträge: 2.572
  • Geschlecht: Männlich
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin and Frontend
« Antwort #6 am: 02. August 2017, 11:00:39 »
Hab Hetfields Lösung weder heruntergeladen, noch installiert, bin aber sicher, dass man es auch auf CSS (und Font-Awesome) ummodeln kann. Das Modul wurde vor deiner Fragestellung ja nur für den Admin-Bereich erstellt, wo Font-Awesome nicht zur Verfügung steht. Und dies nur für einen einzigen Button zu integrieren, finde selbst ich "too much". :-)

Zu deinem Klammersatz: In dem Modul ist sicher irgendwo Javascript enthalten, wo man die Geschwindigkeit des Scrolls einstellen können müsste.

Offline Hetfield

  • modified Team
  • *****
  • Beiträge: 746
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin and Frontend
« Antwort #7 am: 02. August 2017, 11:08:00 »
Ich danke euch beiden für die schnelle Hilfe. Beides schöne Lösungen.   :king:

Vorteil Hetfield:
updatesicher
fade in fade out des Pfeils
kein abruptes hochscrollen, dass der Kunde auch sieht, was passiert (könnte nur noch etwas schneller sein)

Vorteil awids:
Einbindung der font awesome bibliothek; dadurch keine imagedatei; schärferes, leicht austauschbares icon

Könnte man das nicht beides kombinieren?

Gruss Timm
Bei awids Lösung wird vorausgesetzt, dass font-awesome vorhanden ist. Ist allerdings nicht bei jedem Template der Fall. Deshalb lieber eine leicht austauschbare Grafik. Allerdings kann man das ja auch anpassen. Im Anhang deshalb eine Variante mit font-awesome und etwas schneller beim Scrollen.

MfG Hetfield  8)

Offline FräuleinGarn

  • Fördermitglied
  • *****
  • Beiträge: 3.322
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin and Frontend
« Antwort #8 am: 02. August 2017, 11:33:36 »
Ich bin begeistert.  :-B

Gruss Timm

Offline karsta.de

  • Experte
  • *****
  • Beiträge: 1.676
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin and Frontend
« Antwort #9 am: 02. August 2017, 15:24:30 »
Ich hätte so einen "back to top" Button gerne hier im Forum. Hatte gehofft, dass er einfach mal irgendwann eingebaut wird. Aber das ist bisher leider nicht geschehen.

BG kgd

Offline FräuleinGarn

  • Fördermitglied
  • *****
  • Beiträge: 3.322
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin and Frontend
« Antwort #10 am: 02. August 2017, 15:28:53 »
:good:

Vor allem wenn man übers handy hier liest wäre das sinnvoll.

Wie das eingebaut wird, steht ja hier im Thread  :flee-mrgreen:

Offline awids.de

  • Experte
  • *****
  • Beiträge: 2.572
  • Geschlecht: Männlich
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin and Frontend
« Antwort #11 am: 02. August 2017, 15:31:04 »
Man müsste das bereits integrierte und am Ende eines jeden Beitrages (bei den Seitenzahlen) verfügbare "back to top" nur nach dem vorliegenden Beispiel an den Seitenrand holen, damit man von jeder Position aus wieder "back to top" kommt.  :mhhh:

Offline noRiddle

  • Experte
  • *****
  • Beiträge: 10.176
  • Geschlecht: Männlich
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin and Frontend
« Antwort #12 am: 03. August 2017, 19:13:59 »
Hier noch meine (komprimierte) Variante die alte IE-Browser beachtet und konfigurierbar ist
und keine Grafik und kein Font-Icon benutzt ;-):

Javascript:
Code: Javascript  [Auswählen]
//BOC conf
var ss = 220; //start to show when x px scrolled down
var fi = 1000; //fade in time
var st = 0; //scroll to
var sti = 800; //scroll time
//EOC conf
function getIEversion(){var a=-1;if("Microsoft Internet Explorer"==navigator.appName){var b=navigator.userAgent,c=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");null!=c.exec(b)&&(a=parseFloat(RegExp.$1))}return a}$(function(){$(window).scroll(function(){var a=$(this).scrollTop(),b=getIEversion();b>-1&&8>=b?a>ss?$("#to-top").show():$("#to-top").hide():a>ss?$("#to-top").fadeIn(fi):$("#to-top").fadeOut(fi)}),$("#to-top").click(function(){$("body,html").animate({scrollTop:st},sti)})});

HTML:
Code: XML  [Auswählen]
<p id="to-top" title="to top">&and;</p>
(Das Zeichen &and; sieht so aus ∧ .)
[ Für Gäste sind keine Dateianhänge sichtbar ]

CSS:
Code: CSS  [Auswählen]
#to-top {
    display: none;
    width: 25px;
    height: 25px;
    line-height: 20px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: #800;
    text-shadow: 0 0 1px #B82D2D;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px #767676 inset, 0 0 8px #767676;
    background: rgba(255,255,255,.6);
    cursor: pointer;
}
#to-top:hover {color:#008020;}
(Die line-height muß je nach Schriftart justiert werden.)

Gruß,
noRiddle

Offline FräuleinGarn

  • Fördermitglied
  • *****
  • Beiträge: 3.322
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin and Frontend
« Antwort #13 am: 30. Januar 2019, 12:05:11 »
@Hetfield
Diese Zeile
Code: PHP  [Auswählen]
<style type="text/css">

im Modul
Code: PHP  [Auswählen]
<?php
/**
 * --------------------------------------------------------------
 * File: mits_totop.php
 * Created by PhpStorm
 * Date: 01.08.2017
 * Time: 14:27
 *
 * Author: Hetfield
 * Copyright: (c) 2017 - MerZ IT-SerVice
 * Web: https://www.merz-it-service.de
 * Contact: info@merz-it-service.de
 *
 * Released under the GNU General Public License
 * --------------------------------------------------------------
 */

?>
<script type="text/javascript">
    $(document).ready(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 80) {
                $('.mits_scrollicon').fadeIn();
            } else {
                $('.mits_scrollicon').fadeOut();
            }
        });
        $('.mits_scrollicon').click(function () {
            $("html, body").animate({scrollTop: 0}, 400);
            return false;
        });
    });
</script>
<style type="text/css">
    .mits_scrollicon{padding:0.4em;text-align:center;text-decoration:none;-moz-border-radius:0.2em;-webkit-border-radius:0.2em;border-radius:0.2em;background:#ccc;opacity:0.5;position:fixed;bottom:3em;right:2em;display:none;border:0.1em solid #333;}
    .mits_scrollicon img{height:2em;width:2em}
        .mits_scrollicon i{font-size:20px}
</style>
<a href="#top" class="mits_scrollicon">
        <i class="fa fa-arrow-up "></i>
    <?php //echo xtc_image(DIR_WS_IMAGES.'totop.png'); ?>
</a>
 

führt zu einem error im w3c Validator

Zitat
Error: Element style not allowed as child of element body in this context.

Kann man das ändern?

Gruß Timm

Offline karsta.de

  • Experte
  • *****
  • Beiträge: 1.676
    • Teile Beitrag
Re: MODUL: MITS Back-To-Top for Admin and Frontend
« Antwort #14 am: 30. Januar 2019, 15:34:50 »
Eigentlich kann man den Style an der Stelle komplett rausnehmen. Erstelle eine neue css-Datei mit deinem Style und lege diese dann in den Ordner admin\includes\css. Erstelle eine weitere php-Datei (z.B. scroll-to-top.php) mit folgendem Inhalt:
Code: PHP  [Auswählen]
<?php
echo '<link rel="stylesheet" type="text/css" href="includes/css/scroll-to-top.css" />'. PHP_EOL;

hinterlege diese in den Ordner admin\includes\extra\css. So wird der Style wie alle anderen Styles im <head> eingefügt.

[edit] Mein Vorschlag ist für den Admin-Bereich. Das Modul von @Hetfield habe ich mir jetzt nicht angesehen.

BG kgd


Teile per facebook Teile per linkedin Teile per twitter

 


             
anything