Good topics related to AJAX

When to use GET and POST in AJAX -
http://javascript.about.com/od/ajax/a/ajaxgp.htm

See the links listed at the end of the page also

AJAX Toolkit examples here

http://www.asp.net/ajaxlibrary/act_tutorials.ashx

Good color combination for a Heading

Below heading is created using a Panel. It looks good on a normal white background (page's background I mean)


<asp:Panel ID="pReferralMethodHeader" runat="server" BackColor="#e7e7e7" Height="30px" ScrollBars="None">
<div style="padding: 5px; cursor: pointer; vertical-align: middle;">
<div style="float: left;" class="">
<font face="verdana" color="#993333" size="3"><b>Referral Method</b></font>
</div>
<div style="float: right; vertical-align: middle;">
<asp:ImageButton ID="imgReferralMethod" runat="server" ImageUrl="~/images/expand_blue.jpg"
AlternateText="(Show Claim Information Details...)" />
</div>
</div>
</asp:Panel>

CSS Inheritance

From http://dorward.me.uk/www/css/inheritance/

(Another good link is - http://www.webdesignfromscratch.com/html-css/css-inheritance-cascade/)

Multiple Classes

Making good use of classes will solve most problems. Take the example of having boxes of data floating on alternating sides of the canvas.

.oddBoxOut {
width: 12em;
float: left;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

.evenBoxOut {
width: 12em;
float: right;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

As you can see, many properties are duplicated in each definition, so it is obvious why somebody might want OO-style inheritance.

There is another solution though. Lets take a quick look back at the HTML specification:

class = cdata-list[CS]
This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

So we can assign multiple class names to a single element? That means we can change the style sheet so it looks like this:

.boxOut {
width: 12em;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

.oddBoxOut {
float: left;
}

.evenBoxOut {
float: right;
}

And then the HTML will look like:

<div class="boxOut oddBoxOut">

Grouping Selectors

A single style may have multiple selectors assigned to it through the use of grouping.

To revisit the previous example, we first simplify the HTML so we only mention the one class:

<div class="oddBoxOut">

Then we assign the CSS we want to it, but we group the common property/value pairs.

.oddBoxOut,
.evenBoxOut {
width: 12em;
padding: 0.5em;
margin: 0.5em;
border: solid 1px black;
}

.oddBoxOut {
float: left;
}

.evenBoxOut {
float: right;
}

These two techniques should solve most problems which people think can be solved with OO-style inheritance, but we still have the option of using a preprocessor.

http://www.onlinetools.org/

Free Javascript scripts -
http://www.onlinetools.org/

Javascript examples: style.display & style.visibility & .disabled

document.getElementById("pnlSearch").style.display = "block";
document.getElementById("pnlSearch").style.display = "none";

document.getElementById("pnlSearch").style.visibility = "visible";
document.getElementById("pnlSearch").style.visibility = "hidden";

document.getElementById('btnSearch').disabled =false;
document.getElementById('btnSearch').disabled =true;

From http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone : (See link for a short-but-great example) :
display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. Visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page.

Difference between DIV and SPAN tags

http://webdesign.about.com/od/htmltags/a/aa011000a.htm

The primary difference between the <span> and <div> tags is that <span> doesn't do any formatting of it's own. The <div> tag acts includes a paragraph break, because it is defining a logical division in the document. The <span> tag simply tells the browser to apply the style rules to whatever is within the <span>

Validate your CSS, XHTML; CSS Quirks

Excerpt from http://www.uwplatt.edu/web/wtc/div/boxmodel.html :

If you run into problems, go back and make sure you are accounting for all elements and all the properties. If you still are still having problems, validate your CSS, validate your XHTML, be sure to check the CSS Quirks Section, and if you are still having problems, consult an online resource

Good tutorial to learn about DIV, CSS (real HTML stuff)

http://www.uwplatt.edu/web/wtc/div/clear.html

One nice way to remember the components of CSS Box Model - MBIPC (like MPC, BIPC, etc in XII std in school)..
M - Margin (always transparent), B - Border, P - Padding, C - Content


http://www.uwplatt.edu/web/wtc/div/boxmodel.html