Web developer tutorial: 2016

Friday 22 April 2016

Google Map Api Get Latitude and Longitude from Address in JavaScript

Introduction:

Here I will explain how to get latitude and longitude from address Google map api using JavaScript in website.

Description:

By giving latitude and longitude we can get exact location on google map from your website. You can get current latitude and longitude from the user and u can show thier locaion on your website using google api with javascript.

To implement places or address autocomplete textbox using Google maps Google API we need to write the code like as shown below

<head>

<title>Google Places Autocomplete textbox using google maps api</title>

</head>

<body>

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {

var autocomplete = newgoogle.maps.places.Autocomplete(document.getElementById('txtAutocomplete'));

google.maps.event.addListener(autocomplete, 'place_changed', function () {

// Get the place details from the autocomplete object.

var place = autocomplete.getPlace();

var location = "<b>Address</b>: " + place.formatted_address + "<br/>";

location += "<b>Latitude</b>: " + place.geometry.location.A + "<br/>";

location += "<b>Longitude</b>: " + place.geometry.location.F;

document.getElementById('lblResult').innerHTML = location

});

}

</script>

<span>Location:</span>

</body>

</html>

SQL Server Order By Union with Example

Introduction

Here I will explain how to use order by in union query in sql server.

SELECT * FROM
(
Select Id as UserId, UserName as Name, RegisterDate From UserDetails
Union
select UserId, EmpName as Name, ModifyDate as RegisterDate From UserDetails
) smptbl
ORDER BY RegisterDate DESC

If you observe above query we are getting data from union statements as sub query and applying order by statement sub query to show the data in descending order.

DECLARE @temp1 table(id int, name varchar(50),modifydate date)
DECLARE @temp2 table(id int, name varchar(50),modifydate date)
insert into @temp1(id,name,modifydate)
values(1,'Sesu,Raj','2017-01-30'),
(2,'Veera,Pandiayn','2016-02-10'),
(3,'Soosai,Raj','2015-03-05')
insert into @temp2(id,name,modifydate)
values(13,'Honey','2017-04-15'),
(21,'Imman,Alavala','2016-02-05'),
(21,'Jai,Ganesh','2015-01-20')
SELECT * FROM (
Select id,name, modifydate from @temp1
UNION
Select id,name, modifydate from @temp2
) stbl ORDER BY modifydate DESC

Now we will see how to use order by clause with union statements in sql server with example.

If we execute above query we will get records in modifydate descending order.

Thursday 21 April 2016

How to create sticky footer with asp.net master page?

Introduction

Now i am going to explain how to create sticky footer with asp.net master page in simple manner.

Step 1
Add new visual studio project and add the necessary files like shown blow.

Step 2
Now open your Master Page and add this script within the head tag.

<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>  
   <script type="text/javascript">  
       $(window).bind("load", function () {  
           var footer = $("#footer");  
           var pos = footer.position();  
           var height = $(window).height();  
           height = height - pos.top;  
           height = height - footer.height();  
           if (height > 0) {  
               footer.css({  
                   'margin-top': height + 'px'  
               });  
           }  
       });  
</script>  
</head>

Step 3
Then write the following div within your form tag:

<form id="form1" runat="server">  
     
 <div>  
  
           <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">  
  
           </asp:ContentPlaceHolder>  
  
                     <div id="footer">  
                     Your Footer Content  
                      </div>  
  
 </div>  
 </form>  

Step 4
Open your aspx page (for example default.aspx). Call your master page in your aspx page.

<%@ Page Title="" Language="C#" MasterPageFile="Master.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="StickyFooter.default" %>  

Step 5
Remove all HTML elements from your default.aspx page. And add your content placeholder on your default.aspx page.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">  
  
Main Content (Header Content)  
  
</asp:Content>  

Now you can view your footer text at the bottom.

HTML editor for asp.net web pages using JQuery instead of AJAX

Introduction
I am going to explain how to create html editor control for asp.net web pages with light weight jquery plugin. Here is the example.

Step 1
Create new visual studio project

Step 2
Download files from here. Add necessary files like shown below

<script src=jquery-1.3.2.js" type="text/javascript"></script>
<script src="Html_editor/scripts/jHtmlArea-0.8.min.js" type="text/javascript"></script>
<link href="Html_editor/scripts/jHtmlArea.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("textarea").htmlarea(); // Initialize jHtmlArea's with all default values
});
</script>

Full Example

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SendEmail.aspx.cs" Inherits="AdventureSports.Public.SendEmail" %>
<!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 runat="server">
<title></title>
<script src="../HTML_Editor/scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../HTML_Editor/scripts/jHtmlArea-0.8.min.js" type="text/javascript"></script>
<link href="../HTML_Editor/style/jHtmlArea.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("textarea").htmlarea(); // Initialize jHtmlArea's with all default values
//window.setTimeout(function() { $("form").submit(); }, 3000);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<textarea runat="server" id="txtText" cols="50" rows="15"></textarea>
</div>
</form>
</body>
</html>

This is the procedure to implement a lightweight HTML editor in your web pages in a simple manner.

Thank you!