How to add top up button

on Sunday 15 December 2019
comments: 0

Open footer templates (default and small).  Path:  theme/footers/

1. HTML CODE

Add this code at the end of files (after closing footer tag)

<div id="back-top">
    <a href="#uiModal"><i class="fa fa-chevron-up"></i></a>
</div>

Explanation:

 #uiModal says where you will go after click on that button.  This tag is inserted by e107 itself, so we use it, otherwise some ID has to be added to headers or body. This is quick solution.

2. FORMATTING

open style.css or style_custom.css file and add this code:

#back-top a:hover {
    background-color: rgba(228, 122, 128, 0.9);
}
 
#back-top a {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999999;
    color: #eee;
    background-color: rgba(228, 122, 128, 0.3);    
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}

#back-top a i {
    font-size: 2em;
}


#back-top .fa {
    width: 30px;
}

Explanation:

background-color: rgba(228, 122, 128, 0.9);

the button of colour on mouse hover. If you want it lighter, change value 0.9  

background-color: rgba(228, 122, 128, 0.3);

the normal colour of the button (with 0.3 opacity is very light).  rgba(228, 122, 128) is RGBA version of #E47A80 - default colour of buttons (that "pink").   Change it to your used colour.

border-radius: 4px;

standard gaia radius for buttons.

Note:

Don't forget to clear browser cache (CTRL-F5). You should now see not working, but styled button.

3. BEHAVIOUR

open custom.js in the theme folder. Add this code (before last  });   )

// hide #back-top first
    $("#back-top").hide();
    
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 500);
            return false;
        });
    });

Explanation:

by default (on first screen) is button hidden. After first scrolling light version is displayed with animation effect (fadeIn/fadeOut). 

After click on button scrolling to the top is animated.  500 is the speed of scrolling.

Source of this solution:  OpenMind theme.

Note:

If it doesn't work, check console for javascript errors (F12, tab Console).  You can see this in action in the Gaia demo.

0 Comments

Latest Downloads

JM Download plugin 1.2
in Category: JM Download plugin

JM Download plugin 1.2

2 weeks ago

Plugin for extending the core Download plugin. Version 1.3 on Github Replaced JM_Download plugin, Latest Releases by Father Barry,  Top Downloads menu by SecretR, AACGC Download Tracker by M@CH!N3 V 
Read more..

JM Download plugin 1.2
JM Core plugin 1.6.0
in Category: e107 plugins

JM Core plugin 1.6.0

1 month ago

The version used on this site. It fixes some core limitation via the plugin, no core changes. Check Readme at first.  Version 1.6.1 on github What is inside? - fix for missing titles in the m 
Read more..

JM Core plugin 1.6.0
ReCaptcha plugin 1.3
in Category: ReCaptcha plugin

ReCaptcha plugin 1.3

1 month ago

No CAPTCHA reCAPTCHA Captcha replacement for e107 v2.2 or higher with shortcodes.  Added shortcodes for replacing contact secure image shortcodes. Possibility to hide it from logged users.
Read more..

ReCaptcha plugin 1.3