css nav

Style the Navigation list

A list is used for navigation because it is good semantics.

The list is wrapped with a div with appropriate id:

Style the list, first remove the default style (bullets)

#nav ul{

list-style:none;

}

then give the list items a bottom border

#nav li{

 border-bottom: 1px dotted #B2BCC6;

}

then style the link as display:block (instead of the default inline, see ).

#nav a{

display:block;

}

CSS layout

• To make the container div at the center of the page:

1. give it width (otherwise it will be Auto or 100%)
2. margin-left:auto;
   margin-right:auto;

• 3 columns layout div:

1. header div is normal with width (or optional width if you use a wrapper div)
   
2. left div has (float:left) (should has width)
   
3. main div (float:left) (should has width)
4. right div (float:right) (should has width)
5. bottom div has clear both (should have height)

Tip: positioning with float, need the elements be in the right order (2,3 can be swapped)

OOP Javascript Inheritance

// Inheritance
function RunSampleE() {

   var Dog = function (id, name, age, color) {
       Dog.prototype.Color = color;
       Dog.prototype.Age = age;
       Dog.prototype.ID = id;
       Dog.prototype.Name = name;
       Dog.prototype.toString = function () {
           return this.ID + '; ' + this.Name + '; ' + this.Age + '; ' + this.Color;
       }
       Dog.prototype.Bark = function () { alert('Hoow, Hoow'); }
   }

   // var buddy = new Dog(1, 'Buddy', 3, 'White');
   var buddy = new Dog.prototype.constructor(1, 'Buddy', 3, 'White');
   alert(buddy);
   buddy.Bark();
   Dog.prototype.New = function () { alert('Say new'); }
   buddy.New();
}

OOP Javascript (Hints)

Hints

• Use Visual studio 2010, for writing all the code, it support intellisense
• Use /// , inside the Javascript file to reference other just to support intellisense
• when you define function as class, like

  var Dog = function (id, name, age, color) {
          this.Color = color;
          this.Age = age;
          this.ID = id;}  //you cannot use Dog.Color [Wrong]
  
  you have to initiate the object first like
  
  var buddy = new Dog(1, 'Buddy', 3, 'White');
  then you will call buddy.Color.
  

JQuery basic code

//Hook change for each option to an event

<asp:Content ContentPlaceHolderID="ScriptPlaceHolder" ID="Scripts" runat="server">

   <script type="text/jscript" language="javascript">

  $(document).ready(function () {

      $("#listSamples").change(function (event) {



          if (this.value == 'RunSampleA') {

              RunSampleA();

              return;

          }



          if (this.value == 'RunSampleB') {

              RunSampleB();

              return;

          }

          if (this.value == 'RunSampleC') {

              RunSampleC();

              return;

          }

          if (this.value == 'RunSampleD') {

              RunSampleD();

              return;

          }

      }

)

  }

  );

script>

asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div id="div_content">

  content;

  <select id="listSamples">

      <option value='NULL'>Choose Sampleoption>

      <option value='RunSampleA'>Run Sample Aoption>

      <option value='RunSampleB'>Run Sample Boption>

      <option value='RunSampleC'>Run Sample Coption>

      <option value='RunSampleD'>Run Sample Doption>

  select>

div>

asp:Content>