Also See
Introduction
Module Description
Module Features
Quick Start Guide
Compatibility
Module Installation
Module Configuration
Downloads
Change History
CSS Styling
JavaScript Effects
SOBI Clones
Warranty & Support
Sample Screen Shots
Demo Sites
Upgrading
Languages
Tips and Tricks
Module Template
| JavaScript Effects
(Only available with PRO version)
A 'sneak preview' of this module operating with JavaScript Effects enabled can be seen at http://test.aboututila.com/sobi2
In this Section
Description
General Description
Technical Description
Performance Issues
Joomla Caching Issues
Also see Module Configuration: Output Controls - JavaScript Effects (PRO version Only)
Also see JavaScript Effects - CSS styling.
Description
This module can optionally implement JavaScript effects based on the mootools JavaScript used by Joomla. The custom JavaScript used by the module is compatible with both mootools v1.11 (as used in Joomla 1.5.x) and mootools 1.2.x (planned for Joomla 1.6)
General Description
With JavaScript Effects enabled, instead of displaying all Selected Entries output by the module at the same time, the Entries are displayed one after the other in a 'viewing window' in the module position. This is advantageous if you want to display several selected Entries, but do not want to use a lot of 'on-screen' space.
The 'viewing window'.
In the example above, the Module has a blue border with Module Title shown. The 'viewing window' has a background color of 'pale blue'.
Below the 'viewing window' optional Controller 'buttons' can be displayed.
The Controller 'buttons' (highlighted in red)
With JavaScript Effects enabled, each Selected Entry to be displayed will 'transition' into the 'viewing window'. The transition type, direction, speed, duration, etc, of how each entry transitions into the 'viewing window' is configured in the module parameters.
There are two main types of transitions - Slide and Fade.
Fade
With 'Fade' enabled, each Entry gradually fades into the 'viewing window' (increases opacity/decreases transparency) while the previous Entry fades out of view (decreases opacity/increases transparency).
Slide
With the 'Slide' Effect enabled each Entry will move across the 'viewing window' and then stop in the location where the Entry would have been displayed if there was only one Entry to be displayed and the JavaScript Effects were disabled.
The manner is which each Entry will move is configured in both the 'Slide Direction" and 'Transition Type' parameters.
Slide Directions can be configured as 'From Left to Right', 'From Right to Left', 'From Top to Bottom' and 'From Bottom to Top'.
Transition Type can be configured as 'Linear', 'Bouncy', 'Elastic', etc.
(Refer http://www.mootorial.com/wiki/mootorial/06-fx/03-fx.transitions for details and demos of possible transition types)
The speed at which the Entry moves into it's final position is configured in the module parameter 'Transition Speed'.
The time the Entry remains in it's final position before the next Entry begins to transition into view is configured in the module parameter 'Transition Pause'
If the Effect is in 'Auto Transition' mode, each Entry will automatically transition into the 'viewing window'.
If a user moves their mouse over an Entry displayed in the 'viewing window', then the transitions will stop until the user moves their mouse to another position on the screen. This is the default behavior, but can be changed in the module parameter 'Pause Transition on mouse-over'.
The Controller 'Buttons'
The module can optionally display two Controller 'Buttons', NEXT and PREVIOUS 'Buttons'. If you have 'Auto Transition' = No and 'Pause Transition on mouse-over' = No, then you must display these buttons otherwise there is no mechanism for Users to display more than the first selected Entry.
The two Controller 'Buttons' are output as <a id="go-next">NextButtonText</a> and <a id="go-prev">PreviousButtonText</a> where NextButtonText and PreviousButtonText are defined in the module parameters. If you want to use an image instead of text, then set the parameter 'Use Text 'Buttons'' = No, and then add the appropriate CSS Styling to your Site Template to style the 'Button' anchors <a id="go-next"></a> and <a id="go-prev"></a> with your custom background images.
Technical Description
The JavaScript Effects are achieved by;
- loading the JavaScript file MyJoomlaInstallation/modules/mod_sobi2simplefeatured/javascript/effects.js
- loading the CSS file MyJoomlaInstallation/modules/mod_sobi2simplefeatured/css/effects.css
by including the tags
<link rel="stylesheet" href="MyJoomlaInstallation/modules/mod_sobi2simplefeatured/css/effects.css" type="text/css" media="screen" />
<script type="text/javascript" src="MyJoomlaInstallation/modules/mod_sobi2simplefeatured/javascript/effects.js"></script>
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
in the document HTML <head></head> section.
The file 'effects.js' contains a custom JavaScript Class which in turns uses Joomla mootools classes.
The file 'effects.css' contains the minimal CSS styling necessary for the effects to function.
When JavaScript Effects are enabled,
the module outputs;
- an additional 'Effects' HTML division,
<div id="Effect-Module-ID-xxx" class="Effects-Wrapper" style="height:yyypx;"></div>
where
xxx is the unique Module ID number as shown by Joomla Administrator->Module Manager, and,
yyy is the 'viewing window' height set in the module parameter 'Window Height (px)'
A unique Module ID number is required so that multiple copies of the module can be output by Joomla in the same document, each with different module parameter configurations.
This <div id="Effect-Module-ID-xxx" class="Effects-Wrapper" style="height:yyypx;"></div> acts as the 'viewing window'.
The JavaScript initializes this division with the CSS properties overflow:hidden;position:absolute;top:0;left:0;opacity:0;
- An additional <div class="Entries-Wrapper"> containing the individual Selected Entries <div class="entry"> divisions normally output by the module. The module 'effects.css' file sets the <div class="Entries-Wrapper"> and its contents to visibility:hidden;position:absolute;.
- An additional CSS Selector class, Entry-Effects-ID-xxx is added to each <div class="entry">
where
xxx is the unique Module ID number as shown by Joomla Administrator->Module Manager
This additional class is required so that different JavaScript Effects can be applied to different module positions.
When the document HTML is loaded;
- the Entry content wrapper HTML divisions <div class="entry"> are hidden.
- the JavaScript initially cycles through each Entry content wrapper, <div class="entry">, and 'injects' the contents of the division into the 'viewing window' division <div id="Effect-Module-ID-xxx" class="Effects-Wrapper" style="height:yyypx;"></div>
The method of 'injection' is defined by the 'Transition' parameters in the module configuration. The Transition is achieved by manipulating the appropriate CSS properties of <div class="entry"> in order to achieve the transition.
At the same time, the JavaScript moves the previous Entry out from the 'viewing window'.
- For example:
if the Transition was set to 'Slide right to left' and the Transition Time was set to Fast (3,000 msecs),
then
(i) the JavaScript would start by positioning <div class="entry"> 'outside the 'viewing window',
(by setting left:xxxpx on <div class="entry">
where
xxx is greater than the pixel width of <div id="Effect-Module-ID-xxx" class="Effects-Wrapper" style="height:yyypx;>") ,
(ii) then the JavaScript gradually reduces the position left:xxxpx on the <div class="entry"> down to zero at the rate of 30 times per second (the default mootools frame rate for transitions),
which will cause the Entry <div class="entry"> to 'slide' into view from the right hand side of the <div id="Effect-Module-ID-xxx" class="Effects-Wrapper" style="height:yyypx;> containing division.
(iii) At the same time the JavaScript is moving the Next Entry <div class="entry"> into the 'viewing window', it is moving the Previous Entry out of the 'viewing window' by decreasing the left:xxxpx position of the Previous Entry <div class="entry"> from zero to a negative number greater than the width of <div id="Effect-Module-ID-xxx" class="Effects-Wrapper" style="height:yyypx;>
Performance Issues
The JavaScript Effects utilize resources on the Client System to process the JavaScript.
The amount of resources used on the Client System can be reduced by;
- Limiting the number of module copies with JavaScript Effects enabled on any given 'page'.
- Setting 'Transition Speed' to faster speeds.
- Increasing 'Transition Pause' to a longer delay time.
Joomla Caching Issues
Joomla 1.5.x Module Caching has a known 'flaw' in that, if Module Caching is enabled using Joomla Global Caching (See module Advanced Parameters - Module Cache Control), Joomla does not output any module custom <head></head> tags used by the module.
The tags;
<link rel="stylesheet" href="MyJoomlaInstallation/modules/mod_sobi2simplefeatured/css/effects.css" type="text/css" media="screen" />
and
<script type="text/javascript" src="MyJoomlaInstallation/modules/mod_sobi2simplefeatured/javascript/effects.js"></script>
and since 'effects.js' also requires Joomla's mootools, the tag
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
need to be output in the document <head></head> tags for the JavaScript Effects to function.
Unfortunately, the only way around this problem is for these tags to be loaded by the Site Template when module JavaScript Effects and Joomla Global Caching are enabled.
The most appropriate way to do this is to add the following php code anywhere in your Site Template;
|
