Latest topics
» [GAME] Count to 999 using odd numbers Van-Helsing Edition
by Van-Helsing Yesterday at 16:03

» [GAME] Count to 1000 using even numbers Van-Helsing Edition
by Van-Helsing Yesterday at 16:03

» [GAME] Count to One Million!
by Van-Helsing Yesterday at 16:02

» [GAME] Count to 30 - Ange Edition
by Van-Helsing Yesterday at 16:01

» Is there any new update for ForumActif Edge?
by Van-Helsing Yesterday at 16:01

» Add a login popup for the toolbar
by Ape Sun 24 Sep 2017, 17:26

» [GAME] Post a random picture
by SLGray Fri 22 Sep 2017, 19:23

» Topic'It
by Ange Tuteur Fri 22 Sep 2017, 10:06

» Topic'It
by SLGray Thu 21 Sep 2017, 15:52

» FM Themes
by SLGray Thu 21 Sep 2017, 15:51

» User - Made Creations
by SLGray Thu 21 Sep 2017, 15:50

» IconSkouliki
by skouliki Sun 17 Sep 2017, 11:05

» Awards
by Mr_Grande Sun 17 Sep 2017, 08:52

» Modify Category Tabs lead to a desired position and auto scroll click
by djblah Fri 15 Sep 2017, 14:56

» Display a preview of the user profile on hover
by Eiki Thu 14 Sep 2017, 02:38

Recent Tutorials
Who is online?
In total there are 5 users online :: 0 Registered, 0 Hidden and 5 Guests :: 2 Bots

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Modify Category Tabs lead to a desired position and auto scroll click

View previous topic View next topic Go down

avatar
djblah
Member
Title :
Gender : Unspecified
Posts : 12
Points : 874
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

Postdjblah on Wed 16 Aug 2017, 20:14

Hello friends fmdesign

I am using the delisable menu of categories.



Well I wish if you administrator can make these changes I want to move only the category bar to a desired position.

And that when clicking you take it to the position of the category.

example: http://jsfiddle.net/kevinPHPkevin/8tLdq/

Without losing the same operation of the original that opens the category

Here is the javascript

Code:
$(function() {
          'DEVELOPED BY ANGE TUTEUR';
          'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
          'ORIGIN : http://fmdesign.forumotion.com/t472-category-tabs#5772';
       
          // automatically detects the version
          var version = 0;
       
          if (version == 'badapple') {
            if (window.console && console.warn)
              console.warn('The plugin "fa_tabs" is not supported for your forum version.');
            return;
          }
       
          window.fa_tabs = {
            active: my_getcookie('fa_tab_active') || 0,
            // active tab
            list: [],
            // category list
            version: version,
            // forum version
       
            // language settings
            lang: {
              title: 'Select a Category',
              placeholder: 'Category',
              all: 'All'
            },
       
            // selectors
            select: {
              content: 'main-content',
              category: ['.box-over'][version]
            },
       
            // function for changing the active category
            change: function(index) {
              my_setcookie('fa_tab_active', index);
              // save the active tab to a cookie
       
              // actions to run if the tab is not "all"
              if (index != 'all') {
                if (fa_tabs.active == 'all') {
                  fa_tabs.tab[0].previousSibling.className = '';
                  fa_tabs.display('none');
                } else {
                  fa_tabs.tab[fa_tabs.active].className = '';
                  fa_tabs.list[fa_tabs.active].style.display = 'none';
                }
       
                fa_tabs.tab[index].className = 'fa_tabactif';
                fa_tabs.list[index].style.display = '';
       
                if (fa_tabs.version == 2) {
                  if (fa_tabs.active != 'all')
                    fa_tabs.list[fa_tabs.active].nextSibling.style.display = 'none';
                  fa_tabs.list[index].nextSibling.style.display = '';
                }
              } else {
                if (fa_tabs.active != 'all')
                  fa_tabs.tab[fa_tabs.active].className = '';
                fa_tabs.tab[0].previousSibling.className = 'fa_tabactif';
                fa_tabs.display('');
              }
       
              fa_tabs.active = index;
            },
       
            // change the display of all categories
            display: function(state) {
              for (var i = 0, j = fa_tabs.list.length; i < j; i++) {
                fa_tabs.list[i].style.display = state;
                if (version == 2)
                  fa_tabs.list[i].nextSibling.style.display = state;
              }
              ;
            },
       
            // stop tab scrolling
            stop: function() {
              if (fa_tabs.interval) {
                window.clearInterval(fa_tabs.interval);
                fa_tabs.interval = null;
              }
            },
       
            // scroll tablist
            scroll: function(by, max) {
              if (!fa_tabs.interval) {
                var node = document.getElementById('fa_tablist').firstChild.firstChild;
       
                fa_tabs.interval = window.setInterval(function() {
                  var margin = +node.style.marginLeft.replace(/px/, '');
                  (by < 0 && margin <= max) || (by > 0 && margin >= max) ? fa_tabs.stop() : node.style.marginLeft = margin + by + 'px';
                }, 1);
              }
            }
       
          };
       
          // startup variables
          var frag = document.createDocumentFragment()
            , container = $('<div id="fa_category_tabs"><h2 id="fa_tabs_title">' + fa_tabs.lang.title + '</h2></div>')[0]
            , tablist = $('<div id="fa_tablist"><div class="inner_tabs"><div></div></div></div>')[0]
            , catglist = $('<div id="fa_catglist" />')[0]
            ,
          a = $(fa_tabs.select.category, !version ? $(fa_tabs.select.content)[0] : document.getElementById(fa_tabs.select.content))
            , i = 0
            , j = a.length
            , htmlStr = '<a href="javascript:fa_tabs.change(\'all\');">' + fa_tabs.lang.all + '</a>';
       
          // drop off the main container before the first category
          a[0] && a[0].parentNode.insertBefore(container, a[0]);
       
          // loop through each category
          for (; i < j; i++) {
            if (version == 2)
              var next = a[i].nextSibling;
       
            // create our tabs
            htmlStr += '<a href="javascript:fa_tabs.change(' + i + ');">' + ($('H2:first', a[i]).text() || fa_tabs.lang.placeholder + ' ' + i) + '</a>';
       
            // append the category to the list and hide it
            catglist.appendChild(a[i]);
            a[i].style.display = 'none';
       
            // get the next sibling as well for punbb
            if (version == 2) {
              catglist.appendChild(next);
              next.style.display = 'none';
            }
       
            fa_tabs.list[i] = a[i];
            // cache the category to the array
          }
       
          if (fa_tabs.list[0]) {
            tablist.firstChild.firstChild.innerHTML = htmlStr;
            // fill in the tablist
            fa_tabs.tab = [].slice.call(tablist.getElementsByTagName('A'));
            // create an array for the tabs
            fa_tabs.tab.shift();
            // remove the all tab
       
            fa_tabs.change(fa_tabs.active);
            // setup the active tab
       
            // finally add the content to the document
            frag.appendChild(tablist);
            frag.appendChild(catglist);
            container.appendChild(frag);
       
            window.setTimeout(function() {
              if (tablist.firstChild.scrollWidth > tablist.firstChild.clientWidth) {
                tablist.className = 'fa_tabs_overflow';
                tablist.firstChild.firstChild.style.marginLeft = '0px';
                tablist.insertAdjacentHTML('beforeend', '<a class="tab_scroller scroll_left" href="#" onmousedown="fa_tabs.scroll(20, 0); return false;" onclick="fa_tabs.stop(); return false;" onmouseout="fa_tabs.stop();"><</a><a class="tab_scroller scroll_right" href="#" onmousedown="fa_tabs.scroll(-20, -' + (tablist.firstChild.scrollWidth - tablist.firstChild.clientWidth) + '); return false;" onclick="fa_tabs.stop(); return false;" onmouseout="fa_tabs.stop();">></a>');
              }
            }, 100);
          }
        });
       
        $('head').append('<style type="text/css">#fa_tabs_title{color:#333;font-size:24px;font-weight:400;font-family:arial,sans-serif;margin:3px;line-height:24px}.inner_tabs a,a.tab_scroller{font-family:arial,sans-serif;height:30px;line-height:30px}#fa_tablist{position:relative;white-space:nowrap}#fa_tablist.fa_tabs_overflow{padding:0 18px}.inner_tabs{overflow:hidden;padding-bottom:1px;margin-bottom:-1px}a.tab_scroller{color:#FFF;background:#333;font-size:16px;text-align:center;position:absolute;bottom:2px;width:15px;opacity:.1}a.tab_scroller.scroll_left{left:0}a.tab_scroller.scroll_right{right:0}#fa_tablist:hover a.tab_scroller{opacity:.7}#fa_tablist a.tab_scroller:hover{opacity:1}#fa_catglist{background:#EEE;border:1px solid #CCC;border-radius:3px;padding:10px 6px}.inner_tabs a{color:#333 !important;background:#DDD;border:1px solid #CCC;border-bottom:none;border-radius:3px 3px 0 0;text-decoration:none!important;font-size:12px;font-weight:700;display:inline-block;padding:0 10px;margin:3px 3px 0}.inner_tabs a.fa_tabactif,.inner_tabs a:hover{background:#EEE;position:relative;bottom:-1px;opacity:1}</style>');


@Ange Tuteur
avatar
Wolfuryo

Gender : Male
Posts : 249
Points : 1183
Reputation : 79
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostWolfuryo on Thu 17 Aug 2017, 15:55

I don't understand what you want to do.... Please explain better.
avatar
djblah
Member
Title :
Gender : Unspecified
Posts : 12
Points : 874
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

Postdjblah on Thu 17 Aug 2017, 19:19

this is what I want


avatar
Ace 1
Valued Member
Title :

Beta Tester
Gender : Unspecified
Age : 17
Posts : 2128
Points : 2869
Reputation : 85
Location : druid hill Park
Language : Eng, Fr, Loud
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://fmdesign.forumotion.com/u190

PostAce 1 on Sat 19 Aug 2017, 14:57

@djblah Forum link?
avatar
djblah
Member
Title :
Gender : Unspecified
Posts : 12
Points : 874
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

Postdjblah on Mon 21 Aug 2017, 09:58

Ace 1 wrote:@djblah Forum link?

here
http://www.tibiaface.com/forum
avatar
djblah
Member
Title :
Gender : Unspecified
Posts : 12
Points : 874
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

Postdjblah on Wed 23 Aug 2017, 11:13

djblah wrote:
Ace 1 wrote:@djblah Forum link?

here
http://www.tibiaface.com/forum



bumb
avatar
djblah
Member
Title :
Gender : Unspecified
Posts : 12
Points : 874
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

Postdjblah on Thu 14 Sep 2017, 18:51

bump
avatar
Luffy

Title :
Crazy Tanker
Gender : Male
Age : 23
Posts : 291
Points : 1643
Reputation : 64
Language : Greek, English
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile http://www.inforumgr.com/ https://www.facebook.com/inforumgr https://twitter.com/inforumgr

PostLuffy on Fri 15 Sep 2017, 06:16

@djblah, you are not using ForumActif Edge and you seek support here? This is not a support forum but it only supports forums that use ForumActif Edge and only. Therefore, i doubt you finding your solution here. Always friendly speaking.

--------

avatar
djblah
Member
Title :
Gender : Unspecified
Posts : 12
Points : 874
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

Postdjblah on Fri 15 Sep 2017, 14:56

Luffy wrote:@djblah, you are not using ForumActif Edge and you seek support here? This is not a support forum but it only supports forums that use ForumActif Edge and only. Therefore, i doubt you finding your solution here. Always friendly speaking.


sorry i think i was wrong

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