The forum of the forums
Welcome on the Forumotion Support Forum.

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're not yet....



Create a free forum like this one.

Tables on Headers

View previous topic View next topic Go down

In Progress Tables on Headers

Post by Glazella on April 1st 2012, 4:18 pm

Hello, I would just like to know if there's a code to do this:



The black one there is a semi-transparent table where announcements can be placed. And when you click from one category to another (example: From News to Mini Updates) the content (which are links to topics) will also change.

Thanks~ ^^

Glazella
Forumotion Member

Posts: 68
Age: 21
Points: 49
Join date: 2011-12-12

http://jiyeonworldwide.com

Back to top Go down

In Progress Re: Tables on Headers

Post by Sir Chivas™ on April 1st 2012, 4:21 pm

Underneath the banner? & you want to insert a trans. Box?

----------------------------


Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



"Never, never, never give up."


Sir Chivas™
Support Moderator
Support Moderator

Male
Posts: 6608
Language: English, Spanish, and French
Location: || CSS || HTML || Graphics Designs || Support ||
Points: 6244
Join date: 2011-08-04

Back to top Go down

In Progress Re: Tables on Headers

Post by Glazella on April 2nd 2012, 5:14 am

No, not underneath. Over the banner Smile The transparent box will be placed over the banner Smile

Glazella
Forumotion Member

Posts: 68
Age: 21
Points: 49
Join date: 2011-12-12

http://jiyeonworldwide.com

Back to top Go down

In Progress Re: Tables on Headers

Post by kirk on April 4th 2012, 5:06 am

what something like this,
then you will just have to add links to the text.

Code:
<table
style="margin-left: auto; margin-right: auto; text-align: left; width: 323px; height: 120px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><a href="YOUR LINK HERE" class="postlink">News</a><br>
</td>
<td style="vertical-align: top; text-align: center;"><a href="YOUR LINK HERE" class="postlink">Mini</a><br>
</td>
<td style="vertical-align: top; text-align: center;"><a href="YOUR LINK HERE" class="postlink">Trans</a><br>
</td>
<td style="vertical-align: top; text-align: center;"><a href="YOUR LINK HERE" class="postlink">Announce</a><br>
</td>
<td style="vertical-align: top; text-align: center;"><a href="YOUR LINK HERE" class="postlink">Updates</a>br>
</td>
</tr>
</tbody>
</table>

Or this way if you want the spacing between the text better?

Code:
<table
style="margin-left: auto; margin-right: auto; text-align: left; width: 278px; height: 110px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"><a
href="NEWS LINK HERE" class="postlink">News</a><a
href="MINI LINK HERE" class="postlink"> Mini</a><a
href="TRANS LINK HERE" class="postlink"> Trans </a><a
href="ANNOUNCE LINK HERE" class="postlink">  Announce</a><a
href="UPDATES LINK HERE" class="postlink"> Updates</a> <br>
</td>
</tr>
</tbody>
</table>

please explain how you want the linking to work, and where it is going to go.
because i dont know anyway of making it go directly to something that is the latest post automatically.

like you can add the links to the given forums section page, then see the latest topics that are on the page, But for it to automatically redirect to any given latest post that is posted..Well thats a whole new ball game... lol so please do explain how you want the linking to work and we will take it from there.

But as far as the tables thats easy Smile

kirk
Forumotion Member

Male
Posts: 11037
Language: English,Vulcan,Klingon, Romulan,& Gorn
Points: 36555
Join date: 2008-09-17

Back to top Go down

In Progress Re: Tables on Headers

Post by Glazella on April 5th 2012, 6:20 am

Hi Kirk ^^

I want it to be something like, if you click the main link (NEWS, MINI, ETC.) it will shift to it contents but there's only 1 table containing them all, only the contents per main links are changing. And these links are the latest news, announcements, etc.

Check this forum: http://www.tiaradiadem.com/forums/ They have the table on right which contains their latest announcements. And when you click from main link to another, it will not change tables only contents Smile

And that table is placed on the banner ^^

Glazella
Forumotion Member

Posts: 68
Age: 21
Points: 49
Join date: 2011-12-12

http://jiyeonworldwide.com

Back to top Go down

In Progress Re: Tables on Headers

Post by Glazella on April 11th 2012, 11:36 am

bump

Glazella
Forumotion Member

Posts: 68
Age: 21
Points: 49
Join date: 2011-12-12

http://jiyeonworldwide.com

Back to top Go down

In Progress Re: Tables on Headers

Post by kirk on April 11th 2012, 6:13 pm

yeah i am not sure what they are using to do it. I guess it's some jquery they are using. If we knew the proper name of what it would be called you can probably google it to find the right coding, But i am not sure what it would be called either Sad

kirk
Forumotion Member

Male
Posts: 11037
Language: English,Vulcan,Klingon, Romulan,& Gorn
Points: 36555
Join date: 2008-09-17

Back to top Go down

In Progress Re: Tables on Headers

Post by Glazella on April 12th 2012, 6:39 am

Kirk,

I kinda inspected the elements. I think it's java stuff. But it went like this:

Code:
<div id="rss-header" class="clearfix">
<div id="rss">
<ul class ="tabs clearfix">
<li>
<a href="javascript:" rel="tab-1" class="carousel-jumper:>News</a>
</li>
</ul>
<div id="rss-wrapper">
<div id="rss-content">
<div id="tab-1" class="slide"
<ul id="rss-news" class="hfeed">
<li class="hentry">
<a href="">NEWS HERE</a>
</li>
</ul>
</div>
</div>
</div>
</div>

Still I can't figure out how is that called :/

Glazella
Forumotion Member

Posts: 68
Age: 21
Points: 49
Join date: 2011-12-12

http://jiyeonworldwide.com

Back to top Go down

In Progress Re: Tables on Headers

Post by Nera. on April 12th 2012, 9:13 am

This should be what you need http://yensdesign.com/2008/12/create-a-smooth-tabbed-menu-in-jquery/

Nera.
Forumotion Member

Female
Posts: 7077
Age: 30
Language: English
Location: -
Points: 10087
Join date: 2010-09-01

http://webartzforum.com

Back to top Go down

In Progress Re: Tables on Headers

Post by Glazella on April 13th 2012, 9:26 am

Yo guys ^^ I did the codes~

For HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>yensdesign.com - Create a smooth tabbed menu with jQuery</title>
   <link rel="stylesheet" href="css/general.css" type="text/css" media="screen" />
   <!--[if IE 6]>
      <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen," />
   <![endif]>
</head>
<body>
   <div id="container">
      <ul class="menu">
                        <li id="announcements">Announcements</li>
         <li id="news" class="active">Headlines</li>
         <li id="photos">Photos</li>
                        <li id="videos">Videos</li>
                        <li id="trans">Translations</li>
      </ul>
      <span class="clear"></span>
      <div class="content announcements">
         <h1>Announcements</h1>
         <ul>
            <li><url="">1</url></li>
            <li><url="">2</url></li>
            <li><url="">3</url></li>
            <li><url="">4</url></li>
         <ul>
      </div>
      <div class="content news">
         <h1>Headlines</h1>
         <ul>
            <li><url="">1</url></li>
            <li><url="">2</url></li>
            <li><url="">3</url></li>
            <li><url="">4</url></li>
            <li><url="">5</url></li>
            <li><url="">6</url></li>
         <ul>
      </div>
      <div class="content photos">
         <h1>Photos</h1>
         <ul>
            <li><url="">1</url></li>
            <li><url="">1</url></li>
            <li><url="">1</url></li>
            <li><url="">1</url></li>
         <ul>
      </div>
                        <div class="content videos">
         <h1>Videos</h1>
         <ul>
            <li><url="">1</url></li>
            <li><url="">1</url></li>
            <li><url="">1</url></li>
            <li><url="">1</url></li>
         <ul>
      </div>
                        <div class="content translations">
         <h1>Trannslations</h1>
         <ul>
            <li><url="">1</url></li>
            <li><url="">1</url></li>
            <li><url="">1</url></li>
            <li><url="">1</url></li>
         <ul>
      </div>
   </div>
   <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
   <script type="text/javascript" src="tabs.js"></script>
</body>
</html>

For CSS
Code:
@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body{
   background: transparent;
   line-height:14px;
   font-size: 12px;
   font-family: Century Gothic;
   margin:0pt;
   cursor:default;
   overflow: hidden;
}
html,body{
   height:100%;
   text-align: center;
}
.clear{
   clear: both;
   height: 0;
   visibility: hidden;
   display: block;
}
a{
   text-decoration: none;
}
/******* GENERAL RESET *******/
/******* LOGO *******/
#logo{
   margin-top: 1em;
   display: block;
}
/******* /LOGO  *******/
/******* MENU *******/
#container{
   margin: 7em auto;
   width: 400px;
}
#container ul{
   list-style: none;
   list-style-position: outside;
}
#container ul.menu li{
   float: left;
   margin-right: 5px;
   margin-bottom: -1px;
}
#container ul.menu li{
   font-weight: 700;
   display: block;
   padding: 5px 10px 5px 10px;
   background: #efefef;
   margin-bottom: -1px;
   border: 1px solid #d0ccc9;
   border-width: 1px 1px 1px 1px;
   position: relative;
   color: #898989;
   cursor: pointer;
}
#container ul.menu li.active{
   background: #fff;
   top: 1px;
   border-bottom: 0;
   color: #5f95ef;
}
/******* /MENU *******/
/******* CONTENT *******/
.content{
   margin: 0pt auto;
   background: transparent;
   background: transparent
   border: 1px solid #d0ccc9;
   text-align: left;
   padding: 10px;
   padding-bottom: 20px;
   font-size: 11px;
}
.content h1{
   line-height: 1em;
   vertical-align: middle;
   height: 48px;
   padding: 10px 10px 10px 52px;
   font-size: 32px;
}
/******* /CONTENT *******/
/******* ANNOUNCEMENTS *******/
.content.announcements h1{
   background: transparent url(images/news.jpg) no-repeat scroll left top;
}
.content.news{
   display: block;
}
/******* /ANNOUNCEMENTS*******/
/******* NEWS *******/
.content.news h1{
   background: transparent url(images/news.jpg) no-repeat scroll left top;
}
.content.news{
   display: block;
}
/******* /NEWS *******/
/******* PHOTOS *******/
.content.photos h1{
   background: transparent url(images/tuts.jpg) no-repeat scroll left top;
}
.content.tutorials{
   display: none;
}
/******* /PHOTOS *******/
/******* VIDEOS *******/
.content.videos h1{
   background: transparent url(images/links.jpg) no-repeat scroll left top;
}
.content.links{
   display: none;
}
.content.links a{
   color: #5f95ef;
}
/******* /VIDEOS *******/
/******* TRANSLATIONS *******/
.content.translations h1{
   background: transparent url(images/links.jpg) no-repeat scroll left top;
}
.content.links{
   display: none;
}
.content.links a{
   color: #5f95ef;
}
/******* /TRANSLATIONS *******/

For JQuery (is this java too? :/ )
Code:
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle &amp;amp;amp; Ivan Guardado Castro
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/

$(document).ready(function(){
   $(".menu > li").click(function(e){
      switch(e.target.id){
         case "announcements":
            //change status &amp;amp;amp; style menu
            $("#announcements").addClass("active");
            $("#news").removeClass("active");
            $("#photos").removeClass("active");
                                $("#videos").removeClass("active");
                                $("#translations").removeClass("active");
            //display selected division, hide others
            $("div.announcements").fadeIn();
            $("div.news").css("display", "none");
            $("div.photos").css("display", "none");
                                $("div.videos").css("display", "none");
            $("div.translations").css("display", "none");
         break;
                        case "news":
            //change status &amp;amp;amp; style menu
            $("#announcements").removeClass("active");
                                $("#news").addClass("active");
            $("#photos").removeClass("active");
            $("#videos").removeClass("active");
                                $("#translations").removeClass("active");
            //display selected division, hide others
                                $("div.announcements").css("display", "none");
            $("div.news").fadeIn();
            $("div.photos").css("display", "none");
            $("div.videos").css("display", "none");
                                $("div.translations").css("display", "none");
         break;
         case "photos":
                                //change status &amp;amp;amp; style menu
            $("#announcements").removeClass("active");
                                $("#news").removeClass("active");
            $("#photos").addClass("active");
            $("#videos").removeClass("active");
                                $("#translations").removeClass("active");
            //display selected division, hide others
                                $("div.announcements").css("display", "none");
            $("div.news").css("display", "none");
            $("div.photos").fadeIn();
            $("div.videos").css("display", "none");
                                $("div.translations").css("display", "none");
         break;
         case "videos":
            //change status &amp;amp;amp; style menu
            $("#announcements").removeClass("active");
                                $("#news").removeClass("active");
            $("#photos").removeClass("active");
            $("#videos").addClass("active");
                                $("#translations").removeClass("active");
            //display selected division, hide others
                                $("div.announcements").css("display", "none");
            $("div.news").css("display", "none");
            $("div.photos").css("display", "none");
            $("div.videos").fadeIn();
                                $("div.translations").css("display", "none");
         break;
                        case "translations":
            //change status &amp;amp;amp; style menu
            $("#announcements").removeClass("active");
                                $("#news").removeClass("active");
            $("#photos").removeClass("active");
            $("#videos").removeClass("active");
                                $("#translations").addClass("active");
            //display selected division, hide others
                                $("div.announcements").css("display", "none");
            $("div.news").css("display", "none");
            $("div.photos").css("display", "none");
            $("div.videos").css("display", "none");
                                $("div.translations").fadeIn();
         break;
      }
      //alert(e.target.id);
      return false;
   });
});

But still. How will I place this on my header?

Glazella
Forumotion Member

Posts: 68
Age: 21
Points: 49
Join date: 2011-12-12

http://jiyeonworldwide.com

Back to top Go down

In Progress Re: Tables on Headers

Post by Nera. on April 13th 2012, 9:27 am

Do you have template access? What is your forum version?

Nera.
Forumotion Member

Female
Posts: 7077
Age: 30
Language: English
Location: -
Points: 10087
Join date: 2010-09-01

http://webartzforum.com

Back to top Go down

In Progress Re: Tables on Headers

Post by Glazella on April 13th 2012, 10:19 am

My forum version is Invision.
Link: http://jiyeonworldwide.com

The version of the forum I posted is also an invision Smile

Glazella
Forumotion Member

Posts: 68
Age: 21
Points: 49
Join date: 2011-12-12

http://jiyeonworldwide.com

Back to top Go down

In Progress Re: Tables on Headers

Post by Nera. on April 13th 2012, 12:42 pm

The forum you showed is not a Forumotion forum so that's different. Never mind. You'll need to know a bit how to customise it.

Step 1:
AP > Modules > JS managment > Mark all pages

Code:
// SpryTabbedPanels.js - version 0.6 - Spry Pre-Release 1.6.1
//
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//  * Redistributions of source code must retain the above copyright notice,
//    this list of conditions and the following disclaimer.
//  * Redistributions in binary form must reproduce the above copyright notice,
//    this list of conditions and the following disclaimer in the documentation
//    and/or other materials provided with the distribution.
//  * Neither the name of Adobe Systems Incorporated nor the names of its
//    contributors may be used to endorse or promote products derived from this
//    software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.TabbedPanels = function(element, opts)
{
        this.element = this.getElement(element);
        this.defaultTab = 0; // Show the first panel by default.
        this.tabSelectedClass = "TabbedPanelsTabSelected";
        this.tabHoverClass = "TabbedPanelsTabHover";
        this.tabFocusedClass = "TabbedPanelsTabFocused";
        this.panelVisibleClass = "TabbedPanelsContentVisible";
        this.focusElement = null;
        this.hasFocus = false;
        this.currentTabIndex = 0;
        this.enableKeyboardNavigation = true;
        this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
        this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;

        Spry.Widget.TabbedPanels.setOptions(this, opts);

        // If the defaultTab is expressed as a number/index, convert
        // it to an element.

        if (typeof (this.defaultTab) == "number")
        {
                if (this.defaultTab < 0)
                        this.defaultTab = 0;
                else
                {
                        var count = this.getTabbedPanelCount();
                        if (this.defaultTab >= count)
                                this.defaultTab = (count > 1) ? (count - 1) : 0;
                }

                this.defaultTab = this.getTabs()[this.defaultTab];
        }

        // The defaultTab property is supposed to be the tab element for the tab content
        // to show by default. The caller is allowed to pass in the element itself or the
        // element's id, so we need to convert the current value to an element if necessary.

        if (this.defaultTab)
                this.defaultTab = this.getElement(this.defaultTab);

        this.attachBehaviors();
};

Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
{
        if (ele && typeof ele == "string")
                return document.getElementById(ele);
        return ele;
};

Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
{
        var children = [];
        var child = element.firstChild;
        while (child)
        {
                if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
                        children.push(child);
                child = child.nextSibling;
        }
        return children;
};

Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
{
        if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
                return;
        ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
{
        if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
                return;
        ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
        if (!optionsObj)
                return;
        for (var optionName in optionsObj)
        {
                if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
                        continue;
                obj[optionName] = optionsObj[optionName];
        }
};

Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
{
        if (this.element)
        {
                var children = this.getElementChildren(this.element);
                if (children.length)
                        return children[0];
        }
        return null;
};

Spry.Widget.TabbedPanels.prototype.getTabs = function()
{
        var tabs = [];
        var tg = this.getTabGroup();
        if (tg)
                tabs = this.getElementChildren(tg);
        return tabs;
};

Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
{
        if (this.element)
        {
                var children = this.getElementChildren(this.element);
                if (children.length > 1)
                        return children[1];
        }
        return null;
};

Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
{
        var panels = [];
        var pg = this.getContentPanelGroup();
        if (pg)
                panels = this.getElementChildren(pg);
        return panels;
};

Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
{
        ele = this.getElement(ele);
        if (ele && arr && arr.length)
        {
                for (var i = 0; i < arr.length; i++)
                {
                        if (ele == arr[i])
                                return i;
                }
        }
        return -1;
};

Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
{
        var i = this.getIndex(ele, this.getTabs());
        if (i < 0)
                i = this.getIndex(ele, this.getContentPanels());
        return i;
};

Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
{
        return this.currentTabIndex;
};

Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
{
        return Math.min(this.getTabs().length, this.getContentPanels().length);
};

Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
{
        try
        {
                if (element.addEventListener)
                        element.addEventListener(eventType, handler, capture);
                else if (element.attachEvent)
                        element.attachEvent("on" + eventType, handler);
        }
        catch (e) {}
};

Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
{
        if (e.preventDefault) e.preventDefault();
        else e.returnValue = false;
        if (e.stopPropagation) e.stopPropagation();
        else e.cancelBubble = true;

        return false;
};

Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
        this.showPanel(tab);
        return this.cancelEvent(e);
};

Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
{
        this.addClassName(tab, this.tabHoverClass);
        return false;
};

Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
{
        this.removeClassName(tab, this.tabHoverClass);
        return false;
};

Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
{
        this.hasFocus = true;
        this.addClassName(tab, this.tabFocusedClass);
        return false;
};

Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
{
        this.hasFocus = false;
        this.removeClassName(tab, this.tabFocusedClass);
        return false;
};

Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;



Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
{
        var key = e.keyCode;
        if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
                return true;

        var tabs = this.getTabs();
        for (var i =0; i < tabs.length; i++)
                if (tabs[i] == tab)
                {
                        var el = false;
                        if (key == this.previousPanelKeyCode && i > 0)
                                el = tabs[i-1];
                        else if (key == this.nextPanelKeyCode && i < tabs.length-1)
                                el = tabs[i+1];

                        if (el)
                        {
                                this.showPanel(el);
                                el.focus();
                                break;
                        }
                }

        return this.cancelEvent(e);
};

Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
{
        var stopTraversal = false;
        if (root)
        {
                stopTraversal = func(root);
                if (root.hasChildNodes())
                {
                        var child = root.firstChild;
                        while (!stopTraversal && child)
                        {
                                stopTraversal = this.preorderTraversal(child, func);
                                try { child = child.nextSibling; } catch (e) { child = null; }
                        }
                }
        }
        return stopTraversal;
};

Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
{
        var self = this;
        Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
        Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
        Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);

        if (this.enableKeyboardNavigation)
        {
                // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
                // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
                // by default.

                // Find the first element within the tab container that has a tabindex or the first
                // anchor tag.
               
                var tabIndexEle = null;
                var tabAnchorEle = null;

                this.preorderTraversal(tab, function(node) {
                        if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
                        {
                                var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
                                if (tabIndexAttr)
                                {
                                        tabIndexEle = node;
                                        return true;
                                }
                                if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
                                        tabAnchorEle = node;
                        }
                        return false;
                });

                if (tabIndexEle)
                        this.focusElement = tabIndexEle;
                else if (tabAnchorEle)
                        this.focusElement = tabAnchorEle;

                if (this.focusElement)
                {
                        Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
                        Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
                        Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
                }
        }
};

Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
{
        var tpIndex = -1;
       
        if (typeof elementOrIndex == "number")
                tpIndex = elementOrIndex;
        else // Must be the element for the tab or content panel.
                tpIndex = this.getTabIndex(elementOrIndex);
       
        if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
                return;

        var tabs = this.getTabs();
        var panels = this.getContentPanels();

        var numTabbedPanels = Math.max(tabs.length, panels.length);

        for (var i = 0; i < numTabbedPanels; i++)
        {
                if (i != tpIndex)
                {
                        if (tabs[i])
                                this.removeClassName(tabs[i], this.tabSelectedClass);
                        if (panels[i])
                        {
                                this.removeClassName(panels[i], this.panelVisibleClass);
                                panels[i].style.display = "none";
                        }
                }
        }

        this.addClassName(tabs[tpIndex], this.tabSelectedClass);
        this.addClassName(panels[tpIndex], this.panelVisibleClass);
        panels[tpIndex].style.display = "block";

        this.currentTabIndex = tpIndex;
};

Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
{
        var tabs = this.getTabs();
        var panels = this.getContentPanels();
        var panelCount = this.getTabbedPanelCount();

        for (var i = 0; i < panelCount; i++)
                this.addPanelEventListeners(tabs[i], panels[i]);

        this.showPanel(this.defaultTab);
};

Step 2:
AP > Modules >> JS managment > Mark all pages

Code:
$(document).ready(function() {
$('#logo').after('<div class="TabbedPanels" id="TabbedPanels1"><ul class="TabbedPanelsTabGroup"><li class="TabbedPanelsTab">Tab 1</li><li class="TabbedPanelsTab">Tab 2</li><li class="TabbedPanelsTab">Tab 3</li><li class="TabbedPanelsTab">Tab 4</li></ul><div class="TabbedPanelsContentGroup"><div class="TabbedPanelsContent">Tab 1 Content</div><div class="TabbedPanelsContent">Tab 2 Content</div><div class="TabbedPanelsContent">Tab 3 Content</div><div class="TabbedPanelsContent">Tab 4 Content</div></div></div>');
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
});

Step 3:
AP > Display > Colors > CSS

Code:
/* Horizontal Tabbed Panels */
.TabbedPanels {
    clear: both;
    margin: 0 auto !important;
    padding: 0;
    width: 229px;
}
.TabbedPanelsTabGroup {
   margin: 0px;
   padding: 0px;
}
.TabbedPanelsTab {
   position: relative;
   top: 1px;
   float: left;
   padding: 4px 10px;
   margin: 0px 1px 0px 0px;
   font: bold 0.7em sans-serif;
   background-color: #DDD;
   list-style: none;
   border-left: solid 1px #CCC;
   border-bottom: solid 1px #999;
   border-top: solid 1px #999;
   border-right: solid 1px #999;
   -moz-user-select: none;
   -khtml-user-select: none;
   cursor: pointer;
        background: none repeat scroll 0 0 transparent;
}
.TabbedPanelsTabHover {
   background-color: #CCC;
}
.TabbedPanelsTabSelected {
   background-color: black;
   border-bottom: 1px solid #EEE;
}
.TabbedPanelsTab a {
   color: black;
   text-decoration: none;
}
.TabbedPanelsContentGroup {
   clear: both;
   border-left: solid 1px #CCC;
   border-bottom: solid 1px #CCC;
   border-top: solid 1px #999;
   border-right: solid 1px #999;
   background-color: #EEE;
}
.TabbedPanelsContent {
    background: none repeat scroll 0 0 black;
    padding: 4px;
    width: 219px;
}
.TabbedPanelsContentVisible {
}

Example of it working on Invision:

http://someonelikeyou.forumcroatian.com/

Nera.
Forumotion Member

Female
Posts: 7077
Age: 30
Language: English
Location: -
Points: 10087
Join date: 2010-09-01

http://webartzforum.com

Back to top Go down

In Progress Re: Tables on Headers

Post by Glazella on April 13th 2012, 5:04 pm

Hi~ I already used the codes. It's working when I did the linking for the first tabs however the whole thing is not appearing anymore when I entered the links for the consecutive tabs. I used the same codes while I edited the 2nd jquery (the 2nd step). Is there something wrong with my codes? Check it here:

Code:
$(document).ready(function() {
$('#logo').after('<div class="TabbedPanels" id="TabbedPanels1"><ul class="TabbedPanelsTabGroup"><li class="TabbedPanelsTab">ANNOUNCEMENTS</li><li class="TabbedPanelsTab">NEWS</li><li class="TabbedPanelsTab">PHOTOS</li><li class="TabbedPanelsTab">VIDEOS</li><li class="TabbedPanelsTab">JWSUBS</li><li class="TabbedPanelsTab">TRANSLATIONS</li></ul><div class="TabbedPanelsContentGroup"><div class="TabbedPanelsContent">
<span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[HIRING] <a href="http://jiyeonworldwide.forumtl.com/t155-hiring-jiyeon-worldwide-staff#164"> Jiyeon Worldwide Staff</a></p>
<p style="text-align: left; ">[HIRING] <a href="http://jiyeonworldwide.forumtl.com/t454-hiring-jwsubs-staff#733"> JWSubs Staff</a></p>
<p style="text-align: left; ">[SUPPORT] <a href="http://www.jiyeonworldwide.com/t764-petition-verify-jiyeon-s-twitter-account#1774"> Verify @pjy1234 Account</a></p>
<p style="text-align: left; ">[DONATE] <a href="http://www.jiyeonworldwide.com/t204-forum-operation-and-donations"> Forum Operations </a></p></span></span></span></div><div class="TabbedPanelsContent">
<span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[04.10] <a href="http://www.jiyeonworldwide.com/t751-t-ara-jiyeon-s-bare-face-even-the-eyeliner-s-gone"> Jiyeon's Bare Face  - "Even Eyeliner's Gone" </a></p>
<p style="text-align: left; ">[04.09] <a href="http://www.jiyeonworldwide.com/t744-jiyeon-s-love-to-fans-a-beautiful-face-and-mind"> Jiyeon's Love To Fans - "Beautiful Face and Mind" </a></p>
<p style="text-align: left; ">[04.01] <a href="http://www.jiyeonworldwide.com/t697-t-ara-s-jiyeon-cute-expression-with-a-cape-strangely-sexy"> Jiyeon's Cute Expression With A Cape - "Strangely Sexy"</a>
<p style="text-align: left; ">[03.29] <a href="http://www.jiyeonworldwide.com/t677-jiyeon-s-selcas-getting-prettier-each-day">Jiyeon's Selcas Getting Prettier Each Day </a></p></p></span></span></span>
</div><div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t772-scan-jiyeon-for-sparkle-updated">Jiyeon For Sparkle </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t771-cytw-bae-yun-jeong-twitter-update-ft-jiyeon-at-milan">Bae Yun Jung Twitter Update ft. Jiyeon </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t768-fantaken-jiyeon-with-fans-at-milan">Jiyeon With Fans At Milan </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t770-official-ads-jiyeon-for-g-market">Jiyeon For G-Market </a></p></span></span></span>
<div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t733-bts-t-ara-for-wild-roses-endorsement"> T-ara Wild Roses CF</a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t699-mv-roly-poly-japanese-mv-jiyeon-s-version"> Roly Poly Japanese MV - Jiyeon's Version </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t694-ranks-haru-haru-ranks-31-on-billboard-korea"> Haru Haru Ranks 31 On Billboard Korea </a></p>
<p style="text-align: left; "><a href="http://www.jiyeonworldwide.com/t688-bts-jiyeon-tony-moly-cf-bts">Jiyeon Tony Moly CF </a></p></span></span></span></div><div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t758-drama-dream-high-2-episode-16eng-subbed"> Dream High 2 - Ep 16</a></p>
<p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t757-drama-dream-high-2-episode-15-eng-subbed"> Dream High 2 - Ep 15</a></p>
<p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t756-drama-dream-high-2-episode-14-eng-subbed"> Dream High 2 - Ep 14</a></p>
<p style="text-align: left; ">[DRAMA]<a href="http://www.jiyeonworldwide.com/t754-drama-dream-high-2-episode-13-eng-subbed"> Dream High 2 - Ep 13</a></p></span></span></span></div><div class="TabbedPanelsContent"><span style="font-size:11px;"><span style="font-family:tahoma,geneva,sans-serif;"><span style="letter-spacing:1mm"><p style="text-align: left; ">[2012.04.13]<a href="http://www.jiyeonworldwide.com/t773-trans-2012-04-13">Jiyeon Twitter Update </a></p>
<p style="text-align: left; ">[2012.04.12]<a href="http://www.jiyeonworldwide.com/t767-trans-2012-04-12">Jiyeon Twitter Update </a></p>
<p style="text-align: left; ">[2012.04.11]<a href="http://www.jiyeonworldwide.com/t760-trans-2012-04-11">Jiyeon Twitter Update </a></p>
<p style="text-align: left; ">[2012.04.09]<a href="http://www.jiyeonworldwide.com/t743-trans-2012-04-09">Jiyeon Twitter Update </a></p></span></span></span></div></div></div>');
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
});

So I can only manage to come up w/this:


If I add contents (links) to the other tabs, the whole thing disappears Sad

Glazella
Forumotion Member

Posts: 68
Age: 21
Points: 49
Join date: 2011-12-12

http://jiyeonworldwide.com

Back to top Go down

In Progress Re: Tables on Headers

Post by Glazella on April 16th 2012, 4:53 am

bump ^^

Glazella
Forumotion Member

Posts: 68
Age: 21
Points: 49
Join date: 2011-12-12

http://jiyeonworldwide.com

Back to top Go down

In Progress Re: Tables on Headers

Post by Glazella on April 23rd 2012, 12:25 pm

bum again :p

Glazella
Forumotion Member

Posts: 68
Age: 21
Points: 49
Join date: 2011-12-12

http://jiyeonworldwide.com

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

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