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

Design and development for Forumotion forums.

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
See more
Top posting users this month

Top Achievers
Ange Tuteur
problen in Select a Category javascript Poll_c10problen in Select a Category javascript Poll_m10problen in Select a Category javascript Poll_c10 
SLGray
problen in Select a Category javascript Poll_c10problen in Select a Category javascript Poll_m10problen in Select a Category javascript Poll_c10 
Valoish
problen in Select a Category javascript Poll_c10problen in Select a Category javascript Poll_m10problen in Select a Category javascript Poll_c10 
Luffy
problen in Select a Category javascript Poll_c10problen in Select a Category javascript Poll_m10problen in Select a Category javascript Poll_c10 
Wilson
problen in Select a Category javascript Poll_c10problen in Select a Category javascript Poll_m10problen in Select a Category javascript Poll_c10 
Van-Helsing
problen in Select a Category javascript Poll_c10problen in Select a Category javascript Poll_m10problen in Select a Category javascript Poll_c10 
Niko!
problen in Select a Category javascript Poll_c10problen in Select a Category javascript Poll_m10problen in Select a Category javascript Poll_c10 
Ace 1
problen in Select a Category javascript Poll_c10problen in Select a Category javascript Poll_m10problen in Select a Category javascript Poll_c10 
JerriLeah7
problen in Select a Category javascript Poll_c10problen in Select a Category javascript Poll_m10problen in Select a Category javascript Poll_c10 
Rhino.Freak
problen in Select a Category javascript Poll_c10problen in Select a Category javascript Poll_m10problen in Select a Category javascript Poll_c10 
Who is online?
In total there are 7 users online :: 0 Registered, 0 Hidden and 7 Guests :: 1 Bot

None

[ View the whole list ]


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

fa_night_container  fa_theme_selector  editor  left  Mozilla  German  wio_group_legend  tool  text_editor_textarea  js  options  Dutch  Version  beta-testers  phpBB3  fa_personal_emoticons_list  Update  46-0-1  line-break  FireFox  translations  message  chatBox  search  French  plugin  


problen in Select a Category javascript

 :: Services :: Forumactif Edge :: Support :: Closed Issues

View previous topic View next topic Go down

Solved problen in Select a Category javascript

#30504
djblah
djblah
Member
Gender : Unspecified
Posts : 12
Points : 3490
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

Postdjblah Fri 16 Jun 2017, 19:46


Hello admin I am a forum owner and I have seen that you have a javascript tab categories I love it works but I changed my index box to a new design and now it does not work can help me to adapt it thanks in step I leave my index box thanks

Here the topic I use and now it does not work with my new index-box:

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 = $('.bodylinewidth')[0] ? 0 : document.getElementById('wrap') ? 1 : $('div.pun')[0] ? 2 : document.getElementById('ipbwrapper') ? 3 : document.getElementById('fa_edge') ? 4 : 'badapple';
             
                  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 : !version ? '#content-container td:has(> img[height="5"])' : 'main-content',
                      category : ['.forumline:has(.secondarytitle)', '.forabg', '.main:has(.tcr) .main-head', '.borderwrap:has(.index-box)', '.forum-category'][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(1, 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(-1, -' + (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>');


Code:
here my index-box


Code:
            <!-- BEGIN catrow -->
          <!-- BEGIN tablehead -->
          <div class="box-over">
       
              <div class="box-oname">{catrow.tablehead.L_FORUM}</div>
           
       
              <table cellpadding="0" cellspacing="0" id="{catrow.tablehead.ID}" class="box-table">
                <tr>
                                  <td>
          <!-- END tablehead -->
       
          <!-- BEGIN forumrow -->
                                 
                  <div class="box-wrap" style="border-right-color:#8e44ad!important" id="{catrow.forumrow.U_VIEWFORUM} {catrow.forumrow.FORUM_FOLDER_IMG}">
                    <div class="box-all">
                      <a href="{catrow.forumrow.U_VIEWFORUM}">
                        <div class="box-bg">
                          <div class="box-tp">{catrow.forumrow.TOPICS} Topics<br/>{catrow.forumrow.POSTS} Posts</div>
                       
                        </div>
                      </a>
                      <div class="box-right">
                        <a href="{catrow.forumrow.U_VIEWFORUM}" class="box-name" id="{catrow.forumrow.FORUM_FOLDER_IMG}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}">{catrow.forumrow.FORUM_NAME}</a>
                        <div class="box-slide">
                          <div class="box-up">
                            <div class="box-info" style="color: rgb(96, 92, 92);">{catrow.forumrow.FORUM_DESC}</div>
           
                          </div>
                                      <!-- BEGIN avatar -->
            <br><div class="box-ava1" style="position: relative; margin-top: -45px; margin-left: 30px;">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
                <!-- END avatar -->
                            <!-- BEGIN switch_topic_title -->
                      <div class="box-ava2" style="position: relative; margin-top: -45px; margin-left: 45px;"> <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                          <!-- END switch_topic_title -->
                        {catrow.forumrow.USER_LAST_POST}</div>
                       
                       
                     
               
                          <div class="box-down">
                            <!-- BEGIN switch_moderators_links -->
                            <!-- <div class="box-mod">
                              {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                            </div>-->
                            <!-- END switch_moderators_links -->
                          </div>
                        </div>
                      </div>
                      <div class="box-right2">
                        <!-- BEGIN avatar -->
                        <div class="box-ava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
                        <!-- END avatar -->
                        <div class="box-last">
                          <!-- BEGIN switch_topic_title -->
                          <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                          <!-- END switch_topic_title -->
                          {catrow.forumrow.USER_LAST_POST}
                        </div>
                      </div>
                      <div class="box-sub">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
                    </div>
                                    </div>
          <!-- END forumrow -->
       
          <!-- BEGIN tablefoot -->
                                  </td>
                </tr>
              </table>
              </div>
           
         
          <!-- END tablefoot -->
        <!-- END catrow -->
       
        <!-- BEGIN switch_on_index -->
        <div class="toplinks linklist clearfix">
          <ul>
              <!-- BEGIN switch_delete_cookies -->
              <li><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
              <!-- END switch_delete_cookies -->
              <!-- BEGIN switch_user_logged_in -->
              <li class="last"><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
              <!-- END switch_user_logged_in -->
          </ul>
        </div>
        <!-- END switch_on_index -->
        <script>
          $('.box-sub:empty').each(function(){
            $(this).parents('.box-wrap').attr('style','border-right-color:'+$(this).parents('.box-wrap').css('border-color')+'!important');
          });
        </script>
       
        <style>
          /* Box */
        .box-wrap{position:relative;float:left;width: calc(50% - 14px);height: 125px;margin:5px;border: 2px solid #bdc3c7;border-right-color:#8e44ad!important}
        .box-table{width:100%;margin:0 auto;position:relative}
        .box-bg{position:absolute;top:0;left:0;background-repeat:no-repeat!important;background-position:center center!important;height: 125px;float:left;width: 100px;background:#3B5998 url(https://i58.servimg.com/u/f58/16/75/54/11/boton10.png);margin-right:10px;background-size:48px 48px!important}
        .box-right,.box-right2{margin-left: 110px;height: 125px;transition:all 0.5s ease;width: 320px;}
        .box-wrap:hover .box-right{margin-top:-125px;background:#bdc3c7}
        .box-wrap:hover .box-right2{background:#fff}
        .box-ava{overflow:hidden;width: 115px;height: 115px;float:left;margin-right: 5px;}
        .box-name{color:#555;font-weight:bold;font-size:15px;margin-top:5px;line-height:30px}
        .box-name[id*="0Ne8b3P"]{color:#3498db!important}
        .box-name[id*="E3ptS7d"]{color:#e74c3c!important}
        .box-wrap[id*="0Ne8b3P"]{border-color:#3498db!important}
        .box-wrap[id*="E3ptS7d"]{border-color:#e74c3c!important}
        .box-name[id*="U41oop6"]{color:#555!important}
        .box-wrap[id*="U41oop6"]{border-color:#d7d7d7!important}
        .box-up{height:70px}
        .box-down{line-height:25px}
        .box-right2{padding:5px 0;background:#bdc3c7}
        .box-ava img{width:115px;height:115px}
        .box-last{margin-left:125px;padding:31px 0;}
        .box-last > a:first-child {font-size:18px;line-height:25px;}
        .box-tp{padding:5px;background:rgba(0,0,0,.7);color:#fff;font-weight:bold;display:none}
        .box-wrap:hover .box-tp{display:block}
        .box-sub {-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;color:transparent;transition:all 0.3s ease;position: absolute;right:0;top: -7px;padding: 5px 0!important;margin-top: 5px;background: #ffffff;z-index: 999;padding: 5px;width: 0;overflow-x: hidden;overflow-y: auto;height: 119px;}
        .box-sub:empty {display:none!important}
        .box-oname {margin: 15px;width: calc(100% - 30px);text-align: center;}
        .box-all{height:125px;width:440px;overflow:hidden}
        .box-wrap:hover .box-sub{width:200px;padding:5px!important;right:-212px;border-right:2px solid #fff;}
        .box-wrap:nth-child(2n):hover .box-sub {left: -212px!important;border-left:2px solid #fff;border-right:0!important}
        .box-wrap:nth-child(2n) .box-sub {left: 0!important;float: left!important;}
        .box-right2 > .box-last > a:empty:before {content: 'Nothing new here';pointer-events: none!important;}
        .box-sub .gensmall{display:block;padding:2px 5px;background:transparent;font-weight:bold;margin-top:-15px;color:#fff;transition:background 0.2s ease;border-radius:2px;margin-left: 18px}
        .box-sub .gensmall:first-child{margin-top:0}
        .box-sub .gensmall:hover{background:#fff;color:#3498db}
       
       
       
       
          .box-last1{margin-left:125px;padding:31px 0;}
          .box-info img{width:32px;height:32px;}
       
          .box-ava1 {
            width: 5px;
            height: 50px;
            float: left;
            margin-right: 6px;
        }
       
          .box-ava1 img {
            width: 50px;
        height: 50px;
        margin-left: -40px;
        top: 28px;
        }
       
       
          .box-oname {
            margin: 15px;
            width: 100% !important;
            text-align: left;
            background: none repeat scroll 0 0 #EFF2F7;
            border-bottom: 1px solid #d8dfea;
            border-color: #eceff5;
            border-top: 1px solid #d8dfea;
            border-width: none;
            box-shadow: none;
            color: #494A4D;
            margin-top: 15px;
            padding: .7em 1.3em;
            position: relative;
              margin-left: -15px !important;
        }
        }
       
          .box-table {
            border-bottom: 1px solid #f3f3f3;
        }
        </style>

Solved Re: problen in Select a Category javascript

#30505
Wolfuryo
Wolfuryo

Gender : Male
Posts : 256
Points : 3808
Reputation : 81
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostWolfuryo Sat 17 Jun 2017, 01:51

Helli,

Please post your forum's link.

Solved Re: problen in Select a Category javascript

#30506
djblah
djblah
Member
Gender : Unspecified
Posts : 12
Points : 3490
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

Postdjblah Sat 17 Jun 2017, 10:14

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

@Wolfuryo

Thanks for attending my topic

Solved Re: problen in Select a Category javascript

#30508
djblah
djblah
Member
Gender : Unspecified
Posts : 12
Points : 3490
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

Postdjblah Tue 20 Jun 2017, 12:51

problen in Select a Category javascript 1f62d problen in Select a Category javascript 1f62d problen in Select a Category javascript 1f62d problen in Select a Category javascript 1f62d problen in Select a Category javascript 1f62d problen in Select a Category javascript 1f62d help me bump

Solved Re: problen in Select a Category javascript

#30529
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 Thu 22 Jun 2017, 11:27

Hi @djblah,

Give the script below a try. I removed the auto-version detection and included only selectors for your templates. If it doesn't work, just let me know.
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(1, 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(-1, -' + (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>');

Solved Re: problen in Select a Category javascript

#30533
djblah
djblah
Member
Gender : Unspecified
Posts : 12
Points : 3490
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

Postdjblah Thu 22 Jun 2017, 17:22

@Ange Tuteur

thank you thank you very much.

A dua there is a way that the speed of the slide of the eyelashes is a little faster.

Excuse my English I'm using a translator.

Solved Re: problen in Select a Category javascript

#30545
djblah
djblah
Member
Gender : Unspecified
Posts : 12
Points : 3490
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

Postdjblah Mon 26 Jun 2017, 19:48

solutions speed slide categorie

Code:
onmousedown="fa_tabs.scroll(20, 0);

Code:
onmousedown="fa_tabs.scroll(-20,

Solved Re: problen in Select a Category javascript

#30551
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 Tue 27 Jun 2017, 11:06

Ah, is this solved now ?

Solved Re: problen in Select a Category javascript

#30562
djblah
djblah
Member
Gender : Unspecified
Posts : 12
Points : 3490
Reputation : 0
Language : español
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

Postdjblah Tue 27 Jun 2017, 12:08

Yes thank you, theme

Solved Re: problen in Select a Category javascript

#30579
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 Wed 28 Jun 2017, 10:16

No problem ! ^^

Solved Re: problen in Select a Category javascript

#0
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Similar topics
» Select Button
» [SOLVED] Javascript question
» category image
» [SOLVED] Forumotion: JavaScript Limit
» [SOLVED] IN JAVASCRIPT ERROR CODE

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

FM Design :: Services :: Forumactif Edge :: Support :: Closed Issues

 
Permissions in this forum:
You cannot reply to topics in this forum
Free forum | ©phpBB | Free forum support | Report an abuse | Cookies | Forumotion.com
Terms of service | Founder tools | Tutorials | Affiliates