SJ Sticky Any Module

1 1 1 1 1 Rating 4.66 (35 Votes)

 compat 30

sticky-any-module
“SJ Sticky any Module “ it’s a new and innovative way to present all your module’s on your website. This new concept give you the chance to display you modules in every point and corner of your website without limit.images

 

Demo

For demo click the arrows on the side of the web page to see it in action.

Quick install guide

1. Log in to the Joomla administration back-end.

2. Select Extensions --> Install/Uninstall from the top menu.

3. In the panel Upload package file, click Browse and locate the installation package you have downloaded to your local computer.

4. Click the button Upload & Install.

5. Select Extensions -->Module Manager from the top menu and click SJ Sticky Any Module in the list.

6. Open the module and folow the setup.

 

Setup

Setup Sticky Any Module

1. Positioning:
Let's  set where we want to stick, i said here to sit at 0px distance from the right side of the screen and at 330px from the top.

positioning

2. Custom position:
This is the main feature that "Sticky any module" has and basically creates a custom module position that can be named whatever you want and saves'it for later use.
So let's create a position named "SJ_Sticky".

create custom position

3. Setup appearance:
The appearance options are pretty straight forward, tho i will explain them a bit:

Starting position - let you choose if the module will start opened or closed.

Enable Flip Bar - the "Flip Bar" is a bar wich can be clicked to open the module. By enabling/disabling this bar various types of sticky stuff can be set, for instance for a banner that must be always visible this must be hidden (disabled), tho for a login module this comes in handy because we don't always need to be visible.

Flip bar text align - it's used to align the text from the bar

Flip bar background, and text color - gives a specific color to the bar and the text on it

Flip bar Height and Width - gives the size of the width and height of the bar in pixels

Flip bar icon - a set of icons are available to place on the bar near the text, aditional icons can be added by request

Flip bar position - The position of the flip bar depending on the positioning. For ex: if the module is positioned on the right side of the screen (Margin Right: 0) the "Vertical Left" option must be used, if is on the left (Margin Left: 0) then "Vertical Right" must be used, for Top and Bottom positioning the "Top" option.

Transitions - to spice things a bit a set of 10 effects are available for use. However depending of the module you want to stick some of them might work or might not work. The default one tho works for evrything.

appearance

 

4. CSS Options

Because of the verry large number of modules supported by our application a custom css has been added to maximise the flexibility.
Tho is not required, some knowledge of css can be handy here. 

The basic div we start here as holder, is named dinamically with id="sj_sticky_any_module_yourcustomposition". As illustrated bellow to add a custom transparent background to the position "SJ_Stycky" defined above we use

#sj_sticky_any_module_SJ_Sticky{background:rgba(0, 0, 0, 0.37);} .

In the same manner we have class="flip_yourcustomposition" for the flip bar and class="panel_yourcustomposition" for the interior.

css options

5. Publishing

For publishing we look on the left side of the screen; I will show only the key options.

a. First we type a title.

title

 

b. We set a position. For this module any position can be used, depending on how manny pages you want to publish. For example to publish on all the website i will choose the "debug" position, because is a site wide position. Aswell positions from the left or right columns are visible on all pages.

select debug position

c. We check to be published, on the status option.

status published

d. Module Assignement - because i want to publish on all the pages will select "On all pages", for specific pages select accordingly

module assignement

6. Save and exit.

After the settings are in place is time to select what module we want to stick at the place we just setup. It can be anything a facebook/twitter module, a video player, a banner you name it. How we gona do that? Follow me.

7. Stick your module

Once the "SJ Sticky Any Module" is set we have a custom position at disposal to place any module we want to stick in there. For ex. let's take a simple login module, navigate to it and click on.

On Module Login left hand part we have the basic options.

All we need to do is type manually the position "SJ_Sticky" or what position name have you defined on Pct. 2 above. Save this module aswell and all is set. Enjoy. :)

login-demo

 

 


 

*In order to customize your module like the one in the demo, use the following options:

sticky ex

 

 

Version history

v1.0

  • options to allow setting up position of sticky
  • option to write any custom position
  • multiple module support
  • css option to add new css to customize your sticky
 

v1.1

  • starting position(how your sticky should to be opened or closed on the start of your page)
  • flip bar(option for show/hide toggle)
  • text bar alignment
  • bar text with color picker
  • flip bar adjustments
  • lots of icons for flip bar
  • any text on your flip bar
  • position your flip-bar
  • 9 effects for your close open sticky
 

v1.2

  • enable/disable jQuery
 

v1.3

  • flip-bar border radius 
  • flip bar font-size 
  • font-family 
  • open/close on mouse hover 
  • padding option between module and flip bar
 

v1.4

  • now support every ie version

 

Support

For any problems regarding our products do not hesitate to contact us on our suport emails:  This email address is being protected from spambots. You need JavaScript enabled to view it. This email address is being protected from spambots. You need JavaScript enabled to view it.  or place your questions, comments and critics in the comment form below.

You should also make sure :

  1. Joomla! is up to date and properly configured;
  2. Your SuperJoom products are up to date;
  3. The website is live and open to public (not localhost)

Contact

If you have any ideas or questions, please feel free to contact us using our contact data or the form below.

 
 
  *
 
  *
  *
 
  *
 
  *
 
  Please enter the characters displayed in the image into the adjacent input field. If you are not able to read them, click the adjacent button to generate a new image.
 
  * Mandatory field
 
Created using the Joomla DFContact component.


License
GNU General Public License

 

 

 

 

Comments   

 
+2 #2 David A. warner 2013-07-24 05:16
Just recently purchased this plugin from SJ. I did look up what it took to create a module position in a template and seems like too much work.. unless your a coder you can whip it up in seconds.

I like this plugin because it is exactly what I am looking for for creating module positions w/o the hassle of coding. It does have a option for css to control the parameters which is a nice tool.

Definitely well worth the purchase and other items here in this site. Not to mention that SJ staff have been extremely helpful in customization.

All the best,

Author - David A. Warner
Quote
 
 
-1 #1 Bizart 2012-11-22 13:00
:lol: :lol:
Quote
 

Add comment


Security code
Refresh