Magic jQuery & CSS Templates (Guest Post)

Today it is our pleasure to have our first guest post on our jQuery blog. Bastien Liutkus from Binary Mind is a front-end dev/designer at CBS in france. He has developed Magic jQuery – a plugin that easy to use, flexible & optimized plugin for web Layout management & User Interaction Management. The plugin is featured on the official jQuery website: http://plugins.jquery.com/project/Magic.

See Live Demo
Download Page

About the Plugin

Magic jQuery was first created to fit the needs of huge traffic and SEO dependant websites and thus its specificities:

• minimal plugin size and optimized for reducing page loading time (35kB compressed)
• very flexible in order to be able to code a lot of templates and different kind of interactions in a very small time (I am alone at the front-end here for 5 huge traffic sites).
• SEO Help thanks to the independance of position of the content and it’s visible place on the webpage (such as subMenus that are up the page for the user but at the end for google)
• old browsers compatibles and transparent coding for specific behaviours of tablets / smartphones.

Technical Aspects

Technicaly the plugin has 5 main aspects :

1. Position : any element can have a fixed | absolute position with a translating offset if needed
   ex1 : you want #myElement to have a fixed position you would write: $(‘#myElement’).setPosition(“fixed”);
   ex2 : you want #myElement to have a fixed position at the offset (40px, 100px) you would write : $(‘#myElement’).setPosition({position:’fixed’, offset :{left:40, top:100});
2. Align : you can align any element to any other or to the screen in any direction.
   ex1 : you want to align a subMenu to the bottom/left of the menuItem you would write : $(‘#subMenu’).align({topIsBottomOf:”menuItem”, left:”menuItem”});
3. Limit: You can stop the natural movement of any element by limiting it by any other element or the screen.
   ex1 : you want #myElement never to go out up the screen when you scroll : $(‘#myElement’).limit({top:””});
   Note : Basically any weird mix of align/limit and position works thus you can start thinking of funny stuffs.
4. Menus : the goal is unifying implementation of carrousels, menu, mega drop down menus, tabs etc. All are menus. It is easy to associate a subMenu to an item, and add some parameters to it if needed for specialized behaviour.
   ex : $(“#anElement”).setSubMenu(“mySubMenu”)
   Menu actions : openMenu, closeMenu, openNext, openPrev, play, stop
5. Messages : you can create messages from any element. If desired, you can specify many parameters such as of course its html content, its relative position, the lifetime it has if no mouse get over him etc…

Author: Bastien Liutkus from Binary Mind – a front-end dev/designer at CBS in france.
Contact Author