Username:
Password:

Hello Guest


If you want to join in our community , please register or login , you have in header a login form , or if you want to register ,press me .
  • Forum
  • Forum
  • Forum
  • Forum
  • Forum
  • fmSoftware is for sale , if you want to buy the forum and/or the old themes , jaques.gfx skype or roby_cs_reax@yahoo.com for EMAIL.

    You are not connected. Please login or register

    View previous topic View next topic Go down  Message [Page 1 of 1]

    Sasori

    Posts : 311
    Points : 1719
    Thanks : 5
    Administrator

    Hello all , today I'm gonna show you all a simple code with organic tabs , like our statistics .

    First time , we need a HTML code :


    Code:
    <div id="example-one">
             
        <ul class="nav">
                    <li class="nav-one"><a href="#featured" class="current">Featured</a></li>
                    <li class="nav-two"><a href="#core">Core</a></li>
        </ul>
       
        <div class="list-wrap">
       
          <ul id="featured">
             <li>Stuff in here!</li>
          </ul>
          
           <ul id="core" class="hide">
             <li>Stuff in here!</li>
           </ul>
          
          
        </div> <!-- END List Wrap -->
     
     </div>


    And now, we need to style :


    Code:
    #example-one { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }

    #example-one .nav { overflow: hidden; margin: 0 0 10px 0; }
    #example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
    #example-one .nav li.last { margin-right: 0; }
    #example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
    #example-one .nav li a:hover { background-color: #111; }

    #example-one ul { list-style: none; }
    #example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
    #example-one ul li a:hover, #example-one ul li a:focus { background: #fe4902; color: white; }
    #example-one ul li:last-child a { border: none; }

    #example-one li.nav-one a.current, ul.featured li a:hover { background-color: #0575f4; color: white; }
    #example-one li.nav-two a.current, ul.core li a:hover { background-color: #d30000; color: white; }

    Ok , and we have and a javascript to work


    Code:
    (function($) {

        $.organicTabs = function(el, options) {
        
            var base = this;
            base.$el = $(el);
            base.$nav = base.$el.find(".nav");
                    
            base.init = function() {
            
                base.options = $.extend({},$.organicTabs.defaultOptions, options);
                
                // Accessible hiding fix
                $(".hide").css({
                    "position": "relative",
                    "top": 0,
                    "left": 0,
                    "display": "none"
                });
                
                base.$nav.delegate("li > a", "click", function() {
                
                    // Figure out current list via CSS class
                    var curList = base.$el.find("a.current").attr("href").substring(1),
                    
                    // List moving to
                        $newList = $(this),
                        
                    // Figure out ID of new list
                        listID = $newList.attr("href").substring(1),
                    
                    // Set outer wrapper height to (static) height of current inner list
                        $allListWrap = base.$el.find(".list-wrap"),
                        curListHeight = $allListWrap.height();
                    $allListWrap.height(curListHeight);
                                            
                    if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
                                                
                        // Fade out current list
                        base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
                            
                            // Fade in new list on callback
                            base.$el.find("#"+listID).fadeIn(base.options.speed);
                            
                            // Adjust outer wrapper to fit new list snuggly
                            var newHeight = base.$el.find("#"+listID).height();
                            $allListWrap.animate({
                                height: newHeight
                            });
                            
                            // Remove highlighting - Add to just-clicked tab
                            base.$el.find(".nav li a").removeClass("current");
                            $newList.addClass("current");
                                
                        });
                        
                    }  
                    
                    // Don't behave like a regular link
                    // Stop propegation and bubbling
                    return false;
                });
                
            };
            base.init();
        };
        
        $.organicTabs.defaultOptions = {
            "speed": 300
        };
        
        $.fn.organicTabs = function(options) {
            return this.each(function() {
                (new $.organicTabs(this, options));
            });
        };
        
    })(jQuery);

      $(function() {

            $("#example-one").organicTabs();
            
            $("#example-two").organicTabs({
                "speed": 200
            });

        });


    And it is done , if you want to use in a HTML page when you add the css use :

    Code:
    <style>for CSS here</style>
    <script>The javascript</script>



    Last edited by Zain on Thu Jul 25, 2013 5:29 am; edited 1 time in total

    Derri

    Posts : 2
    Points : 1470
    Thanks : 0
    User

    looks good

    I take it this is only for PunBB?

    Sasori

    Posts : 311
    Points : 1719
    Thanks : 5
    Administrator

    No , just a simple example , you can use anywhere , you can make templates , or anything , don't contain the statistics.

    SLGray

    Posts : 11
    Points : 1460
    Thanks : 0
    User

    Thanks for posting this.

    Zyon

    Posts : 272
    Points : 1688
    Thanks : 2
    manager

    Yes, thanks

    Wanse

    Posts : 24
    Points : 1475
    Thanks : 0
    User

    Nice.

    warmine

    Posts : 6
    Points : 1462
    Thanks : 0
    User

    Nice thing.



    Last edited by warmine on Tue Oct 22, 2013 12:10 am; edited 1 time in total

    Lovely King

    Posts : 100
    Points : 1485
    Thanks : 0
    User

    It didn't work with me my version phpbb3

    Sasori

    Posts : 311
    Points : 1719
    Thanks : 5
    Administrator

    Yeah , it avaiable for phpBB2 and punBB if you want to do statistics ;)

    Sponsored content

    View previous topic View next topic Back to top  Message [Page 1 of 1]

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