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.

On-click drop down utility panel - multiple usage.
[in: jQuery example]

This is a simple, yet very versatile tool, which can accomodate pretty much anything: menus, on-page help drop-downs, action confirmations, forms etc.

It is jQuery powered. Easy to adjust.

[click for more] x text body goes here
you can use text, css styling, html
this can also be used as a platform for forms, confirmations etc.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent consequat, dui quis malesuada tempus, dolor sapien lobortis sapien, et dapibus ante arcu id quam. Donec nunc ante, ornare eget rhoncus ut, tempor quis velit. Integer tempus, ipsum at interdum imperdiet, dui dui tempor elit, sit amet pellentesque velit nunc sit amet ligula.
Click here to see example on separate page.

 

What is needed:

 

main file code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>drop down</title>
        <script type="text/javascript" src="../jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="js.js"></script>
        <link rel="stylesheet" href="css.css"/>
    </head>
    <body>
        <div style="float:left; margin:10px 35px;">
            <span id="accs_drop" class="ajax_drop">
                <span id="ajax_drop_lbl" class="ajax_drop_lbl red_lnk">[click for more]</span>
                <span id="ajax_drop_container" class="ajax_container">
                    <span style="float:right;" class="closex">x</span>
                    <span>
                        text body goes here<br/>
                        you can use text, css styling, html<br/>
                        this can also be used as a platform for forms, confirmations etc.<br/><br/>
                        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent consequat, dui quis malesuada tempus, dolor sapien lobortis sapien, et dapibus ante arcu id quam. Donec nunc ante, ornare eget rhoncus ut, tempor quis velit. Integer tempus, ipsum at interdum imperdiet, dui dui tempor elit, sit amet pellentesque velit nunc sit amet ligula.
                    </span>
                </span>
            </span>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#accs_drop').actionDrop({
                    lblDiv: '#ajax_drop_lbl',
                    containerDiv: '#ajax_drop_container',
                    hPos: 'right',
                    hPosFine: 0,
                    vPosFine: 15,
                    custWidth: 350,
                    displRelative: 2,
                    inClose: '.closex'
                });
            });
        </script>
    </body>
</html>

 

jQuery drop-down extension function code:

(function($){
 
    //Attach this new method to jQuery
    $.fn.extend({ 
         
        //This is where you write your plugin's name
        actionDrop: function(options) {
			//Set the default values, use comma to separate the settings, example:
			var defaults = {
				lblDiv: '#lbl_div',
				containerDiv: '#container_div',
				hPos: 'right', 						//horizontal position: left/right of target element,
				hPosFine: 0, 						//horizontal position: fine tuning (in pixels)
				vPosFine: 0, 						//vertical position: fine tuning (in pixels)
				custWidth: 0,						//custom width, if !=0, it overrides css class width
				custHeight: 0,						//custom height, if !=0, it overrides css class height
				displRelative: 1,					/*1- use offset() (id does not work), 2- use position()*/
				inClose: ''							/*this class inside will close, when clicked: enter as .class*/
			}
			var options =  $.extend(defaults, options);
		   
		    return this.each(function() {
                var opt = options;
                
				//get container open 
				$(this).click(function(){
						
						//custom height, if !=0, it overrides css class height
						if (opt.custHeight!=0) {
							$(opt.containerDiv).css("height", opt.custHeight + 'px');
							$(opt.containerDiv).css("overflow", 'auto');
						}
			   			
						//custom width, if !=0, it overrides css class width
						if (opt.custWidth!=0) $(opt.containerDiv).css("width", opt.custWidth + 'px');
			   			
						//adjust horizontal location
						if (opt.hPos=='left') {
							$(opt.containerDiv).css("margin-left",$(opt.containerDiv).outerWidth()*(-1) + opt.hPosFine);
						} else {
							$(opt.containerDiv).css("margin-left",opt.hPosFine);
						}
						
						if (opt.displRelative==1) {
							var tmpOffset = $(opt.lblDiv).offset(); 
						} else {
							var tmpOffset = $(opt.lblDiv).position(); 
						}
				
						$(opt.containerDiv).css("left", tmpOffset.left);
						$(opt.containerDiv).css("top", tmpOffset.top);


			   			//adjust horizontal location
						$(opt.containerDiv).css("margin-top", opt.vPosFine);
						
						var target = $(opt.containerDiv); 
						if( target.is(':hidden') ) {
							 $(opt.containerDiv).slideDown("fast",function(){ 
								  $(opt.containerDiv).css('display','block');
							  });
							
						} else {
							$(opt.containerDiv).slideUp("fast");
						}
						
						return false;
				});
             
				$(opt.inClose).click(function(){ 
				   $(opt.containerDiv).fadeOut("fast"); 
				}); 
            	
				
				//close container inClose
				//$(document.body).click(function(){ 
				$(window).click(function(){ 
				   $(opt.containerDiv).slideUp("fast");    
				}); 
				
				//prevent closing, when clicked on opened container
				$(opt.containerDiv).click(function(event){
					 event.stopPropagation();
				});
			
			});
        }
    });
//pass jQuery to the function, 
//So that we will able to use any valid Javascript variable name 
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )       
})(jQuery);