Tables on Headers
4 posters
Page 1 of 1
Tables on Headers
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~ ^^
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~ ^^
Re: Tables on Headers
Underneath the banner? & you want to insert a trans. Box?
Sir Chivas™- Helper
- Posts : 6965
Reputation : 457
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||
Re: Tables on Headers
No, not underneath. Over the banner The transparent box will be placed over the banner
Re: Tables on Headers
what something like this,
then you will just have to add links to the text.
Or this way if you want the spacing between the text better?
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
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
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Tables on Headers
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
And that table is placed on the banner ^^
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
And that table is placed on the banner ^^
Re: Tables on Headers
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
kirk- Forumaster
- Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn
Re: Tables on Headers
Kirk,
I kinda inspected the elements. I think it's java stuff. But it went like this:
Still I can't figure out how is that called
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
Re: Tables on Headers
This should be what you need http://yensdesign.com/2008/12/create-a-smooth-tabbed-menu-in-jquery/
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Tables on Headers
Yo guys ^^ I did the codes~
For HTML
For CSS
For JQuery (is this java too? )
But still. How will I place this on my header?
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; 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; 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; 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; 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; 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; 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?
Re: Tables on Headers
Do you have template access? What is your forum version?
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Tables on Headers
My forum version is Invision.
Link: http://jiyeonworldwide.com
The version of the forum I posted is also an invision
Link: http://jiyeonworldwide.com
The version of the forum I posted is also an invision
Re: Tables on Headers
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
Step 2:
AP > Modules >> JS managment > Mark all pages
Step 3:
AP > Display > Colors > CSS
Example of it working on Invision:
http://someonelikeyou.forumcroatian.com/
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.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: Tables on Headers
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:
So I can only manage to come up w/this:
If I add contents (links) to the other tabs, the whole thing disappears
- 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
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum