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.

Tab widget

View previous topic View next topic Go down

Tab widget

Post by Gricko on November 30th 2010, 11:58 am

Is there a way to create a tabed widget ?,where i can put text.Something similar like "Pick your theme" widget on this forum but just with text not themes Mr. Green

Gricko
New Member

Posts : 7
Reputation : 0
Language : Serbian

Back to top Go down

Re: Tab widget

Post by Guest on November 30th 2010, 12:19 pm

ACP - Modules - Portal & Widgets - Portal management - Structure - Create a widget (:

Guest
Guest


Back to top Go down

Re: Tab widget

Post by Gricko on November 30th 2010, 12:44 pm

@Gangstar15 wrote:ACP - Modules - Portal & Widgets - Portal management - Structure - Create a widget (:
Ah you didn't understand me Smile,maybe i didn't explain it very well .
I know how to create a widget .but i need a code for widget to make it tabed
Something like this for example




Nothing fancy,just that i can switch text msgs through the widget Smile
Can it be done? Rolling Eyes

Gricko
New Member

Posts : 7
Reputation : 0
Language : Serbian

Back to top Go down

Re: Tab widget

Post by Guest on November 30th 2010, 1:20 pm

Try this in your widget (:
Code:

<link rel="stylesheet" href="http://world-dezign.webs.com/style1.css" type="text/css" media="screen" />
<script src="http://world-dezign.webs.com/jquery-1.2.3.min.js"></script>
    <script>
   
     // When the document loads do everything inside here ...
     $(document).ready(function(){
      
      // When a link is clicked
      $("a.tab").click(function () {
         
         
         // switch all tabs off
         $(".active").removeClass("active");
         
         // switch this tab on
         $(this).addClass("active");
         
         // slide all content up
         $(".content").slideUp();
         
         // slide this content up
         var content_show = $(this).attr("title");
         $("#"+content_show).slideDown();
       
      });
   
     });
  </script>
</head>
 
<body>
<div id="tabbed_box_1" class="tabbed_box">

    <div class="tabbed_area">
   
       
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">TAB 1</a></li>
            <li><a href="#" title="content_2" class="tab">TAB 2</a></li>
            <li><a href="#" title="content_3" class="tab">TAB 3</a></li>
        </ul>
       
        <div id="content_1" class="content">
           <ul>
               <li>TEXT TEXT 1</li>
         </ul>
        </div>
        <div id="content_2" class="content">
           <ul>
               <li>TEXT TEXT 2</li>
         </ul>
        </div>
        <div id="content_3" class="content">
           <ul>
               <li>TEXT TEXT 3</li>

         </ul>
        </div>
   
    </div>
 
</div>

Guest
Guest


Back to top Go down

Re: Tab widget

Post by Gricko on November 30th 2010, 2:17 pm

@Gangstar15 wrote:Try this in your widget (:
Code:

<link rel="stylesheet" href="http://world-dezign.webs.com/style1.css" type="text/css" media="screen" />
<script src="http://world-dezign.webs.com/jquery-1.2.3.min.js"></script>
    <script>
   
     // When the document loads do everything inside here ...
     $(document).ready(function(){
      
      // When a link is clicked
      $("a.tab").click(function () {
         
         
         // switch all tabs off
         $(".active").removeClass("active");
         
         // switch this tab on
         $(this).addClass("active");
         
         // slide all content up
         $(".content").slideUp();
         
         // slide this content up
         var content_show = $(this).attr("title");
         $("#"+content_show).slideDown();
       
      });
   
     });
  </script>
</head>
 
<body>
<div id="tabbed_box_1" class="tabbed_box">

    <div class="tabbed_area">
   
       
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">TAB 1</a></li>
            <li><a href="#" title="content_2" class="tab">TAB 2</a></li>
            <li><a href="#" title="content_3" class="tab">TAB 3</a></li>
        </ul>
       
        <div id="content_1" class="content">
           <ul>
               <li>TEXT TEXT 1</li>
         </ul>
        </div>
        <div id="content_2" class="content">
           <ul>
               <li>TEXT TEXT 2</li>
         </ul>
        </div>
        <div id="content_3" class="content">
           <ul>
               <li>TEXT TEXT 3</li>

         </ul>
        </div>
   
    </div>
 
</div>
Well you helped me,thats for sure ,but i cant switch the tabs .When i click on tab 2 it return me on top of homepage(portal) :/ .Why ?


Gricko
New Member

Posts : 7
Reputation : 0
Language : Serbian

Back to top Go down

Re: Tab widget

Post by Guest on November 30th 2010, 2:34 pm

Sorry, there was something missing (:
Try this:
Code:
<link rel="stylesheet" href="http://world-dezign.webs.com/style1.css" type="text/css" media="screen" />
 <script type="text/javascript" src="http://world-dezign.webs.com/jquery-1.2.3.min.js"></script>
    <script>
   
     $(document).ready(function(){
      
      $("a.tab").click(function () {
         
      
         $(".active").removeClass("active");
         

         $(this).addClass("active");
         
         $(".content").slideUp();
         
         var content_show = $(this).attr("title");
         $("#"+content_show).slideDown();
       
      });
   
     });
  </script>

<div id="tabbed_box_1" class="tabbed_box">

    <div class="tabbed_area">
   
       
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">TAB 1</a></li>
            <li><a href="#" title="content_2" class="tab">TAB 2</a></li>
            <li><a href="#" title="content_3" class="tab">TAB 3</a></li>
        </ul>
       
        <div id="content_1" class="content">
           <ul>
               <li>TEXT TEXT 1</li>
         </ul>
        </div>
        <div id="content_2" class="content">
           <ul>
               <li>TEXT TEXT 2</li>
         </ul>
        </div>
        <div id="content_3" class="content">
           <ul>
               <li>TEXT TEXT 3</li>

         </ul>
        </div>
   
    </div>
 
</div>

Guest
Guest


Back to top Go down

Re: Tab widget

Post by Gricko on November 30th 2010, 2:48 pm

Nothing Sad not working
its the same code just with out comments :/
Maybe wrong c/p?

Gricko
New Member

Posts : 7
Reputation : 0
Language : Serbian

Back to top Go down

Re: Tab widget

Post by Guest on November 30th 2010, 2:53 pm

http://world-dezign.forumotion.com/Tabs-h38.htm

Maybe it doesn't work when you put in the widget :/

Guest
Guest


Back to top Go down

Re: Tab widget

Post by Gricko on November 30th 2010, 3:09 pm

Its working only on clear html page :/
But why not in a widget ?? ...

Anyway ,thx for help Gangstar Smile


Any one else knows how to fix this ,new idea maybe ?

Gricko
New Member

Posts : 7
Reputation : 0
Language : Serbian

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