Deco theme breaks my tabview controller which was created using YUI
raviepic3 - October 12, 2009 - 10:07
| Project: | Deco |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
Description
I am using a tabview controller to display my contents in tabbed format to the user when he visits a page, but unfortunately its not producing expected output because of some CSS conflicts i believe.
Have attached images to depict the exact happening. One image which shows the normal behavior of my tabview controller, whereas deco breaking the display.
FYI : the functionality part works fine.
Steps to reproduce :
1. Create a page with some title and menu string
2. And paste the below code in the content area
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/history/history-min.js"></script>
</head>
<body class="yui-skin-sam">
<style>
#yui-history-iframe {
position:absolute;
top:0; left:0;
width:1px; height:1px; /* avoid scrollbars */
visibility:hidden;
}
#demo { margin-bottom:1em; }
</style>
<iframe id="yui-history-iframe" src="assets/blank.html"></iframe>
<input id="yui-history-field" type="hidden">
<div id="demo" class="yui-navset yui-navset-top">
<ul class="yui-nav">
<li><a href="#tab1"> <em>Tab One Label</em></a></li>
<li title="active" class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
<li title="" class=""><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>True online double conversion UPS <br />Galvanized isolation <br />Capacity 1 kVA — 160 kVA</p></div>
<div id="tab2"><p>1 kVA — 36 V
2 kVA — 96 V
3 kVA — 96 V
10 kVA / 20 kVA — 240 V
</p></div>
<div id="tab3"><p>1 KVA to 1000 KVA. </p></div>
</div>
</div>
<script>
(function () {
// The initially selected tab will be chosen in the following order:
//
// URL fragment identifier (it will be there if the user previously
// bookmarked the application in a specific state)
//
// or
//
// "tab0" (default)
var bookmarkedTabViewState = YAHOO.util.History.getBookmarkedState("tabview");
var initialTabViewState = bookmarkedTabViewState || "tab0";
var tabView;
// Register our TabView module. Module registration MUST
// take place before calling YAHOO.util.History.initialize.
YAHOO.util.History.register("tabview", initialTabViewState, function (state) {
// This is called after calling YAHOO.util.History.navigate, or after the user
// has trigerred the back/forward button. We cannot discrminate between
// these two situations.
// "state" can be "tab0", "tab1" or "tab2".
// Select the right tab:
tabView.set("activeIndex", state.substr(3));
});
function handleTabViewActiveTabChange (e) {
var newState, currentState;
newState = "tab" + this.getTabIndex(e.newValue);
try {
currentState = YAHOO.util.History.getCurrentState("tabview");
// The following test is crucial. Otherwise, we end up circling forever.
// Indeed, YAHOO.util.History.navigate will call the module onStateChange
// callback, which will call tabView.set, which will call this handler
// and it keeps going from here...
if (newState != currentState) {
YAHOO.util.History.navigate("tabview", newState);
}
} catch (e) {
tabView.set("activeIndex", newState.substr(3));
}
}
function initTabView () {
// Instantiate the TabView control...
tabView = new YAHOO.widget.TabView("demo");
tabView.addListener("activeTabChange", handleTabViewActiveTabChange);
}
// Use the Browser History Manager onReady method to instantiate the TabView widget.
YAHOO.util.History.onReady(function () {
var currentState;
initTabView();
// This is the tricky part... The onLoad event is fired when the user
// comes back to the page using the back button. In this case, the
// actual tab that needs to be selected corresponds to the last tab
// selected before leaving the page, and not the initially selected tab.
// This can be retrieved using getCurrentState:
currentState = YAHOO.util.History.getCurrentState("tabview");
tabView.set("activeIndex", currentState.substr(3));
});
// Initialize the browser history management library.
try {
YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
} catch (e) {
// The only exception that gets thrown here is when the browser is
// not supported (Opera, or not A-grade) Degrade gracefully.
initTabView();
}
})();
</script>| Attachment | Size |
|---|---|
| Other_theme_working.png | 11.34 KB |
| deco_tab_error.png | 14.43 KB |
#1
Moving to the Deco theme issue queue.