Scroll Down Hinweis

qoubo · 25. August 2017

Hallo ich habe über die Suchfunktion nix passendes gefunden und hoffe der Beitrag ist im richtigen Thema.
Mein Problem:

Auf meiner Website ist nicht sofort ersichtlich das nach unten gescrollt werden kann und deswegen hätte ich gerne einen kleinen Pfeil unten rechts der einfach nur darauf hinweist das noch nach unten gescrollt werden kann. Wenn man dann am Ende der Seite ankommt wäre es schön wenn dieser Pfeil verschwindet.

Hat jemand eine Idee wie sich dieses Problem realisieren lässt ?

JoomlaWunder · 25. August 2017

Die meisten Leute wollen eigentlich kein Problem realisieren.
Nein, Spaß beiseite!
Wo kann man sich das denn mal anschauen? Link zur Seite?

firstlady · 26. August 2017

Im Joomla Extension Directory sehe ich das: https://extensions.joomla.org/extension/page-scroll-buttons/

Damit je nach Situation der eine oder andere Button verschwindet müsste man wohl ein wenig javascript einsetzen.

qoubo · 27. August 2017

also es handelt sich um eine nicht öffenliche Seite d.h. sie ist noch im aufbau und man benötigt ein Passwort um sich die Seite anzusehen

Zitat

Im Joomla Extension Directory sehe ich das: extensions.joomla.org/extension/page-scroll-buttons/Damit je nach Situation der eine oder andere Button verschwindet müsste man wohl ein wenig javascript einsetzen.

ja diese Extension habe ich auch schon gefunden aber sie benötigt eine leere Position um die Buttons anzuzeigen und schreibt dann auch ganz groß "Page Scroll Buttons" in diese.

firstlady · 27. August 2017

Zitat

benötigt eine leere Position um die Buttons anzuzeigen und schreibt dann auch ganz groß "Page Scroll Buttons" in diese.

Du musst bei der Position "Titel anzeigen" auf nein stellen.

qoubo · 27. August 2017

Zitat von firstlady

Du musst bei der Position "Titel anzeigen" auf nein stellen.

Ahhh funktioniert einwandfrei! Dankeschön stande wohl auf dem Schlaum

Zu dem Verschwinden der Buttons beim Scrollen, weiß da jemand wo ich das JavaScript hinschreiben muss (in welche datei) , und was genau ich bin leider kein JavaScript Programmierer

firstlady · 27. August 2017

Ich kann dir ein schönes Tutorial anbieten: https://blog.kulturbanause.de/…to-top-button-mit-jquery/
Du kannst den Code direkt in deine index.php schreiben - oder korrekterweise in das js Verzeichnis deines Templates.

qoubo · 27. August 2017

Zitat von firstlady

Ich kann dir ein schönes Tutorial anbieten: blog.kulturbanause.de/2012/04/back-to-top-button-mit-jquery/
Du kannst den Code direkt in deine index.php schreiben - oder korrekterweise in das js Verzeichnis deines Templates.

Und wie verknüpfe ich das mit der Page Scroll Button Extension ?
Wo in meiner Index.php muss ich den Code einfügen ?

Spoiler anzeigen

PHP

<?php
/**
 * @package Helix3 Framework
 * @author enginetemplates http://www.enginetemplates.com
 * @copyright Copyright (c) 2010 - 2015 enginetemplates
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
 */
//no direct accees
defined('_JEXEC') or die('resticted aceess');


$doc = JFactory::getDocument();
$app = JFactory::getApplication();


JHtml::_('jquery.framework');
JHtml::_('bootstrap.framework'); //Force load Bootstrap
unset($doc->_scripts[$this->baseurl . '/media/jui/js/bootstrap.min.js']); // Remove joomla core bootstrap
//Load Helix
$helix3_path = JPATH_PLUGINS . '/system/helix3/core/helix3.php';


if (file_exists($helix3_path)) {
    require_once($helix3_path);
    $this->helix3 = helix3::getInstance();
} else {
    die('Please install and activate helix plugin');
}


//Coming Soon
if ($this->helix3->getParam('comingsoon_mode'))
    header("Location: " . $this->baseUrl . "?tmpl=comingsoon");


//Class Classes
$body_classes = '';


if ($this->helix3->getParam('sticky_header')) {
    $body_classes .= ' sticky-header';
}


$body_classes .= ($this->helix3->getParam('boxed_layout', 0)) ? ' layout-boxed' : ' layout-fluid';


//Body Background Image
if ($bg_image = $this->helix3->getParam('body_bg_image')) {


    $body_style = 'background-image: url(' . JURI::base(true) . '/' . $bg_image . ');';
    $body_style .= 'background-repeat: ' . $this->helix3->getParam('body_bg_repeat') . ';';
    $body_style .= 'background-size: ' . $this->helix3->getParam('body_bg_size') . ';';
    $body_style .= 'background-attachment: ' . $this->helix3->getParam('body_bg_attachment') . ';';
    $body_style .= 'background-position: ' . $this->helix3->getParam('body_bg_position') . ';';
    $body_style = 'body.site {' . $body_style . '}';


    $doc->addStyledeclaration($body_style);
}


//Body Font
$webfonts = array();


if ($this->params->get('enable_body_font')) {
    $webfonts['body'] = $this->params->get('body_font');
}


//Heading1 Font
if ($this->params->get('enable_h1_font')) {
    $webfonts['h1'] = $this->params->get('h1_font');
}


//Heading2 Font
if ($this->params->get('enable_h2_font')) {
    $webfonts['h2'] = $this->params->get('h2_font');
}


//Heading3 Font
if ($this->params->get('enable_h3_font')) {
    $webfonts['h3'] = $this->params->get('h3_font');
}


//Heading4 Font
if ($this->params->get('enable_h4_font')) {
    $webfonts['h4'] = $this->params->get('h4_font');
}


//Heading5 Font
if ($this->params->get('enable_h5_font')) {
    $webfonts['h5'] = $this->params->get('h5_font');
}


//Heading6 Font
if ($this->params->get('enable_h6_font')) {
    $webfonts['h6'] = $this->params->get('h6_font');
}


//Navigation Font
if ($this->params->get('enable_navigation_font')) {
    $webfonts['.sp-megamenu-parent'] = $this->params->get('navigation_font');
}


//Custom Font
if ($this->params->get('enable_custom_font') && $this->params->get('custom_font_selectors')) {
    $webfonts[$this->params->get('custom_font_selectors')] = $this->params->get('custom_font');
}


$this->helix3->addGoogleFont($webfonts);


//Custom CSS
if ($custom_css = $this->helix3->getParam('custom_css')) {
    $doc->addStyledeclaration($custom_css);
}


//Custom JS
if ($custom_js = $this->helix3->getParam('custom_js')) {
    $doc->addScriptdeclaration($custom_js);
}


//preloader & goto top
$doc->addScriptdeclaration("\nvar sp_preloader = '" . $this->params->get('preloader') . "';\n");
$doc->addScriptdeclaration("\nvar sp_gotop = '" . $this->params->get('goto_top') . "';\n");
$doc->addScriptdeclaration("\nvar sp_offanimation = '" . $this->params->get('offcanvas_animation') . "';\n");
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
                <?php
                if ($favicon = $this->helix3->getParam('favicon')) {
                    $doc->addFavicon(JURI::base(true) . '/' . $favicon);
                } else {
                    $doc->addFavicon($this->helix3->getTemplateUri() . '/images/favicon.ico');
                }
                ?>
                <!-- head -->
                <jdoc:include type="head" />
                <?php
                $megabgcolor = ($this->helix3->PresetParam('_megabg')) ? $this->helix3->PresetParam('_megabg') : '#ffffff';
                $megabgtx = ($this->helix3->PresetParam('_megatx')) ? $this->helix3->PresetParam('_megatx') : '#333333';


                $preloader_bg = ($this->helix3->getParam('preloader_bg')) ? $this->helix3->getParam('preloader_bg') : '#f5f5f5';
                $preloader_tx = ($this->helix3->getParam('preloader_tx')) ? $this->helix3->getParam('preloader_tx') : '#f5f5f5';


                // load css, less and js
                $this->helix3->addCSS('bootstrap.min.css, font-awesome.min.css, default.css') // CSS Files
                        ->addJS('bootstrap.min.js, jquery.sticky.js, main.js, wow.min.js, custom.js, jquery.easing.min.js') // JS Files
                        ->lessInit()->setLessVariables(array(
                            'preset' => $this->helix3->Preset(),
                            'bg_color' => $this->helix3->PresetParam('_bg'),
                            'text_color' => $this->helix3->PresetParam('_text'),
                            'major_color' => $this->helix3->PresetParam('_major'),
                            'megabg_color' => $megabgcolor,
                            'megatx_color' => $megabgtx,
                            'preloader_bg' => $preloader_bg,
                            'preloader_tx' => $preloader_tx,
                        ))
                        ->addLess('legacy/bootstrap', 'legacy')
                        ->addLess('master', 'template');


                //RTL
                if ($this->direction == 'rtl') {
                    $this->helix3->addCSS('bootstrap-rtl.min.css')
                            ->addLess('rtl', 'rtl');
                }


                $this->helix3->addLess('presets', 'presets/' . $this->helix3->Preset(), array('class' => 'preset'));


                //Before Head
                if ($before_head = $this->helix3->getParam('before_head')) {
                    echo $before_head . "\n";
                }
                ?>
                </head>
                <body class="<?php echo $this->helix3->bodyClass($body_classes); ?> off-canvas-menu-init">


                    <div class="body-wrapper">
                        <div class="body-innerwrapper">
                            <?php $this->helix3->generatelayout(); ?>
                        </div> <!-- /.body-innerwrapper -->
                    </div> <!-- /.body-innerwrapper -->


                    <!-- Off Canvas Menu -->
                    <div class="offcanvas-menu">
                        <a href="#" class="close-offcanvas"><i class="fa fa-remove"></i></a>
                        <div class="offcanvas-inner">
                            <?php if ($this->helix3->countModules('offcanvas')) { ?>
                              <jdoc:include type="modules" name="offcanvas" style="sp_xhtml" />
                            <?php } else { ?>
                              <p class="alert alert-warning">
                                <?php echo JText::_('HELIX_NO_MODULE_OFFCANVAS'); ?>
                              </p>
                            <?php } ?>
                        </div> <!-- /.offcanvas-inner -->
                    </div> <!-- /.offcanvas-menu -->


                    <?php
                    if ($this->params->get('compress_css')) {
                        $this->helix3->compressCSS();
                    }


                    $tempOption    = $app->input->get('option');
                    // $tempView       = $app->input->get('view');


                    if ( $this->params->get('compress_js') && $tempOption != 'com_config' ) {
                        $this->helix3->compressJS($this->params->get('exclude_js'));
                    }


                    //before body
                    if ($before_body = $this->helix3->getParam('before_body')) {
                        echo $before_body . "\n";
                    } ?>


                    <jdoc:include type="modules" name="debug" />
                    <!-- Preloader -->
                    <jdoc:include type="modules" name="helixpreloader" />
                    <!-- Go to top -->
                    <?php if ($this->params->get('goto_top')) { ?>
                        <a href="javascript:void(0)" class="scrollup">&nbsp;</a>
                    <?php } ?>
                </body>
                </html>

Alles anzeigen

firstlady · 27. August 2017

Ich kenne das Framework nicht, du hast nicht geschrieben dass du das Helix Framework verwendest.
Ich nehme an, dass es dort einen Ordner für javascript gibt .. aber wahrscheinlich gibt es auch schon von Haus aus scroll-Buttons in dem Template, es gibt ja schon einen Parameter für das scrollup. Vielleicht klärst du das erst einmal?

qoubo · 27. August 2017

Es gibt einen Ordner "js" in dem mehrere Dateien enthalten sind ich weiß allerdings nicht in welche ich den Code einbauen sollte.
Im Template selbst habe ich keine scroll-Buttons gefunden.

firstlady · 27. August 2017

Mach keine Änderungen an Dateien des Templates.

Du brauchst ein script, das direkt auf den scroll-down-button wirkt, er soll einen halben Bildschirm runter scrollen und dann verschwinden. Richtig?

qoubo · 28. August 2017

Zitat von firstlady

Du brauchst ein script, das direkt auf den scroll-down-button wirkt, er soll einen halben Bildschirm runter scrollen und dann verschwinden. Richtig?

Ja genau.