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.

Draggable search box
[in: jQuery example]

Sometimes some elements are getting in a way, just taking space in a totally wrong portion of screen.

I played once with jQuery UI draggable and chained it with great search library LiveSearch.

BTW: there is (or soon will follow) a page about LiveSearch, which I quite thoroughly modified, so it can be used in many different "use scenarios". But this is another subject not covered here.

Take a look at simple example: click here

What wee need.

  • jQuery UI Theme pack, which can be downloaded from jQuery UI website: click here
    You can also watch this video for more. You may want skip a bit and start watching at 57 sek. or so.
    Alternatively you can download this pack.
  • LiveSearch library - click here
  • jQuery library - click here
  • a js file with some tool functions - click here
  • Ajax file, which will be used to retrieve searched for elements
  • main file, which will hold draggable search box

 

Please note:
I used a lot of in-line css, which is being frowned upon ... and for a good reasons.
In-line css is not cached, but loaded with file, which causes unnecessary bandwidth consumption.
It also makes it harder to make adjustements later on.

I put css in-line to make it easier on myself really.
In production environment, please do not follow this.

 

step 1:

Lets link our css/js files between head tags. This would look like this.

	<!--our header js/css files-->
        <script type="text/javascript" src="../jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.liveSearch.js"></script>
        <script type="text/javascript" src="../jp_general.js"></script>
        <link rel="stylesheet" type="text/css" href="js/jquery.css"/>

step 2:

Lets create Ajax file. This will be our work horse, fetching and outputting our search results.

Our file is very simple and does not do any searches. 

if (isset($_REQUEST['pages_id'])) {
	$display = 'this is direct search phrase: <strong>'.base64_decode($_REQUEST['pages_id']).'</strong>';
	$display .= '<br />'.base64_decode($_REQUEST['custom']);
	echo $display;
}

step 3:

Lets make main file. One holding search box.
You can see it in action here.

<!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>draggable search</title>
		<!--our header js/css files-->
        <script type="text/javascript" src="../jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.liveSearch.js"></script>
        <script type="text/javascript" src="../jp_general.js"></script>
        <link rel="stylesheet" type="text/css" href="js/jquery.css"/>
        
		<!--some styling which should go into css file-->
		<style type="text/css">
            body {
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
			}
			#pages_search {
                background: #fff;
                border: solid 1px #eee;
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                font-size: 12px !important;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <?php 
        //this is our search box and search result output box
		//this is only php part - there is also javascript part below
        $ajax_pages_id_search = 
        '<div id="pages_search_wrapper" class="apis_nondrag" style="float:right;"> <div style="float:left;"><input style="border:solid 1px #bbb; padding:4px; width: 250px;" type="text" name="pages_id" id="pages_id" value="type to search" autocomplete="off" onFocus="RemoveFormatString(this, \'type to search\')" onDblClick="ReplaceFormatString(this, \'type to search\')"></div> <div style="clear:both;" id="search_no_detailed"></div> <div style="clear:both;"></div> </div> ';
?>
        <div>Just drag me. You can also enter any search phrase and then try to drag me again.</div>
		
		<!--this is our draggable element, which houses search box-->
		<div style="width:90%; height:350px; margin:125px; border:dotted 1px #36F; background:#fafafa;">
            <span id="apis_drag" style="position:absolute; margin:25px 100px; z-index:10; padding:8px; border:dashed 2px #ccc; display:block; cursor:move; background:#FDFDFD; opacity:0.92;">
                <span style="float:left; display:inline-block; background:url(/images/misc/drag16.png) scroll center center no-repeat; width:16px; height:16px; margin:4px 5px 3px 0; opacity:0.35;"></span>
                <?php echo $ajax_pages_id_search; ?>
            </span>
        </div>
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {

                //this is ini code for draggable element
				$("#apis_drag").draggable({
                    cancel: ".apis_nondrag"
                });

                //this is code for LiveSearch
				//make sure you watch/read tutorials about LiveSearch.
				//this is very versatile search/entry library
                jQuery('#pages_search_wrapper input[name="pages_id"]').liveSearch({
                    url: 'ajax.php',
                    query_id: 'pages_id',
                    query_custom: 'this is direct additional custom data passed to ajax file',
                    totWidthDispl: 350,
                    queryMinLength: 2,
                    keep_input: 2,
                    //2: out-click does not remove input value
                    id: 'pages_search',
                    leftAdjust: 0,
                    appendDivId: 'pages_search_wrapper',
                    displRelative: 2

                });

            });
        </script>
    </body>
</html>
0
select image below and hover above to zoom
  • 1a