JQuery : jQuery.noConflict(); Resolve the $ Conflict

The JQuery library by design uses only two global namespace so that it would not conflict with other JavaScript libraries.

• $ - the dollar is used as a reference to JQuery namespace
• Also used by Prototype library, YUI and mootools
• jQuery - is also used to reference to jQuery namespace, this the more unique reference of the two options, but nobody really uses it

Installing The Northwind Sample Database From Microsoft

The Northwind sample database is probably the most mention sample database of all time.  Most of the tutorials on the web uses the Northwind sample database as an example.  However, it's not as straight forward to add the Northwind database to your SQL Server instance as you may have think.  The reason is because the Northwind database was initially created for SQL Server 2000.  Therefore, most of the newer versions of SQL Server will throw an error when you tried to attach the .mdb file.  It is easier to run the SQL script that is provided with the download.  In this blog we will go over where to download the Northwind sample database, and how to add to your SQL Server instance using the SQL script.

1. Open your browser and type in the following URL in the address bar
https://www.microsoft.com/en-us/download/details.aspx?id=23654

2.  Click on the "Download" button

Blogger: Adding Adsense Ads To Blogger

Let's face it, most of us starts blogging so that we can can hopefully retire in the Caribbean using money that we make from our blog.  Well to do that we need ads on our blog.  In this blog post we will go over the steps to associate, and setup Adsense ads on your Blogger blog.

Step-By-Step Instructions:

1. Log into your Blogger Blog account, then click on Earnings → AdSense

Blogger : Import Blog Posts From Another Blogger Blog

In the previous blog we've exported a blog from Blogger.  In this blog we will import the .xml file that we've exported from that blog.

Step By Step Instructions:

1.  Sign into the blog the you want to import your blog posts to

2. Under the "Settings" section click on the "Other"

Blogger : Export Blog Posts From Blogger Blog

In this blog we will go over how to export your blogs in Google's Blogger blogging application.

Step-By-Step Instructions Exporting Your Blog:

1. Sign into the blog you want to export your blog posts from.

2.  Select "Other" in the "Settings" section

Blogger: Create A New Blog In Blogger

Creating a new blog in Blogger is really easy in fact it takes less than five minutes to do.  Well maybe ten minutes if you have to take screen shots.  Below is a step by step process of how to create your new Blogger blog.

Step-By-Step:

1.  Log into blogger.com with your Google account, you will be logged into the Blogger dashboard

2.  In the dashboard there will be button that says "New Blog", click on the button

JQuery: Search Context Parameter (Select Within A Container)

There's actually two selector parameters in JQuery.  The second parameter is the context parameter.  The context parameter specify the context that the selector should operate within that context.  Let's use the bootstrap form field markup below as an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <title></title>
  <style>
   .form-label-spacing{
    margin-top: 15px;
   }
   
   .form-group-spacing
   {
    margin-left: 20px;
   }
  </style>
    </head>
    <body>
         <form>
   <div class="row">
   <div class="form-group form-group-spacing col-lg-4 col-md-4" id="registration-form">
    <label for="firstName" class="form-label-spacing">First Name:</label>
     <input class="form-control" type="text" id="firstName" placeholder="First Name">
    <label for="firstName" class="form-label-spacing">Last Name:</label>
     <input class="form-control" type="text" id="lastName" placeholder="Last Name">
    <label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
     <input class="form-control" type="email" id="E-Mail" placeholder="Email">
    <label class="form-label-spacing" for="password">Password:</label>
     <input name="Password"  class="form-control"  type="password" placeholder="Password">
    <div class="form-group">
     <label class="form-label-spacing" for="gender">Gender:</label>
      <div class="radio">      
       <label><input type="radio" name="gender" id="gender">Male</label><br/>
       <label><input type="radio" name="gender" id="gender">Female</label>
      </div>
    </div>

         <button type="button"  class="btn btn-default">Sign Up</button>

    </div>
    <div class="col-lg-8 col-md-8"/>
   </div>
      <div class="row">
   <div class="form-group form-group-spacing col-lg-4 col-md-4" id="another-registration-form">
    <label for="firstName" class="form-label-spacing">First Name:</label>
     <input class="form-control" type="text" id="firstName" placeholder="First Name">
    <label for="firstName" class="form-label-spacing">Last Name:</label>
     <input class="form-control" type="text" id="lastName" placeholder="Last Name">
    <label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
     <input class="form-control" type="email" id="E-Mail" placeholder="Email">
    <label class="form-label-spacing" for="password">Password:</label>
     <input name="Password"  class="form-control"  type="password" placeholder="Password">
    <div class="form-group">
     <label class="form-label-spacing" for="gender">Gender:</label>
      <div class="radio">      
       <label><input type="radio" name="gender" id="gender">Male</label><br/>
       <label><input type="radio" name="gender" id="gender">Female</label>
      </div>
    </div>

         <button type="button"  class="btn btn-default">Sign Up</button>

    </div>
    <div class="col-lg-8 col-md-8"/>
   </div>
  </form> 
    </body>
</html>

CSS: Using Bootstrap To Make Your Form Fields Look More Professional

In this blog we will turn ordinary form fields to a more modernized and professional looking form fields by using the bootstrap library.  Let's say we have the following form fields with no formatting, or layouts applied to it with the following markup.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <title></title>
    </head>
    <body>
         <form>
   First Name: <input name="First Name" type="text"><br/>
   Last Name: <input name="Last Name" type="text"><br/>
   E-Mail: <input name="E-Mail" type="text"><br/>
   Password: <input name="Password" type="password"><br/>
   Gender:
   <br/><input type="radio" name="gender" value="male" checked>Male<br/>
    <input type="radio" name="gender" value="female">Female<br/> 
   <input type="submit" value="Sign-Up"/>
  </form> 
    </body>
</html>

JQuery Basics : Selecting Attributes

In the previous blog about selectors we've gone over what a selector is.  In this blog we will something that is a little more advance and use JQuery to select the attributes within a HTML element.  Most HTML elements have attributes associated with them for example the <input> element has the id, name, and type in them. So let's create a typical registration form input fields for this example and use JQuery to select the form fields according to what attributes the form fields have:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>JQuery Attributes Selector Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
  </script>
    </head>
    <body> 
  <form>
   User ID: <input name="UserId" type="text"><br/>
   First Name: <input name="First Name" type="text"><br/>
   Last Name: <input name="Last Name" type="text"><br/>
   E-Mail: <input name="E-Mail" type="text"><br/>
   Password: <input name="Password" type="password"><br/>
   Gender:
    <br/><input type="radio" name="gender" value="male" checked>Male<br/>
    <input type="radio" name="gender" value="female">Female<br/>
   
  </form>
    </body>
 </html>

JQuery: Using Conditional Comments To Support Older Version Of Internet Explorer

A lot of you may have wonder why JQuery releases versions 1.x and 2.x, the reason is because the 1.x versions are released to support older versions of Internet Explorer.   What a lot of people don't realize is that the 2.x version performs better, so if you have the choice between 1.x and 2.x you should choose the 2.x versions. Use the 1.x versions only if you have to.  In this blog we will show how to use conditional comments which Microsoft created in Internet Explorer 5.  Since it's specifically created for Internet Explorer other browsers will ignore it.   Since Internet Explorer 9 seems to be the divider for support we will use it as the base case for our conditional comments.  Here is the code to use the conditional comments to support older versions of Internet Explorer.

<html
    <head>
        <meta charset="utf-8" />
        <title>JQuery Conditional Comments Demo</title>
  <!-- [if lt IE 9]>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <![endif]-->
  <!--[if gte IE 9]><!-->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!--<![endif]-->
    </head>
    <body> 
    </body>
</html>