Flyout Tabs

  • Flyout Tabs

    FlyoutTabsVersion:1.0.9 (J2.5 & J3.x) with all new features and functions and NOW 100% IE7, IE8 & IE9 friendly!

    Flyout Tabs © 2012-2013 by GraphicAholic is a GPL Joomla! J1.5, J2.5 & J3.x module. You can use Flyout Tabs to display a series of tabbed images on the left hand side of your browser that will 'flyout' when you hover your mouse over them. This module will display up to FIFTEEN (15) tabs in a very pleasing 'eye-candy' way and it's potential is endless only to your imagination. Flyout Tabs uses the jQuery Library script that must be loaded through the module settings or from another jQuery application you currently have installed (Joomla 1.5 only). With the release of v1.0.9, I coded into the core Flyout Tabs code an 'auto-detect / auto-load' jQuery Library command (Joomla 2.5 only). Because Joomla 3.x pre-loads the jQuery Library, there is no need to worry about this! This module has been tested and tested and tested again and found to be bug free, feature rich and crazy fun to use! Download it and take it out for a test-drive. I'm sure you'll find a need for it within your Joomla website.

    FAQs

    Requirements

    Install module using native Joomla installation adjust settings, do not display title, select a module position (debug works the best) and enable. This module is driven by the jQuery Library script and demands that the script be loaded to function. I have provided a Load jQuery 'auto-detect / auto-load' feature within the Flyout Tabs code.  If for whatever reason this function fails, there is a Load jQuery setting within the Advanced Option (Joomla 2.5 only). Since jQuery is being pre-loaded in Joomla 3.x there is no reason to concern your self with this!

    Settings


    Effective with version 1.0.6, we are offing a host of user settings;

    • Inside Tab Color-Idel: With our colorpicker, you can set the 'idel state' of the inside tab to any color in the rainbow (default= CFCFCF).
    • Border Tab Color-Idel: With our colorpicker, you can set the 'idel state' of the border to any color in the rainbow (default= AFAFAF).
    • Tab Color Tinting Effect-Idel: Choose your custom Flyout Tabs 'idel state' tinting effect. Range: 0.1 to 1.0 (default= 0.6).
    • Inside Tab Color-Hover: With our colorpicker, you can set the 'mouseover state' of the inside tab to any color in the rainbow (default= CFCFCF).
    • Border Tab Color-Hover: With our colorpicker, you can set the 'mouseover state' of the border to any color in the rainbow (default= AFAFAF).
    • Tab Color Tinting Effect-Hover: Choose your custom Flyout Tabs 'mouseover state' tinting effect. Range: 0.1 to 1.0 (default= 0.6).
    • Use drop-shadow effect? Setting this to 'Yes' will add a CSS3 drop-shadow effect to your tabs. Please note: This does not effect your image icons and will only show in CSS3 compatible browsers.
    • Flyout Tabs Top Position: Adjust the Flyout Tabs position from top of page (default= 50px).
    • Flyout Tabs Width: Adjust the Flyout Tabs width (default= 100px).
    • Flyout Tabs Height: Adjust the Flyout Tabs height (default= 70px).
    • Flyout Tabs Offset: Adjust the Flyout Tabs offset to show more or less of each tab. The higher the minus value, the less the entire tab will show on your screen (default= -60px).
    • Image Position: Adjust the position of your image icons. The greater the pixel value the more your image icon will move to the right (default= 20px).
    • Left margin on mouseover: Adjusts the left margin position on mouseover. Some professional templates require this setting to be adjusted as much as -20 (default= -2).
    • Spacing between tabs: Adjust the amount of spacing in-between the tabs (default= 73px).
    • Alt. text for Tab _: Use this as a title for your specific tab.
    • Image path for Tab _: Set the relative path to your Flying Tabs image If blank, this tab will not be displayed. Please Note: Do not use a leading or trailing '/' within your image path. This module only supports images stored within your Joomla installation..
    • Hyperlink for Tab _: Set to create a hyperlink for each Flyout Tabs.
    • Link Behaviour: Set to have your hyperlink display in a new window (default= Same Window) or Colorbox lightbox.
    • Width of URL: Set the width of your Colorbox lightbox display
    • Height of URL: Set the height of your Colorbox lightbox display

    To use this module, just install it and set your personal settings. Since Flyout Tabs does not use a specific module to reside in, you can choose any active module position that your template supports. I have found that 'debug' works the best and please make sure that you have Show Title set to 'No'. Once this is done, enable it and based on your settings, you'll see Flyout Tabs on the top left hand side of your browser.

    Misc.

    I have included within this installation eight (8) 64px by 64px icons you can use to get started. The relative path to these icons is;

    modules/mod_flyout/images

    The filenames are, home.png, search.png, mail.png, id_card.png, rss.png, ipod.png, camera.png & youtube.png. Most of these icons are available from DryIcons and you can download additional icon sets from them at http://dryicons.com/free-icons/

     

    SUPPORTED BROWSERS: IE7+, FireFox, Safari, Chrome