Joomla!
http://forum.joomla.org/

Article Index - Insert a Tab
http://forum.joomla.org/viewtopic.php?f=57&t=42938		 Page 1 of 2
Author:  eGulp [ Fri Mar 03, 2006 1:15 pm ]
Post subject:  Article Index - Insert a Tab
Is there a possibility to manage "Article Index page" position in main body content and "template" of the Article Index  ???
Author:  eGulp [ Fri Mar 03, 2006 8:45 pm ]
Post subject:  Re: Article Index position and template
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 
Author:  eGulp [ Sun Mar 05, 2006 3:01 pm ]
Post subject:  Re: Article Index - Insert a Tab
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 
Author:  leolam [ Sun Mar 05, 2006 3:17 pm ]
Post subject:  Re: Article Index - Insert a Tab
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
Author:  eGulp [ Sun Mar 05, 2006 3:43 pm ]
Post subject:  Re: Article Index position and template
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  :)
Author:  eGulp [ Mon Mar 06, 2006 8:43 am ]
Post subject:  Re: Article Index - Insert a Tab
Please please please,

Please, Can anyone help me  ???
Author:  happy_noodle_boy [ Mon Mar 06, 2006 10:51 am ]
Post subject:  Re: Article Index - Insert a Tab
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).
Author:  eGulp [ Mon Mar 06, 2006 11:35 am ]
Post subject:  Re: Article Index - Insert a Tab
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 ?
Author:  happy_noodle_boy [ Mon Mar 06, 2006 11:49 am ]
Post subject:  Re: Article Index - Insert a Tab
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.
Author:  eGulp [ Mon Mar 06, 2006 12:32 pm ]
Post subject:  Re: Article Index - Insert a Tab
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  :D
3) I don't understood  ???
Author:  happy_noodle_boy [ Mon Mar 06, 2006 12:41 pm ]
Post subject:  Re: Article Index - Insert a Tab
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.
Author:  eGulp [ Mon Mar 06, 2006 12:52 pm ]
Post subject:  Re: Article Index - Insert a Tab
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  ???
Author:  happy_noodle_boy [ Mon Mar 06, 2006 12:57 pm ]
Post subject:  Re: Article Index - Insert a Tab
See image
Author:  eGulp [ Mon Mar 06, 2006 1:09 pm ]
Post subject:  Re: Article Index - Insert a Tab
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  :-[
Author:  happy_noodle_boy [ Mon Mar 06, 2006 1:14 pm ]
Post subject:  Re: Article Index - Insert a Tab
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>
Author:  eGulp [ Mon Mar 06, 2006 1:27 pm ]
Post subject:  Re: Article Index - Insert a Tab
This initial part of code till isn't saved  :o

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>
Author:  eGulp [ Mon Mar 06, 2006 6:17 pm ]
Post subject:  Re: Article Index - Insert a Tab
:'( :'( :'(

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  :o

Anyone can help me  ???

:'( :'( :'(
Author:  aravot [ Mon Mar 06, 2006 6:39 pm ]
Post subject:  Re: Article Index - Insert a Tab
Interested in this tab thingy too, why not ask www.joomlaitalia.com how they have done it.
Author:  eGulp [ Mon Mar 06, 2006 6:50 pm ]
Post subject:  Re: Article Index - Insert a Tab
I asked him in Italian Forum (Vamba moderator is the owner), but at the moment he is busy and has no time  :'(
Author:  eGulp [ Mon Mar 06, 2006 10:32 pm ]
Post subject:  Re: Article Index - Insert a Tab
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  ???  ???  ???
Author:  duvien [ Tue Mar 07, 2006 1:02 am ]
Post subject:  Re: Article Index - Insert a Tab
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.  ;)
Author:  duvien [ Tue Mar 07, 2006 1:54 am ]
Post subject:  Re: Article Index - Insert a Tab
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).



 
Author:  luxxx [ Tue Mar 07, 2006 11:33 am ]
Post subject:  Re: Article Index - Insert a Tab
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)...
Author:  luxxx [ Tue Mar 07, 2006 11:50 am ]
Post subject:  Re: Article Index - Insert a Tab
--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
Author:  eGulp [ Tue Mar 07, 2006 8:59 pm ]
Post subject:  Re: Article Index - Insert a Tab
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 ...  ???
Author:  duvien [ Tue Mar 07, 2006 9:46 pm ]
Post subject:  Re: Article Index - Insert a Tab
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
Author:  eGulp [ Tue Mar 07, 2006 10:01 pm ]
Post subject:  Re: Article Index position and template
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) 
Author:  mmzmaster [ Wed Mar 08, 2006 2:20 am ]
Post subject:  Re: Article Index - Insert a Tab
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)
Author:  eGulp [ Wed Mar 08, 2006 3:04 pm ]
Post subject:  Re: Article Index - Insert a Tab
@ 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
Author:  duvien [ Wed Mar 08, 2006 3:38 pm ]
Post subject:  Re: Article Index - Insert a Tab
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?
Page 1 of 2 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/