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.

Commercial Unlimited License only (Version 1.17 or higher)

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.

Content Tags
Content Tag Used for
{boing} Marks the beginning of a Boing container. All following images will participate in the effect. To use this effect on other HTML content, use the {boing-item} tag to mark each individual content element.
{/boing} Marks the end of a Boing container.
{boing-item} Marks the start a individual Boing element.
{/boing-item} Marks the end of a individual Boing element.
Examples

Boing with images only

{boing}
<img src="....">
<img src="....">
<img src="....">
{/boing}

Boing with HTML content elements

{boing}
{boing-item}I am Boing Item 1{/boing-item}
{boing-item}I am Boing Item 2{/boing-item}
{boing-item}I am Boing Item 3 with a <a href="http://some.link.tld">link</a>{/boing-item}
{/boing}
Options

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

{boing|[<Options>]}

Example for Options

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

{/boing}


Here are the individual options and their meaning:

Option Description
width:<value> The width of the Boing container, in pixels. Defaults to 200.
Example: width:400
height:<value> The height of the Boing container, in pixels. Defaults to 200.
Example: height:150
class:<string> Sets the CSS class for this Boing container.
Example: class:“boing-images”
duration:<value> The duration a single image shall be visible in ms. Defaults to 3000.
Example: duration:5000
transition:<value> Select the type of Transition as offered by the Fx.Transitions Class of mooTools. Defaults to Fx.Transitions.Sine.easeInOut.
Example: transition:Fx.Transitions.Elastic.easeOut
itemWidth:<value> Sets the width in pixels for any boing-item of the current container. Defaults to false, meaning no width is applied.
Example: itemWidth:150
itemHeight:<value> Sets the height in pixels for any boing-item of the current container. Defaults to false, meaning no height is applied.
Example: itemHeight:150
itemClass:<string> Sets the CSS Class name to get applied on any boing-item of the current container.
Example: itemClass:“BoingItem”
CSS Style Sheet File for customization
moobot_boing.css

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

Demo & Source

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.

Content Tags
Content Tag Used for
{tooltip=<Your tooltip text here>} Starts a tooltip with the tooltip text after the equal sign.
{/tooltip} Ends the tooltip. The tooltip is shown when hovering on the text between here and the previously marked tooltip start.
Example
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.
CSS Style Sheet File for customization
moobot_tooltips.css

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

Demo & Source

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

Content Tags
Content Tag Used for
{fxstyles|[<OPTIONS>]} Starts a Styles Effect container with the options set in <OPTIONS>.
{/fxstyles} Ends the Styles Effect container.

Example

{fxstyles|[delay:1500,duration:2000,"width":400, "opacity":0.5]}
 
With fully documented library of developer resources, Joomla! allows the customisation
of every aspect of a Website including presentation, layout, administration and rapid
integration with third-party applications.
 
{/fxstyles}
Options

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:

Option Description
delay:<value> Sets a Delay in ms after which the Effect shall start. All Effects start after the page is loaded and rendered by default.
Example: delay:2000
duration:<value> Sets the Duration of the Effect in ms. Defaults to 1000.
Example: duration:2000
transition:<value> Select the type of Transition as offered by the Fx.Transitions Class of mooTools. Defaults to Fx.Transitions.Sine.easeInOut.
Example: transition:Fx.Transitions.Elastic.easeOut
“<style>”:<value> To define the CSS properties affected by the Styles Effects, define each property as “<style>”:<value> pair.
Example: “width”:100,“height”:200
Demo & Source

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.

Content Tags
Content Tag Used for
{tabs} Marks the beginning of a tabbed content. All tabbed content must be started with this tag to open a container for all tabs.
{/tabs} Marks the end of a tabbed content. All tabbed content must be ended with this tag to close the container for all tabs.
{tab=<My Tabs Name>} Starts a new tab with the tabs name after the equal sign.
{tab-title=<My Tabs title text>} Defines the current tabs title text after the equal sign that is displayed as Tooltip when hovering on the tabs name. (Optional)
{/tab} Ends the previously started tab, all text in between is now the content of that tab.
Example
{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}
Tabs Options

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

{tabs|[<Options>]}

Example for Tabs with the second Tab Element open
{tabs|[show:1]}

{/tabs}

Here are the individual options and their meaning:

Option Description
show:<value> The Index of the tab element to show at start as integer value. Defaults to 0.
CSS Style Sheet File for customization
moobot_tabs.css

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

Demo & Source

This Plugin integrates the Simple Tabs Script by Digitarald.

Commercial Unlimited License only (Version 1.19 or higher)

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.

Content Tags
Content Tag Used for
{slidingtabs} Marks the beginning of a tabbed content. All tabbed content must be started with this tag to open a container for all tabs.
{/slidingtabs} Marks the end of a tabbed content. All tabbed content must be ended with this tag to close the container for all tabs.
{slidingtab=<My Tabs Name>} Starts a new tab with the tabs name after the equal sign.
{slidingtab=<My Tabs Name>|[class=“some-css-class”]} Starts a new tab with the tabs name after the equal sign, and assigns “some-css-class” to it for particular styling of a individual tab.
{/slidingtab} Ends the previously started tab, all text in between is now the content of that tab.
Example
{slidingtabs}
{slidingtab=First Tab}
And here is this firsts tab content.
{/slidingtab}
{slidingtab=Second Tab}
Second Tab Content.
{/slidingtab}
{/slidingtabs}
Tabs Options

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

{slidingtabs|[<Options>]}

Example for Tabs with the second Tab Element open
{slidingtabs|[startingSlide:1,animateHeight:false]}

{/slidingtabs}

Here are the individual options and their meaning:

Option Description
width:<value> The width of the Sliding Tabs container, in pixels. Defaults to 200.
Example: width:400
height:<value> The height of the Sliding Tabs container, in pixels. Defaults to 200.
Example: height:200
class:<string> Sets the CSS class for this Sliding Tabs container.
Example: class:“slidingtabs-news”
startingSlide:<value> The Index of the tab element to show at start as integer value, counting starts at Zero. Defaults to 0.
Example: startingSlide:2
activeButtonClass:<string> The CSS class to add for the active Tab Button. Defaults to active.
Example: activeButtonClass:“current”
activationEvent:<string> The type of Event which activates the Tab change. Defaults to click.
Example: activationEvent:“mouseover”
slideEffect:<object> Adds any slide effect as offered by the Fx.Base class of MooTools.
Example: slideEffect:{duration:200}
animateHeight:<boolean> Sets if the height of the tabbed content shall be animated. Defaults to true.
Example: animateHeight:false
rightOversized:<value> Sets how much of the next panel shall be shown on the right of the current pane. Defaults to 0.
Example: rightOversized: 20
CSS Style Sheet File for customization
moobot_slidingtabs.css

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

Demo & Source

This Plugin integrates the SlidingTabs Script by Creative Pony.

Commercial Unlimited License only (Version 1.19 or higher)

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.

Content Tags
Content Tag Used for
{perspectivetabs} Marks the beginning of a tabbed content. All tabbed content must be started with this tag to open a container for all tabs.
{/perspectivetabs} Marks the end of a tabbed content. All tabbed content must be ended with this tag to close the container for all tabs.
{perspectivetab=<My Tabs Name>} Starts a new tab pane with the tabs name after the equal sign.
{/perspectivetab} Ends the previously started tab pane, all text in between is now the content of that tab pane.
Example
{perspectivetabs}
{perspectivetab=First Tab}
And here is this firsts tab content.
{/perspectivetab}
{perspectivetab=Second Tab}
Second Tab Content.
{/perspectivetab}
{/perspectivetabs}
Tabs Options

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

{perspectivetabs|[<Options>]}

Example for Tabs with the second Tab Element open
{perspectivetabs|[orientation:"vertical",scroll_fx_duration:200]}

{/perspectivetabs}

Here are the individual options and their meaning:

Option Description
width:<value> The width of the Perspective Tabs container, in pixels. Defaults to 200.
Example: width:400
height:<value> The height of the Perspective Tabs container, in pixels. Defaults to 200.
Example: height:200
class:<string> Sets the CSS class for this Perspective Tabs container.
Example: class:“slidingtabs-news”
tabClass:<string> Adds this CSS class to the Tab Titles.
Example: tabClass:“other-tab”
paneClass:<string> Adds this CSS class to the Panes.
Example: paneClass:“other-pane”
tabWidth:<value> Sets a arbitrary width to all tab titles in pixels. Might be useful for vertical orientation.
Example: tabWidth:150
tabHeight:<value> Sets a arbitrary height to all tab titles in pixels. Might be useful for vertical orientation.
Example: tabHeight:100
paneWidth:<value> Sets a arbitrary width to all tab panes in pixels. Might be useful for vertical orientation.
Example: paneWidth:250
paneHeight:<value> Sets a arbitrary height to all tab panes in pixels. Might be useful for vertical orientation.
Example: paneHeight:200
orientation:<string> Sets the tab orientation. Options are horizontal, vertical. Defaults to horizontel.
Example: orientation:“vertical”
tab_margin_left:<string> Sets the margin to the left of the left-most tab. Defaults to 10px.
Example: tab_margin_left:“20px”
tab_margin_right:<string> Sets the margin to the right of the right-most tab. Defaults to 10px.
Example: tab_margin_right:“20px”
tab_margin_top:<string> Sets the margin to the top of the top-most tab when using VERTICAL direction. Defaults to 10px.
Example: tab_margin_top:“20px”
tab_margin_bottom:<string> Sets the margin to the bottom of the bottom-most tab when using VERTICAL direction. Defaults to 10px.
Example: tab_margin_bottom:“20px”
CSS Style Sheet File for customization
moobot_perspectivetabs.css

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

Demo & Source

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.

Content Tags
Content Tag Used for
{accordion} Marks the beginning of a accordion content. All accordion content must be started with this tag to open a container for all accordion sections.
{/accordion} Marks the end of a accordion content. All accordion content must be ended with this tag to close the container for all accordion sections.
{accordion-section=<My Section Name>} Starts a new accordion section with its name after the equal sign.
{/accordion-section} Ends the previously started accordion section, all text in between is now the content of that accordion section.
Example
{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}
Accordion Options

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

{accordion|[<Options>]}

Example for Accordion with the second Element open and no opacity transition
{accordion|[display:1,opacity:false]}

{/accordion}

Here are the individual options and their meaning:

Option Description
show:<value> The Index of the element to show at start as integer value. Defaults to 0.
display:<value> The Index of the element to show at start (with a transition). Defaults to 0.
fixedHeight:<value> If you want the elements to have a fixed height set the height in Pixels. Defaults to false.
fixedWidth:<value> If you want the elements to have a fixed width set the width in Pixels. Defaults to false.
height:<boolean> Will add a height transition to the accordion if true. Defaults to true.
width:<boolean> Will add a width transition to the accordion if true. Defaults to false. CSS mastery is required to make this work!
opacity:<boolean> Will add an opacity transition to the accordion if true. Defaults to true.
alwaysHide:<boolean> Will allow to hide all elements if true, instead of always keeping one element shown. Defaults to false.
CSS Style Sheet File for customization
moobot_accordion.css

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

Demo & Source

Commercial Unlimited License only (Version 1.06 or higher)

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.

Content Tags
Content Tag Used for
{autoaccordion} Marks the beginning of a accordion content. All accordion content must be started with this tag to open a container for all accordion sections.
{/autoaccordion} Marks the end of a accordion content. All accordion content must be ended with this tag to close the container for all accordion sections.
{autoaccordion-section=<My Section Name>} Starts a new accordion section with its name after the equal sign.
{/autoaccordion-section} Ends the previously started accordion section, all text in between is now the content of that accordion section.
Example
{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}
Auto Accordion Options

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

{autoaccordion|[<Options>]}

Example for Auto Accordion with the second Element open and no opacity transition
{autoaccordion|[display:1,opacity:false]}

{/autoaccordion}

Here are the individual options and their meaning:

Option Description
show:<value> The Index of the element to show at start as integer value. Defaults to 0.
display:<value> The Index of the element to show at start (with a transition). Defaults to 0.
fixedHeight:<value> If you want the elements to have a fixed height set the height in Pixels. Defaults to false.
fixedWidth:<value> If you want the elements to have a fixed width set the width in Pixels. Defaults to false.
height:<boolean> Will add a height transition to the accordion if true. Defaults to true.
width:<boolean> Will add a width transition to the accordion if true. Defaults to false. CSS mastery is required to make this work!
opacity:<boolean> Will add an opacity transition to the accordion if true. Defaults to true.
alwaysHide:<boolean> Will allow to hide all elements if true, instead of always keeping one element shown. Defaults to false.
CSS Style Sheet File for customization
moobot_autoaccordion.css

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

Demo & Source

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

Commercial Unlimited License only (Version 1.08 or higher)

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.

Content Tags
Content Tag Used for
{multiaccordion} Marks the beginning of a accordion content. All accordion content must be started with this tag to open a container for all accordion sections.
{/multiaccordion} Marks the end of a accordion content. All accordion content must be ended with this tag to close the container for all accordion sections.
{multiaccordion-section=<My Section Name>} Starts a new accordion section with its name after the equal sign.
{/multiaccordion-section} Ends the previously started accordion section, all text in between is now the content of that accordion section.
Example
{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}
Multiple Open Accordion Options

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

{multiaccordion|[<Options>]}

Example for Multi Accordion with all Elements closed and only allowing a single element open
{multiaccordion|[hideAll:true,allowMultipleOpen:false]}

{/multiaccordion}

Here are the individual options and their meaning:

Option Description
autoOpen:<boolean> Sets if elements open or close automatically when the mouse pointer is hovering over the toggle. Defaults to false.
openAll:<boolean> Open all elements on startup; defaults to true.
allowMultipleOpen:<boolean> Allows users to open more than one element at a time. Defaults to true.
fixedHeight:<integer> If you want your accordion to have a fixed height. Defaults to false.
fixedWidth:<integer> If you want your accordion to have a fixed width. Defaults to false.
alwaysHide:<boolean> If you want the ability to close your only-open item. Defaults to true.
wait:<boolean> Means that open and close transitions can cancel current ones (so if you click on items before the previous finishes transitioning, the clicked transition will fire canceling the previous). True means that if one element is sliding open or closed, clicking on another will have no effect. For Accordion defaults to false.
height:<boolean> Will add a height transition to the accordion if true. Defaults to true.
opacity:<boolean> Will add an opacity transition to the accordion if true. Defaults to true.
width:<boolean> Will add a width transition to the accordion if true. Defaults to false, CSS mastery is required to make this work!
CSS Style Sheet File for customization
moobot_multiaccordion.css

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

Demo & Source

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.

Content Tags
Content Tag Used for
{slide-vertical=<This slides name>} Starts a new sliding content with the name defined after the equal sign. This slide is open by default.
{/slide-vertical} Ends the open by default sliding content
{slide-vertical-closed=<This slides name>} Starts a new sliding content with the name defined after the equal sign. This slide is closed by default. (Optional)
{/slide-vertical-closed} Ends the closed by default sliding content
{slide-vertical-toggle=<This slides toggle name>} Starts a new toggle text for a following sliding content, the toggles text is defined after the equal sign. This creates only a link with the slides toggle name as toggle to open & close content located in a different content position.
{slide-vertical-content=<This slides toggle name>} Starts the corresponding sliding content to the toggle named after the equal sign. Use the same toggle name as with a previously used {slide-vertical-toggle=…} tag. This content is open by default.
{slide-vertical-content-closed=<This slides toggle name>} Same as {slide-vertical-content=…} and that content is closed by default.
{/slide-vertical-content} Ends any previously started slide content.
Example
{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}
Options

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:

Option Description
class:“<value>” Adds the class passed in <value> to the CSS class of the slide toggle link. Allows to style individual links.
Example: class:“icon-link”
duration:<value>Sets the duration of the sliding effect in ms. Defaults to 500.
Example: duration:2500
transition:<fx.transition>Sets the type of transition to get used for the sliding effect as any transition out of the Fx.Transitions Class of mooTools. Defaults to Fx.Transitions.Sine.easeInOut.
Example: transition:Fx.Transitions.Quad.easeOut
hide:<value>Sets if this slide shall be hidden on default, as opposed to be shown as by default. Defaults to false.
Example: hide:true
width:<value>Sets the Width of the sliding content in pixels. Use this to size the sliding content.
Example: width:200
height:<value>Sets the Height of the sliding content in pixels. Use this to size the sliding content.
Example: height:150

Options Example

{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}
CSS Style Sheet File for customization
moobot_slide-vertical.css

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

Demo

Commercial Unlimited License only (Version 1.19 or higher)

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

Content Tags
Content Tag Used for
{marquee} Marks the beginning of a Marquee container.
{/marquee} Marks the end of a Ticker container.
Examples

Marquee

{marquee}
This text scrolls right through. And some more follows...
{/marquee}
Options

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

{marquee|[<Options>]}

Example for Options

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

{/marquee}


Here are the individual options and their meaning:

Option Description
width:<value> The width of the Marquee container, in pixels. Defaults to 150.
Example: width:400
height:<value> The height of the Marquee container, in pixels. Defaults to 150.
Example: height:200
class:<string> Sets the CSS class for this Marquee container.
Example: class:“marquee-news”
direction:<string> Sets the scroll direction of the ticker. Defaults to “vertical”. Options are: “vertical”, “horizontal”.
Example: direction:“horizontal”
speed:<value> The speed in which the Marquee shall scroll forward in ms. Defaults to 50.
Example: speed:5000
step:<value> The step between each scroll in pixels. Defaults to 1.
Example: step:3
CSS Style Sheet File for customization
moobot_marquee.css

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

Demo & Source

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

Commercial Unlimited License only (Version 1.17 or higher)

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

Content Tags
Content Tag Used for
{ticker} Marks the beginning of a Ticker container. Use the {ticker-item} tag to mark each individual ticker element.
{/ticker} Marks the end of a Ticker container.
{ticker-item} Marks the start a individual Ticker element.
{/ticker-item} Marks the end of a individual Ticker element.
Examples

Ticker with elements

{ticker}
{ticker-item}I am Ticker Item 1{/ticker-item}
{ticker-item}I am Ticker Item 2{/ticker-item}
{ticker-item}I am Ticker Item 3 with a <a href="http://some.link.tld">link</a>{/ticker-item}
{/ticker}
Options

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

{ticker|[<Options>]}

Example for Options

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

{/ticker}


Here are the individual options and their meaning:

Option Description
width:<value> The width of the Ticker container, in pixels. Defaults to 100.
Example: width:400
height:<value> The height of the Ticker container, in pixels. Defaults to 100.
Example: height:150
class:<string> Sets the CSS class for this Ticker container and all subsequent elements.
Example: class:“ticker-news”
direction:<string> Sets the scroll direction of the ticker. Defaults to “vertical”. Options are: “vertical”, “horizontal”.
Example: direction:“horizontal”
reverse:<boolean> Set to true will reverse the scroll direction from left to right. Defaults to false.
Example: reverse:true
speed:<value> The speed in which the ticker shall scroll forward in ms. Defaults to 1000.
Example: speed:5000
delay:<value> The delay between each item scroll in ms. Defaults to 5000.
Example: delay:3000
transition:<value> Select the type of Transition as offered by the Fx.Transitions Class of mooTools. Defaults to Fx.Transitions.Sine.easeInOut.
Example: transition:Fx.Transitions.Elastic.easeOut
itemWidth:<value> Sets the width in pixels for any ticker-item of the current container. Defaults to false, meaning no width is applied.
Example: itemWidth:150
itemHeight:<value> Sets the height in pixels for any ticker-item of the current container. Defaults to false, meaning no height is applied.
Example: itemHeight:150
fade:<boolean> When set to true fades the item being scrolled out first. Defaults to false.
Example: fade:true
fadeDuration:<value> Sets the duration for the fade effect in ms. Defaults to 500.
Example: fade:250

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

Example for single Ticker Item CSS styling

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

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

Demo & Source

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

Commercial Unlimited License only (Version 1.14 or higher)

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.

Content Tags
Content Tag Used for
{pageload=<Content ID>} Starts a new content link for the content article with <Content ID>.
{/pageload} Ends a previously started content link, the text in between will form the Link Text.
{pageload-container} Defines the position of the Container into which the Content ID's will get loaded.
{pageload-container=area51} Defined the position of the Container named area51 into which the Content ID's will get loaded. Use the container option with the links to assign an specific container to a link.
Pageload Options

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

{pageload=31|[<Options>]}

Example

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

...

{pageload-container=area51}



Here are the individual options and their meaning:

Option Description
container:<string>Defines a named container into which the links content will get loaded. Use the same container name for the {pageload-container=…} tag to place the container into the text.
Example: container:“area51”
title:<string>Allows to define a TITLE property for the link.
Example: title:“Some wonderful link title”
Pageload-Container Options

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

{pageload-container|[<Options>]}

Example

{pageload-container|[waiter:true]}

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



Here are the individual options and their meaning:

Option Description
load:<value>Set this option to load the content of a particular {pageload} link into its container at start. Counts from '1' to the number of {pageload} links of each container.
Example: load:1 to load the content of the first {pageload} link into the container when then page loads.
waiter:<boolean>Set to true will display a waiter throbber over the current activated link while the new page loads. Defaults to false.
Example: waiter:true
effects:<boolean>Set to true will enable transition effects between the individual loaded pages. Defaults to true.
Example: effects:false
duration:<value>Defines the duration in ms for the transition effects. Defaults to 1000.
Example: duration:2000
transition:<value> Select the type of Transition as offered by the Fx.Transitions Class of mooTools. Defaults to Fx.Transitions.Sine.easeInOut.
Example: transition:Fx.Transitions.Quad.easeInOut
Example

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]}
CSS Style Sheet File for customization
moobot_pageload.css

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

Demo & Source

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.

Content Tags
Content Tag Used for
{kwicks} Starts a new Kwicks container that will contain one or more individual Kwick elements.
{/kwicks} Ends any Kwicks container.
{kwick} Begins a new individual Kwick element.
{kwick=<some CSS style name>} Begins a new individual Kwick element with named CSS style. See example for more on this. (Optional)
{/kwick} Ends any individual Kwick element, the content between here and any {kwick} will be this Kwick's content.
Example
{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}
CSS Style Sheet File for customization
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:

moobot_kwicks.css

/*
* 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;
}
Demo & Source

Transcorners creates styled corners of boxed content.

Content Tags
Content Tag Used for
{transcorners}Starts a new Transcorner styled corner container, the containers content to get used needs to start after this tag.
{/transcorners}Ends a previously started Transcorner container, the content enclosed will be the content of the styled corner box.

Example

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

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:

Option Description
sides:<value>Defines the sides the styled corners shall get applied. When omitted all corners are styled.
Example: top-left bottom

Side Options

top … only top corners
top-left,top-right … only top left or top right corner
bottom … only bottom corners
bottom-left,bottom-right … only bottom left or bottom right corner
left … add left border
right … add right border
radius:<value>Sets the Border Radius, experiment with different values as this is not exactly in pixels.
Example: radius:100
borderColor:<value>Sets the Border Color of the styled corners and sides. Use a color name or Hex-Value.
Example: borderColor:#f0f0f0
backgroundColor:<value>Sets the Background Color of the box content. Use a color name or Hex-Value.
Example: backgroundColor:#f0f0f0
transition:<class>Use a different Transition than rounded. Accepts any mooTools Effects class. Currently the same Transition effect is applied to all styled corners.
Example: transition:Fx.Transitions.linear for straight linear corners
css:<classname>Add a CSS class style to the boxed content. Use any class name of your stylesheet.
Example: css:mybox
Limitations

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.
CSS Style Sheet File for customization
moobot_transcorners.css

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

Demo & Source

Based upon Inviz's Transcorners.

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

Content Tags
Content Tag Used for
{mootable}Starts a new mooTable container, the table to get used needs to start after this tag.
{/mootable}Ends a previously started mooTable container, the content enclosed will be the content of the MooTable.

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}
MooTable Options

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:

Option Description
height:<value>Defines the Height of the Table in Pixels.
Example: height:400
resizable:<true><false>Sets if the Table shall be resizeable. Defaults to true.
Example: resizable:true
sortable:<true><false>Sets if the Table shall allow sortable columns. Defaults to true. Example:
sortable:false
useloading:<true><false>Show a loading throbber while preparing the Table. Defaults to true. Example:
useloading:false
CSS Style Sheet File for customization
moobot_mootable.css

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

Demo & Source

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

Commercial Unlimited License only (Version 1.09 or higher)

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

Content Tags
Content Tag Used for
{chart} Marks the start for the table source which will get converted into a Chart.
{/chart} Marks the end for the table source which will get converted into a Chart.

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}
Chart Options

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:

Option Description
type:“<value>” Defines the chart type to be plotted. The default is a Bar Chart:
bars … Creates a Bar Chart
lines … Creates a Line Chart
pie … creates a Pie Chart
width:<value> Defines the chart width as integer value. Defaults to 550.
height:<value> Defines the chart width as integer value. Defaults to 350.
barOrientation:“<value>” Sets the orientation of chart bars: vertical or horizontal
shouldFill:<boolean> When set to true sets the plotted areas shall to be filled, set to false only the bordering lines will be plotted. Defaults to true
colorScheme:“<value>” Sets the name of a color scheme to use for the Chart. Allows any named CSS color. Defaults to blue.
legend:<boolean> When set to true displays the charts legend. Defaults to false.
legendTitle:“<value>” Sets the Title of the Legend. Defaults to an empty Title.
showInSide:<value> Set to true the Legend will be displayed inside the Chart Area, set to false outside the Chart Area. Defaults to true
legendWidth:<value> Sets the Width of the Legend Area as Integer Value.
colors:[“<value>”,“<value>”…] Allows to set any color for the first, second, third,… Graph as CSS Hex-Color. Example: colors:[“#22AA22”,“#77AA77”,“#99AA99”]

Additional extended options allow to control the Chart Layout:

Option Description
drawBackground:<boolean> Whether a background should be drawn: true, false.
backgroundLineColor:“<value>” Color of background lines as CSS Hex-Color. Example: “#22AA22”
backgroundColor:“<value”> Background color as CSS Hex-Color. Example: “#22AA22”
padding:{<value>, <value>…} Padding values for the Chart. Example: padding:{left:50,right:50,top:50,bottom:50}
colorScheme:[“<value>”,“<value>”…] Array of colors as CSS Hex-Color used for the chart. Example: colors:[“#22AA22”,“#77AA77”,“#99AA99”]
strokeColor:“<value>” Color of a stroke as CSS Hex-Color.
strokeWidth:<value> Width of a stroke as Number.
shouldStroke:<value> Whether strokes should be drawn as Boolean value: true, false
drawXAxis:<value> Whether the X axis should be drawn as Boolean value: true, false
drawYAxis:<value> Whether the Y axis should be drawn as Boolean value: true, false
axisTickSize:<value> Size of a tick in pixels as Number.
axisLineColor:“<value>” Color of axis lines as CSS Hex-Color.
axisLineWidth:<value> Line width of axis as integer Number
axisLabelColor:“<value>” Axis label color as CSS Hex-Color.
axisLabelFont:“<value”> Font family used for labels.
axisLabelFontSize:“<value>” Font size used for labels as value.
axisLabelWidth:<value> Axis label width as Number.
barWidthFillFraction:<value> Sets the bar width (>1 will cause bars to overlap each other) as Integer Value.
xOriginIsZero:<value> Whether or not the origin of the X axis starts at zero as Boolean Value: true, false
yOriginIsZero:<value> Whether or not the origin of the Y axis starts at zero as Boolean Value: true, false
xAxis:[<xmin>,<xmax>] Minimum (<xmin>) and Maximum (xmax) Values of xAxis as Numbers.
yAxis:[<ymin>,<ymax>] Minimum (<ymin>) and Maximum (ymax) Values of yAxis as Numbers.
xTicks:<value> Labels for the X axis as Object Value: [{label: “somelabel”, v: value}, ..] (label is optional).
Example: xTicks:[{label:“Label 1”, v:10},{label:“Label 2”,v:20}]
yTicks:<value> Labels for the Y axis as Object Value: [{label: “somelabel”, v: value}, ..] (label is optional).
Example: yTicks:[{label:“Label 1”, v:10},{label:“Label 2”,v:20}]
xNumberOfTicks:<value> Number of ticks on X axis when xTicks is null as Integer Value.
yNumberOfTicks:<value> Number of ticks on Y axis when yTicks is null as Integer Value.
xTickPrecision:<value> Decimals for the labels on the X axis as Integer Value.
yTickPrecision:<value> Decimals for the labels on the Y axis as Integer Value.
shadow:<value> Whether or not to show shadow as Boolean Value: true, false
CSS Style Sheet File for customization
moobot_chart.css

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

Demo & Source

This plugin integrates Plootr and MooTools/Charts.

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

Content Tags
Content Tag Used for
{windoo=<Window Title>}Starts a new Window content container with <Window Title> as it's title and Link represented to open this windoo Window.
{/windoo}Ends a previously started Window content container, the content enclosed will be the content of the windoo Window.
{windoo-url=<Some URL>}Creates a windoo Window with the content loaded from <Some URL>. This tag also starts the windoo Link Title. <Some URL> must be a server path that delivers a full HTML page
{/windoo-url}Ends the windoo Link Title of a URL based Window.

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}
Window Options

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:

Option Description
autoopen:<true><false>Sets if the Window shall open by itself when the browser has completed loading the page. Defaults to false.
Example: autoopen:true
container:<value>Allows to load a Window into a DIV Container with the given ID of the DIV Container.
Example: container:my_div_container
width:<value>Defines the Width of the Window in Pixels.
Example: width:400
To size relative to the clients browser window size, use negative values. Example: width:-10
height:<value>Defines the Height of the Window in Pixels.
Example: height:200
To size relative to the clients browser window size, use negative values. Example: height:-10
top:<value>Defines the Top position of the Window in Pixels.
Example: top:100
left:<value>Defines the Left position of the Window in Pixels.
Example: left:600
center:<true><false>Sets if the Window shall be centered in the Container or Browser Window. Defaults to false.
Example: center:true
resizeable:<true><false>Sets if the Window will be resizeable. Defaults to false.
Example: resizeable:true
draggable:<true><false>Sets if the Window will be draggable. Defaults to false.
Example: draggable:true
restrict:<true><false>Sets if any Window movement will be restricted to the container bounds. Defaults to true. Example:
restrict:false
theme:“<Theme Name>“Sets optional Window theme. Available Theme Names are (use case-sensitive):

Windoo Themes

aero - Aero Theme
aqua - Aqua Theme
apogeus - Apogeus Theme

Example: theme:“aero”

shadow:<true><false>Sets if the Window shall show a shadow if such is defined by the Theme. Defaults to true.
Example: shadow:false
modal:<true><false>Sets if the Window is modal. Defaults to false.
Exmaple: modal:true
ghost{resize:<true><false>, move:<true><false>}Defines if Window shall be ghosted while resize or move.
Examples:
ghost{resize:true}
ghost{resize:false,move:true}
buttons:{menu:<value>, close:<value>, minimize:<value>, roll:<value>, maximize:<value>}Defines which Window Control buttons are visible and their state.

Windoo Buttons states

true - Button visible
false - Button hidden


Example: buttons:{menu:false,maximize:false}

CSS Style Sheet File for customization
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.

Demo & Source

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

Commercial Unlimited License only (Version 1.12 or higher)

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

Content Tags
Content Tag Used for
{mocha=<Window Title>}Starts a new Window content container with <Window Title> as it's title and Link represented to open this Mocha Window.
{/mocha}Ends a previously started Window content container, the content enclosed will be the content of the Mocha Window.
{mocha-url=<Some URL>}Creates a windoo Window with the content loaded from <Some URL>. This tag also starts the Mocha Link Title. <Some URL> must be a server path that delivers a full HTML page
{/mocha-url}Ends the windoo Link Title of a URL based Window.

Example

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

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

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

Example

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

Option Description
autoopen:<true><false>Sets if the Window shall open by itself when the browser has completed loading the page. Defaults to false.
Example: autoopen:true
width:<value>Defines the Width of the Window in Pixels.
Example: width:400
To size relative to the clients browser windows size, use negative values. Example: width:-10
height:<value>Defines the Height of the Window in Pixels.
Example: height:200
To size relative to the clients browser window size, use negative values. Example: height:-10
x:<value>Defines the Top position of the Window in Pixels. By default the window is screen centered.
Example: x:100
y:<value>Defines the Left position of the Window in Pixels. By default the window is screen centered.
Example: y:600
modal:<boolean>If set to true sets the window to be modal. Defaults to false
Example: modal:true
scrollbars:<boolean>If set to true the window will show scrollbars when its content is exceeding the available inner size. Defaults to true.
Example: scrollbars:false
CSS Style Sheet File for customization
moobot_mocha.css

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

Demo & Source

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

Commercial Unlimited License only (Version 1.15 or higher)

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

Content Tags
Content Tag Used for
{slidebox=<Link Title>}Starts a new SlideBox content container with <Link Title> as it's title and Link represented to open this SlideBox Window.
{/slidebox}Ends a previously started SlideBox content container, the content enclosed will be the content of the SlideBox Window.
{slidebox-url=<Some URL>}Creates a SlideBox Window with the content loaded from <Some URL>. This tag also starts the SlideBox Link Title. <Some URL> must be a server path that delivers a full HTML page
{/slidebox-url}Ends the SlideBox Link Title of a URL based Window.
{slidebox-ajax=<Some AJAX URL>}Creates a SlideBox Window with the content loaded as AJAX content from <Some AJAX URL>. This tag also starts the SlideBox Link Title. <Some URL> must be a server path that delivers a full HTML page
{/slidebox-ajax}Ends the SlideBox Link Title of a AJAX based Window.

Example

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

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

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

Example

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

Option Description
autoopen:<true><false>Sets if the SlideBox shall open by itself when the browser has completed loading the page. Only use this once in a page. Defaults to false.
Example: autoopen:true
side:<string>Defines the Browser Side where to slide in from. Accepts “top” “bottom” “left” “right”. Defaults to “bottom”.
Example: side:“left”
align:<value>Sets if the SlideBox shall get aligned. When set to false the SlideBox will get left aligned for side:“top”|”bottom”|“left” and right for side:“right”. Accepts “top” “bottom” “left” “right” “center”. Defaults to false.
Example: align:“center”
width:<value>Defines the Width of the SlideBox in Pixels. When set to false sets the Width to the current Browser window width and applies the widthFactor. Defaults to false.
Examples: width:false width:400
height:<value>Defines the Height of the SlideBox in Pixels. When set to false sets the Height to the current Browser window height and applies the heightFactor. Defaults to 200.
Examples: height:false height:200
widthFactor:<value>Sets the Factor of the total browser width applied when upon width:false. Any number from 0.1 to 1.0. Defaults to 0.98.
Example: widthFactor:0.5
heightFactor:<value>Sets the Factor of the total browser height applied when upon height:false. Any number from 0.1 to 1.0. Defaults to 0.98.
Example: heightFactor:0.5
autoSize:<boolean>Sets if the size of the SlideBox shall be automatically determined by the size of its content. Defaults to false.
Example: autoSize:true
offsetX:<value>Sets an position offset in Pixels for the SlideBox when open, on X-Axis (or browser width), and allows to position the SlideBox off the browser side. Defaults to 0.
Example: offsetX:50
offsetY:<value>Sets an position offset in Pixels for the SlideBox when open, on Y-Axis (or browser height), and allows to position the SlideBox off the browser side. Defaults to 0.
Example: offsetY:50
opacity:<value>Sets the Opacity of the SlideBox as value between 0.1 and 1.0. Defaults to 0.9.
Example: opacity:0.5
zIndex:<value>Sets the zIndex of the SlideBox as integer Value. Set this high enough to have the SlideBox above all other content. Defaults to 900.
Example: zIndex:500
duration:<value>Sets the duration of the sliding effect in ms. Defaults to 1700.
Example: duration:2500
transition:<fx.transition>Sets the type of transition to get used for the sliding effect as any transition out of the Fx.Transitions Class of mooTools. Defaults to Fx.Transitions.Bounce.easeOut.
Example: transition:Fx.Transitions.Quad.easeOut
overlay:<boolean>Set to true applies an Overlay effect across the underlying document. Defaults to true.
Example: overlay:false
opacityOverlay:<value>Sets the Opacity of the Overlay effect as value between 0.1 and 1.0. Defaults to 0.5.
Example: opacityOverlay:0.2
backgroundOverlay:<string>Defines the Color as HEX-Value used for the Overlay effect. Defaults to “#000000”.
Exmaple: backgroundOverlay:“#0A0B0C”
waiter:<boolean>Set to true invokes a waiting throbber for URL or AJAX based content. Defaults to false.
Example: waiter:true
innerWidth:<value>Defines the width of an URL or AJAX content. When set to false SlideBox determines the size for the URL or AJAX content based on the size given with width. Defaults to false.
Example: innerWidth:300
innerHeight:<value>Defines the height of an URL or AJAX content. When set to false SlideBox determines the size for the URL or AJAX content based on the size given with height. Defaults to false.
Example: innerHeight:200
CSS Style Sheet File for customization
moobot_slidebox.css

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

Demo & Source

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

Commercial Unlimited License only (Version 1.18 or higher)

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.

Content Tags
Content Tag Used for
{popup-url=<URL>}Starts the Browser Popup Link and assigns the <URL> to load to that link.
{/popup-url}Ends a previously started Popup Link, the content enclosed will be the link text.

Example

{popup-url=http://www.google.com}Do a Google Search...{/popup-url}


Window Options

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

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

Example for 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:

Option Description
waiter:<boolean>Set to true shows a waiter throbber over the Popup Link while the Popup Window is loaded. Defaults to false.
Example: waiter:true
width:<value>Defines the Width of the Window in Pixels.
Example: width:400
To size relative to the clients screen resolution, use negative values. Example: width:-10
height:<value>Defines the Height of the Window in Pixels.
Example: height:200
To size relative to the clients screen resolution, use negative values. Example: height:-10
x:<value>Defines the Top position of the Window in Pixels. Defaults to 50.
Example: x:100
y:<value>Defines the Left position of the Window in Pixels. Defaults to 50.
Example: y:600
center:<boolean>If set to true sets the Window to be centered across the screen. Defaults to false.
Example: center:true
toolbar:<value>Set to 0 hides the Browsers Toolbar, set to 1 shows it. Defaults to 0.
Example: toolbar:1
location:<value>Set to 0 hides the Location in the Browser, set to 1 shows it. Defaults to 0.
Example: location:1
directories:<value>Set to 0 hides the Directory in the Browser, set to 1 shows it. Defaults to 0.
Example: directories:1
status:<value>Set to 0 hides the Status Bar in the Browser, set to 1 shows it. Defaults to 0.
Example: status:1
scrollbars:<string>Controls the Browsers Scrollbars: 'auto' shows them if required, 'no' shows none, 'yes' shows them all the time.
Example: 'auto'
resizeable:<value>Set to 1 allows the user to resize the Browser Window, set to 0 makes the size fixed. Defaults to 1.
Example: resizeable:0
Demo

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

Commercial Unlimited License only (Version 1.18 or higher)

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

Content Tags
Content Tag Used for
{mediabox-url=<URL>}Starts the Popup Link and assigns the URL to load in the Popup.
{/mediabox-url}Ends a previously started Popup Link, the content enclosed will be the link text.

Example

{mediabox-url=http://www.google.com}Do a Google Search...{/mediabox-url}


Window Options

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

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

Example for 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:

Option Description
width:<value>Defines the Width of the Window in Pixels. Defaults to 640.
Example: width:400
To size relative to the clients browser window size, use negative values. Example: width:-10
height:<value>Defines the Height of the Window in Pixels. Defaults to 360.
Example: height:200
To size relative to the clients browser window size, use negative values. Example: height:-10
initialWidth:<value>Defines the initial Width of the Window in Pixels when being opened. Defaults to 360.
Example: initialWidth:200
initialHeight:<value>Defines the initial Height of the Window in Pixels when being opened. Defaults to 360.
Example: initialHeight:200
topDistance:<value>Defines the distance of the MediaBox window from the browser window top. Defaults to 100.
Example: topDistance:100
makefullscreen:<value>Allows to define a percentage of the current browser window size to which the Window will get sized full screen to. Accepts values between 0.1 (10%) and 1 (100%).
Example: makefullscreen:0.8
bgcolor:<value>Allows to set the Background color of the window. Either as HEX-Color value or as Color Name. Defaults to black.
Example: bgcolor:#102030
fullscreen:<boolean>When set to true displays a fullscreen button. Defaults to false.
Example: fullscreen:true
zindex:<value>Allows to set the zIndex. Defaults to 1000.
Example: zindex:500
CSS Style Sheet File for customization
moobot_mediabox.css

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

Demo & Source

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

Commercial Unlimited License only (Version 1.18 or higher)

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

Content Tags
Content Tag Used for
{multibox-url=<URL>}Starts the Popup Link and assigns the URL to load into the Popup.
{/multibox-url}Ends a previously started Popup Link, the content enclosed will be the link text.

Example

{multibox-url=http://www.google.com}Do a Google Search...{/multibox-url}


Examples

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}


Window Options

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

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

Example for 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:

Option Description
width:<value>Defines the Width of the Window in Pixels. Defaults to 640.
Example: width:400
To size relative to the clients browser window size, use negative values. Example: width:-10
height:<value>Defines the Height of the Window in Pixels. Defaults to 360.
Example: height:200
To size relative to the clients browser window size, use negative values. Example: height:-10
initialWidth:<value>Defines the initial Width of the Window in Pixels when being opened. Defaults to 250.
Example: initialWidth:200
initialHeight:<value>Defines the initial Height of the Window in Pixels when being opened. Defaults to 250.
Example: initialHeight:200
useOverlay:<boolean>Defines if the parent window shall receive a greay overlay when the Window opens. Defaults to false.
Example: useOverlay:true
description:<string>Set some additional description for this window.
Example: description:“This is some nice window here.”
showDescription:<boolean>Defines if a window description shall be displayed. Contains the Link Title and the optional Description. Defaults to true.
Example: showDescription:false
contentColor:<value>Sets the Color of the content area as Hex-Color value. Defaults to #FFFFFF.
Example: contentColor: #F0A0B0
CSS Style Sheet File for customization
moobot_multibox.css

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

Demo & Source

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

Commercial Unlimited License only (Version 1.13 or higher)

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.

Content Tags
Content Tag Used for
{popup=<Content ID>}Starts the Popup Link and assigns the Content Item with Content ID to that link.
{/popup}Ends a previously started Popup Link, the content enclosed will be the link text.

Example

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

Loading a different template for the Popup

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

Using the Itemid for the Popup

{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.

In case the defined template is not found, the Popup Window will stay blank. Check your template name then.

This requires the MooBot System Helper plugin to be installed and published to allow temporary switching of the Template. With the MooBot System Helper plugin the Template also remains for any further site navigation in the popup.
Window Options

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

{popup=12|[<Options>]}

Example for 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.

Demo

A demonstration is available at the MooBot Product Page.

Commercial Unlimited License only (Version 1.13 or higher)

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.

Content Tags
Content Tag Used for
{popup-windoo=<Content ID>}Starts the Popup Link and assigns the Content Item with Content ID to that link.
{/popup-windoo}Ends a previously started Popup Link, the content enclosed will be the link text.

Example

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

Loading a different template for the Popup

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

Using the Itemid for the Popup

{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.

In case the defined template is not found, the Popup Window will stay blank. Check your template name then.

This requires the MooBot System Helper plugin to be installed and published to allow temporary switching of the Template. With the MooBot System Helper plugin the Template also remains for any further site navigation in the popup.
Window Options

This Plugin supports the same Options as the Windoo Plugin.

CSS Style Sheet File for customization

This Plugin uses the same CSS as the Windoo Plugin.

Demo

A demonstration is available at the MooBot Product Page.

Commercial Unlimited License only (Version 1.13 or higher)

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.

Content Tags
Content Tag Used for
{popup-mocha=<Content ID>}Starts the Popup Link and assigns the Content Item with Content ID to that link.
{/popup-mocha}Ends a previously started Popup Link, the content enclosed will be the link text.

Example

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

Loading a different template for the Popup

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

Using the Itemid for the Popup

{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.

In case the defined template is not found, the Popup Window will stay blank. Check your template name then.

This requires the MooBot System Helper plugin to be installed and published to allow temporary switching of the Template. With the MooBot System Helper plugin the Template also remains for any further site navigation in the popup.
Window Options

This Plugin supports the same Options as the Mocha Plugin.

CSS Style Sheet File for customization

This Plugin uses the same CSS as the Mocha Plugin.

Demo

A demonstration is available at the MooBot Product Page.

Commercial Unlimited License only (Version 1.13 or higher)

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.

Content Tags
Content Tag Used for
{popup-mediabox=<Content ID>}Starts the Popup Link and assigns the Content Item with Content ID to that link.
{/popup-mediabox}Ends a previously started Popup Link, the content enclosed will be the link text.

Example

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

Loading a different template for the Popup

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

Using the Itemid for the Popup

{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.

In case the defined template is not found, the Popup Window will stay blank. Check your template name then.

This requires the MooBot System Helper plugin to be installed and published to allow temporary switching of the Template. With the MooBot System Helper plugin the Template also remains for any further site navigation in the popup.
Window Options

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

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

Example for Options

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


Window Options

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

CSS Style Sheet File for customization
moobot_mediabox.css

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

Demo & Source

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

Commercial Unlimited License only (Version 1.14 or higher)

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.

Content Tags
Content Tag Used for
{popup-multibox=<Content ID>}Starts the Popup Link and assigns the Content Item with Content ID to that link.
{/popup-multibox}Ends a previously started Popup Link, the content enclosed will be the link text.

Example

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

Loading a different template for the Popup

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

Using the Itemid for the Popup

{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.

In case the defined template is not found, the Popup Window will stay blank. Check your template name then.

This requires the MooBot System Helper plugin to be installed and published to allow temporary switching of the Template. With the MooBot System Helper plugin the Template also remains for any further site navigation in the popup.
Window Options

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

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

Example for 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.

CSS Style Sheet File for customization
moobot_multibox.css

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

Demo & Source

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

Commercial Unlimited License only (Version 1.15 or higher)

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.

Content Tags
Content Tag Used for
{popup-slidebox=<Content ID>}Starts the Popup Link and assigns the Content Item with Content ID to that link.
{/popup-slidebox}Ends a previously started Popup Link, the content enclosed will be the link text.

Example

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

Loading a different template for the Popup

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

Using the Itemid for the Popup

{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.

In case the defined template is not found, the Popup Window will stay blank. Check your template name then.

This requires the MooBot System Helper plugin to be installed and published to allow temporary switching of the Template. With the MooBot System Helper plugin the Template also remains for any further site navigation in the popup.
Window Options

This Plugin supports the same Options as the SlideBox Plugin.

CSS Style Sheet File for customization

This Plugin uses the same CSS as the SlideBox Plugin.

Demo

A demonstration is available at the MooBot Product Page.