Article Index - Insert a Tab

eGulp · **Posted:** Fri Mar 03, 2006 1:15 pm

Is there a possibility to manage "Article Index page" position in main body content and "template" of the Article Index

eGulp · **Posted:** Fri Mar 03, 2006 8:45 pm

I find a solution, but not able to do it.

How to insert a tab in content ( http://webfx.eae.net/dhtml/tabpane/tabpane.html )
as done here on http://www.joomlaitalia.com/component/o ... ,32/ 

Please, anyone done it and/or can help me giving instructions ?

Many Thanks

eGulp · **Posted:** Sun Mar 05, 2006 3:01 pm

Please, Can anyone help me to make a tab as I wrote ?

if I wrong to post in this forum

I ask to moderator to move this one and/or tell me where I have to post

Many Thanks

leolam · **Posted:** Sun Mar 05, 2006 3:17 pm

this below speaks for itself:

Quote:

Sono state aggiornate le seguenti librerie di sviluppo:

patTemplate (questa versione supporta ora i short tag modifiers)
Overlib
TinyMCE
Walter Zorn tooltips
JSCookMenu
DOMIT!
DOMIT! RSS

has this as HTML

Quote:

Sono state aggiornate le seguenti librerie di sviluppo:

patTemplate (questa versione supporta ora i short tag modifiers)

Overlib

TinyMCE

Walter Zorn tooltips

JSCookMenu

DOMIT!

DOMIT! RSS

Look at the JoomlaItalia site on the Frontpage I copied the HTML- code. I assume that is what you mean? So just emulate this in editor html-mode?

Hope this helps?

Leo

eGulp · **Posted:** Sun Mar 05, 2006 3:43 pm

Hi leolam,
we are again here

I don't understood you, I think I haven't explained well what I want. My question is:

doctorlife wrote:

How to insert tabs (as "luna template", you find here http://webfx.eae.net/dhtml/tabpane/tabpane.html)
and put them into normal content body

This tabs are used in CB for example
and I found here on http://www.joomlaitalia.com/component/o ... Itemid,32/
their using into a content body as I want

I tried, but don't runs, may be I'm missing something ...

hoping I'm been more understable, Many Thanks

eGulp · **Posted:** Mon Mar 06, 2006 8:43 am

Please please please,

Please, Can anyone help me

happy_noodle_boy · **Posted:** Mon Mar 06, 2006 10:51 am

This gets tricky with any of the content editors, as none support php tags, and tabs are best done using the mosTabs() class.

That said, if you use the 'no wysiwyg editor' option, you do it like this:

Code:

<?php
$tabs = new mosTabs(0);
$tabs->startPane('somePane');
$tabs->startTab('Title','some_tab');
?>
Then you put the stuff to go into the tab here.
<?php 
$tabs->endTab();
$tabs->startTab('Title2', 'another_tab');
?>
More stuff for the second tab.
<?php
$tabs->enTab();
$tabs->endPane();
?>

No idea if this will work in a content item as I haven't tried it.

But....TinyMCE has a tabs class, maybe I could do something with that....(and not need php).

eGulp · **Posted:** Mon Mar 06, 2006 11:35 am

I tryed ... and I found that can run if I set as you suggest 'no wysiwyg editor' and put this code

Code:

<html>
<head>
<script type="text/javascript" src="http://www.............tabpane/js/tabpane.js"></script>
<link type="text/css" rel="StyleSheet" href="http://www.............../tabpane/css/luna/tab.css"/>
</head>
<body>
<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>
</body>
</html>

but after that if I want manage the body I cannot replace the MCE Editor and use it because tabs are erased ...

Please, Is there a solution for that ?
Can't this tab a JCE plugin ?

happy_noodle_boy · **Posted:** Mon Mar 06, 2006 11:49 am

Actually, you should be able to do this in JCE, provided that:

1) You use the HTML view to add the content as you have posted
2) You have the Script Elements Extension plugin published
3) You add div[*] to the extended elements section of the JCE Editor Mambot parameters.

eGulp · **Posted:** Mon Mar 06, 2006 12:32 pm

I have JCE 1.0.1 installed on Joomla 1.0.7

1) I tryed before to post, but:
after saved a lot of code lines are loose and the script don't run.
Also, Is it normal html editor show all code in one line ?
2) I have installe and published all plugins you released

3) I don't understood

happy_noodle_boy · **Posted:** Mon Mar 06, 2006 12:41 pm

First, you need to download and install the JCE Script Elements Extension plugin

Then Go to Mambots->Site Mambots and click on JCE Editor Mambot to edit it's parameters.

In the Extended Elements section add

Code:

div[*]

as in the image below.

Use the HTML view to add your tab code.

The HTML view will have basic formatting in the next release. Use the Word Wrap feature to wrap the code into multiple lines.

eGulp · **Posted:** Mon Mar 06, 2006 12:52 pm

Ok, I done all and tryed, but:

word wrap selection in html window isn't saved if I close and re-open html windoe, is it right ?
lines are showed "not organized" as I insert. Is it right ?

and, don't run, when I save all this code is loose:

Code:

<html>
<head>
<script type="text/javascript" src="http://www.doctorlife.org/templates/tabpane/js/tabpane.js"></script>
<link type="text/css" rel="StyleSheet" href="http://www.doctorlife.org/templates/tabpane/css/luna/tab.css"/>
</head>
<body>

......... all this content is INCLUDED till

</body>
</html>

Are we forgiven something

happy_noodle_boy · **Posted:** Mon Mar 06, 2006 12:57 pm

See image

eGulp · **Posted:** Mon Mar 06, 2006 1:09 pm

Sorry huh?,

instead you were posting me, I was modifieng reply because I found and tryed ... sorry, please read my previous reply, it's changed

Many Thanks :-[

happy_noodle_boy · **Posted:** Mon Mar 06, 2006 1:14 pm

Oh...right.

Sorry, I didn't even notice that.

Only everything between the body tags will be included, so you will have to place the script link within that.

In other words this is what you should paste into the html view:

Code:

<script type="text/javascript" src="http://www.............tabpane/js/tabpane.js"></script>
<link type="text/css" rel="StyleSheet" href="http://www.............../tabpane/css/luna/tab.css"/>
<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>

eGulp · **Posted:** Mon Mar 06, 2006 1:27 pm

This initial part of code till isn't saved

Code:

<script type="text/javascript" src="http://www.............tabpane/js/tabpane.js"></script>
<link type="text/css" rel="StyleSheet" href="http://www.............../tabpane/css/luna/tab.css"/>
<div class="tab-pane" id="tab-pane-1">
<script type="text/javascript">
var tabPane1 = new WebFXTabPane( document.getElementByid( "tab-pane-1" ) );
</script>

eGulp · **Posted:** Mon Mar 06, 2006 6:17 pm

Not being able to solve this with html editors, and don't having suggestions I tried:

I set 'no wysiwyg editor'
I built my page in html with dreamweaver
I past code as I wrote before

But ... I used mosimage to add an image, it seem been loaded, but it isn't showed

Anyone can help me

aravot · **Posted:** Mon Mar 06, 2006 6:39 pm

Interested in this tab thingy too, why not ask www.joomlaitalia.com how they have done it.

eGulp · **Posted:** Mon Mar 06, 2006 6:50 pm

I asked him in Italian Forum (Vamba moderator is the owner), but at the moment he is busy and has no time :'(

eGulp · **Posted:** Mon Mar 06, 2006 10:32 pm

Working with 'no wysiwyg editor'

As I wrote before with code I yet pasted
image (mosimage) isn't showed, tables are right into "Main Body", and too slow download page

with this code I add now
image (mosimage) is showed, tables are bigger, over "Main Body", and download is good

Code:

<table width="100%" border="0" ><tr><td>
<link id="luna-tab-style-sheet" type="text/css" rel="stylesheet" href="http://www...../tabpane/css/luna/tab.css" /><script type="text/javascript" src="http://www...../tabpane/js/tabpane.js"></script><div class="tab-page" id="help"><script type="text/javascript">
   var tabPane1 = new WebFXTabPane( document.getElementById( "help" ), 0 )
</script>
<div class="tab-page" id="menu-page"><h2 class="tab">Menu</h2><script type="text/javascript">
  tabPane1.addTabPage( document.getElementById( "menu-page" ) );</script>
<table width="100%" border="0" ><tr><td>

<div>
<p align="left"> </p>
{mosimage}
<p> TEXT etc.</p>
</div>

</tr></td></table>

</div><div class="tab-page" id="voci-page"><h2 class="tab">Voci menu</h2><script type="text/javascript">
  tabPane1.addTabPage( document.getElementById( "voci-page" ) );</script>
<table width="100%" border="0" ><tr><td>

<div>
<p> TEXT etc. </p>
{mosimage}
<p> TEXT etc. </p>
</div>

</tr></td></table>
</tr></td></table>

Please, what am I missing

duvien · **Posted:** Tue Mar 07, 2006 1:02 am

Actaully i thought i've seen it somewhere before, maybe it was Facile form. A component for creating web forms and i think it also allows you to create multiple page forms with tabs: http://www.facileforms.biz/

There were samples that came along with it after installing it and i think one of the example was using tabs to browse thru your page on the forms.

--- EDITED ---

Yep! i think i was right, here's an example: http://www.facileforms.biz/component/op ... Itemid,48/ from the facile forms site. The tabs don't look too good but you can add css to style it to the way you want.

I hope that finally resolves how it was achieved.

duvien · **Posted:** Tue Mar 07, 2006 1:54 am

doctorlife wrote:

Working with 'no wysiwyg editor'

As I wrote before with code I yet pasted
image (mosimage) isn't showed, tables are right into "Main Body", and too slow download page

with this code I add now
image (mosimage) is showed, tables are bigger, over "Main Body", and download is good

Please, what am I missing

Not sure what you are asking about sorry. Is it working? If not maybe you have forgotten to add these lines in your head document of your the template:

In the above example (taken from tabpane.html), all the files for the tab pane are kept in the template folder called sunburst. I have tried it out and it is working (using no editor to insert the rest of the other codes from tabpane.html into content item).

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

YES!
It works for me! Great help al of you guys!
Just managed to emulate tabpane.html example...will try to "evolve" from it

Added immages successfully also.

thanks to everyone.
If I can be of any help (even if others know much more)...

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

--SOLVED--
Just one comment..
when using the tab content, the right column modules are shifted to the bottom, as if the weren't room (div template).
I tried to narrow down the tab's width through its css but nothing happens.
Any idea about how to control such a thing?

-- if it can be of any help: it was the tabs row (invisible in the "luna" css) that was to large:
I narrowed:
dynamic-tab-pane-control .tab-page
and
.dynamic-tab-pane-control.tab-pane

in the header of the index file of my template

eGulp · **Posted:** Tue Mar 07, 2006 8:59 pm

I'm trying but not run, I'm loosing something

and don't understand what are differents from these two code suggestions:

http://forum.joomla.org/index.php/topic,41310.0.html
http://forum.joomla.org/index.php/topic,42954.0.html

Can anyone help me to understand ...

duvien · **Posted:** Tue Mar 07, 2006 9:46 pm

doctorlife wrote:

I'm trying but not run, I'm loosing something

and don't understand what are differents from these two code suggestions:

http://forum.joomla.org/index.php/topic,41310.0.html
http://forum.joomla.org/index.php/topic,42954.0.html

Can anyone help me to understand ...

I'm not sure either, all i know is that- instead of using the overlib.js as default, they are now using TabPane as the default to display there tabs differently. I think it would help Doctorlife to understand better if someone can kindly show Doctorlife a working example on your site (maybe PM each other).

Thanks,

Sunburst

eGulp · **Posted:** Tue Mar 07, 2006 10:01 pm

Really I don't understood, may be can help anyone to explein me better if I repeat that what Im looking for is to insert the "tab luna template" ( http://webfx.eae.net/dhtml/tabpane/tabpane.html ) in content item, as done here on http://www.joomlaitalia.com/component/o ... Itemid,32/

I don't know if there is only one way or more ... and I don't know what are technical differents ... only thing I know is that I'm not yet a programmer, so what I need to understand is like a guide step by step ...

I'm not pretending, just hope to explaining better giving someone possibility to reply/answer and really just: many thanks

if someone can help me/us (noted that is a too requested feature here around forum)

mmzmaster · **Joined:** Thu Mar 02, 2006 2:49 am **Posts:** 33

Luna Style Solution

http://www.maxmzone.com/content/blogsection/11/123/

Thank for bringing up this tab idea, I forgot about it long ago and it's quite useful. (That was easy)

eGulp · **Posted:** Wed Mar 08, 2006 3:04 pm

@ sunburst and other friends
following your instructions (put all code into the head of index) the tab run, but:

Code:

<style type="text/css">

.dynamic-tab-pane-control .tab-page {
   height:      500px;
   width:      558px;
   overflow:   auto;
}.........................................etc.
</style>

If I understood this isn't needed, Isn't this work done from the CSS file we are calling

What's its Job

The same, What's Job of :

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>

Is this needed

I tried also removing these two parts of code from the index and tabs run following the CSS file, only thing doesn't work is the mosimage that are under load as it is out from the tab, take a look here:
http://www.doctorlife.org/index.php?opt ... 25&lang=it

Finally, it seem isn't so quickly on the upload, may be Am I loosing anything

Many Thanks

duvien · **Posted:** Wed Mar 08, 2006 3:38 pm

Looks like you have got it working

Well done.

I was only playing about with the contentpane.html file to test it out, so haven't really looked into it in depth.

However, if these parts of code you mentioned was not required and it is working for you, then i'll just comment them out or remove it from your template. As for the image, it seems like it is out of the document flow but i'm just guessing. Have you tried using the tag and actual URL to the image instead of {mosimage} to load the image?

Joomla! Discussion Forums

Forum rules

Article Index - Insert a Tab

Quick reply

Who is online