The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Code]Things related to Organic Tabs

View previous topic View next topic Go down

[Code]Things related to Organic Tabs

Post by cHaSwWind04 on July 23rd 2013, 1:02 am

Example:


What do you call to this one, where you click/hover a tab and the rest (excluding the tabs) changes?
I dunno what to explain.
And oh... can you help me what codes to be use?


Last edited by cHaSwWind04 on July 25th 2013, 3:18 pm; edited 1 time in total

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Re: [Code]Things related to Organic Tabs

Post by levy on July 23rd 2013, 1:07 am

Hello , where you saw that , and is a jQuery Razz
Post here the url of forum where you saw that.

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Re: [Code]Things related to Organic Tabs

Post by cHaSwWind04 on July 23rd 2013, 1:09 am

I just found it as an artwork... but I feel it is possible... I just don't know the name is...

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Re: [Code]Things related to Organic Tabs

Post by levy on July 23rd 2013, 1:19 am

The HTML :

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 after this , add that code :

Code:
<style>#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; }</style>

<script>
(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
        });

    });
</script>

Their name are "Organic Tabs" and I've done a simple example with them : http://fmsoftware.quickbb.com/t27-organic-tabs
Now , you need to make some styles edit and it is done.

levy
Hyperactive

Male Posts : 2566
Reputation : 344
Language : Romanian, English
Location : Romania | Feel free to tag me into your topic if you have a problem

http://help.forumotion.com/

Back to top Go down

Re: [Code]Things related to Organic Tabs

Post by SLGray on July 23rd 2013, 3:14 am

Please change the title of your topic, that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35667
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: [Code]Things related to Organic Tabs

Post by cHaSwWind04 on July 25th 2013, 3:12 pm

@SLGray... It's kinda hard calling something you don't know.

cHaSwWind04
Forumember

Male Posts : 192
Reputation : 1
Language : English
Location : In front of a monitor... Duh!

Back to top Go down

Re: [Code]Things related to Organic Tabs

Post by Ange Tuteur on July 25th 2013, 3:17 pm

@cHaSwWind04 wrote:@SLGray... It's kinda hard calling something you don't know.
candy_fear mentioned above what the type of code is called.

candy_fear wrote:Their name are "Organic Tabs" and I've done a simple example with them : http://fmsoftware.quickbb.com/t27-organic-tabs
Now , you need to make some styles edit and it is done.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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