There are numerous scripts out there for detecting the browser via JavaScript, however, what about when you want to know the browser in your server-side code? You may ask why? The reasons are many, including page stats, browser based dynamic content, etc.

My personal reason for looking into this, is displaying an unsupported browser message (such as YouTube does for older browsers), within a website Content Management System (CMS), so that you can ensure users are using a browser that will allow them to use the full functionality of the CMS. Again, this could be done by JavaScript, but I required a server-side solution.

The Solution

In this tutorial, we will be creating a demo that will display message to users telling them if there browser is supported, and if it is not, then it will display a list of browsers that are, you can view a demo here.

In this example, only Firefox 3+ and IE8+ will be accepted as supported browsers (just to make it possible to see the result for unsupported browsers in Google Chrome, Safari and Opera), but it can be easily changed to allow other browsers.

The Code

For this tutorial we will be using ASP.Net’s HttpBrowserCapabilities facility to get the browser details. Let me start out by saying, I know that this has some limits, one being that it cannot differentiate Google Chrome from Safari, but it does my needs which is why I am using it.

Firstly, lest set the variables that we will be using to store the Browser details

Dim httpRequest As HttpBrowserCapabilities = Request.Browser 'Gets the browser details

Dim strBrowserName as string = "" 'Browser Name
Dim strBrowserVersion as string = httpRequest.Version 'Version Number
Dim intMajorVersion as integer = httpRequest.MajorVersion 'Major Version Number
Dim boolSupportedBrowser as boolean = false 'Is this a supported browser

Next, I wanted to have some better names, than provided by httpRequest.Browser, so I used a select case statement to get these names. In this process we will also be setting the value for boolSupportedBrowser.

'Set the name, and whether the browser is supported
Select Case lcase(httpRequest.Browser)

	Case "ie"
		strBrowserName = "Internet Explorer"
		if intMajorVersion >= 8 then
			boolSupportedBrowser = true
		end if 'if intMajorVersion >= 8 then

	Case "firefox", "mozilla"
		strBrowserName = "Mozilla Firefox"
		if intMajorVersion >= 3 then
			boolSupportedBrowser = true
		end if 'if intMajorVersion >= 3 then

	Case "applemac-safari"
		strBrowserName = "Safari/Google Chrome"
		boolSupportedBrowser = false

	Case "opera"
		strBrowserName = "Opera"
		boolSupportedBrowser = false

	Case Else
	   strBrowserName = "Unknown Browser"
	   boolSupportedBrowser = false

End Select 'Select Case lcase(httpRequest.Browser)

You will notice that under IE and Firefox, we only set boolSupportedBrowser to true if the Major version matches the criteria.

The Message

Now that we have all the settings that we need, we can display the message. By using the ASP.Net code tags <% %> we can include the variables set above, to include the browser name, and what content to display.

<div id="BrowserSupport"<% if not boolSupportedBrowser then %>class="Unsupported"<% end if %>>
	<div class="Message">
	<% if boolSupportedBrowser then %>
		<strong>Congratulations</strong> your browser, <em><%=strBrowserName & " " & strBrowserVersion%></em>, is supported
	<% else 'if boolSupportedBrowser then %>
		<strong><%=strBrowserName & " " & strBrowserVersion%></strong> is not a supported browser

		<br />Please upgrade to one of the following:
	<% end if 'if boolSupportedBrowser then %>
	</div>
	<% if not boolSupportedBrowser then %>
	<div class="Supported">
		<div class="Browser IE"><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx" target="_blank" title="Get Internet Explorer 8">Internet Explorer 8</a></div>

		<div class="Browser Firefox"><a href="http://www.mozilla.com" target="_blank" title="Get Mozilla Firefox">Mozilla Firefox</a></div>
		<div class="clear"></div>
	</div>
	<% end if 'if not boolSupportedBrowser then %>
</div>

Finally

And finally, the CSS used for this demo.

#BrowserSupport{
	background: #D2FFD3;
	border:1px solid #00CC00;
	color:#00CC00;
	font:10pt Arial, Helvetica, sans-serif;
	padding:10px;
	text-align:center;
	width:505px;
}

#BrowserSupport.Unsupported{
	background: #FFDFDF;
	border-color: #FF0000;
	color:#FF0000;
}

.Supported{
	padding-top:10px;
}

.Supported .Browser{
	float:left;
	margin-left:5px;
}

.Supported .Browser.IE{
	margin-left:0px;
}

.Supported .Browser a{
	background:#FFFFFF;
	border:1px solid #999999;
	color:#000000;
	display:block;
	font-size:7pt;
	font-weight:bold;
	height:15px;
	padding-top:80px;
	text-decoration:none;
	width:95px;
}

.Supported .Browser.IE a{
	background:#FFFFFF url(../images/IE.png) top center no-repeat;
}

.Supported .Browser.Firefox a{
	background:#FFFFFF url(../images/Firefox.png) top center no-repeat;
}

#BrowserSupport, .Supported .Browser a{
	-moz-border-radius :6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
}

.clear{
	clear:both;
	font-size:0px;
	height:0px;
	overflow:hidden;
}

Your messages should look something Like (if you are viewing in IE or Opera, then you will not have curved borders, as they do not support the border-radius css):

Message for a supported browser.

Message for a unsupported browser.

Compatibility, Conclusion and Download

This script has been tested in IE7, Firefox 3.5.3, Google Chrome 4.1.2, Safari 4.0.5 and Opera 10.53, all on a windows platform. This technique will allow you to do a number of things, either to display a message for unsupported browser, as in this demo, or to show different content based on browser.

The only drawback at present, is that Google Chrome is not recognised as a separate browser, it is recognised as Safari.

Also, please be aware that httpRequest.Version and httpRequest.MajorVersion may not return the value you expect. For example, I use Opera 10.53, but it returns 9.80 as the version number.

Any feedback or improvements are welcome.

I recently wrote an article for creating paging with numbers for ASP. I have now converted this into ASP.Net code, which can be found below. It uses the same ideas and structure as the ASP version, so for further details, read here, I shall only be providing the code in this article.

The Code

'Default Paging Values
Dim intTotalRecords as Integer = 0	'Total Records
Dim intNumPages as Integer = 0		'Number of pages
Dim intPageSize as Integer = -1		'Amount per page, -1 means all
Dim intPageNumber as Integer = 1	'The current page to display

'News Table Values
Dim strFrom as String = "Tbl_News"
Dim strPrimKey as String = "fldNewsID"
Dim strColumns as String = "fldNewsID, fldTitle, fldAbstract, fldDate"
Dim strWhere as String = ""
Dim strOrderBy as String = "fldDate desc"

'Get the current page number from the querystring
Dim intCurPage as Integer = 1
if (trim(request("p")) <> "") and (isnumeric(request("p"))) then
	intCurPage = request("p")
end if 'if (trim(request("p")) <> "") and (isnumeric(request("p"))) then

'Calls the function to set the current paging values
SetPagingValues(5, intCurPage, strFrom, strPrimKey, strWhere)

'calls the function to get the paged sql
strSQL = CreatePagedSQL(strFrom, strPrimKey, strColumns, strWhere, strOrderBy)

'Get the records from the database
Dim dtrNewsList As SqlDataReader
dtrNewsList = getDTR(strSQL)

If dtrNewsList.HasRows Then
	While dtrNewsList.Read()
		response.Write("<div class=""NewsList"">")
		response.Write("<span class=""Title"">" & dtrNewsList("fldTitle").ToString & "</span>")
		response.Write("<span class=""Date"">" & dtrNewsList("fldDate").ToString & "</span>")
		response.Write("<span class=""Abstract"">" & dtrNewsList("fldAbstract").ToString & "</span>")
		response.Write("</div>")
	End While 'While dtrNewsList.Read()
End If 'If dtrNewsList.HasRows Then

'close the object
dtrNewsList.Close()
dtrNewsList = Nothing

'Function to fill the data reader
Public Function getDTR(ByVal sql As String) As SqlDataReader
	Dim sqlConn As SqlConnection
	Dim cmdTemp As SqlCommand
	Dim dtr As SqlDataReader

	'create connection
	sqlConn = New SqlConnection("Database Connection String")

	'get data from database
	cmdTemp = New SqlCommand(sql, sqlConn)
	sqlConn.Open()
	dtr = cmdTemp.ExecuteReader(CommandBehavior.CloseConnection)

	'Write to log file
	objErrors.Log(strErrorLocation, strError)
	dtr = Nothing

	'return data reader
	Return dtr
End Function 'Public Function getDTR(ByVal sql As String) As SqlDataReader

Sub SetPagingValues(intTempPageSize, intTempPageNumber, strFrom, strPrimKey, strWhere)
	Dim strSQLCount as String = ""
	Dim sngTempNumPages as Integer = 0
	Dim intTempNumPages as Integer = 1
	Dim dtrSQLCount As SqlDataReader

	'Set the Page Size (number of records to show per page)
	If (Trim(intTempPageSize) <> "") And (isnumeric(intTempPageSize)) Then
		intPageSize = intTempPageSize
	Else 'If (Trim(intTempPageSize) <> "") And (isnumeric(intTempPageSize)) Then
		'not valid number, so set to -1
		'IE all records
		intPageSize = -1
	End If 'If (Trim(intTempPageSize) <> "") And (isnumeric(intTempPageSize)) Then

	'Set the page number (the current page being viewed)
	If (Trim(intTempPageNumber) <> "") And (isnumeric(intTempPageNumber)) Then
		intPageNumber = intTempPageNumber
	Else 'If (Trim(intTempPageNumber) <> "") And (isnumeric(intTempPageNumber)) Then
		'if not a valid number, set page number to 1
		intPageNumber = 1
	End If 'If (Trim(intTempPageNumber) <> "") And (isnumeric(intTempPageNumber)) Then

	'SQL to get the total number of records in table
	strSQLCount = "SELECT Count(*) As RecCount From " & strFrom & " WHERE (1=1) "

	'If given add the where clause
	If Trim(strWhere) <> "" Then
		strSQLCount = strSQLCount & " AND " & strWhere
	End If 'If Trim(strWhere) <> "" Then

	'open the sql into a DTR
	dtrSQLCount = getDTR(strSQLCount)

	'Set the total records value
	If dtrSQLCount.HasRows Then
		dtrSQLCount.Read()
		intTotalRecords = dtrSQLCount("RecCount")
	Else 'If dtrSQLCount.HasRows Then
		intTotalRecords = 0
	End If 'If dtrSQLCount.HasRows Then

	'close the DTR
	dtrSQLCount.Close()
	dtrSQLCount = Nothing

	'if Total Records and Page size is greater than 0
	'then work out the number of pages
	If (intTotalRecords > 0) And (intPageSize > 0) Then
		sngTempNumPages = intTotalRecords / intPageSize
		intTempNumPages = RoundUp(sngTempNumPages)
	Else 'If (intTotalRecords > 0) And (intPageSize > 0) Then
		intTempNumPages = 1
	End If 'If (intTotalRecords > 0) AND (intPageSize > 0) Then

	'set the num pages
	intNumPages = intTempNumPages

	'if Page number is greater than number of pages, then set to
	'number of pages
	If cint(intPageNumber) > cint(intNumPages) Then
		intPageNumber = intNumPages
	End If 'If intPageNumber > intNumPages Then
End Sub 'Sub SetPagingValues(intTempPageSize, intTempPageNumber, strFrom, strPrimKey, strWhere)

Function CreatePagedSQL(strFrom, strPrimKey, strColumns, strWhere, strOrderBy)
	'Returns paged dataset for supplied SQL, broken down into sections
	Dim strSQL as String = ""
	Dim strTopRecords as String = ""
	Dim intIgnoreRecs as Integer = 0
	Dim strPagedWhere as String = " WHERE (1=1) "

	'Create where clause
	If Trim(strWhere) <> "" Then
		strPagedWhere += " AND " & strWhere
	End If 'If Trim(strPagedWhere) <> "" Then

	'create Order clause
	If Trim(strOrderBy) <> "" Then
		strOrderBy = " ORDER BY " & strOrderBy
	End If 'If Trim(strOrderBy) <> "" Then

	'set how many records to get
	If intPageSize > 0 Then
		strTopRecords = " TOP " & intPageSize
	End If 'If intPageSize > 0 Then

	'if not on page one, set the number of records to ignore
	If (intNumPages > 1) And (intPageNumber > 1) Then
		intIgnoreRecs = intPageSize * (intPageNumber - 1)
		strPagedWhere += " AND " & strPrimKey & " NOT IN (SELECT TOP " & intIgnoreRecs & " " & strPrimKey & " FROM " & strFrom & " " & strPagedWhere & " " & strOrderBy & ")"
	End If 'If (intNumPages > 1) And (intPageNumber > 1) Then

	'create sql
	strSQL = "SELECT " & strTopRecords & " " & strColumns & " FROM " & strFrom & " " & strPagedWhere & " " & strOrderBy

	'return the sql
	CreatePagedSQL = strSQL
end function 'Function CreatePagedSQL(strFrom, strPrimKey, strColumns, strWhere, strOrderBy)

Function CreatePagingLinks(strTempAction)
	Dim strPaging as String = ""
	Dim strCurAction as String = ""

	'only display if there is more than one page
	If (intNumPages > 1) Then
		'open the paging
		strPaging += "<div class=""Paging"" >"
		strPaging += "<span class=""label"" >page:</span>"

		'if not the first page, add the previous link
		If intPageNumber > 1 Then
			strCurAction = Replace(strTempAction, "{PageNo}", intPageNumber - 1)
			strPaging += "<a class=""Previous"" href=""" & strCurAction & """ title=""Go to the previous page"" >« Previous</a>"
		End If 'If intPageNumber > 1 Then

		'loop through and add the page numbers
		For i = 1 To intNumPages

			'set current action
			strCurAction = Replace(strTempAction, "{PageNo}", i)

			strPaging += "<a href=""" & strCurAction & """ "

			'if this is the current page, mark as active
			If cint(i) = cint(intPageNumber) Then
				strPaging += " class=""Active"" "
			End If 'If i = intPageNumber Then

			strPaging += " title=""Go to Page " & i & """>" & i & "</a> "
		Next 'For i = 1 To intNumPages

		'if not the last page, show the next link
		If cint(intPageNumber) < cint(intNumPages) Then
			strCurAction = Replace(strTempAction, "{PageNo}", intPageNumber + 1)
			strPaging += "<a class=""Next"" href=""" & strCurAction & """ title=""Go to the next page"" >Next »</a>"
		End If 'If cint(intPageNumber) < cint(intNumPages) Then

		'close the paging
		strPaging += "<div class=""clear"" ></div>"
		strPaging += "</div>"
	End If 'If (intNumPages > 1) Then

	'return paging links
	CreatePagingLinks = strPaging
End Function 'Function CreatePagingLinks(strTempAction)

Function RoundUp(intNum)
	'Rounds up the given number
	If (intNum - Fix(intNum) <> 0) Then
		RoundUp = Fix(intNum) + 1
	Else 'If (intNum - Fix(intNum) <> 0) Then
		RoundUp = intNum
	End If 'If (intNum - Fix(intNum) <> 0) Then
end function 'Function RoundUp(intNum)

Conclusion

As well as giving the user easier controls to navigation through the pages, this code should also put less strain on your database, and also should result in quicker load times for you pages.

Any feedback or improvements are welcome.

You’ll be hard pressed to find a dynamic website these days that doesn’t make use of paging in some way or form, especially on list pages such as Products, News, etc. For a long time, I used the in built server behaviours in Dreamweaver, which suited most purposes, as they provided working previous, next, first and last links.

Problems started however as pages got more complex, and for unknown reasons the generated code would work on some sections and not others, even despite the code being the same. This combined with the issues that came with recordsets containing more and more data, I needed to look for an alternative, and more efficient solution.

The Solution

After much searching, I found that the general consensus, for more efficient paging, is to retrieve only the required amount of records from the database, so have 1000 records, then you only get the 50 that you are wanting to display at that time. This will require a little more planning when constructing your code and SQL statements, but will save a lot of load on your database, as you will not be requesting 1000 records on every page load.

In this tutorial, a sample news list page will be created, you can view a demo here.

The Required SQL

Firstly, lets have a look at SQL that we need to retrieve the records, the first is for the first page of records, and the second is to return the second page of results. What the second statement does, is return the top 5 results, after ignoring the first 5 records, and then on following pages we would ignore 10, 15, 20 and so forth records.

/* SQL request for the first page of records */
SELECT top 5 fldNewsID, fldTitle, fldAbstract, fldDate FROM Tbl_News ORDER BY fldDate desc

/* SQL request for the second page of records */
SELECT TOP 5 fldNewsID, fldTitle, fldAbstract, fldDate FROM Tbl_News WHERE (1=1) AND fldNewsID NOT IN (SELECT TOP 5 fldNewsID FROM Tbl_News WHERE (1=1) ORDER BY fldDate desc) ORDER BY fldDate desc

The ASP Functions

We shall be creating a function that will generate these statements for us, but first there are values that need to be set in order to set these values correctly.

'Default Paging Values
intTotalRecords = 0	'Total Records
intNumPages = 0		'Number of pages
intPageSize = -1	'Amount per page, -1 means all
intPageNumber = 1	'The current page to display

'News Table Values
strFrom = "Tbl_News"
strPrimKey = "fldNewsID"
strColumns = "fldNewsID, fldTitle, fldAbstract, fldDate"
strWhere = ""
strOrderBy = "fldDate desc"

'Get the current page number from the querystring
intCurPage = 1
if (trim(request("p")) <> "") and (isnumeric(request("p"))) then
	intCurPage = request("p")
end if 'if (trim(request("p")) <> "") and (isnumeric(request("p"))) then

'Calls the function to set the current paging values
SetPagingValues 5, intCurPage, strFrom, strPrimKey, strWhere

Having set some presents, and gotten the current page number from the querystring, we call a function SetPagingValues that will take these details, and then set the Total Records and Number of Pages so that the paged SQL can be created properly.

Sub SetPagingValues(intTempPageSize, intTempPageNumber, strFrom, strPrimKey, strWhere)
	strSQLCount = ""
	sngTempNumPages = 0
	intTempNumPages = 1

	'Set the Page Size (number of records to show per page)
	If (Trim(intTempPageSize) <> "") And (isnumeric(intTempPageSize)) Then
		intPageSize = intTempPageSize
	Else 'If (Trim(intTempPageSize) <> "") And (isnumeric(intTempPageSize)) Then
		'not valid number, so set to -1
		'IE all records
		intPageSize = -1
	End If 'If (Trim(intTempPageSize) <> "") And (isnumeric(intTempPageSize)) Then

	'Set the page number (the current page being viewed)
	If (Trim(intTempPageNumber) <> "") And (isnumeric(intTempPageNumber)) Then
		intPageNumber = intTempPageNumber
	Else 'If (Trim(intTempPageNumber) <> "") And (isnumeric(intTempPageNumber)) Then
		'if not a valid number, set page number to 1
		intPageNumber = 1
	End If 'If (Trim(intTempPageNumber) <> "") And (isnumeric(intTempPageNumber)) Then

	'SQL to get the total number of records in table
	strSQLCount = "SELECT Count(*) As RecCount From " & strFrom & " WHERE (1=1) "

	'If given add the where clause
	If Trim(strWhere) <> "" Then
		strSQLCount = strSQLCount & " AND " & strWhere
	End If 'If Trim(strWhere) <> "" Then

	'open the sql
	Set objCmd = Server.CreateObject("ADODB.Command")
	objCmd.ActiveConnection = strConnectionString

	objCmd.CommandText = strSQLCount
	set rsRecCount = objCmd.Execute 

	'Set the total records value
	If not rsRecCount.eof Then
		intTotalRecords = rsRecCount("RecCount")
	Else 'If not rsRecCount.eof Then
		intTotalRecords = 0
	End If 'If not rsRecCount.eof Then

	'close the count
	set rsRecCount = nothing

	'close the connection
	objCmd.ActiveConnection = nothing
	Set objCmd = nothing

	'if Total Records and Page size is greater than 0
	'then work out the number of pages
	If (intTotalRecords > 0) And (intPageSize > 0) Then
		sngTempNumPages = intTotalRecords / intPageSize
		intTempNumPages = RoundUp(sngTempNumPages)
	Else 'If (intTotalRecords > 0) And (intPageSize > 0) Then
		intTempNumPages = 1
	End If 'If (intTotalRecords > 0) AND (intPageSize > 0) Then

	'set the num pages
	intNumPages = intTempNumPages

	'if Page number is greater than number of pages, then set to
	'number of pages
	If cint(intPageNumber) > cint(intNumPages) Then
		intPageNumber = intNumPages
	End If 'If intPageNumber > intNumPages Then
End Sub 'Sub SetPagingValues(intTempPageSize, intTempPageNumber, strFrom, strPrimKey, strWhere)

Function RoundUp(intNum)
	'Rounds up the given number
	If (intNum - Fix(intNum) <> 0) Then
		RoundUp = Fix(intNum) + 1
	Else 'If (intNum - Fix(intNum) <> 0) Then
		RoundUp = intNum
	End If 'If (intNum - Fix(intNum) <> 0) Then
end function 'Function RoundUp(intNum)

The RoundUp is simply used to ensure that we have the correct number of pages. As the number of pages is calculated by Total Records/Amount Per page, it is quite possible that the answer could contain a decimal, such as 3.5, in this case, we need to ensure that the next full number (in this case 4) is used.

Now that we have all the variables set correctly, we can call the function to create the SQL statement.

'calls the function to get the paged sql
strSQL = CreatePagedSQL(strFrom, strPrimKey, strColumns, strWhere, strOrderBy)

Function CreatePagedSQL(strFrom, strPrimKey, strColumns, strWhere, strOrderBy)
	'Returns paged dataset for supplied SQL, broken down into sections
	strSQL = ""
	strTopRecords = ""
	intIgnoreRecs = 0
	strPagedWhere = " WHERE (1=1) "

	'Create where clause
	If Trim(strWhere) <> "" Then
		strPagedWhere = strPagedWhere & " AND " & strWhere
	End If 'If Trim(strPagedWhere) <> "" Then

	'create Order clause
	If Trim(strOrderBy) <> "" Then
		strOrderBy = " ORDER BY " & strOrderBy
	End If 'If Trim(strOrderBy) <> "" Then

	'set how many records to get
	If intPageSize > 0 Then
		strTopRecords = " TOP " & intPageSize
	End If 'If intPageSize > 0 Then

	'if not on page one, set the number of records to ignore
	If (intNumPages > 1) And (intPageNumber > 1) Then
		intIgnoreRecs = intPageSize * (intPageNumber - 1)
		strPagedWhere = strPagedWhere & " AND " & strPrimKey & " NOT IN (SELECT TOP " & intIgnoreRecs & " " & strPrimKey & " FROM " & strFrom & " " & strPagedWhere & " " & strOrderBy & ")"
	End If 'If (intNumPages > 1) And (intPageNumber > 1) Then

	'create sql
	strSQL = "SELECT " & strTopRecords & " " & strColumns & " FROM " & strFrom & " " & strPagedWhere & " " & strOrderBy

	'return the sql
	CreatePagedSQL = strSQL
end function 'Function CreatePagedSQL(strFrom, strPrimKey, strColumns, strWhere, strOrderBy)

We now have our SQL statement, so we can now use it to output the selected records.

'Open a command oject for connections to the database
Set objCommand = Server.CreateObject("ADODB.Command")
objCommand.ActiveConnection = strConnectionString

'Get the records from the database
objCommand.CommandText = strSQL
set rsNewsList = objCommand.Execute 

'Loop through the recordset and output the data
while not rsNewsList.eof

	response.Write("<div class=""NewsList"">")
	response.Write("<span class=""Title"">" & rsNewsList("fldTitle") & "</span>")
	response.Write("<span class=""Date"">" & rsNewsList("fldDate") & "</span>")
	response.Write("<span class=""Abstract"">" & rsNewsList("fldAbstract") & "</span>")
	response.Write("</div>")

rsNewsList.movenext
wend

'Output the numbered paging links
response.write(CreatePagingLinks("default.asp?p={PageNo}"))

'empty the recordset
Set rsNewsList = nothing

'close the command object
objCommand.ActiveConnection = nothing
Set objCommand = nothing

And the final step is to output the paging links, by creating the function CreatePagingLinks (called on line 22).

Function CreatePagingLinks(strTempAction)
	strPaging = ""
	strCurAction = ""

	'only display if there is more than one page
	If (intNumPages > 1) Then
		'open the paging
		strPaging = strPaging & "<div class=""Paging"" >"
		strPaging = strPaging & "<span class=""label"" >page:</span>"

		'if not the first page, add the previous link
		If intPageNumber > 1 Then
			strCurAction = Replace(strTempAction, "{PageNo}", intPageNumber - 1)
			strPaging = strPaging & "<a class=""Previous"" href=""" & strCurAction & """ title=""Go to the previous page"" >« Previous</a>"
		End If 'If intPageNumber > 1 Then

		'loop through and add the page numbers
		For i = 1 To intNumPages

			'set current action
			strCurAction = Replace(strTempAction, "{PageNo}", i)

			strPaging = strPaging & "<a href=""" & strCurAction & """ "

			'if this is the current page, mark as active
			If cint(i) = cint(intPageNumber) Then
				strPaging = strPaging & " class=""Active"" "
			End If 'If i = intPageNumber Then

			strPaging = strPaging & " title=""Go to Page " & i & """>" & i & "</a> "
		Next 'For i = 1 To intNumPages

		'if not the last page, show the next link
		If cint(intPageNumber) < cint(intNumPages) Then
			strCurAction = Replace(strTempAction, "{PageNo}", intPageNumber + 1)
			strPaging = strPaging & "<a class=""Next"" href=""" & strCurAction & """ title=""Go to the next page"" >Next »</a>"
		End If 'If cint(intPageNumber) < cint(intNumPages) Then

		'close the paging
		strPaging = strPaging & "<div class=""clear"" ></div>"
		strPaging = strPaging & "</div>"
	End If 'If (intNumPages > 1) Then

	'return paging links
	CreatePagingLinks = strPaging
End Function 'Function CreatePagingLinks(strTempAction)

The Full ASP Code

And thats it, the full code needed to create recordset paging with page numbers, below is the full code:

strConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=Path to your database location\Private\News_Example.mdb"

'Default Paging Values
intTotalRecords = 0	'Total Records
intNumPages = 0		'Number of pages
intPageSize = -1	'Amount per page, -1 means all
intPageNumber = 1	'The current page to display

'News Table Values
strFrom = "Tbl_News"
strPrimKey = "fldNewsID"
strColumns = "fldNewsID, fldTitle, fldAbstract, fldDate"
strWhere = ""
strOrderBy = "fldDate desc"

'Get the current page number from the querystring
intCurPage = 1
if (trim(request("p")) <> "") and (isnumeric(request("p"))) then
	intCurPage = request("p")
end if 'if (trim(request("p")) <> "") and (isnumeric(request("p"))) then

'Calls the function to set the current paging values
SetPagingValues 5, intCurPage, strFrom, strPrimKey, strWhere

'calls the function to get the paged sql
strSQL = CreatePagedSQL(strFrom, strPrimKey, strColumns, strWhere, strOrderBy)

'Open a command oject for connections to the database
Set objCommand = Server.CreateObject("ADODB.Command")
objCommand.ActiveConnection = strConnectionString

'Get the records from the database
objCommand.CommandText = strSQL
set rsNewsList = objCommand.Execute 

'Loop through the recordset and output the data
while not rsNewsList.eof

	response.Write("<div class=""NewsList"">")
	response.Write("<span class=""Title"">" & rsNewsList("fldTitle") & "</span>")
	response.Write("<span class=""Date"">" & rsNewsList("fldDate") & "</span>")
	response.Write("<span class=""Abstract"">" & rsNewsList("fldAbstract") & "</span>")
	response.Write("</div>")

rsNewsList.movenext
wend

'Output the numbered paging links
response.write(CreatePagingLinks("default.asp?p={PageNo}"))

'empty the recordset
Set rsNewsList = nothing

'close the command object
objCommand.ActiveConnection = nothing
Set objCommand = nothing

Sub SetPagingValues(intTempPageSize, intTempPageNumber, strFrom, strPrimKey, strWhere)
	strSQLCount = ""
	sngTempNumPages = 0
	intTempNumPages = 1

	'Set the Page Size (number of records to show per page)
	If (Trim(intTempPageSize) <> "") And (isnumeric(intTempPageSize)) Then
		intPageSize = intTempPageSize
	Else 'If (Trim(intTempPageSize) <> "") And (isnumeric(intTempPageSize)) Then
		'not valid number, so set to -1
		'IE all records
		intPageSize = -1
	End If 'If (Trim(intTempPageSize) <> "") And (isnumeric(intTempPageSize)) Then

	'Set the page number (the current page being viewed)
	If (Trim(intTempPageNumber) <> "") And (isnumeric(intTempPageNumber)) Then
		intPageNumber = intTempPageNumber
	Else 'If (Trim(intTempPageNumber) <> "") And (isnumeric(intTempPageNumber)) Then
		'if not a valid number, set page number to 1
		intPageNumber = 1
	End If 'If (Trim(intTempPageNumber) <> "") And (isnumeric(intTempPageNumber)) Then

	'SQL to get the total number of records in table
	strSQLCount = "SELECT Count(*) As RecCount From " & strFrom & " WHERE (1=1) "

	'If given add the where clause
	If Trim(strWhere) <> "" Then
		strSQLCount = strSQLCount & " AND " & strWhere
	End If 'If Trim(strWhere) <> "" Then

	'open the sql
	Set objCmd = Server.CreateObject("ADODB.Command")
	objCmd.ActiveConnection = strConnectionString

	objCmd.CommandText = strSQLCount
	set rsRecCount = objCmd.Execute 

	'Set the total records value
	If not rsRecCount.eof Then
		intTotalRecords = rsRecCount("RecCount")
	Else 'If not rsRecCount.eof Then
		intTotalRecords = 0
	End If 'If not rsRecCount.eof Then

	'close the count
	set rsRecCount = nothing

	'close the connection
	objCmd.ActiveConnection = nothing
	Set objCmd = nothing

	'if Total Records and Page size is greater than 0
	'then work out the number of pages
	If (intTotalRecords > 0) And (intPageSize > 0) Then
		sngTempNumPages = intTotalRecords / intPageSize
		intTempNumPages = RoundUp(sngTempNumPages)
	Else 'If (intTotalRecords > 0) And (intPageSize > 0) Then
		intTempNumPages = 1
	End If 'If (intTotalRecords > 0) AND (intPageSize > 0) Then

	'set the num pages
	intNumPages = intTempNumPages

	'if Page number is greater than number of pages, then set to
	'number of pages
	If cint(intPageNumber) > cint(intNumPages) Then
		intPageNumber = intNumPages
	End If 'If intPageNumber > intNumPages Then
End Sub 'Sub SetPagingValues(intTempPageSize, intTempPageNumber, strFrom, strPrimKey, strWhere)

Function CreatePagedSQL(strFrom, strPrimKey, strColumns, strWhere, strOrderBy)
	'Returns paged dataset for supplied SQL, broken down into sections
	strSQL = ""
	strTopRecords = ""
	intIgnoreRecs = 0
	strPagedWhere = " WHERE (1=1) "

	'Create where clause
	If Trim(strWhere) <> "" Then
		strPagedWhere = strPagedWhere & " AND " & strWhere
	End If 'If Trim(strPagedWhere) <> "" Then

	'create Order clause
	If Trim(strOrderBy) <> "" Then
		strOrderBy = " ORDER BY " & strOrderBy
	End If 'If Trim(strOrderBy) <> "" Then

	'set how many records to get
	If intPageSize > 0 Then
		strTopRecords = " TOP " & intPageSize
	End If 'If intPageSize > 0 Then

	'if not on page one, set the number of records to ignore
	If (intNumPages > 1) And (intPageNumber > 1) Then
		intIgnoreRecs = intPageSize * (intPageNumber - 1)
		strPagedWhere = strPagedWhere & " AND " & strPrimKey & " NOT IN (SELECT TOP " & intIgnoreRecs & " " & strPrimKey & " FROM " & strFrom & " " & strPagedWhere & " " & strOrderBy & ")"
	End If 'If (intNumPages > 1) And (intPageNumber > 1) Then

	'create sql
	strSQL = "SELECT " & strTopRecords & " " & strColumns & " FROM " & strFrom & " " & strPagedWhere & " " & strOrderBy

	'return the sql
	CreatePagedSQL = strSQL
end function 'Function CreatePagedSQL(strFrom, strPrimKey, strColumns, strWhere, strOrderBy)

Function CreatePagingLinks(strTempAction)
	strPaging = ""
	strCurAction = ""

	'only display if there is more than one page
	If (intNumPages > 1) Then
		'open the paging
		strPaging = strPaging & "<div class=""Paging"" >"
		strPaging = strPaging & "<span class=""label"" >page:</span>"

		'if not the first page, add the previous link
		If intPageNumber > 1 Then
			strCurAction = Replace(strTempAction, "{PageNo}", intPageNumber - 1)
			strPaging = strPaging & "<a class=""Previous"" href=""" & strCurAction & """ title=""Go to the previous page"" >« Previous</a>"
		End If 'If intPageNumber > 1 Then

		'loop through and add the page numbers
		For i = 1 To intNumPages

			'set current action
			strCurAction = Replace(strTempAction, "{PageNo}", i)

			strPaging = strPaging & "<a href=""" & strCurAction & """ "

			'if this is the current page, mark as active
			If cint(i) = cint(intPageNumber) Then
				strPaging = strPaging & " class=""Active"" "
			End If 'If i = intPageNumber Then

			strPaging = strPaging & " title=""Go to Page " & i & """>" & i & "</a> "
		Next 'For i = 1 To intNumPages

		'if not the last page, show the next link
		If cint(intPageNumber) < cint(intNumPages) Then
			strCurAction = Replace(strTempAction, "{PageNo}", intPageNumber + 1)
			strPaging = strPaging & "<a class=""Next"" href=""" & strCurAction & """ title=""Go to the next page"" >Next »</a>"
		End If 'If cint(intPageNumber) < cint(intNumPages) Then

		'close the paging
		strPaging = strPaging & "<div class=""clear"" ></div>"
		strPaging = strPaging & "</div>"
	End If 'If (intNumPages > 1) Then

	'return paging links
	CreatePagingLinks = strPaging
End Function 'Function CreatePagingLinks(strTempAction)

Function RoundUp(intNum)
	'Rounds up the given number
	If (intNum - Fix(intNum) <> 0) Then
		RoundUp = Fix(intNum) + 1
	Else 'If (intNum - Fix(intNum) <> 0) Then
		RoundUp = intNum
	End If 'If (intNum - Fix(intNum) <> 0) Then
end function 'Function RoundUp(intNum)

Styling

Finally, some CSS just to make the sample easier to visualise.

.NewsList{
	border:1px solid #000000;
	margin-bottom:10px;
	padding:5px;
	width:500px;
}

.NewsList .Title{
	font:bold 12pt Arial, Helvetica, sans-serif;
}

.NewsList .Date{
	font:italic 8pt Arial, Helvetica, sans-serif;
	padding-left:10px;
}

.NewsList .Abstract{
	font:10pt Arial, Helvetica, sans-serif;
	display:block;
}

.Paging .label{
	display:block;
	float:left;
	padding:3px;
	margin:0px 0px 2px 0px;
	color:#999999;
}

.Paging a{
	display:block;
	float:left;
	border:1px solid #999999;
	padding:2px;
	margin:0px 0px 2px 2px;
	text-align:right;
	width:16px;
	text-decoration:none;
	color:#999999;
}

.Paging a:hover{
	border:1px solid #000000;
	color:#000000;
}

.Paging a.Active{
	border:1px solid #000000;
	color:#000000;
}

.Paging a.Previous, .Paging a.Next{
	width:auto;
	padding:2px 4px;
}

Conclusion and Download

As well as giving the user easier controls to navigation through the pages, this code should also put less strain on your database, and also should result in quicker load times for you pages.

Any feedback or improvements are welcome.

Although all CSS3 techniques are not yet full supported (well, to be honest, not supported in Internet Explorer, surprise surprise), there are some useful techniques that are worth knowing about now, and currently (on my personal tests), work in Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, but are also said to work in Konqueror and Opera.

Here we shall be looking at four techniques in particular, border-radius, box-shadow, text-shadow and word-wrap.

Border-Radius

Border-Radius will allow you to create round corners, without the need to use images. You can add it to all, or specific corners, buy using the following:

/* Round all corners */
-moz-border-radius:10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;

/* Round top left corner */
-moz-border-radius-topleft :10px;
-webkit-border-top-left-radius: 10px;
-khtml-border-top-left-radius: 10px;

This technique works in Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, you can view a demo here. For those using an unsupported browser, a screen shot is below:

Screen shot of Border-Radius in use.

Box-Shadow

Box-Shadow will apply a drop shadow to the box. It takes three lengths and a colour as its attributes, the lengths are as follows:

• The horizontal offset, positive means the shadow will be on the right, a negative offset will put the shadow on the left
• The vertical offset, a positive one means the shadow will be below the box, a negative one means the shadow will be above the box
• The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be

Use the following css to add a shadow:

-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
-khtml-box-shadow: 10px 10px 5px #888;

This technique works in Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, you can view a demo here. For those using an unsupported browser, a screen shot is below:

Screen shot of Box-Shaodw in use.

Text-Shadow

Text-Shadow will apply a drop shadow to text. It takes three lengths and a colour as its attributes, the lengths are as follows:

• The horizontal offset, positive means the shadow will be on the right, a negative offset will put the shadow on the left
• The vertical offset, a positive one means the shadow will be below the box, a negative one means the shadow will be above the box
• The blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be

Use the following css to add a shadow:

text-shadow: 2px 2px 2px #333;

This technique works in Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, you can view a demo here. For those using an unsupported browser, a screen shot is below:

Screen shot of Text-Shaodw in use.

Word-Wrap

Word-wrap allows long words to be wrapped within a box, making the word flow onto the next line. It has two possible values, normal and break-word.

Using break-word you will be able to force long words to be spread across multiple lines.

Use the following css to add a shadow:

word-wrap:break-word;

This technique works in IE7, Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, you can view a demo here. For those using an unsupported browser, a screen shot is below:

Screen shot of Word-Wrap in use.

Compatibility, Conclusion and Download

These techniques have been tested in IE7, Firefox 3.6.3, Google Chrome 4.1.2 and Safari 4.0.5, all on a windows platform. Please refer to each example as to which browsers they do work in. These are very useful techniques, and can save a lot of time, as they are much simpler than trying to reproduce the same results with images. All we need now is for Microsoft to pick up these techniques an include them in Internet Explorer, so that they can be used without needing to provide alternatives just for IE.

Any feedback or improvements are welcome.

Probably one of the most common needs for drop down menus (select menus), is to have multiple depending drop downs, an example of this could be cars, having makes and models. The requirement, is that when a user selects a value in the first drop down, the second drop down is then filled with corresponding data.

In the past, this was solved by submitting the page on each selection, and although this solves the problem quite well, it is far from ideal. With this method the whole page would have to be loaded every time the user selects a value (specifically if the data is to be retrieved from a database), not only meaning a slower experience for the user (and possibly a higher server usage), but also extra coding would be needed to ensure the rest of the users entries are remembered (enough though that is already likely to be in place for server side validation).

With the usage of JavaScript becoming more common, and the arrival of Ajax (asynchronous JavaScript and XML), comes a far better solution, and certainly a more user friendly solution. Using Ajax, we can send a request to the server to get the data, and then display in the in second drop down menu, without the user seeing anything happening.

The Solution

In this tutorial, we will be creating a demo that will use car make and models to illustrate the use of Ajax to meet these needs, you can view a demo here.

The Form

Firstly, lets create the form, with the needed. For this sample, we will be using just a few cars and models for each, that will not be retrieved from the database (though it can simply be altered to make so).

As you can see, only the Make menu has any values, the Model will be filled upon selection of a Make.

<form>
	<select id="CarMake" name="CarMake" onchange="GetModels();">
		<option value=""> -- Please Select -- </option>
		<option value="Audi">Audi</option>
		<option value="BMW">BMW</option>
		<option value="Ford">Ford</option>
	</select>
	<select id="CarModel" name="CarModel">
		<option value=""> -- Please Select -- </option>
	</select>
</form>

The Ajax

That’s the easy part done with, now onto the Ajax. Firstly we need to create the XmlHttpRequest Object that will be used to retrieve the data.

//Our XmlHttpRequest object to get the models
var xmlModels = getXmlHttpRequestObject();

//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	}else if(window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}

Now we will create the GetModels that is called when a change is made to the Car Make drop down. This function will get the current selected value of the Car Make drop down, and then make a call to an ASP page, which will process the make and return the relevant models.

function GetModels(){

	//Get the Car Make
	sltCarMake = document.getElementById("CarMake");
	strCarMake = sltCarMake.options[sltCarMake.selectedIndex].value;

	//URL to get the models from, the timestamp is to ensure that
	//each request is fresh, and not cached
	//(especially if data is from the database)
	var timestamp = Number(new Date());
	var url='models.asp?Make=' + strCarMake + '&ts=' + timestamp

	//The Ajax Request, the response is handled in the function Models_Handle
	xmlModels.open("GET", url, true);
	xmlModels.onreadystatechange = Models_Handle;
	xmlModels.send(null);
}

Now that we have the data, we need to process it, and that is done by the Models_Handle function, which is take the data, and split it into an array, which is then entered into the drop down menu.

function Models_Handle(){
	if (xmlModels.readyState == 4) {
		//Get the Response
		var strResponse = xmlModels.responseText

		//Car Model object
		sltCarModel = document.getElementById("CarModel");

		//reset select menu to default
		sltCarModel.options.length=0;
		sltCarModel.options[0] = new Option(" -- Please Select -- ","");

		if (strResponse != ""){

			//Split response into array
			var arrResponse = strResponse.split("||");	

			var arrLen = arrResponse.length;
			var intPos = 0;
			for(i=0;i<arrLen;i++){
				sltCarModel.options[i + 1] = new Option(arrResponse[i],arrResponse[i]);
			}
		}
	}
}

The ASP Page

All that is left to create is the ASP page to return the data. In this sample we will be using some hard coded values, but you can simply replace this with some database driven code to output the same results.

strCarMake = request("Make")
strCarModels = ""

select case lcase(strCarMake)

	case "audi"
		strCarModels = "A1||A2||A3||A4||A5"
	case "bmw"
		strCarModels = "Series 1||Series 3||Series 5||Series 6||Series 7"
	case "ford"
		strCarModels = "Ka||Fiesta||Focus||Focus RS||Mondeo"

end select

response.Write(strCarModels)

Compatibility, Conclusion and Download

This script has been tested in IE7 (though should also work in IE6), Firefox 3.5.3, Google Chrome 4.1.2 and Safari 4.0.5, all on a windows platform. This is a very useful technique, which can easily be altered to fill several dependant drop downs. The Ajax technique can also be used retrieve data for other form elements, and to get ‘dynamic’ content for web pages.

Any feedback or improvements are welcome.

Tabs have been used for navigation for many years, and this has generally been done by using an image, either as a background, or using the <img> tag. The main disadvantage to this method is that each tab must be the exact same size (thus having varying degrees of ‘padding’ for the text), or needing a different image for each tab. This will cause problems, either when adding a new tab, or should the tab text be too long.

There is one popular css method, know as ‘Sliding Doors’, combined with ‘CSS Sprite Images‘, that allows for the use of a single image to be used for tabs of any width (Note: Depending on the width of the tab image). Using these two methods, we will reproduce an effect similar to the navigation on Play.com.

The Solution

We will be creating navigation that will look as below, you can view a demo here.

Navigation Tabs, using sliding door method, with normal, hover and current states.

Tab Image

Top: Normal, Middle: Hover, Bottom: Current

This is the single image that will be used in creating the navigation. It contains three different tabs. The grey will be used for the normal state of the navigation, the blue will be used for the hover state, and the orange will be used for the “current” page.

HTML

Firstly lets look at the HTML for our navigation. This is what a typical navigation might look like (as you can see each link will be a different length):

<div class="MainNavigation">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Testimonials</a></li>
		<li><a href="#">Contact Us</a></li>
	</ul>
</div>

Now we add a few extra parts to the HTML, which will result in the following:

<div class="MainNavigation">
	<ul>
		<li><a href="#" class="current"><span>Home</span></a></li>
		<li><a href="#"><span>Services</span></a></li>
		<li><a href="#"><span>Portfolio</span></a></li>
		<li><a href="#"><span>Testimonials</span></a></li>
		<li><a href="#"><span>Contact Us</span></a></li>
	</ul>
</div>

You will see that I have added class=”current” to the home link, this will be used to change the style of the current page. I have also added <span></span> to each link, as this is needed for adding the background image, I will explain why later.

CSS

Firstly, lets create the CSS to convert the navigation from a list into a horizontal menu.

.MainNavigation, .MainNavigation ul, .MainNavigation ul li{
	font:bold 10pt Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
}

.MainNavigation ul li{
	float:left;
	list-style-type:none;
}

.MainNavigation ul li a{
	color:#333333;
	display:block; /* Important - without this the technique will not work */
	float:left;
	margin:0px 2px; /*tides the navigation up by adding space between each */
	text-decoration:none;
}

.MainNavigation ul li a span{
	display:block; /* Important - without this the technique will not work */
}

Now that is out of the way, lets look at adding the tab image to the links. This is where the <span> tags, that we added earlier, come into place. The Background-image property of CSS only allows for one image to be attached to any element, so by adding the background image to the links, we would achieve the following:

Navigation Tabs, without adding spans.

By adding the <span> tags, we give ourselves two elements to add the image to. So lets look at the CSS for doing this:

/* Make the image available to both the link, and the span */
.MainNavigation ul li a, .MainNavigation ul li a span{
	background:#ffffff url(../images/Tabs.jpg) no-repeat;
}

/* Add the following to the relevant classes */
.MainNavigation ul li a{
	background-position:0 0;
	padding:0px 0px 0px 10px;
}

.MainNavigation ul li a span{
	background-position:100% 0;
	height:20px; /* Height of tab, minus the top & bottom paddings */
	padding:5px 10px 0px 0px;
}

As we are using CSS Sprites in this tutorial, we attach the image once, and then use background-position to determine which part of the image to use. You add two figures to background-position (either as pixels or percentages), the first gives the position on the x-axis and the second gives the position on the y-axis (the starting point is the top left corner of the image).

For the link, we need to show from the top left (this part isn’t absolutely needed, but I always add it for consistency), so we add background-position:0 0;. To make sure that this image is not fully overflowed by the span’s image, we need to add some padding on the link, as you can see by padding:0px 0px 0px 10px; I have added 10px to the left (adjust this according to your required padding, I am adding 10px to the left and right of the tab).

For the span, we need to show from the top right of the image, this is achieved by background-position:100% 0;.  We then add 10px to the right padding for this, which will now create the full tab. To tidy up the tab, and make the text align in the middle, we add height:20px; and padding:5px 10px 0px 0px;. Adding the 5px padding to the top will align the text in the middle. The height is added to make sure the full tab is displayed (this is calculated by taking the height of the tab, and reducing it by the top and bottom padding).

Your tabs should now look as follows:

Navigation Tabs, using sliding door method.

Hover and Current States

The Final step is to add the hover and current states. Add the following styles to do this:

.MainNavigation ul li a:hover{
	background-position:0 -25px;
	color:#ffffff;
}

.MainNavigation ul li a:hover span{
	background-position:100% -25px;
}

.MainNavigation ul li a.current, .MainNavigation ul li a.current:hover{
	background-position:0 -50px;
	color:#ffffff;
}

.MainNavigation ul li a.current span, .MainNavigation ul li a.current:hover span{
	background-position:100% -50px;
}

Your tabs should now be the same as our intended final result:

Navigation Tabs, using sliding door method, with normal, hover and current states.

Final Code

HTML

<div class="MainNavigation">
	<ul>
		<li><a href="#" class="current"><span>Home</span></a></li>
		<li><a href="#"><span>Services</span></a></li>
		<li><a href="#"><span>Portfolio</span></a></li>
		<li><a href="#"><span>Testimonials</span></a></li>
		<li><a href="#"><span>Contact Us</span></a></li>
	</ul>
</div>

CSS

.MainNavigation, .MainNavigation ul, .MainNavigation ul li{
	font:bold 10pt Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
}

.MainNavigation ul li{
	float:left;
	list-style-type:none;
}

/* Make the image available to both the link, and the span */
.MainNavigation ul li a, .MainNavigation ul li a span{
	background:#ffffff url(../images/Tabs.jpg) no-repeat;
}

.MainNavigation ul li a{
	background-position:0 0;
	color:#333333;
	cursor:pointer; /* Added to make sure pointer shows in IE, as the span seems to alter this */
	display:block; /* Important - without this the technique will not work */
	float:left;
	margin:0px 2px; /*tides the navigation up by adding space between each */
	padding:0px 0px 0px 10px;
	text-decoration:none;
}

.MainNavigation ul li a span{
	background-position:100% 0;
	display:block; /* Important - without this the technique will not work */
	height:20px; /* Height of tab, minus the top & bottom paddings */
	padding:5px 10px 0px 0px;
}

.MainNavigation ul li a:hover{
	background-position:0 -25px;
	color:#ffffff;
}

.MainNavigation ul li a:hover span{
	background-position:100% -25px;
}

.MainNavigation ul li a.current, .MainNavigation ul li a.current:hover{
	background-position:0 -50px;
	color:#ffffff;
}

.MainNavigation ul li a.current span, .MainNavigation ul li a.current:hover span{
	background-position:100% -50px;
}

Compatibility, Conclusion and Download

This script has been tested in IE7 (though should also work in IE6), Firefox 3.5.3, and Google Chrome 4.0.2, all on a windows platform. This is a very useful technique, which can used for tabs, buttons, and most things where two backgrounds might be needed.

Any feedback or improvements are welcome.

When many people think of sprites, they generally thing of a single small image (usually of old computer game characters), however, here we are referring to ‘CSS Sprites’, which is something quite different. A CSS Sprite is the combination of a number of images into one large one, which are then accessed using the background-position property of CSS.

Why should I use CSS Sprites?

You might be thinking that CSS Sprites sounds like more hassle than its worth, and that it’s quicker to use ’sliced’ images in your website. The that might be the case for building your website, but when loading your website (which lets face it, is the important issue), the less images you have the better. The reason for this, is that each image request has a separate HTTP-Request, and the more of those the longer load time you are likely to have. For more information on this, check out the following article from the Yahoo Developer Network:

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages. [Continue Reading]
Best Practices for Speeding Up Your Web Site, Yahoo Developer Network

How will I benefit from CSS Sprites?

To show the difference that CSS sprites can make, I have created two basic examples, one using CSS Sprites, and one using individual images.

As you can see from the table above, the CSS Sprite version has less HTTP requests, and a lower total size. This is as a result of the single image being smaller (in file size) than the 4 separate ones, but also, due to one requesting one header instead of four for images.

You may feel that the saving is not worth the extra work of Sprites, and on very low traffic sites, I would agree (though still use them), but once you start getting higher traffic, you will really start saving the bandwidth. Also, bare in mind that this is a very basic example, and more complex designs will likely use more images, and with this, CSS sprites can become more useful.

How do I use CSS Sprites?

Finally, we get to the point of this article, how to use CSS Sprites. I have taken four icons (from this basic set), and combined them into one image. View Here

HTML

Here is the basic HTML that we will be using in this example.

<ul class="Nav">
	<li class="Home"><a href="#">Home</a></li>
	<li class="Events"><a href="#">Events</a></li>
	<li class="Cart"><a href="#">Cart</a></li>
	<li class="Contact"><a href="#">Contact Us</a></li>
</ul>

CSS

Lets first take a look at the css we would use, should we be using individual images.

.Nav, .Nav li{
	margin:0px;
	padding:0px;
}

.Nav li{
	float:left;
	list-style-type:none;
}

.Nav li a{
	background:top left no-repeat;
	display:block;
	float:left;
	font:bold 120% Arial, Helvetica, sans-serif;
	height:44px;
	margin-right:40px;
	padding:20px 0px 0px 70px;
	text-decoration:none;
}

.Nav li.Home a{
	background-image: url(../images/home.jpg);
}

.Nav li.Events a{
	background-image: url(../images/events.jpg);
}

.Nav li.Cart a{
	background-image: url(../images/Cart.jpg);
}

.Nav li.Contact a{
	background-image: url(../images/contact.jpg);
}

Each class is used to identify which image is to be used. Now, to change this css to use the single sprite image we have created.

.Nav li a{
	background:url(../images/sprite.jpg) no-repeat;
}

.Nav li.Home a{
	background-position:0 0;
}

.Nav li.Events a{
	background-position:0 -64px;
}

.Nav li.Cart a{
	background-position:0 -128px;
}

.Nav li.Contact a{
	background-position:0 -192px;
}

As you can see, there is very little difference in the amount of code needed. All that is needed is to call the image once, on the link background:url(../images/sprite.jpg) no-repeat;, and using the classes to identify the position to use in the image. The position is calculated from the top left of the image, thus .Home is background-position:0 0;. This first number represents the position on the x-axis, and the second number represents the position on the y-axis.

Some Restrictions

As with everything, CSS Sprites have certain restrictions, and have a limit to what they can be used for. The main issue is repeating backgrounds. Although you can do repeats with Sprites, it is far trickier than using separate images for these, and you will often end up displaying parts of the sprites that you do not wish to.

Other Examples

Below is a list of popular sites that use sprite images, which are more complex than the demos given:

• Play.com - Sprite Image
• Facebook - Sprite Image
• Google - Sprite Image

Compatibility, Conclusion and Download

This script has been tested in IE7 (though should also work in IE6), Firefox 3.5.3, and Google Chrome 4.0.2, all on a windows platform. CSS Sprites can be very useful, and once the method is understood, easy to implement.

I finally came across a partial solution to my problem on Studio Grass Hopper (SGH). This solution provided a filter for adding current-cat class to that posts categories. However, this solution did not highlight Parent (empty) categories as well.

In this tutorial, I will expand on SGH’s solution, to also highlight Parent Categories.

SGH Solution

This solution offered by SGH, which works perfectly if you are only wanting to highlight assigned categories.

function sgr_show_current_cat_on_single($output) {

	global $post;

	if( is_single() ) {

		$categories = wp_get_post_categories($post->ID);

		foreach( $categories as $catid ) {
			$cat = get_category($catid);
			// Find cat-item-ID in the string
			if(preg_match('#cat-item-' . $cat->cat_ID . '#', $output)) {
				$output = str_replace('cat-item-'.$cat->cat_ID, 'cat-item-'.$cat->cat_ID . ' current-cat', $output);
			}
		}

	}
	return $output;
}

add_filter('wp_list_categories', 'sgr_show_current_cat_on_single');

Changes

Now I will go through the changes to the code that I made (skip to the end if you just want the code).

Step One

The first thing we need to do is get the category parents, which can be done by using WordPress’ get_category_parents() function. This needs to be split into an array, so that we can loop through the values. To do this, add the following, after foreach( $categories as $catid ) {.

$ancestors = preg_split("/[,]+/",get_category_parents($catid, false, ','));

Step Two

We then need to loop through each category, and perform the str_replace function to add the class. The following is the code to do this:

foreach ( $ancestors as $ancestor ){
	if ($ancestor !=""){
		$catID = get_cat_ID($ancestor);
		if(preg_match('#cat-item-' . $catID . '#', $output)) {
			$output = str_replace('cat-item-'.$catID, 'cat-item-'.$catID . ' current-cat', $output);
		}
	}
}

Step Three

Finally, a small change to the preg_match and str_replace functions, as the changes thus far will case it to highlight more than the required categories.

if(preg_match('#"cat-item cat-item-' . $catID . '"#', $output)) {
	$output = str_replace('"cat-item cat-item-'.$catID.'"', '"cat-item cat-item-'.$catID . ' current-cat"', $output);
}

Finished Code

The final code is as follows, place this into your themes functions.php file, and its ready to go.

function sgr_show_current_cat_on_single($output) {
 	global $post;
	if( is_single() ) {
		$categories = wp_get_post_categories($post->ID);

			foreach( $categories as $catid ) {

				$ancestors = preg_split("/[,]+/",get_category_parents($catid, false, ','));

				foreach ( $ancestors as $ancestor ){
					if ($ancestor !=""){
						$catID = get_cat_ID($ancestor);

						if(preg_match('#"cat-item cat-item-' . $catID . '"#', $output)) {
							$output = str_replace('"cat-item cat-item-'.$catID.'"', '"cat-item cat-item-'.$catID . ' current-cat"', $output);
						}
					}
				}
			}
	}
	return $output;
}

add_filter('wp_list_categories', 'sgr_show_current_cat_on_single');

I would like to thank Studio Grass Hopper for the inspiration, and original code, any feedback or improvements are welcome.

Update March 1, 2010

In response to Joan’s comment, asking for adding the current-cat-parent class as well, I have made a a few alterations to the code, so that for the top level category, the current-cat-parent class will be added instead, and current-cat class will be added to any sub categories.

function sgr_show_current_cat_on_single($output) {
 	global $post;
	if( is_single() ) {
		$categories = wp_get_post_categories($post->ID);

			foreach( $categories as $catid ) {

				$ancestors = preg_split("/[,]+/",get_category_parents($catid, false, ','));

				foreach ( $ancestors as $ancestor ){
					if ($ancestor !=""){
						$catID = get_cat_ID($ancestor);

						$category = get_category($catID);
						$catParentID = $category->category_parent;

						if(preg_match('#"cat-item cat-item-' . $catID . '"#', $output)) {
							if ($catParentID == 0){
								$output = str_replace('"cat-item cat-item-'.$catID.'"', '"cat-item cat-item-'.$catID . ' current-cat-parent"', $output);
							}else{
								$output = str_replace('"cat-item cat-item-'.$catID.'"', '"cat-item cat-item-'.$catID . ' current-cat"', $output);
							}
						}
					}
				}
			}
	}
	return $output;
}

add_filter('wp_list_categories', 'sgr_show_current_cat_on_single');

Lines 14 -15 will get the Parent ID of the current category, and lines 18 – 22 will perform the check to determine which class to add.