MooBot Tags & Effects

These are the individual Plugins. A Plugin is either a integrated own written or 3rd Party JavaScript that uses the mooTools Framework for Visual Effects on the client browser. The MooBot translates the content tags documented for each Plugin into the respective HTML Code to place the particular effect into the content page prepared by Joomla!. Through this structure more effects may get added to the mooBot repository at any time.

This effect shows images or any other items of content at random positions within the Boing container, blending in and out randomly. Allows to use images or, by using the Boing-Item tag, any other content.

The content tag {boing} supports options that may be defined as in the following example:

{boing|[<Options>]}

{boing|[width:400,height:200,duration:5000]}

{/boing}

Here are the individual options and their meaning:

moobot_boing.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This Plugin is based upon the AstroG Boing Script by Gilles Hooghe, a demonstration is available at the MooBot Product Page.

This effect displays a tooltip with the defined text when the mouse is hovering over the tooltip anchor.

This text has some {tooltip=This is my tooltip content}additional information{/tooltip} as tooltip
that is displayed when hovering on the text contained between the tags.

moobot_tooltips.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

Own creation by PILLWAX Industrial Solutions Consulting.

This integrates the Fx.Styles Class of MooTools into the Joomla! content.

The content tag {fxstyles} supports options that may be defined as in the following example:

{fxstyles|[<Options>]}

Here are the individual options and their meaning:

Integrates the Fx.Styles Class of MooTools, a demonstration is available at the MooBot Product Page.

This effect shows individual tabs for parts of the content and which will get displayed when clicking on one of these tabs.

{tabs}
{tab=First Tab}
{tab-title=A short demo}
And here is this firsts tab content.
{/tab}
{tab=Second Tab}
Second Tab Content.
{/tab}
{/tabs}

The content tag {tabs} supports options that may be defined as in the following example:

{tabs|[<Options>]}

{tabs|[show:1]}

{/tabs}

Here are the individual options and their meaning:

moobot_tabs.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This Plugin integrates the Simple Tabs Script by Digitarald.

This effect shows individual tabs for parts of the content and which will get displayed when clicking on one of these tabs. The content of the tabs is scrolled across the vertical direction.

{slidingtabs}
{slidingtab=First Tab}
And here is this firsts tab content.
{/slidingtab}
{slidingtab=Second Tab}
Second Tab Content.
{/slidingtab}
{/slidingtabs}

The content tag {slidingtabs} supports options that may be defined as in the following example:

{slidingtabs|[<Options>]}

{slidingtabs|[startingSlide:1,animateHeight:false]}

{/slidingtabs}

Here are the individual options and their meaning:

moobot_slidingtabs.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This Plugin integrates the SlidingTabs Script by Creative Pony.

This effect shows individual tabs for parts of the content and which will get displayed when clicking on one of these tabs. The content of the tabs scrolled and the tabs too when having more tabs than fitting the width.

{perspectivetabs}
{perspectivetab=First Tab}
And here is this firsts tab content.
{/perspectivetab}
{perspectivetab=Second Tab}
Second Tab Content.
{/perspectivetab}
{/perspectivetabs}

The content tag {perspectivetabs} supports options that may be defined as in the following example:

{perspectivetabs|[<Options>]}

{perspectivetabs|[orientation:"vertical",scroll_fx_duration:200]}

{/perspectivetabs}

Here are the individual options and their meaning:

moobot_perspectivetabs.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This Plugin integrates the PerspectiveTabs Script by Matt Weltmann.

The Accordion effect allows to group content parts together such that only one content part is shown. When clicking onto the other headers the current content part slides hidden and the selected part slides visible.

{accordion}
{accordion-section=First Accordion Section}
Here is some text just to fill this first accordion section.
{/accordion-section}
{accordion-section=Another Accordion Section}
Well, another 'lorem ipsum' senseless filling text.
{/accordion-section}
{/accordion}

The content tag {accordion} supports options that may be defined as in the following example:

{accordion|[<Options>]}

{accordion|[display:1,opacity:false]}

{/accordion}

Here are the individual options and their meaning:

moobot_accordion.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

Using the mooTools Accordion Sample Code.

Auto Accordion is the same as the Accordion, with the addition that the accordion section - over which title the mouse pointer is being hovered - is opening automatically without the need to perform a click.

{autoaccordion}
{autoaccordion-section=First Accordion Section}
Here is some text just to fill this first accordion section.
{/autoaccordion-section}
{autoaccordion-section=Another Accordion Section}
Well, another 'lorem ipsum' senseless filling text.
{/autoaccordion-section}
{/autoaccordion}

The content tag {autoaccordion} supports options that may be defined as in the following example:

{autoaccordion|[<Options>]}

{autoaccordion|[display:1,opacity:false]}

{/autoaccordion}

Here are the individual options and their meaning:

moobot_autoaccordion.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

Using the Auto-Accordion of CreativePony. Thanks CreativePony for this idea and code, which we put into MooBot.

Multiple Open Accordion is the same as the Accordion, with the addition that more than one accordion sections may be open, plus additional options allowing to control the Accordion's behaviour.

{multiaccordion}
{multiaccordion-section=First Accordion Section}
Here is some text just to fill this first accordion section.
{/multiaccordion-section}
{multiaccordion-section=Another Accordion Section}
Well, another 'lorem ipsum' senseless filling text.
{/multiaccordion-section}
{/multiaccordion}

The content tag {multiaccordion} supports options that may be defined as in the following example:

{multiaccordion|[<Options>]}

{multiaccordion|[hideAll:true,allowMultipleOpen:false]}

{/multiaccordion}

Here are the individual options and their meaning:

moobot_multiaccordion.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

Using the CNet Framework - Multi Open Accordion.

This effect allows vertical sliding in and out of content when a link is clicked. The link may also be distributed in the content by option, allowing to display or hide text in another area of the same content.

{slide-vertical=A default open slide}
This text here is visible by default. When clicking on this slides title, it slides vertically up to disappear.
{/slide-vertical}
 
{slide-vertical-closed=A default closed slide}
This text here is invisible by default. When clicking on this slides title, it slides vertically down to appear.
{/slide-vertical-closed}

Slide toggles may also be in different content positions, such that when clicked content on a different text location appears or disapperas.

{slide-vertical-closed-toggle=First Toggle}
{slide-vertical-toggle=Second Toggle}
 
...
Some other content here.
...
 
{slide-vertical-content=Second Toggle}
This content is now visible by default and slides away when the above "Second Toggle" link is clicked.
{/slide-vertical-content}
 
...
Some other content here.
...
 
{slide-vertical-content=First Toggle}
This content is now invisible by default and slides open when the above "First Toggle" link is clicked.
{/slide-vertical-content}

The content tags support options that may be defined as in the following example:

{slide-vertical=Some Slide|[<Options>]}

Here are the individual options and their meaning:

{slide-vertical=A default open slide|[class="icon-link"]}
This text here is visible by default. When clicking on this slides title, it slides vertically up to disappear.
{/slide-vertical}

moobot_slide-vertical.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

Using the mooTools Slide Sample Code.

This effect allows to create a vertical or horizontal Marquee with the Text scrolling through.

The content tag {marquee} supports options that may be defined as in the following example:

{marquee|[<Options>]}

{marquee|[width:400,height:200,direction:"horizontal"]}

{/marquee}

Here are the individual options and their meaning:

moobot_marquee.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This Plugin is based upon the MooMarquee of globaldizajn.hr, a demonstration is available at the MooBot Product Page.

This effect allows to create a vertical or horizontal News Ticker with the items scrolling through.

The content tag {ticker} supports options that may be defined as in the following example:

{ticker|[<Options>]}

{ticker|[width:400,height:200,direction:"horizontal"]}

{/ticker}

Here are the individual options and their meaning:

The content tag {ticker-item} supports CSS styling for a single ticker item as in the following example:

{ticker-item|[width:100px;height:50px;background-color:#0d0d0d]}
Some CSS applied to this ticker item only.
{/ticker-item}

moobot_ticker.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This Plugin is based upon the News Ticker of Ryan J. Salva, a demonstration is available at the MooBot Product Page.

Pageload allows to load any Joomla! Content Article into a container of the current displayed content item. This uses AJAX to request the content item from the Joomla! server and then displays its content in the defined location.

The content tag {pageload=…} supports options that may be defined as in the following example:

{pageload=31|[<Options>]}

{pageload=31|[container:"area51"]} | {pageload=32|[container:"area51",title:"A link title"]}

...

{pageload-container=area51}

Here are the individual options and their meaning:

The content tag {pageload-container=…} supports options that may be defined as in the following example:

{pageload-container|[<Options>]}

{pageload-container|[waiter:true]}

{pageload-container=area51|[duration:4000]}

Here are the individual options and their meaning:

The following example has 4 content items linked, whereas the first 2 are loaded into the default Pageload-Container and the following 2 are loaded into the test Pageload Container:

{pageload=37}Item 37{/pageload} | {pageload=38}Item 38{/pageload} | {pageload=36|[container:"test"]}Item36{/pageload} | {pageload=35|[container:"test"]}Item 35{/pageload}

{pageload-container|[waiter:true,duration:2000]}

{pageload-container=test|[load:1]}

moobot_pageload.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

Based upon PageLoader of PhatFusion, a demonstration is available at the MooBot Product Page.

Kwicks are combined elements that are always visible in part and on the mouse hovering over one individual element, that element widens its width to uncover more of its elements content.

{kwicks}
{kwick}
This is my first Kwick elements with the default Kwick style as per the CSS file.
{/kwick}
{kwick=orange}
This second Kwick is in style named "orange", that style requires to get defined in the CSS file.
{/kwick}
{/kwicks}

moobot_kwicks.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

When using named styling for a Kwick element, the style name used in the {kwick=…} tag will become the ID for the CSS style. Thus extending the default Kwick element style like in this example:

/*
* Style for individual unnamed Kwick when using tag "{kwick}"
*/
.mootools_kwick {
	float: left;
	display: block;
	width: 117px;
	height: 100px;
}
 
/*
* Style for Kwick named 'orange' when using "{kwick=orange}"
*/
#orange.mootools_kwick {
	background-color: orange;
}

Using the mooTools Kwick Sample Code.

Transcorners creates styled corners of boxed content.

Example

{transcorners}
   Some nifty corners around this text here.
{/transcorners}

The content tag {transcorners} supports options that may be defined as in the following example:

{transcorners|[<Options>]}

Example

{transcorners|[sides:top,borderColor:red,radius:20]}
     Some nifty corners around this text here with rounded corners in radius 20 only on the top and in red color.
{/transcorners}

Here are the individual options and their meaning:

Following are the limitations of Transcorners:

• The border size is fixed with 1px.
• Border Transition effects apply to all styled corners. Different Transitions for single corners are technical possible, however integration into mooBot will occur at a later stage due to complexity issues.

moobot_transcorners.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

Based upon Inviz's Transcorners.

MooTable creates a sortable table from a HTML table. Table Headers are taken from the first table row.

Example

{mootable}
  <table>
    <tbody>
      <tr><th>Column 1</th><th>Column 2</th></tr>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      <tr><td>Cell 3</td><td>Cell 4</td></tr>
    </tbody>
  </table>
{/mootable}

The content tag {mootable} supports options that may be defined as in the following example:

{mootable|[<Options>]}

Example

{mootable|[resizeable:false,sortable:true]}...some table here...{/mootable}

Here are the individual options and their meaning:

moobot_mootable.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This plugin integrates Mark Fabrizio's MooTable, a demonstration is available at the MooBot Product Page.

Chart creates a chart with data from a HTML table source.

Example

{chart|[type:"lines", shouldFill:false, legend:true, legendTitle:"Browser", colors: ["#22AA22","#77AA77","#99AA99"]]}
<table>
 <tbody>
   <tr><td>&nbsp;</td><th>2001</th><th>2002</th><th>2003</th></tr>
   <tr><th>FireFox</th><td>12</td><td>23</td><td>15</td></tr>
   <tr><th>Internet Explorer</th><td>17</td><td>43</td><td>3</td></tr>
   <tr><th>Opera</th><td>15</td><td>8</td><td>5</td></tr>
 </tbody>
</table>
{/chart}

The content tag {chart} supports options that may be defined as in the following example:

{chart|[<Options>]}

Example

{chart|[type:"lines"]}...some table here...{/chart}

Here are the individual options and their meaning:

Additional extended options allow to control the Chart Layout:

moobot_chart.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This plugin integrates Plootr and MooTools/Charts.

Windoo shows a window with some assigned content or the content from any other URL.

Example

{windoo=My Window Title}This is some content for this windoo Window.{/windoo}
{windoo-url=http://some.url}Some Link to external Site{/windoo-url}
{windoo-url=http://www.google.com/search?q=joomla+extensions}Google Search on Joomla Extensions{/windoo-url}

The content tags {windoo=…} and {windoo-url=…} support options that may be defined as in the following example:

{windoo=Example Window|[<Options>]}

Example

{windoo=My Window Title|[width:400,height:300]}This is some content for this windoo Window.{/windoo}

Here are the individual options and their meaning:

Creative Commons Licenses:
Joomla 1.0.x: mambots/content/moobot/plugins/windoo/themes/...
Joomla 1.5.x: plugins/content/moobot/plugins/windoo/themes/...

Commercial Unlimited Licenses:
Joomla 1.0.x: mambots/content/moobot_ce/plugins/windoo/themes/...
Joomla 1.5.x: plugins/content/moobot_ce/plugins/windoo/themes/...

The above folder contains the individual themes for the Windoo Plugin. Currently only the available themes are supported, so if customization is required the suggestion is to modify one of the available themes. Make a backup copy of your modified theme, as these themes will get overwritten when updating the MooBot to a more recent version than installed.

This plugin integrates the Windoo Google Code Project, a demonstration is available at the MooBot Product Page.

Mocha, similar to Windoo, displays windows with some assigned content or the content from any other URL.

The content tags {mocha=…} and {mocha-url=…} support options that may be defined as in the following example:

{mocha=Example Window|[<Options>]}

{mocha=My Window Title|[width:400,height:300]}This is some content for this Mocha Window.{/mocha}

Here are the individual options and their meaning:

moobot_mocha.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This plugin integrates the MooTools Mocha UI Project, a demonstration is available at the MooBot Product Page.

Displays any content as Box sliding into the browsers window area from one of the 4 browser sides.

All of the above content tags support options that may be defined as in the following example:

{slidebox=Example Window|[<Options>]}

{slidebox=My Window Link|[side:"top",width:400,height:300]}This is some content for this Slidebox Window.{/slidebox}

Here are the individual options and their meaning:

moobot_slidebox.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

Based upon the idea of mooSlideBox 3, completely rewritten and greatly enhanced by PILLWAX Industrial Solutions Consulting.

Allows to open a default browser window with a given URL. This plugin allows to set the Browsers Window character with its options as described below.

The content tag {popup-url=…} supports options that may be defined as in the following example:

{popup-url=http://www.someurl.tld|[<Options>]}

{popup-url=http://www.google.com|[width:400,height:300]}A Google window with specified dimensions...{/popup-url}

Here are the individual options and their meaning:

For a demonstration look at the Site-Popup with Browser Window plugin.

Allows to popup a MediaBox window with a content from any URL.

The content tag {mediabox-url=…} supports options that may be defined as in the following example:

{mediabox-url=http://www.someurl.tld|[<Options>]}

{mediabox-url=http://www.google.com|[width:400,height:300]}A Google window with specified dimensions...{/mediabox-url}

Here are the individual options and their meaning:

moobot_mediabox.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This plugin integrates the MediaBox of John Einselen, for a demonstration look at the Site-Popup with MediaBox plugin.

Allows to popup a MultiBox window with a content from any URL.

Multibox supports a variety of formats to display, here are some examples:

HTML Pages or URL's:
{multibox-url=http://www.someurl.tld/pages/somepage.html}A HTML Page from my own site or a foreign site{/multibox-url}

Flash Objects from another site or own site:
{multibox-url=http://www.someurl.tld/flash/myflash.flv}Some Flash Object from a foreign site{/multibox-url}
{multibox-url=http://www.mysite.tld/flash/mysite-flash.flv}Some Flash Object from my own site{/multibox-url}

The content tag {multibox-url=…} supports options that may be defined as in the following example:

{multibox-url=http://www.someurl.tld|[<Options>]}

{multibox-url=http://www.google.com|[width:400,height:300]}A Google window with specified dimensions...{/multibox-url}

Here are the individual options and their meaning:

moobot_multibox.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This plugin integrates the MultiBox of PhatFusion, for a demonstration look at the Site-Popup with MultiBox Window.

Allows to popup a default browser window with a given Content of your own Joomla! Site. By default uses your current Joomla! Template, however this allows also to use a different template for the popup content to display some content from your site under a different Template.

{popup=12}This is some content from my site.{/popup}

When using a different template for this popup, define the template name after the Content ID:

{popup=12&template=rhuk_solarflare}This is some content from my site with another template.{/popup}

Optional add the Itemid also into the request, which is mandatory for Joomla 1.0.x installations:

{popup=12&Itemid=3&template=rhuk_solarflare}This is some content from my site with another template.{/popup}

Please see also Suggestions for alternate Templates for more on the design of the alternate template.

The content tag {popup=…} supports options that may be defined as in the following example:

{popup=12|[<Options>]}

{popup=12&template=rhuk_solaflare|[width:400,height:300]}This is some content from my site.{/popup}

This Plugin supports the same Options as the Browser Window Plugin.

A demonstration is available at the MooBot Product Page.

Allows to popup a Windoo Window with a given Content of your own Joomla! Site. By default uses your current Joomla! Template, however this allows also to use a different template for the popup content to display some content from your site under a different Template.

{popup-windoo=12}This is some content from my site.{/popup-windoo}

When using a different template for this popup, define the template name after the Content ID:

{popup-windoo=12&template=rhuk_solarflare}This is some content from my site with another template.{/popup-windoo}

Optional add the Itemid also into the request, which is mandatory for Joomla 1.0.x installations:

{popup-windoo=12&Itemid=3&template=rhuk_solarflare}This is some content from my site with another template.{/popup-windoo}

Please see also Suggestions for alternate Templates for more on the design of the alternate template.

This Plugin supports the same Options as the Windoo Plugin.

This Plugin uses the same CSS as the Windoo Plugin.

A demonstration is available at the MooBot Product Page.

Allows to popup a Mocha Window with a given Content of your own Joomla! Site. By default uses your current Joomla! Template, however this allows also to use a different template for the popup content to display some content from your site under a different Template.

{popup-mocha=12}This is some content from my site.{/popup-mocha}

When using a different template for this popup, define the template name after the Content ID:

{popup-mocha=12&template=rhuk_solarflare}This is some content from my site with another template.{/popup-mocha}

Optional add the Itemid also into the request, which is mandatory for Joomla 1.0.x installations:

{popup-mocha=12&Itemid=3&template=rhuk_solarflare}This is some content from my site with another template.{/popup-mocha}

Please see also Suggestions for alternate Templates for more on the design of the alternate template.

This Plugin supports the same Options as the Mocha Plugin.

This Plugin uses the same CSS as the Mocha Plugin.

A demonstration is available at the MooBot Product Page.

Allows to popup a MediaBox window with a given Content of your own Joomla! Site. By default uses your current Joomla! Template, however this allows also to use a different template for the popup content to display some content from your site under a different Template.

{popup-mediabox=12}This is some content from my site.{/popup}

When using a different template for this popup, define the template name after the Content ID:

{popup-mediabox=12&template=rhuk_solarflare}This is some content from my site with another template.{/popup-mediabox}

Optional add the Itemid also into the request, which is mandatory for Joomla 1.0.x installations:

{popup-mediabox=12&Itemid=3&template=rhuk_solarflare}This is some content from my site with another template.{/popup-mediabox}

Please see also Suggestions for alternate Templates for more on the design of the alternate template.

The content tag {popup-mediabox=…} supports options that may be defined as in the following example:

{popup-mediabox=12|[<Options>]}

{popup-mediabox=12&template=rhuk_solaflare|[width:400,height:300]}This is some content from my site.{/popup-mediabox}

This Plugin supports the same Options as the MediaBox Window Plugin.

moobot_mediabox.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This plugin integrates the MediaBox of John Einselen, a demonstration is available at the MooBot Product Page.

Allows to popup a MultiBox window with a given Content of your own Joomla! Site. By default uses your current Joomla! Template, however this allows also to use a different template for the popup content to display some content from your site under a different Template.

{popup-multibox=12}This is some content from my site.{/popup-multibox}

When using a different template for this popup, define the template name after the Content ID:

{popup-multibox=12&template=rhuk_solarflare}This is some content from my site with another template.{/popup-multibox}

Optional add the Itemid also into the request, which is mandatory for Joomla 1.0.x installations:

{popup-multibox=12&Itemid=3&template=rhuk_solarflare}This is some content from my site with another template.{/popup-multibox}

Please see also Suggestions for alternate Templates for more on the design of the alternate template.

The content tag {popup-multibox=…} supports options that may be defined as in the following example:

{popup-multibox=12|[<Options>]}

{popup-multibox=12&template=rhuk_solaflare|[width:400,height:300]}This is some content from my site.{/popup-multibox}

This Plugin supports the same Options as the MultiBox Window Plugin.

moobot_multibox.css

Follow these Instructions for customizing the CSS styles to style this Plugin to your liking.

This plugin integrates the MultiBox of PhatFusion, a demonstration is available at the MooBot Product Page.

Allows to popup a SlideBox Window with a given Content of your own Joomla! Site. By default uses your current Joomla! Template, however this allows also to use a different template for the popup content to display some content from your site under a different Template.

{popup-slidebox=12}This is some content from my site.{/popup-slidebox}

When using a different template for this popup, define the template name after the Content ID:

{popup-slidebox=12&template=rhuk_solarflare}This is some content from my site with another template.{/popup-slidebox}

Optional add the Itemid also into the request, which is mandatory for Joomla 1.0.x installations:

{popup-slidebox=12&Itemid=3&template=rhuk_solarflare}This is some content from my site with another template.{/popup-slidebox}

Please see also Suggestions for alternate Templates for more on the design of the alternate template.

This Plugin supports the same Options as the SlideBox Plugin.

This Plugin uses the same CSS as the SlideBox Plugin.

A demonstration is available at the MooBot Product Page.