LanceZhang’s Blog

Dear friends, Welcome to my blog.

ASP.NET AJAX Performance Improvement

Preface

I think everyone would agree that AJAX is one of the elements of “Web 2.0″,  every web developers should know this technology. I have been collected a list of the popular AJAX Frameworks on my chinese tech blog, we will amazedly found that, there are more than 128 AJAX Frameworks!

ajax-frameworks1

Refer to a voting result, among the 95% of the .NET developers that said they are using some flavor of Ajax either in production, development or prototype, the most used AJAX Framework is ASP.NET AJAX, with 73,7%, followed by the Ajax Control Toolkit which is used by almost half of the .NET developer that are using Ajax.

However, many beginners always complain that, using ASP.NET AJAX make their web application slow down, don’t perform as well as they had hoped.  Today, I would like to share some experience on how to optimize the ASP.NET AJAX application.

So I created a simple page with a bunch of extenders on it: CalendarExtender, SliderExtender, NumericUpDownExtender, RoundedCornersExtender, and TabContainer for our experiments.

And I would like to introduce two useful tools for our Performance Analysis:

1. HttpWatch to show the network traffic.

Here’s how the network traffic looked before any optimization:

And we can see there are totally 22 requests and spend 9 seconds to get the 654k result. It is a really terrible in performance.

without-any-optimizations

2. ScriptReferenceProfiler to show the JavaScript reference.

ScriptReferenceProfiler is an open source tool on CodePlex, for analysis the JavaScript references of ASP.NET AJAX, we can simply add the following code to our page in order to show the JavaScript references imported by ScriptManager.

<microsoft:scriptreferenceprofiler runat=“server”>
</microsoft:scriptreferenceprofiler>

We can see, before any optimization, there are 17 references found on this page, include the Microsoft Ajax Core runtime, asynchronous postback scripts, Ajax Control Toolkit Extender scripts and so on:

references-without-any-optimizations1

Optimization in web.config

To optimize the ASP.NET AJAX in our web application, first of all, we need to make sure the Compression and Caching is enabled in our web.config:

<system.web.extensions>
<scripting>
<scriptResourceHandler enableCompression=“true” enableCaching=“true”/>
</scripting>
</system.web.extensions>

1. Enable The Caching:

We know, in the development of web application, enable the caching is a must operation. To enable the caching of ASP.NET AJAX, we need make sure the enableCaching property of scriptResourceHandler is set to true.

As our expected, the page response more quickly in the second time, the expend time is coming from 12.862 seconds down to 0.409seconds; and the received size from server decrease from 692K to 14K.

without-cachingwith-caching

2. Enable The Compression:

The Caching will saving almost 95% of the network traffic in the second time we request the page, however, the first page request still ask for a huge data from server. How to reduce the first request? don’t worry, set enableCompression property of scriptResourceHandler to true will help:

without-compressionwith-compression

As we can see in the screen shot, many script files are getting smaller. and the total size decrease form 692K to 183K, about 1/4 compare to before.

♣Note: The compression is not work in Internet Explorer 6.0, because there is an known bug in IE 6, that cause the mistake might be occur when receiving the Gzip header. So the develop team close all the compression ability in IE 6.

Optimization in ScriptManager

The ScriptManager control manages client script for AJAX-enabled ASP.NET Web pages. By default, the ScriptManager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls. Following, we need to setting the property of ScriptManager to optimize the performance of ASP.NET AJAX.

1. ScriptMode for Release

In one of Scott Guthrie’s post, he explain that we should avoid when deploying an ASP.NET application into production  leave the <compilation debug=”true”/> switch on within the application’s web.config file.

It will cause:

1) The compilation of ASP.NET pages takes longer (since some batch optimizations are disabled)

2) Code can execute slower (since some additional debug paths are enabled)

3) Much more memory is used within the application at runtime

4) Scripts and images downloaded from the WebResources.axd handler are not cached

In this scenario, we can set the ScriptManager on the page run into the release mode to like the following:

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” ScriptMode=”Release”>

</asp:ScriptManager>

2. EnablePartialRendering Yes or No?

There is another property in ScriptManager named EnablePartialRendering,  it gets or sets a value that enables partial rendering of a page, which in turn enables you to update regions of the page individually by using UpdatePanel controls.

So, if we using the UpdatePanel in the page, we must set this property to true, conversely, if the UpdatePanel is not using in our page, it would be better that we set the EnablePartialRendering to false.

That will cause the unnecessary file “MicrosoftAjaxWebForm.js”, which is used to the partial rendering not import to our page.

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” EnablePartialRendering=”false”>

</asp:ScriptManager>

disable-partial-rendering

3. LoadScriptBeforeUI

ScriptManager control has LoadScriptsBeforeUI property which we can set to “False” in order to postpone several script downloads after the content is downloaded and shown. This adds the script references end of the <body> tag. As a result, we will see the content first and then the additional scripts, exteders, AJAX Control Toolkit scripts get downloaded and initialized.

This will make the page show quikly, and provide a better User Experience.

Script Combining

In the previous talk, we can see the download size is coming down, but the number of requests is still more than 20

1. ToolkitScriptManager

There is a ToolkitScriptManager control in the AJAX Control Toolkit, we can replace the default <asp:scriptmanager> control with this, it supports the ability to dynamically merge multiple client-side Javascript scripts into a single file that is downloaded to the client at runtime.  Better yet, only the Javascript needed by the specific controls on the page are included within the combined download, to make it as small as possible.

scriptmanagertoolkitscriptmanager

As the screen shot shows, It is a big savings in requests –  we now get one request for Toolkit scripts instead of 12.  In this scenario, we also got about a 50% download speed improvement by only having one request.

2. CompositeScript

If you are using ASP.NET 3.5 with SP1, there is a more powerful tool to combining the Script file – CompositeScript.

First, We can use the ScriptReferenceProfiler to show the JavaScript references

and then, we can add <CompositeScript> and <Scripts> elements as children of the ScriptManager control.

Then, Copy the script references from the page and paste them into the <Scripts> element inside the ScriptManager control, the result mark up is following:

<asp:ScriptManager ID=”ScriptManager1″ runat=”server” EnablePartialRendering=”false” ScriptMode=”Release” LoadScriptsBeforeUI=”false”>

<CompositeScript>

<Scripts>

<asp:ScriptReference Name=”MicrosoftAjax.js” />

<asp:ScriptReference Name=”AjaxControlToolkit.Common.Common.js” Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.ExtenderBase.BaseScripts.js” Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.Tabs.Tabs.js” Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.DynamicPopulate.DynamicPopulateBehavior.js”

Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.Common.DateTime.js” Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.Compat.Timer.Timer.js” Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.Animation.Animations.js” Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.Animation.AnimationBehavior.js” Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.PopupExtender.PopupBehavior.js” Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.Common.Threading.js” Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.Calendar.CalendarBehavior.js” Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.Compat.DragDrop.DragDropScripts.js”

Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

<asp:ScriptReference Name=”AjaxControlToolkit.Slider.SliderBehavior.js” Assembly=”AjaxControlToolkit, Version=3.0.20229.23352, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e” />

</Scripts>

</CompositeScript>

</asp:ScriptManager>

Run the page and view the traffic. We will see just one script reference now instead of all the script inside the <Scripts> element.

combining

November 15, 2008 Posted by | ASP.NET AJAX | , | 36 Comments

ASP.NET AJAX Advance Tips & Tricks (2) Create Rating Control dynamically

Preface:

Rating control of AJAX Control Toolkit are already widely used, However, many of my friends recently complained that if they create Rating control in code-behind dynamically, then, the Rating status will be lost after a PostBack(not into ViewState). This article describes two ways to solve the problem.

To reproduce the problem:

If we use the following code to create Rating control dynamically, then after the Button click, Rating selected value will be lost:
rating

<%@ Page Language=”C#” %>

<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<script runat=“server”>

    protected void Page_Load(object sender, EventArgs e)
    {
        AjaxControlToolkit.Rating rt = new Rating();
        Page.Form.Controls.Add(rt);
        rt.ID = “LikeRating”;
        rt.MaxRating = 5;
        rt.CurrentRating = 2;
        rt.StarCssClass = “ratingStar”;
        rt.WaitingStarCssClass = “savedRatingStar”;
        rt.FilledStarCssClass = “filledRatingStar”;
        rt.EmptyStarCssClass = “emptyRatingStar”;
    }
</script>

<html xmlns=http://www.w3.org/1999/xhtml&#8221;>
<head runat=“server”>
    <title></title>
    <style type=“text/css”>
        /* Rating */.ratingStar
        {
            font-size: 0pt;
            width: 13px;
            height: 12px;
            margin: 0px;
            padding: 0px;
            cursor: pointer;
            display: block;
            background-repeat: no-repeat;
        }
        .filledRatingStar
        {
            background-image: url(Images/FilledStar.png);
        }
        .emptyRatingStar
        {
            background-image: url(Images/EmptyStar.png);
        }
        .savedRatingStar
        {
            background-image: url(Images/SavedStar.png);
        }
    </style>
</head>
<body>
    <form id=“form1″ runat=“server”>
    <cc1:ToolkitScriptManager ID=“ToolkitScriptManager1″ runat=“server”>
    </cc1:ToolkitScriptManager>
    <div>
    </div>
    <asp:Button ID=“Button1″ runat=“server” Text=“Button” />
    </form>
    <p>
        &nbsp;</p>
</body>
</html>


Reason

The problem is because we cannot create the Rating control in the Page_Load, just as we create other server-side controls (for example, TextBox, and so on) in code-behind. the Rating control must be created in Page_Init if we need ViewState to save its status across the PostBack.

Solution 1:

We can create the Rating control in Page_Init:

<%@ Page Language=”C#” %><%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;<script runat=“server”>void Page_Init(object sender, EventArgs e)
    {
        AjaxControlToolkit.Rating rt = new Rating();
        Page.Form.Controls.Add(rt);
        rt.ID = “LikeRating”;
        rt.MaxRating = 5;
        rt.CurrentRating = 2;
        rt.StarCssClass = “ratingStar”;
        rt.WaitingStarCssClass = “savedRatingStar”;
        rt.FilledStarCssClass = “filledRatingStar”;
        rt.EmptyStarCssClass = “emptyRatingStar”;
    }
</script><html xmlns=http://www.w3.org/1999/xhtml&#8221;>
<head runat=“server”>
    <title></title>
    <style type=“text/css”>
        /* Rating */.ratingStar
        {
            font-size: 0pt;
            width: 13px;
            height: 12px;
            margin: 0px;
            padding: 0px;
            cursor: pointer;
            display: block;
            background-repeat: no-repeat;
        }
        .filledRatingStar
        {
            background-image: url(Images/FilledStar.png);
        }
        .emptyRatingStar
        {
            background-image: url(Images/EmptyStar.png);
        }
        .savedRatingStar
        {
            background-image: url(Images/SavedStar.png);
        }
    </style>
</head>
<body>
    <form id=“form1″ runat=“server”>
    <cc1:ToolkitScriptManager ID=“ToolkitScriptManager1″ runat=“server”>
    </cc1:ToolkitScriptManager>
    <div>
    </div>
    <asp:Button ID=“Button1″ runat=“server” Text=“Button” />
    </form>
    <p>
        &nbsp;</p>
</body>
</html>

Solution 2:

we can use Hidden Field to save the state of Rating control:

Note: We need to set up the Rating control’s BehaviorID, in order to call the Rating’s js interface in JavaScript

<%@ Page Language=”C#” %>
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;<script runat=“server”>void Page_Load(object sender, EventArgs e)
    {
        AjaxControlToolkit.Rating rt = new Rating();
        Panel1.Controls.Add(rt);
        rt.ID = “LikeRating”;
        rt.MaxRating = 5;
        rt.CurrentRating = 2;
        rt.StarCssClass = “ratingStar”;
        rt.WaitingStarCssClass = “savedRatingStar”;
        rt.FilledStarCssClass = “filledRatingStar”;
        rt.EmptyStarCssClass = “emptyRatingStar”;
        rt.BehaviorID = “hichange”;
        rt.CurrentRating = Convert.ToInt32(this.Hidden1.Value);
    }
   
</script><html xmlns=http://www.w3.org/1999/xhtml&#8221;>
<head runat=“server”>
    <title></title>
    <style type=“text/css”>
        /* Rating */.ratingStar
        {
            font-size: 0pt;
            width: 13px;
            height: 12px;
            margin: 0px;
            padding: 0px;
            cursor: pointer;
            display: block;
            background-repeat: no-repeat;
        }
        .filledRatingStar
        {
            background-image: url(Images/FilledStar.png);
        }
        .emptyRatingStar
        {
            background-image: url(Images/EmptyStar.png);
        }
        .savedRatingStar
        {
            background-image: url(Images/SavedStar.png);
        }
    </style>
   
    <script type=“text/javascript”>function save_rate() {
            var state = $find(“hichange”).get_Rating();
            $get(“Hidden1″).value = state;
            alert(state);
        }
   
    </script>
</head>
<body>
    <form id=“form1″ runat=“server”>
    <cc1:ToolkitScriptManager ID=“ToolkitScriptManager1″ runat=“server”>
    </cc1:ToolkitScriptManager>
    <asp:Panel ID=“Panel1″ runat=“server” onclick=“save_rate();”>
    </asp:Panel>
    <asp:Button ID=“Button1″ runat=“server” Text=“Button” />
    <input id=“Hidden1″ runat=“server” type=“hidden” value=“1” />
    <p>
        &nbsp;</p>
    </form>
    </body>
</html>

November 10, 2008 Posted by | ASP.NET AJAX, ASP.NET AJAX Advance Tips & Tricks | | 1 Comment

Detect OS and Browser by JavaScript

/*
* Check the Browser and OS
* Author:Nicholas C. Zakas
*/
/*
* Check the Browser
*/

//Save the user-agent string
var sUserAgent = window.navigator.userAgent;
//Save the Browser’s version
var fAppVersion = parseFloat(window.navigator.appVersion) ;

/*
* Compare the browser version
*/
function compareVersions(sVersion1,sVersion2)
{
    var aVersion1 = sVersion1.split(“.”);
    var aVersion2 = sVersion2.split(“.”);
   
    if(aVersion1.length < aVersion2.length)
    {
        for(var i=0;i<aVersion2.length-aVersion1.length;i++)
           aVersion1.push(“0”);
    }else if(aVersion2.length < aVersion1.length)
    {
        for(var i=0;i<aVersion1.length-aVersion2.length;i++)
           aVersion2.push(“0”);
    }
    for(var i=0;i<aVersion1.length;i++)
    {
        var iVal1 = parseInt(aVersion1[i],10);
        var iVal2 = parseInt(aVersion2[i],10);
       
        if(iVal1<iVal2)
           return -1;
        else if(iVal1>iVal2)
           return 1;
    }
    return 0;
}

/*
* Opera
*/
var isOpera = sUserAgent.indexOf(“Opera”)>-1;
var isMinOpera4 = isMinOpera5 = isMinOpera6 = isMinOpera7 = isMinOpera7_5 = false;
if(isOpera)
{
    var fOperaVersion;
    if(window.navigator.appName==“Opera”)
    {
        fOperaVersion = fAppVersion;
    }else
    {
        var reOperaVersion = new RegExp(“Opera (\\d+\\.\\d+)”);
        reOperaVersion.test(sUserAgent);
        fOperaVersion = parseFloat(RegExp[“$1″]);
    }
   
    isMinOpera4 = fOperaVersion>=4;
    isMinOpera5 = fOperaVersion>=5;
    isMinOpera6 = fOperaVersion>=6;
    isMinOpera7 = fOperaVersion>=7;
    isMinOpera7_5 = fOperaVersion>=7.5;
}

/*
* Konqueror/Safari
*/

var isKHTML = sUserAgent.indexOf(“KHTML”)>-1
              ||sUserAgent.indexOf(“Konqueror”)>-1
              ||sUserAgent.indexOf(“AppleWebKit”)>-1;

if(isKHTML)
{
    isSafari = sUserAgent.indexOf(“AppleWebKit”)>-1;
    isKonq = sUserAgent.indexOf(“Konqueror”)>-1;
    var isMinSafari1 = isMinSafari1_2 = false;
    var isMinKonq2_2 = isMinKonq3 = isMinKonq3_1 = isMinKonq3_2 = false;
   
    if(isSafari)
    {
        var reAppleWebKit = new RegExp(“AppleWebKit\\/(\\d+(?:\\.\\d*)?)”);
        reAppleWebKit.test(sUserAgent);
        var fAppleWebKitVersion = parseFloat(RegExp[“$1″]);
       
        isMinSafari1 = fAppleWebKitVersion>=85;
        isMinSafari1_2 = fAppleWebKitVersion>=124;
    }
   
    else if(isKonq)
    {
        var reKonq = new RegExp(“Konqueror\\/(\\d+(?:\\.\\d+(?:\\.\\d)?)?)”);
        reKonq.test(sUserAgent);
        isMinKonq2_2 = compareVersions(RegExp[“$1″],“2.2”)>=0;
        isMinKonq3 = compareVersions(RegExp[“$1″],“3.0”)>=0;
        isMinKonq3_1 = compareVersions(RegExp[“$1″],“3.1”)>=0;
        isMinKonq3_2 = compareVersions(RegExp[“$1″],“3.2”);
    }
}

/*
* IE
*/
var isIE = sUserAgent.indexOf(“compatible”)>-1
            && sUserAgent.indexOf(“MSIE”)>-1
            && !isOpera;
var isMinIE4 = isMinIE5 = isMinIE5_5 = isMinIE6 = false;

if(isIE)
{
    var reIE = new RegExp(“MSIE (\\d+\\.\\d+);”);
    reIE.test(sUserAgent);
    var fIEVersion = parseFloat(RegExp[“$1″]);
   
    isMinIE4 = fIEVersion>=4;
    isMinIE5 = fIEVersion>=5;
    isMinIE5_5 = fIEVersion>=5.5;
    isMinIE6 = fIEVersion>=6.0;
}

/*
* Mozilla
*/
var isMoz = sUserAgent.indexOf(“Gecko”)>-1 && !isKHTML;
var isMinMoz1 = isMinMoz1_4 = isMinMoz1_5 = false;

if(isMoz)
{
    var reMoz = new RegExp(“rv:(\\d+\\.\\d+(?:\\.\\d+)?)”);
    reMoz.test(sUserAgent);
    isMinMoz1 = compareVersions(RegExp[“$1″],“1.0”)>=0;
    isMinMoz1_4 = compareVersions(RegExp[“$1″],“1.4”)>=0;
    isMinMoz1_5 = compareVersions(RegExp[“$1″],“1.5”)>=0;
}

/*
* Netscape Communicator 4.x
*/
var isNS4 = !isIE && !isOpera && !isMoz && !isKHTML && (sUserAgent.indexOf(“Mozilla”)==0) && (navigator.appName == “Netscape”) && (fAppVersion>=4.0 && fAppVersion<5.0);

var isMinNS4 = isMinNS4_5 = isMinNS4_7 = isMinNS4_8 = false;

if(isNS4)
{
    isNS4 = true;
    isMinNS4_5 = fAppVersion>=4.5;
    isMinNS4_7 = fAppVersion>=4.7;
    isMinNS4_8 = fAppVersion>=4.8;
}

/*
* Check the OS
* Windows,Macintosh and Unix
*/
var isWin = (window.navigator.platform ==“Win32″)||(window.navigator.platform==“Windows”);
var isMac = (window.navigator.platform ==“Mac68K”)||(window.navigator.platform == “MacPPC”);
var isUnix = (window.navigator.platform == “X11″) && !isWin && !isMac;

var isWin95 = isWin98 = isWinNT4 = isWin2K = isWinME = isWinXP = false;
if(isWin)
{
    isWin95 = sUserAgent.indexOf(“Win95″)>-1 || sUserAgent.indexOf(“Windows 95″)>-1;
    isWin98 = sUserAgent.indexOf(“Win98″)>-1 || sUserAgent.indexOf(“Windows 98″)>-1;
    isWinME = sUserAgent.indexOf(“Win 9x 4.90″)>-1 || sUserAgent.indexOf(“Windows ME”)>-1;
    isWin2K = sUserAgent.indexOf(“Windows NT 5.0″)>-1 || sUserAgent.indexOf(“Windows 2000″)>-1;
    isWinXP = sUserAgent.indexOf(“Windows NT 5.1″)>-1 || sUserAgent.indexOf(“Windows XP”)>-1;
    isWinNT4 = sUserAgent.indexOf(“WinNT”)>-1 || sUserAgent.indexOf(“Windows NT”)>-1 || sUserAgent.indexOf(“WinNT4.0″)>-1 || sUserAgent.indexOf(“Windows NT 4.0″)>-1 && (!isWinME && !isWin2K && !isWinXP);
}

var isMac68K = isMacPPC = false;
if(isMac)
{
    isMac68K = sUserAgent.indexOf(“Mac_68000″)>-1 || sUserAgent.indexOf(“68K”)>-1;
    isMacPPC = sUserAgent.indexOf(“Mac_PowerPC”)>-1 || sUserAgent.indexOf(“PPC”)>-1;
}

/*
* Unix
*/
var isSunOS = isMinSunOS4 = isMinSunOS5 = isMinSunOS5_5 = false;
if(isUnix)
{
    isSunOS = sUserAgent.indexOf(“SunOS”)>-1;
    if(isSunOS)
    {
        var reSunOS = new RegExp(“SunOS (\\d+\\.\\d+(?:\\.\\d+)?)”);
        reSunOS.test(sUserAgent);
        isMinSunOS4 = compareVersions(RegExp[“$1″],“4.0”)>=0;
        isMinSunOS5 = compareVersions(RegExp[“$1″],“5.0”)>=0;
        isMinSunOS5_5 = compareVersions(RegExp[“$1″],“5.5”)>=0;
    }
}

November 6, 2008 Posted by | JavaScript | | Leave a comment

15 Elegant Color CSS

I think it will be helpful for CSS beginners

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#8221;>.style2{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #9BDF70;
background-color
: #F0FBEB
}

.style3{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #BBE1F1;
background-color
: #EEFAFF
}

.style4{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #CCEFF5;
background-color
: #FAFCFD
}

.style5{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #FFCC00;
background-color
: #FFFFF7
}

.style6{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #92B0DD;
background-color
: #FFFFFf
}
.style6 h5
{
margin
: 1px;
background-color
: #E2EAF8;
height
: 24px;
}

.style7{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #A9C9E2;
background-color
: #E8F5FE
}

.style8{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #E3E197;
background-color
: #FFFFDD
}

.style9{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #ADCD3C;
background-color
: #F2FDDB
}

.style10{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #F8B3D0;
background-color
: #FFF5FA
}

.style11{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #D3D3D3;
background-color
: #F7F7F7
}

.style12{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #BFD1EB;
background-color
: #F3FAFF
}

.style13{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #FFDD99;
background-color
: #FFF9ED
}

 

.style14{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #CACAFF;
background-color
: #F7F7FF
}

 

.style15{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #A5B6C8;
background-color
: #EEF3F7
}
.style16
{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #CEE3E9;
background-color
: #F1F7F9
} 
</style>

<div class=”style1″><h5></h5></div>
<div class=”style2″><h5></h5></div>
<div class=”style6″><h5></h5></div>
<div class=”style3″></div>
<div class=”style4″></div>
<div class=”style5″></div>
<div class=”style7″></div>
<div class=”style8″></div>
<div class=”style9″></div>
<div class=”style10″></div>
<div class=”style11″></div>
<div class=”style12″></div>
<div class=”style13″></div>
<div class=”style14″></div>
<div class=”style15″></div>
<div class=”style16″></div>

</html>

<html xmlns=”http://www.w3.org/1999/xhtml&#8221;>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&#8221;>
<title>By Lance</title>
<style type=”text/css”>
.style1
{
width
: 800px;
height
: 100px;
margin
: 0px auto;
margin-bottom
:20px;
border
:1px solid #96C2F1;
background-color
: #EFF7FF
}

November 3, 2008 Posted by | Develop Resource | | Leave a comment

56 Scripts For Galleries, Slideshows and Lightboxes

 

Ajax Image Galleries & Lightboxes

 

  1. Minishowcase

    Minishowcase is a small and simple php/javascript online photo gallery, powered by AJAX/JSON that lets you put easily your images in an online gallery, without having to configure databases or changing and customising code (though you may do it if you feel so) allowing to have an up-and-running gallery in a few minutes.

    Screenshot

  2. JonDesign’s SmoothGallery

    Unlike other systems out there, JonDesign’s SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom css selectors. And even better, this solutions is very lightweight: The javascript file is only 16kb.

    Screenshot

  3. Ajax Photo Gallery

    The AJAX version of AgileGallery is a free AJAX photo gallery that rips through the XML output from Picasa (a free download from google) and generates DHTML for the paging and thumbnails and displays the full sized photos along with any description entered in Picasa. Since this photo gallery uses AJAX technology, it eliminates the need for any page refresh as the user pages through the photos.

    Screenshot

  4. Pyxy-gallery

    Pyxy-gallery is an AJAX image gallery in PHP and JavaScript, which optionally uses lightbox.js. It is designed to be an ultra-light-weight, “drop-in” image gallery.

    Screenshot

  5. zenphoto

    Zenphoto is an answer to lots of calls for an online gallery solution that just makes sense. After years of bloated software that does everything and your dishes, zenphoto just shows your photos, simply. It’s got all the functionality and “features” you need, and nothing you don’t. Where the old guys put in a bunch of modules and junk, we put a lot of thought. We hope you agree with our philosopy: simpler is better.

    Screenshot

  6. Couloir.org: Resizing, Fading Slideshow Demo – AJAX Slideshow

    This photo slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS. The code is offered as-is — Couloir.org offers no technical support. However, you are permitted to use it on your own project so long as you do so according to the rules outlined in the Creative Commons ‘Attribution-ShareAlike 2.0′ License and the license terms contained in the associated, third-party APIs.

  7. Grey Box

    A pop-up window that doesn’t suck. GreyBox can be used to display websites, images and other content in a beautiful way.

  8. Lightbox2

    Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

  9. Litebox

    Litebox is a modified version of Lightbox v2.0 created with one thing in mind, size reduction. Litebox utilizes the 3kb javascript library moo.fx in association with prototype.lite, giving us the basic tools we need to make this work and you the ability to expand.

    Screenshot

  10. Multifaceted Lightbox

    A script (JavaScript) that allows you to focus the users attention on a particular portion of the screen. It creates the equivalent of a modal dialog box – this means that while the user looks at this focused part of the screen, they can’t interact with the rest of the screen.

    Screenshot

  11. Slightly ThickerBox 1.7

    Slightly ThickerBox is a modification of Cody Lindley’s Thickbox script. I modified it for use on my Jason’s Toolbox Redesign. The modifications allow the script to generate “Previous Image” and “Next Image” links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a “rel” attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)

    Screenshot

  12. TripTracker

    The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.

    Screenshot

  13. Slimbox, the ultimate lightweight Lightbox clone

    Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.

    Screenshot

  14. Suckerfish HoverLightbox

    The Suckerfish HoverLightbox is a mashup of three very popular Web design techniques blended together to offer a new way of presenting your image galleries.

    Screenshot

  15. LightWindow

    LightWindow Supports EVERY Media type and renders it appropriatly, and with better Animation effects.

    Screenshot

  16. Lytebox

    Lytebox was written from the Lightbox class that Lokesh Dhakar (http://www.huddletogether.com) originally wrote. The purpose was to write a self-contained object that eliminated the dependency of prototype.js, effects.js, and scriptaculous.js.

    Screenshot

  17. iBox

    iBox is a lightweight script that lets you overlay images and documents in a small dialog without a page reload. It’s built to be easy to install and use, while offering great flexibility. The quick start shows example code and explains how to use it.

    Screenshot

  18. Smoothbox

    Smoothbox is the Mootools conversion of Thickbox, a script running on JQuery.For the description and the features, you can go to Thickbox’s website, as they are basically the same.The main difference from a user point of view is that I’ve added some effects when the box shows up and on scroll.

    Screenshot

  19. YUI Based Lightbox

    The most significant change in this version of the lightbox is that image thumbnails are no longer required for creating lightbox instance. That implies that you can create an image gallery without the presence of image thumbnails. The more exciting aspect of this new feature is that you can virtually grab any image from the internet and include it in your gallery.

    Screenshot

  20. Imago

    Imago is an Ajax Image Gallery with focus on simplicity and ease of use. It’s plain JavaScript and build on the mature ajax library mootools. No server side scripting is required! Neither is flash. Whether your photos are on flickr, smugmug or you’d like to host them yourself, Imago can show them.

    Screenshot

  21. photoViewer

    PhotoViewer leverage the Flickr API for better flexibility can load image from remote XML and easily skinned for customization

    Screenshot

  22. carousel

    The carousel component manages a list of content (HTML LI elements within a UL) that can be displayed horizontally or vertically. The content can be scrolled back and forth with or without animation. The content can reference static HTML content or the list items can be created dynamically on-the-fly (with or without Ajax).

    Screenshot

  23. multibox

    lightbox that supports images, flash, video, mp3s, html.

    Screenshot

  24. FrogJS Javascript Gallery

    FrogJS is a simple, unobtrusive javascript gallery. It’s not a replacement for other thumbnail galleries like Lightbox JS, but a different way of showcasing galleries. This type of gallery is best used when a page-by-page gallery is needed, as is the case with photo stories. Below is a small example of a FrogJS gallery. Just click the parrot thumbnail to scroll through the gallery.

    Screenshot

  25. Galleria [homesitelightweight gallery]

    Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

    Screenshot

  26. AJAX Image Gallery powered by Slideflow (like Cover Flow)

    You can drag the Slideflow using your mouse, or click anywhere in the stack to jump there. Click inside the frame in order to enable mouse wheel and arrow key navigation! Or better yet, try the fullscreen example.

    Screenshot

  27. JaS gallery

    JaS is short for JavaScript Slides and it is a highly customizable JavaScript library for easily turning your images into a collection viewable as a slideshow, and with fading effects, if desired. It also supports automatic thumbnail creation and tagging of images, so the viewers can find the exact images they’re looking for. You can use it any way you like in your own web site, and adapt it to your specific needs.

    Screenshot

  28. MooFlow

    Image gallery uses MooTools.

    Screenshot

  29. Shadowbox

    Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.

    Screenshot

  30. mooCicle

    Allora, ho creato un piccolo javascript per creare una semplicissima galleria con effetto foto sfogliate. Avevo notato una galleria di questo genere fatta con jQuery, è mi sono chiesto quanto fosse difficile crearla per mooTools. Direi non molto.

    Screenshot

  31. jqGalViewIII (proof of concept)

    A photo gallery by jQery, display the thumb image and splendid effect.

    Screenshot

  32. Live Thumbnail

    Make pictures zoom in/out by a simple mouse click.

    Screenshot

  33. (E)2 Photo Gallery

    (E)2 Photo Gallery is a open source gallery built with Mootools Javascript Library the compact, modular, Object-Oriented javascript framework. Designed to allow you to upload your photos to a desired folder, tell the (E)2 Photo Gallery what folder to look at and it will automatically load the images using PHP.

    Screenshot

  34. AJAX Slide Show

    The Slide Show is a simple to use application of the Google AJAX Feed API that is designed to let you add photo slide shows to your pages, sites, and blogs. The slide show control takes photo feeds from all popular sites, such as PhotoBucket, Flickr, and Picasa Web Albums. Any feeds that use Media RSS can be used without customization. However, the slide show control allows any photo-based feed to be accomodated, such as iTunes feeds similar to those found in the Tune Bar solution or the custom feed example below.

    Screenshot

  35. jQuery Cycle Plugin

    The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the InnerFade Plugin by Torsten Baldes, the Slideshow Plugin by Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and many transition effects. It also supports, but does not require, the Metadata Plugin and the Easing Plugin

    Screenshot

  36. FlickrShow – Simple Javascript Slideshows

    Flickrshow is a lightweight, cross-browser javascript slideshow, providing you with an easy way to display your Flickr images on your own website. It is simple to install and can be used to access images within Flickr groups or photosets, or using a tag-based search. The demonstration below is retrieving images from the Twenty Five photset by the very talented Limonada.

    Screenshot

  37. slideViewer

    slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images

    Screenshot

  38. noobSlide – mootools

    noobSlide es una ligera “clase” escrita con la librería mootools con la que se puede construir “slides” desde simples hasta complejos, claro que para sacarle el máximo provecho necesitas aprender cómo trabajar con mootools.

    Screenshot

  39. Suckerfish HoverLightbox Redux

    The Redux has a number of improvements, mostly visual, but some behavioral changes as well. Before going into detail, it’s important to give due credit to those who helped make the Suckerfish HoverLightbox a possibility.

    Screenshot

  40. ThickBox 2.1.1

    ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

    Screenshot

 

CSS-Based Image Galleries

 

  1. A Photograph Gallery

    Just a simple :hover over thumbnail images to give a full size view of each photograph. With all but Opera you can also click the thumbnails to retain the image on the screen. Text can be added at the bottom of each picture. Ideal for photograph albums.

    Screenshot

  2. A simple CSS photo-album

    The text numbers and images are held in an unordered list without any extra markup (no ‘ems’ or ’spans’ etc). The CSS just styles the text numbers so that they appears in a box and the images so that they are hidden until your visitor clicks a number square.

    Screenshot

  3. Cross Browser Multi-Page Photograph Gallery

    Based on Suckerfish HoverLightbox this one uses my multi-page layout system but includes images instead of text. Unlike the Suckerfish HoverLightbox this version is pure CSS.

    Screenshot

  4. CSS Image Gallery

    This is a purely CSS based image gallery that displays larger versions of thumbnail images dynamically when the mouse hovers over them. A rich HTML caption can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. The idea is to use CSS’s “:hover” pseudo class to cause an element to react onMouseover. When that happens, an absolutely positioned container holding the enlarged image, anchored on the page by another container with position set to relative, is shown. Furthermore, it’s possible to modify the behavior so the enlarged images are only shown onClick, though IE6 currently doesn’t support this behavior well. The gallery works in IE6+, Firefox, Opera 8+.

    Screenshot

  5. CSS: Photo Showcase

    This experiment uses CSS and basic markup to create a simple way to display photo thumbnails on your site while offering convenient fast zoom viewing, even for dialup users.

    Screenshot

  6. Hoverbox Image Gallery

    Basically, it’s a super light-weight (8kb) roll-over photo gallery that uses nothing but CSS.

    Screenshot

  7. Photo scroll gallery

    A combination of several of my previous galleries to give a scrolling ‘thumbnail’ image, a medium size image on hover and a full size image on click. The thumbnail, medium size and full size images are all the same image just resized using CSS. The thumbnails are square to make the scrolling area simpler to work with. This does make these images a little distorted but not so much that they look wrong.

    Screenshot

  8. Sliding Photograph Galleries

    It is just an unordered list of images that are normally compressed vertically (reduction 8:1). When you hover over one of these compressed images it expands to full size. It is based on my sliding menu system and adapted to use images. No thumbnails are required and all the images are ‘pre-loaded’.This method can be used either vertically, as shown, or horizontally.

    Screenshot

 

JavaScript + CSS-based Galleries & DHTML-Galleries

 

  1. xImgGallery – Javascript Image Gallery & Slideshow

    This script implements a Javascript image gallery and slideshow – all in one file.

    Screenshot

  2. easyAlbum

    A DOM photo Gallery solution that is browser friendly, keyboard friendly, bandwidth friendly and more.

    Screenshot

  3. ImageGal

    imagegal is a simple PHP script that will automagically create a JS/CSS/DHTML powered image gallery for you when dropped into a directory containing images. This simple script was inspired by a Jeremy Keith’s article on aListApart.com.

    Screenshot

  4. Highslide JS

    Highslide JS is a piece of JavaScript that streamlines the use of thumbnail images on web pages. The library offers these features and advantages: No plugins like Flash or Java required. Popup blockers are no problem. The images expand within the active browser window.

    Screenshot

  5. Satellite

    Satellite is an all in one photo gallery website that takes advantage of Yahoo Flickr’s image hosting and management tools. You can upload and manage your images using Flickr and host your portfolio on your own server via Satellite.

    Screenshot

  6. Dhonishow

    Showing Picture Online with Javascript.

    Screenshot

  7. DropProof

    DropProof is a PHP tool for simple image proofing. DropProof is designed to be lightweight and easy to setup. DropProof is released under the MIT license, making it free to download, use, distribute, and modify.

    Screenshot

  8. CSS Photo Shuffler

    A Javascript + CSS replacement for Flash photo fading slideshow. Inspired by Richard Rutter’s image fade demonstration.

    Screenshot

November 3, 2008 Posted by | Develop Resource | , | 2 Comments

   

Follow

Get every new post delivered to your Inbox.