JQuery

Update url parameter jquery

function setGetParameter(paramName, paramValue)
    {
            var url = window.location.href;
            var hash = location.hash;
            url = url.replace(hash, '');
            if (url.indexOf(paramName + "=") >= 0)
            {
                var prefix = url.substring(0, url.indexOf(paramName));
                var suffix = url.substring(url.indexOf(paramName));
                suffix = suffix.substring(suffix.indexOf("=") + 1);
                suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
                url = prefix + paramName + "=" + paramValue + suffix;
            }
            else
            {
            if (url.indexOf("?") < 0)
                url += "?" + paramName + "=" + paramValue;
            else
                url += "&" + paramName + "=" + paramValue;
            }
            window.location.href = url + hash;
    }

Drawing on google maps

Dummy marker.sql


CREATE TABLE IF NOT EXISTS `markers` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(60) NOT NULL,
  `address` varchar(80) NOT NULL,
  `lat` float(10,6) NOT NULL,
  `lng` float(10,6) NOT NULL,
  `image` text NOT NULL,
  `type` varchar(125) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1  ;



INSERT INTO `markers` ( `name`, `address`, `lat`, `lng`, `image`, `type`) VALUES
( 'Pan Africa Market', '1521 1st Ave, Seattle, WA', 47.608940, -122.340141, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'restaurant'),
( 'Buddha Thai & Bar', '2222 2nd Ave, Seattle, WA', 47.613590, -122.344391, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'bar'),
( 'The Melting Pot', '14 Mercer St, Seattle, WA', 47.624561, -122.356445, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'restaurant'),
( 'Ipanema Grill', '1225 1st Ave, Seattle, WA', 47.606365, -122.337654, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'restaurant'),
( 'Sake House', '2230 1st Ave, Seattle, WA', 47.612823, -122.345673, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'bar'),
( 'Crab Pot', '1301 Alaskan Way, Seattle, WA', 47.605961, -122.340363, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'restaurant'),
( 'Mama''s Mexican Kitchen', '2234 2nd Ave, Seattle, WA', 47.613976, -122.345467, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'bar'),
( 'Wingdome', '1416 E Olive Way, Seattle, WA', 47.617214, -122.326584, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'bar'),
( 'Piroshky Piroshky', '1908 Pike pl, Seattle, WA', 47.610126, -122.342834, 'http://photos2.zillowstatic.com/p_g/IS56cr7wy24v3i0000000000.jpg', 'restaurant');


phpsqlajax_genxml.php


$username="ab";   //db username
$password="ab";    //db password
$database="ab";    // database name

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);

// Opens a connection to a MySQL server

$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("image", $row['image']);
  $newnode->setAttribute("type", $row['type']);
}

echo $dom->saveXML();

Maps.html


<script src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_BROWSER_KEY_HERE&libraries=places,drawing,geometry"
            type="text/javascript"></script>
<script type="text/javascript">
var markers = [];
	var markersToRemove = [];
	var ploy;
	var customIcons = {
      restaurant: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };
    //function called on body load
    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoom: 13,
        mapTypeId: 'roadmap'
      });
	  
	  
	  /****controlss *********************************/
	  
	  
	  var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
            google.maps.drawing.OverlayType.POLYGON,
            ]
        },
        markerOptions: {
            icon: 'images/beachflag.png'
        },
        circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
        },
		
    });
    drawingManager.setMap(map);
	google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
		 for(var i = 0; i < markersToRemove.length; i++) {
			markersToRemove[i].setMap(null);
		}
		polyOptions  = event.overlay.getPath().getArray();   //get coordinates of polygon
		
		var poly = new google.maps.Polygon({
				paths : polyOptions,
				strokeColor: '#FF0000',
				strokeOpacity: 0.8,
				strokeWeight: 2,
				fillColor: '#FF0000',
				fillOpacity: 0.35,
				});  //get polygon using its coordinates
		downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
		document.getElementById("content_list").innerHTML = "";
        for (var i = 0; i < markers.length; i++) {
                        //get our marker points from database
			var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
			console.log(google.maps.geometry.poly.containsLocation(point,poly));
			 if(google.maps.geometry.poly.containsLocation(point,poly)) { // check if marker point is inside polygon drawn
						var m = new google.maps.Marker({
							position: point,
							map: map
						});
						
						/************create list in sidebar again and render new list in sidebar*******/
						 var infoWin = new google.maps.InfoWindow;
						  var name = markers[i].getAttribute("name");
						  var address = markers[i].getAttribute("address");
						  var type = markers[i].getAttribute("type");
						  var image = markers[i].getAttribute("image");
						  var point = new google.maps.LatLng(
							  parseFloat(markers[i].getAttribute("lat")),
							  parseFloat(markers[i].getAttribute("lng")));
						  var html = "<b>" + name + "</b> <br/>" + address;
						  var icon = customIcons[type] || {};
						  bindInfoWindow(m, map, infoWin, html);
						  var listt = createSidebarEntry(m, name, address, image);
						  document.getElementById("content_list").appendChild(listt);
						
						/**************list in sidebar******************/
			}	
        }
      });

				//add clear overlay button on overlaycomplete,not sure if it is working
				var controlDiv = document.getElementById("control-div");
				var controlUI = document.getElementById("control-ui");
				var controlText = document.getElementById("control-text");
				controlUI.click(function() {
					map.setZoom(11);
				 });
				map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
				
	});

  
   
   
	  
	  
	  
	  
	  /**********controls ****************************/
	  
	  
	  
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
          var type = markers[i].getAttribute("type");
		  var image = markers[i].getAttribute("image");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
          });
		  markersToRemove.push(marker);
          bindInfoWindow(marker, map, infoWindow, html);
		  var listt = createSidebarEntry(marker, name, address, image);
		  document.getElementById("content_list").appendChild(listt);
        }
      });
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}
//create sidebar entry for properties
function createSidebarEntry(marker, name, address, image) {
      var div = document.createElement('div');
	  var html ='<div class="images"><img src ="'+image+'" class="images_property" height="100px" width="100px"/></div>';
      html += '<div class="content"><b class="title">' + name + '</b><p class="address">' + address + '</p></div>';
      div.innerHTML = html;
	  div.className = "list_item";
      div.style.cursor = 'pointer';
	  div.style.float = 'left';
	  div.style.width = '100%';
      div.style.marginBottom = '5px'; 
	  google.maps.event.addDomListener(div, 'click', function() {
        google.maps.event.trigger(marker, 'click');
      });
     return div;
    }
</script>

 <body onload="load()">
  <div class="container">
    <div id="map" style="width: 60%; height: 800px;float:left;"></div>
	<div id="content_list" style="width: 40%; height: 800px;float:left;overflow: auto;"></div>
	</div>
</body>
.list_item {
     cursor: pointer;
    float: left;
    height: 110px;
    margin-bottom: 5px;
    width: 100%;
}
.images {
    float: left;
    height: 100px;
}

.content {
    float: left;
    height: 100px;
	padding:5px;
}
.title{
color :#0074e4;
font-size:15px;
}
.address{
color :#666;
}
.top{
	position: absolute;
    transition: width 0.3s ease 0s;
    z-index: 21;
}

Before drawing map looks like

google_maps_all_list

After drawing map looks like

google_maps

Upload image plus all form data using jquery

Html

<form action="" method="post" enctype="multipart/form-data" id="form_portfolio_save">
				<input type="text" name="title" id="title" placeholder=""/><br/>
				<textarea id="about_project" name="about_project">About project</textarea><br/>
				<input type="file" name="photo" id="port_image" placeholder="Add Files"/><br/>
				<input type="text" name="caption" id="caption" placeholder="Image caption"/><br/>
				<input type="button" id="submit" value="Submit" class="button submit" onclick="save_portfolio();return false;"/>
				<input type="button" class="button cancel" id="submit" value="Cancel" />
			  </form>

JQuery

function save_portfolio(){
		var fd = new FormData();
		var file_data = $('input[name^="photo"]')[0].files; 
		for(var i = 0;i<file_data.length;i++){
			fd.append("file_"+i, file_data[i]);
		}
		var  other_data = $("#form_portfolio_save").serializeArray();
		 $.each(other_data,function(key,input){
			fd.append(input.name,input.value);
		});
	   
		$.ajax({
		url : 'save_portfolio.php',
		type : "post",
		data : fd,
		cache: false,
		contentType: false,
		processData: false,
		success : function(data){
				$("#append_portfolio").append(data);
				
		}
	});
	}

PHP

include("includes/session.php");
include("includes/database.php");
if(!empty($_FILES['file_0'])){
		$filename = time().$_FILES['file_0']['name'];
		$path= "upload/user_portfolio/".$filename;
		move_uploaded_file($_FILES['file_0']['tmp_name'],$path);
	}
$query = "insert into user_portfolio(title,description,images,image_captions,employee_id) values('".$_POST['title']."','".$_POST['about_project']."','".$filename."','".$_POST['caption']."','".$_SESSION['user_details']['id']."')";
mysql_query($query);

Filter on search results

js code

$(document).ready(function() {
    function showValues() {
		
		$("#wrapper").css("opacity","0.4");
		$( "#loading-image" ).show(0);	
		var mainarray = new Array();
		
		var subcategoriesarray = new Array();		
		$('input[name="subcategories"]:checked').each(function(){			
			subcategoriesarray.push($(this).val());		
			
		});
		
		var subcategories_checklist = "&subcategories="+subcategoriesarray;
				
		var job_typearray = new Array();		
		$('input[name="job_type"]:checked').each(function(){			
			job_typearray.push($(this).val());	
			
		});
		
		var job_type_checklist = "&job_type="+job_typearray;
		
		
		var budgetarray = new Array();		
		$('input[name="budget"]:checked').each(function(){			
			budgetarray.push($(this).val());
					
		});
		
		var budget_checklist = "&budget="+budgetarray;
		
		
		var experiencearray = new Array();		
		$('input[name="experience"]:checked').each(function(){			
			experiencearray.push($(this).val());
					
		});
		
		var experience_checklist = "&experience="+experiencearray;
		
		var job_durationarray = new Array();		
		$('input[name="job_duration"]:checked').each(function(){			
			job_durationarray.push($(this).val());
					
		});
		
		var job_duration_checklist = "&job_duration="+job_durationarray;
		var category = $("#category_selectbox").val();
		if(category.length > 0){
		var categoryname = "&category="+category;
		var main_string = subcategories_checklist+job_type_checklist+budget_checklist+experience_checklist+job_duration_checklist+categoryname;
		}
		else {
		var main_string = subcategories_checklist+job_type_checklist+budget_checklist+experience_checklist+job_duration_checklist;
		}
		main_string = main_string.substring(1, main_string.length)
		//alert(main_string);
		
		
		$.ajax({
			type: "POST",
			url: "ajax/filter_jobs.php",
			data: main_string, 
			cache: false,
			success: function(html){
				//alert(html);
				$("#place_content_here").html(html);		
				$("#wrapper").css("opacity","1");
				$( "#loading-image" ).hide(0);
				
				
				
			}
			});
		
		
	}
	
	$("input[type='checkbox']").on( "click", showValues );
    $("select").on( "change", showValues );

PHP filter queries




<?php
//error_reporting(E_all);
include("../includes/database.php");
$subcategory = $_REQUEST['subcategories'];
$workload = $_REQUEST['job_type'];
$budget = $_REQUEST['budget'];
$experience = $_REQUEST['experience'];
$job_duration = $_REQUEST['job_duration'];
$category = $_REQUEST['category'];

$query = "select * from job where";
$where = array();
if(!empty($category)){
$where[] = " category = $category";
}
if(!empty($subcategory)){
$where[] = " subcategory IN($subcategory)";
}
if(!empty($workload)){
$workload = explode(",",$workload);
$workload = "'".implode("','", $workload)."'";
$where[] = " workload IN($workload)";
}
if(!empty($budget)){
$budget = explode(",",$budget);
$budget = "'".implode("','", $budget)."'";
$where[] = " budget IN($budget)";
}
if(!empty($experience)){
$experience = explode(",",$experience);
$experience = "'".implode("','", $experience)."'";
$where[] = " desired_experience IN($experience)";
}
if(!empty($job_duration)){
$job_duration = explode(",",$job_duration);
$job_duration = "'".implode("','", $job_duration)."'";
$where[] = " duration IN($job_duration)";
}
    

$where = implode(" or ",$where);
$query .= $where;
//echo $query;
$jobs = mysql_query($query);
function time_ago($date)

											{

											if(empty($date)) {

											return "No date provided";

											}

											$periods = array("second", "minute", "hour", "day", "week", "month", "year", "decade");

											$lengths = array("60","60","24","7","4.35","12","10");

											$now = time();

											$unix_date = strtotime($date);

											// check validity of date

											if(empty($unix_date)) {

											return "Bad date";

											}

											// is it future date or past date

											if($now > $unix_date) {

											$difference = $now - $unix_date;

											$tense = "ago";

											} else {

											$difference = $unix_date - $now;
											$tense = "from now";}

											for($j = 0; $difference >= $lengths[$j] && $j < count($lengths)-1; $j++) {

											$difference /= $lengths[$j];

											}

											$difference = round($difference);

											if($difference != 1) {

											$periods[$j].= "s";

											}

											return "$difference $periods[$j] {$tense}";

											}
?>
						<div class="search_btm_text">
                    	
						<?php
						   
						   if(mysql_num_rows($jobs) > 0){
	                       while($job = mysql_fetch_array($jobs))
			                { //echo "<pre>";print_r($job);
                              ?>
                        <div class="work_div">
                        	<h4><a href="job_detail.php?number=<?php echo base64_encode($job['id']);?>"><?php echo $job['title'];?></a></h4>
                            <div class="supported_info">
                            	<p><strong class="fixedprice"><?php echo $job['workload'];?>:<?php echo ucfirst($job['desired_experience']);?> level </strong>Budget :<strong><?php echo $job['budget'];?></strong> - Posted <?php echo time_ago($job['date']);?></p>
                               
                            </div><!--supported_info-->
                            <div class="cDescription"><p><?php echo $job['description'];?>....<a href="job_details.php?job=<?php echo $job['id'];?>">more</a></p></div>
                            <div class="supported_info">
                            	<p><strong class="ipaid">Client: </strong><img src="assets/images/star4.png" alt=""><strong>Working Hours:<?php echo $job['duration'];?> </strong> 
								<?php 
										if(!empty($job['qualification'])){
										$quali = mysql_query("select * from skills where id IN(".$job['qualification'].")");
											$array = array(); 
											while($skil = mysql_fetch_array($quali)){
												$array = $skil['skill'];
											}
											echo implode(",",$array);
										}
										
										?>
								</p>
                                
                            </div>
                        </div><!--work_div-->
						
						<?php } } else { ?>
						 <div class="work_div">
						 <h4>No matching results were found !</h4>
						 </div>
						<?php } ?>
                       <?php //echo $pagination;?>
                      
                    </div><!--search_btm_text-->

	
	
	
});	


Html code

<div class="my_categories">
                    	<h5>Choose Category</h5>
                        <select class="categories_list" id="category_selectbox" name="category" onchange="get_subcategory($(this).val());">
						<?php $cats  = mysql_query("select * from categories"); 
						 while($c = mysql_fetch_array($cats)){
						?>
                        	<option value="<?php echo $c['id'];?>"><?php echo $c['name'];?></option>
                           
							<?php } ?>
                        </select>
                    </div><!--my_categories-->
					<div class="my_categories">
                    	<h5>Sub Categories</h5>
                        <ul class="categories_list" id="subcategory_checkbox12">
						<?php $subcats = mysql_query("select * from subcategories where category_id = 7");
						while($subcat = mysql_fetch_array($subcats)){
						?>
						<li><input type="checkbox" class="subcat_checkbox" name="subcategories" value="<?php echo $subcat['id'];?>"/><?php echo $subcat['name'];?></li>
						<?php } ?>
                        </ul>
                    </div><!--my_categories-->
					<div class="my_categories">
                    	<h5>Job type</h5>
                        <ul class="categories_list">
						
                        	<li><input type="checkbox" name="job_type" class="job_type" value="Part Time"/>Part Time</li>
                           <li><input type="checkbox" name="job_type" class="job_type" value="Full Time"/>Full Time</li>
						
                        </ul>
                    </div><!--my_categories-->
					<div class="my_categories">
                    	<h5>Budget</h5>
                        <ul class="categories_list">
						
                        	<li><input type="checkbox" name="budget" class="budgets" value="Less than 100$"/>Less than 100$</li>
                           <li><input type="checkbox" name="budget" class="budgets" value="Between $100 & $500"/>Between $100 & $500</li>
						   <li><input type="checkbox" name="budget" class="budgets" value="Between $500 & $1000"/>Between $500 & $1000</li>
                           <li><input type="checkbox" name="budget" class="budgets" value="Greater then $1000"/>Greater then $1000</li>
						   <li><input type="checkbox" name="budget" class="budgets" value="Not sure.."/>Not sure..</li>
                        </ul>
                    </div><!--my_categories-->
					<div class="my_categories">
                    	<h5>Experience</h5>
                        <ul class="categories_list">
						
                        	<li><input type="checkbox" name="experience" class="experience" value="entry"/>Entry Level</li>
                           <li><input type="checkbox" name="experience" class="experience" value="intermediate"/>Intermediate Level</li>
						   <li><input type="checkbox" name="experience" class="experience" value="expert"/>Expert Level</li>
						
                        </ul>
                    </div><!--my_categories-->
					<div class="my_categories">
                    	<h5>Job Duration</h5>
                        <ul class="categories_list">
						
                        	<li><input type="checkbox" name="job_duration" class="job_duration" value="Less then 1 week"/>Less than 1 Week</li>
                           <li><input type="checkbox" name="job_duration" class="job_duration" value="Less then 1 months"/>Less than 1 Month</li>
						   <li><input type="checkbox" name="job_duration" class="job_duration" value="1 to 3 months"/>1 to 3 Months</li>
							<li><input type="checkbox" name="job_duration" class="job_duration" value="3 to 6 months"/>3 to 6 Months</li>
							<li><input type="checkbox" name="job_duration" class="job_duration" value="More then 6 months"/>More than 6 Months</li>
                        </ul>
                    </div><!--my_categories-->
                

Stick a div on the top of page

Jquery for the div is


$(document).ready(function() {
    var s = $("#sticker");
    var pos = s.position();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos &gt;= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick"); 
        }
    });
});

and the css



.stick {
    position:fixed;
    top:0px;
}