Bottom footer navbar button extend

DownPW · 31 Jul 2022, 16:17

Small request for my forum or here @phenomlab

I would like the bottom bar of the site to be hidden with a button and for it to appear/disappear after a click or a mouseover with a small animation that doesn’t take too many resources.

It would also be nice if the setting was kept in the DOM session if possible so that the user doesn’t have to mess with it all the time.

We could imagine that it is active by default and if the user does not want it, he hides it. It will simply remain the button on the left or right side

Thanks

phenomlab · 8 Feb 2022, 16:42

Instructions

Go to /admin/extend/widgets and locate the “Global Footer” widget
At the very top of the existing code you have in that widget, add

<div id="console-nav-tab"><i class="fa-solid fa-angles-left"></i></div>

Add this CSS

 div#console-nav-tab {
position: fixed;
    bottom: 0px;
    z-index: 900;
    height: 30px;
    left: 0px;
}
div#console-nav-tab i {
    font-size: 16px;
    margin-left: 10px;
    line-height: 2.0 !important;
}
.toBottom {
   bottom: 0px !important;
}

Note, that you probably need to modify the existing CSS ID floatleft to accommodate the additional DIV and icon. For example

 #floatleft {
    float: left;
    padding-left: 30px; /*additional left padding to support additional DIV and icon */
    font-size: 80%;
    line-height: 2.0;
    font-weight: 600;
    display: flex;
}

Go to /admin/appearance/customise#custom-js and add this block of code (bottom is fine, or wherever you want to place it)

 $(document).ready(function() {
    $(window).on('action:ajaxify.end', function(data) {
        var getState = localStorage.getItem("footer");
        if (getState === "hidden") {
            $("#console-nav-footer").hide();
            $("#console-nav-tab i").addClass("fa-solid fa-angles-right");
            $('.pagination-block').addClass("toBottom");
        } else {
            $("#console-nav-tab i").addClass("fa-solid fa-angles-left");
            $('.pagination-block').removeClass("toBottom");
        }
        $("#console-nav-tab").click(function() {
            $("#console-nav-footer").toggle(250, function() {
                if ($("#console-nav-footer").is(":hidden")) {
                    localStorage.setItem("footer", "hidden");
                    $("#console-nav-tab i").addClass("fa-solid fa-angles-right");
                    $('.pagination-block').addClass("toBottom");
                } else {
                    localStorage.setItem("footer", "shown");
                    $("#console-nav-tab i").addClass("fa-solid fa-angles-left");
                    $('.pagination-block').removeClass("toBottom");
                }
            });
            $("i", this).toggleClass("fa-solid fa-angles-left fa-solid fa-angles-right");
        });
    });
});

Test, and make necessary modifications to suit your own environment

phenomlab · 31 Jul 2022, 16:39

@DownPW said in Bottom footer navbar button extend:

We could imagine that it is active by default and if the user does not want it, he hides it. It will simply remain the button on the left or right side

So are you looking for a button on the footer that when clicked will remove from the screen with an animation, but leave just enough so that it can be clicked to make it reappear again with the same animation ?

DownPW · 31 Jul 2022, 16:40

@phenomlab said in Bottom footer navbar button extend:

@DownPW said in Bottom footer navbar button extend:

We could imagine that it is active by default and if the user does not want it, he hides it. It will simply remain the button on the left or right side

So are you looking for a button on the footer that when clicked will remove from the screen with an animation, but leave just enough so that it can be clicked to make it reappear again with the same animation ?

Exactly

phenomlab · 31 Jul 2022, 16:41

@DownPW Right. I’m on it (well, tomorrow now)

DownPW · wrote on 31 Jul 2022, 16:41

@phenomlab hé hé

phenomlab · 8 Jan 2022, 18:20

@DownPW said in Bottom footer navbar button extend:

Exactly

Something like this ?

DownPW · 1 Aug 2022, 20:49

@phenomlab

clearly that ^^

phenomlab · wrote on 1 Aug 2022, 20:49

@DownPW ok, good. Let me write the code to record the session state (in the same way that the theme engine works) and I’ll release the code, plus CSS.

DownPW · 8 Jan 2022, 21:52

hell yeah
Simple to modify ?

Example: put the button on the left or right

phenomlab · wrote on 1 Aug 2022, 21:04

@DownPW yes, that will be a simple CSS modification

phenomlab · 2 Aug 2022, 09:07

@DownPW said in Bottom footer navbar button extend:

Example: put the button on the left or right

Looks better on the left I think - more natural

DownPW · 2 Aug 2022, 09:09

@phenomlab yes

phenomlab · wrote on 2 Aug 2022, 09:09

@DownPW I’ll make some small adjustments to the final code to accommodate this. Just need to write the session cookie data, then I’ll release the code.

phenomlab · 2 Aug 2022, 12:34

@DownPW Can you let me know if you used the same code for the footer as what is here ? I think this is the case, but want to check. There needs to be some modifications to this code to support the footer toggle.

phenomlab · wrote on 2 Aug 2022, 09:49

Updated position of collapse/expand so it’s on the left for a more natural feel

DownPW · wrote on 2 Aug 2022, 11:57

Very great

DownPW · wrote on 2 Aug 2022, 12:34

@phenomlab said in Bottom footer navbar button extend:

Can you let me know if you used the same code for the footer as what is here ?

yes Mark, with minor adjustement.

phenomlab · 8 Feb 2022, 16:42

Instructions

Go to /admin/extend/widgets and locate the “Global Footer” widget
At the very top of the existing code you have in that widget, add

<div id="console-nav-tab"><i class="fa-solid fa-angles-left"></i></div>

Add this CSS

 div#console-nav-tab {
position: fixed;
    bottom: 0px;
    z-index: 900;
    height: 30px;
    left: 0px;
}
div#console-nav-tab i {
    font-size: 16px;
    margin-left: 10px;
    line-height: 2.0 !important;
}
.toBottom {
   bottom: 0px !important;
}

Note, that you probably need to modify the existing CSS ID floatleft to accommodate the additional DIV and icon. For example

 #floatleft {
    float: left;
    padding-left: 30px; /*additional left padding to support additional DIV and icon */
    font-size: 80%;
    line-height: 2.0;
    font-weight: 600;
    display: flex;
}

Go to /admin/appearance/customise#custom-js and add this block of code (bottom is fine, or wherever you want to place it)

 $(document).ready(function() {
    $(window).on('action:ajaxify.end', function(data) {
        var getState = localStorage.getItem("footer");
        if (getState === "hidden") {
            $("#console-nav-footer").hide();
            $("#console-nav-tab i").addClass("fa-solid fa-angles-right");
            $('.pagination-block').addClass("toBottom");
        } else {
            $("#console-nav-tab i").addClass("fa-solid fa-angles-left");
            $('.pagination-block').removeClass("toBottom");
        }
        $("#console-nav-tab").click(function() {
            $("#console-nav-footer").toggle(250, function() {
                if ($("#console-nav-footer").is(":hidden")) {
                    localStorage.setItem("footer", "hidden");
                    $("#console-nav-tab i").addClass("fa-solid fa-angles-right");
                    $('.pagination-block').addClass("toBottom");
                } else {
                    localStorage.setItem("footer", "shown");
                    $("#console-nav-tab i").addClass("fa-solid fa-angles-left");
                    $('.pagination-block').removeClass("toBottom");
                }
            });
            $("i", this).toggleClass("fa-solid fa-angles-left fa-solid fa-angles-right");
        });
    });
});

Test, and make necessary modifications to suit your own environment

DownPW · 2 Aug 2022, 13:41

why deleted ?

phenomlab · wrote on 2 Aug 2022, 13:41

@DownPW Because it’s not finished. I forgot the session state…

sudonix

Bottom footer navbar button extend

Instructions

Instructions

Did this solution help you?

Related Topics

navigation menu panel on mobile

Footer bar add center text

Embed - What Are You Using?

Fontawesome 5

background color of the footer area

tag icon in front of tags

[NODEBB] Reply Button/arrow answer

Discourse Design Change

sudonix

Bottom footer navbar button extend

Instructions

Instructions

Did this solution help you?

Related Topics

Individual Categories