020 555 1111
  • Old fashion, modular, procedural PHP plus some scaffolding techniques to allow it to mimic MVC simplicity.
  • A quick reference to help you find in PHP maze what needs to be done and how to do it.
  • Learn a PHP Object Oriented Programming by building a live discussion forum application.
  • MVC - Model View Controller - real life, easy reference and application.
This product has options, take a look at them and select ones you like the most.
Options are displayed under image section.

Open closed element onHover - zoom plus 4 open directions
[jQuery: plugin]

onhover open section - like on main xarray.org

please note:
Main xarray.org.uk does not use this plugin, but some simpler (for beginner) jQuery code - which does exaclty same job, but lacks re-usability and flexibility of this plugin. This plugin, could use some "stay-in-viewport" adjustment and some day it will get such functionality.

 

 

This plugin opens hidden portion of a div (or other container) on mouse hover.

It gives you 5 opening options: 

  • TL: slides open toward top-left
  • TR: slides open toward top-right
  • BL: slides open toward bottom-left
  • BR: slides open toward bottom-right
  • ZOOM: slides open in all directions

It requires HoverIntent plugin.

It uses easing, so it requires easing. You can get an easing plugin file, or use jQueryUI lib.

For easing effect names look here.

Important:

closed_height and closed_width should be equal to your trigger element.

open_height and open_width should be equal to your fully open element.

Rest of settinggs (optins) use defaults and work your way to your own look and feel.

This plugin has permissive MIT attached to it.

 

This plugin requires jQuery, HoverIntent and easing. Easing is included in jQueryUI lib.

http://cherne.net/brian/resources/jquery.hoverIntent.html

http://jquery.com/

http://gsgd.co.uk/sandbox/jquery/easing/

http://jqueryui.com/

 

 

examples with all available movements - point mouse over selected element

top-right (TR) bottom-right (BR) zoom (ZOOM) bottom-left (BL) top-left (TL)
$('#tr').jpSlider({ 
open_type: 'TR', 
closed_height: 20, 
closed_width: 100 
});
$('#br').jpSlider({
open_type: 'BR',
closed_height: 20,
closed_width: 100
});
$('#zoom').jpSlider({
open_type: 'ZOOM',
closed_height: 20,
closed_width: 100
});
$('#bl').jpSlider({
open_type: 'BL'
closed_height: 20,
closed_width: 100
});
$('#tl').jpSlider({
open_type: 'TL'
closed_height: 20,
closed_width: 100
});

 

 

(function ($) {
    //IMPORTANT!!!
    //requires hoverIntent r5: 2007.03.27, or newer
    //http://cherne.net/brian/resources/jquery.hoverIntent.html
    //Attach this new method to jQuery
    $.fn.extend({

        //This is where you write your plugin's name
        jpSlider: function (options) {
            //Set the default values, use comma to separate the settings, example:
            var defaults = {
                //how many pixels mouse pointer travels over trigger elements 
                //within given below interval, before target elements open
                //1 - opening action is immediate, if you go over 7, test it, if works properly - 
                //over 10 may not work properly
                //sensitivity and interval are working together
                sensitivity: 7,
                interval: 100,
                //sensitivity time in milliseconds (1/1000 of a second)
                open_easing: 'easeInBack',
                open_Z_index: 10,
                //stacking index when target element is opened
                open_Z_index_delay: 200,
                //give browser some time to sort out stacking, before opening triggered element (in milliseconds)
                open_speed: 500,
                //opening speed (in miliseconds)
                open_height: 150,
                //opened, target item height (height at the end of opening animation) (in pixels)
                open_width: 350,
                //opened, target item width (width at the end of opening animation) (in pixels)
                closed_Zindex: 1,
                //stacking index, when target element is closed
                closed_speed: 50,
                //target element closing speed
                //closed, target item height (height at the end of closing animation) (in pixels)
                //should be same as height set initially via css styling
                closed_height: 45,
                //closed, target item width (width at the end of closing animation) (in pixels)
                //should be same as width set initially via css styling
                closed_width: 150,
                //open type
                //TL: top-left; TR: top-right; BL: bottom-left; BR: bottom-right; ZOOM: zoom, enlarge in every direction
                open_type: 'BR'

            }

            var o = $.extend(defaults, options);

            var openMarginLeft;
            var openMarginTop;

            if (o.open_type == 'TL') { //TL : top-left
                openMarginLeft = o.closed_width - o.open_width;
                openMarginTop = o.closed_height - o.open_height;

            } else if (o.open_type == 'TR') { //TR : top-right
                openMarginLeft = 0;
                openMarginTop = o.closed_height - o.open_height;

            } else if (o.open_type == 'ZOOM') { //ZOOM : zoom, enlarge in every direction
                openMarginLeft = (o.closed_width - o.open_width) / 2;
                openMarginTop = (o.closed_height - o.open_height) / 2;

            } else if (o.open_type == 'BL') { //BL : bottom-left
                openMarginLeft = o.closed_width - o.open_width;
                openMarginTop = 0;

            } else { //BR : bottom-right
                openMarginLeft = 0;
                openMarginTop = 0;
            }


            $(this).hoverIntent({
                sensitivity: o.sensitivity,
                interval: o.interval,
                over: function () {
                    $(this).css({
                        zIndex: o.open_Z_index
                    }).delay(o.open_Z_index_delay).
                    animate({
                        marginLeft: openMarginLeft,
                        marginTop: openMarginTop,
                        height: o.open_height,
                        width: o.open_width

                    }, o.open_speed, o.open_easing);
                },
                out: function () {
                    $(this).css({
                        zIndex: o.closed_Zindex
                    }).
                    animate({
                        marginLeft: 0,
                        marginTop: 0,
                        height: o.closed_height,
                        width: o.closed_width

                    }, o.closed_speed);
                }
            });

        }
    });
    //pass jQuery to the function, 
})(jQuery);