Article Index - Insert a Tab

eGulp · **Posted:** Wed Mar 08, 2006 5:49 pm

Ok sunburst, be carefull :

1) If I add just

Code:

<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/templates/sunburst/js/tabpane.js"></script>
<link type="text/css" rel="StyleSheet" href="<?php echo $mosConfig_live_site; ?>/templates/sunburst/css/tab.webfx.css" />

into my head - index file tab run, but images are loaded seeming out and below (hide) the tab

Quote:

Have you tried using the tag and actual URL to the image instead of {mosimage} to load the image?

Yes, it's the same

2) if I also add (always in head - index file)

Code:

<style type="text/css">

.dynamic-tab-pane-control .tab-page {
   height:      500px;
   width:      558px;
   overflow:   auto;
}

.dynamic-tab-pane-control .tab-page .dynamic-tab-pane-control .tab-page {
   height:      100px;
}

form {
   margin:      0;
   padding:   0;
}

/* over ride styles from webfxlayout */

.dynamic-tab-pane-control.tab-pane {
   margin:   10px;
   width:   580px;
}

.dynamic-tab-pane-control h2 {
   text-align:   center;
   width:      auto;
}

.dynamic-tab-pane-control h2 a {
   display:   inline;
   width:      auto;
}

.dynamic-tab-pane-control a:hover {
   background: transparent;
}

.dynamic-tab-pane-control .tab-page h2 {
   text-align:   left;
}

</style>

images are showed. If I understood this code overwrite the CSS file I point, so something on CSS luna file isn't setted right ... I'm not able to understand so I attach here the CSS luna file:

Code:

.dynamic-tab-pane-control.tab-pane {
   position:   relative;
   width:      100%;      /* width needed weird IE bug */
   margin-right:   -2px;   /* to make room for the shadow */
}

.dynamic-tab-pane-control .tab-row .tab {

   width:            70px;
   height:            16px;
   background-image:   url( "tab.png" );
   
   position:      relative;
   top:         0;
   display:      inline;
   float:         left;
   overflow:      hidden;
   
   cursor:         Default;

   margin:         1px -1px 1px 2px;
   padding:      2px 0px 0px 0px;
   border:         0;

   z-index:      1;
   font:         11px Tahoma;
   white-space:   nowrap;
   text-align:      center;
}

.dynamic-tab-pane-control .tab-row .tab.selected {
   width:            74px !important;
   height:            18px !important;
   background-image:   url( "tab.active.png" ) !important;
   background-repaet:   no-repeat;

   border-bottom-width:   0;
   z-index:      3;
   padding:      2px 0 0px 0;
   margin:         1px -3px -3px 0px;
   top:         -2px;
   font:            11px Tahoma;
}

.dynamic-tab-pane-control .tab-row .tab a {
   font:            11px Tahoma;
   color:            Black;
   text-decoration:   none;
   cursor:            default;
}

.dynamic-tab-pane-control .tab-row .tab.hover {
   font:            11px Tahoma;
   width:            70px;
   height:            16px;
   background-image:   url( "tab.hover.png" );
   background-repaet:   no-repeat;
}


.dynamic-tab-pane-control .tab-page {
   clear:         both;
   border:         1px solid rgb( 145, 155, 156 );
   background:      rgb( 252, 252, 254 );
   z-index:      2;
   position:      relative;
   top:         -2px;

   font:            11px Tahoma;
   color:            Black;

   filter:         progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffcfcfe, EndColorStr=#fff4f3ee, GradientType=0)
               progid:DXImageTransform.Microsoft.Shadow(Color=#ff919899, Strength=2, Direction=135);
   
   /*244, 243, 238*/
   /* 145, 155, 156*/
   
   padding:      10px;
}

.dynamic-tab-pane-control .tab-row {
   z-index:      1;
   white-space:   nowrap;
}

3) About the third part of your code:

Code:

<script type="text/javascript">
//<![CDATA[

var tabPane;

function showArticleTab( sName ) {
   if (typeof tabPane != "undefined" ) {
.........................................................etc.
// help tips
htDom = "Document Object Model 1 is a standard developed by the W3C.<br />" +
      "<a href=\"http://www.w3.org/DOM/\" target=\"_blank\">http://www.w3.org/DOM/</a>";

//]]>
</script>

seem nothing different happen with and/or without it

4) On my content I'm posting:

Code:

<div class="tab-pane" id="tab-pane-1">

<script type="text/javascript">
var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );
</script>

   <div class="tab-page" id="tab-page-1">
      <h2 class="tab">General</h2>

      <script type="text/javascript">
      tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );
      </script>

      This is text of tab 1. This is text of tab 1.
      This is text of tab 1. This is text of tab 1.

   </div>

   <div class="tab-page" id="tab-page-2">
      <h2 class="tab">Privacy</h2>

      <script type="text/javascript">
      tabPane1.addTabPage( document.getElementById( "tab-page-2" ) );
      </script>

      This is text of tab 2. This is text of tab 2.
      This is text of tab 2. This is text of tab 2.

   </div>
</div>

If I post and edit using "no wysiwyg editor" all code is still there, but if after I set "JCE Editor" the first script code isn't there anymore !!! and if I come backe setting again "no wysiwyg editor" the blod code isn't there anymore !!!
It seem anything change in the frontend but code seem erased !!!

I think we are near at a finally and stable solution ... Please, Can anyone help ?

luxxx · **Joined:** Wed Feb 01, 2006 1:20 pm **Posts:** 90

A good solution may be using Joomla's mosTabPane, the function used in the admin area.
The little problem is that it requires inserting some php code into the content editor. This can be achieved by using a mambot like kl_php.
OK.
The problem now is: how do we "translate" the following code to be used with kl_php ?

Here's the code to be used:
$tabs = new mosTabs(1);
$tabs->startPane("configPane");
$tabs->startTab("Pictures","stats-page"); // Tab called 'Pictures'

...some html output for first tab eg. components config options

$tabs->endTab();
$tabs->startTab("Browse page","site-page"); Tab called 'Browse page'

....some html output for the second tab. More config options

$tabs->endTab();
$tabs->endPane();
?>

I tried it using {kl_php} blocks but it keeps returning errors, like:

Parse error: parse error, unexpected '<' in XXXXXXX/kl_php.php(65) : eval()'d code on line 1

Does anyone know how to modify the code just mentioned?

halobay · **Joined:** Thu Oct 13, 2005 3:19 pm **Posts:** 93

Hello

Is it possible for one of the tabbed menus to link at a joomla wrapper page, and when someone clicks on it to "automatically" open the contents of that page, just like it is done with the contents of the other tabbed menus?

Thanks in advance

luxxx · **Joined:** Wed Feb 01, 2006 1:20 pm **Posts:** 90

Hi halobay,
I quite don't get your question. If you mean if you can link contents in the tab to open other joomla pages, then yes: it works as (and it is, actually) normal html code.

If I didn't ask, let me know

C ya

luxxx

eGulp · **Posted:** Wed Aug 02, 2006 8:45 pm

Anyone have info on:

What about add a Plugin into JCE as a button to show the Luna Tabs ?
Is that planned into upcoming JCE 1.1 release ?

Many Thanks

jazzyj · **Joined:** Wed Oct 19, 2005 2:06 pm **Posts:** 17

Is this any help to you.
Jeff

http://extensions.joomla.org/component/ ... Itemid,35/

eGulp · **Posted:** Fri Sep 22, 2006 4:16 pm

@ Jeff

Many Thanks for suggestion

I found it ten days ago and I'm trying it. It seem a good plugin and I yet suggested aome features to the admin for next releases ...

Joomla! Discussion Forums

Forum rules

Article Index - Insert a Tab

Quick reply

Who is online