jSwitch

jSwitch is a plug-in for site switching in a nice, and innovating way. Each site you own will not refresh the web page content, instead will appearing with animation over the previews page.

Features

Web site switch with animation
Support easing library
Four animation methods (rtl, lfr, ttb, btt)
Set background color
Set animation speed for site come in, and site come out

Usage

The jSwitch installation is fast and easy. However, to use the jSwitch, you must have the basic knowledge of jQuery selectors usage to install it.

First of all, to use the jSwitch you have to own at least two web sites, with deferent domain names. On each web site create a link that will point to each other with unique ID, or a shared class name.

NOTE: While the plug-in support site switching under the same domain, is not a good technique because if your end user do repeated use of the jSwitch can overload the web browser memory.

After you have setup the links to each other web site, you have to load the jSwitch on each web site that will participate into your web sites group too.

After you have load and the jSwitch on each web site, you have to use the following structure to enable the plug-in for each web site:

$(document).ready(
    function()
    {
        $('Element Selector').jSwitch();
    }
);

The above is the minimal code you need to install the jSwitch and make it work.

Available options

openDirection

Optional value

Default value: ltr

From witch direction will start the animation of the second page. Available values for this option are the following:

rtl (Right to Left)
ltr (Left to Right)
ttb (Top to Bottom)
btt (Bottom to Top)

openEasing

Optional value

Default value: easeOutBounce

If you have load the easing library you can use the following easing methods

def
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

openEasingSpeed: Optional value; Default value: 1000; The total time the animation is need to completed on open animation

closeDirection

Optional value

Default value: ltr

From witch direction will start the animation of the second page. Available values for this option are the following:

rtl (Right to Left)
ltr (Left to Right)
ttb (Top to Bottom)
btt (Bottom to Top)

closeEasing

Optional value

Default value: easeOutBounce

If you have load the easing library you can use the following easing methods

def
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

closeEasingSpeed: Optional value; Default value: 1000; The total time the animation is need to completed on close animation

overlayFadeinSpeed: Optional value; Default value: 250; The total time need it to show up the overlay layer

overlayFadeoutSpeed: Optional value; Default value: 250; The total time need it to hide the overlay layer

overlayBackground: Optional value; Default value: #000; The background color for overlay layer. You can use any hex value or named value for the color.

overlayOpacity: Optional value; Default value: 0.3; The overlay layer opacity level. You can use values from 0 to 1.

Requirements

In order to use the jSwitch you have to load the jQuery JavaScript framework and/or the easing library. The load order of that files is the following. First of all you have to load the jQuery library. If you like to use the easing plug-in, then you have to load the easing plug-in and finally to load the jSwitch plug-in.

Usage Examples

Site A:

<html>
    <head>
        <title>Page A title</title>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="easing.js"></script>
        <script type="text/javascript" src="jquery.jSwitch-1.0.0.js"></script>
        <script type="text/javascript">
            $(document).ready(
                function()
                {
                    $('#gtB').jSwitch(
                        {
                            openEasing: 'easeOutElastic',
                            closeDirection: 'rtl',
                            overlayBackground: '#555'
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <h1>Page A</h1>

        <a href="http://www.siteB.ext" id="gtB">Go to B</a>
    </body>
</html>

Site B:

<html>
    <head>
        <title>Page B title</title>

        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="easing.js"></script>
        <script type="text/javascript" src="jquery.jSwitch-1.0.0.js"></script>
        <script type="text/javascript">
            $(document).ready(
                function()
                {
                    $('#gtA').jSwitch(
                        {
                            overlayBackground: 'red',
                            closeEasingSpeed: 2500
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <h1>Page B</h1>

        <a href="http://www.siteA.ext" id="gtA">Go to A</a>
    </body>
</html>

Login

Product Details

Created

Files included

Software type

Software version

Keywords

Features

Usage

Available options

Requirements

Usage Examples

Leave a Reply Cancel reply

drop us a line