FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

Recent Tutorials
Top posting users this month

Who is online?
In total there are 11 users online :: 0 Registered, 0 Hidden and 11 Guests

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

Sticky Navigation + Remove Quick Navigation

View previous topic View next topic Go down

Forumedic
Forumedic

Gender : Unspecified
Posts : 130
Points : 3297
Reputation : 14
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
http://www.forumpromocean.com

PostForumedic Fri 19 Aug 2016, 11:08

Can I use this as a sticky navbar when scrolling (example):
    

: Logout
: Login


With spaces in between the icons.

Also how can I get rid of the quick navigation on left toggle as well as widget menu?
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12255
Reputation : 2376
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 19 Aug 2016, 12:04

@Forumedic yeah ! I'd suggest using the following plugin and customizing it with the "customNav" and "keepDefault" options.

http://help.forumotion.com/t143777-make-your-navbar-sticky#981208


If you want to get rid of the quick navigation and widget menus go to Admin Panel > Modules > JavaScript codes management > [FA EDGE] ALL.JS


find and remove the widget script :
Code:
/* -- 00. fa_initForumModules -- */
// initiate the toggler for the widget columns
function fa_initForumModules(column_id) {
  var column = document.getElementById(column_id), menu;

  if (column) {
    column.insertAdjacentHTML('afterbegin', '<div class="title module_column_title">Widget Menu</div>');

    menu = document.createElement('A');
    menu.href = '#';
    menu.title = 'Toggle widget menu';
    menu.className = 'widget_menu column_button_' + column_id + ' color-secondary';

    menu.onclick = function() {
      var column = document.getElementById(/left/.test(this.className) ? 'left' : 'right');

      $([this, column])[/active/.test(this.className) ? 'removeClass' : 'addClass']('active');
      return false;
    };

    document.body.appendChild(menu);
  }
};

// give active panels a very high z-index so they display above other panels and buttons
// forumotion replaces any z-index above 1000 w/999 in the stylesheet, so this must be applied via JS
document.write('<style type="text/css">'+
  '.module_column, .widget_menu { z-index:30000; }'+
  '.module_column.active, .widget_menu.active { z-index:99999; }'+
'</style>');

Find and remove the quick nav script :
Code:
/* -- 05. fae_sticky_nav_panel -- */
// adds a sticky navigation for quick use when the navbar isn't visible
$(function() {
  window.fae_sticky = {
            // various user options
            navbar : 'navbar',
          position : 'left',
            title : 'Quick Navigation',
          tooltip : 'Toggle quick navigation',
    additionalHTML : '<div class="nav-actions"><a href="javascript:fae_sticky.copyURL();" title="Copy BBCode URL"><i class="fa fa-link"></i></a>' + ( _userdata.user_level == 1 ? '<a href="/admin" title="Admin Panel"><i class="fa fa-wrench"></i></a>' : '' ) + '<a href="#top" title="Top of page"><i class="fa fa-chevron-up"></i></a><a href="#bottom" title="Bottom of page"><i class="fa fa-chevron-down"></i></a></div>',
    alwaysVisible : false,

    // copy page URL as bbcode
    copyURL : function() {
      window.prompt('Copy the BBCode URL below. (CTRL+C)', '[url=' + window.location + ']' + document.title + '[/url]');
    },

    // listen for changes in the navbar's bottom rect
    scroll : function() {
      var rect = fae_sticky.navbar.getBoundingClientRect(),
          position = fae_sticky.node[0].style[fae_sticky.position];

      if (rect.bottom <= fae_sticky.offset[fae_sticky.tb_state] && position == '-30px') {
        fae_sticky.node[0].style[fae_sticky.position] = '';
      } else if (rect.bottom > fae_sticky.offset[fae_sticky.tb_state] && position != '-30px') {
        fae_sticky.node[0].style[fae_sticky.position] = '-30px';
        $(fae_sticky.node).removeClass('active');
      }
    },

    // offsets for when the toolbar is hidden / shown
    offset : {
      fa_hide : 0,
      fa_show : 30
    }
  };

  // nodes used in the module
  fae_sticky.node = [
    // button
    $('<a class="widget_menu column_button_' + fae_sticky.position + ' color-secondary" />').attr({
      href : '#',
        id : 'fa_sticky_nav_button',
      style : fae_sticky.position + ':-30px;',
      title : fae_sticky.tooltip

    }).click(function() {
      $(fae_sticky.node)[/active/.test(this.className) ? 'removeClass' : 'addClass']('active');
      return false;
    })[0],

    // panel
    $('<div id="fae_sticky_nav_panel" class="module_column column_' + fae_sticky.position + ' color-secondary" />')
    .html('<div class="title module_column_title">' + fae_sticky.title + '</div><div class="module_inner"></div>')[0]
  ];

  fae_sticky.navbar = document.getElementById(fae_sticky.navbar); // get the old navbar

  // then clone its contents and add it to the sticky panel
  $('.module_inner', fae_sticky.node[1]).append($('a.mainmenu', fae_sticky.navbar).clone()).append(fae_sticky.additionalHTML);
  $(document.body).append(fae_sticky.node);

  if (!fae_sticky.alwaysVisible) {
    fae_sticky.tb_state = my_getcookie('toolbar_state') || (_userdata.activate_toolbar ? 'fa_show' : 'fa_hide');
    fae_sticky.scroll();

    $(window).scroll(fae_sticky.scroll);

    $(function() {
      $('#fa_hide, #fa_show').click(function() {
        fae_sticky.tb_state = this.id;
      });
    });
  } else {
    fae_sticky.node[0].style.left = '';
  }
});

find and remove the quick nav notification plugin :
Code:
/* -- 08. sticky_nav_notifications -- */
$(function() {
  if (_userdata.session_logged_in) {
    var nav = document.getElementById('fae_sticky_nav_panel'),
        a = $('<a class="mainmenu" href="/profile?mode=editprofile&page_profil=notifications">Notifications</a>')[0];

    if (nav) {
      $('a[href="/privmsg?folder=inbox"]', nav).after(a);

      $.get('/notification.forum', function(o) {
        if (o && o.unread) {
          a.insertAdjacentHTML('beforeend', ' <span id="sticky_notif_unread">(' + o.unread + ')</span>');
        }
      }, 'json');
    }
  }
});

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum