Iframe with mouse scrolling

Hi

try this example:-

First. make your iframe no scroll just like the following code:

  <IFRAME id=Viewer height=400 src=”Photo.aspx?id=1″ frameBorder=no width=600 scrolling=no></IFRAME>

Second.  In your Photo.aspx, make sure it can support the drag and drop by mouse:

<SCRIPT language=JavaScript>
drag = 0
move = 0
function init() {
window.document.onmousemove = mouseMove
window.document.onmousedown = mouseDown
window.document.onmouseup = mouseUp
window.document.ondragstart = mouseStop
}
function mouseDown() {
if (drag) {
clickleft = window.event.x – parseInt(dragObj.style.left)
clicktop = window.event.y – parseInt(dragObj.style.top)
dragObj.style.zIndex += 1
move = 1
}
}
function mouseStop() {
window.event.returnValue = false
}
function mouseMove() {
if (move) {
dragObj.style.left = window.event.x – clickleft
dragObj.style.top = window.event.y – clicktop
}
}
function mouseUp() {
move = 0
}
</SCRIPT>
Good Luck

Horizontal Menu With Separator

Hi

try this example:

<asp:Menu ID=”Menu1″ runat=”server” DataSourceID=”SiteMapDataSource1″ Orientation=”Horizontal”  StaticEnableDefaultPopOutImage=”False” StaticTopSeparatorImageUrl=”~/image/bg-search.gif”>
</asp:Menu>

<asp:SiteMapDataSource ID=”SiteMapDataSource1″ runat=”server” ShowStartingNode=”False” />

Good Luck

Hide Empty Link

Hi

Try this example to hide Hyperlink if not has link to bind to it with Gridview

protected bool checkNull(object m)
    {
        if (Convert.IsDBNull(m))
        {
            return false;
        }
        else
            return true;

    }

and use the visible property for your controls(label, hyperlink…):

Visible=’<%# checkNull(Eval(“link”)) %>’

Good Luck

Handle AJAX Error Message

Error message:Element ‘ScriptManager’ is not a known element.

check these links
http://geekswithblogs.net/ranganh/archive/2007/08/06/114452.aspx
http://geekswithblogs.net/ranganh/archive/2007/06/25/113446.aspx
http://geekswithblogs.net/ranganh/archive/2007/01/22/104154.aspx

 

in web.config file
1. Below the <configuration> tag, add the following settings:-

 <configSections>
  <sectionGroup name=”system.web.extensions” type=”System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″>
   <sectionGroup name=”scripting” type=”System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″>
    <section name=”scriptResourceHandler” type=”System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ requirePermission=”false” allowDefinition=”MachineToApplication”/>
    <sectionGroup name=”webServices” type=”System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″>
     <section name=”jsonSerialization” type=”System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ requirePermission=”false” allowDefinition=”Everywhere”/>
     <section name=”profileService” type=”System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ requirePermission=”false” allowDefinition=”MachineToApplication”/>
     <section name=”authenticationService” type=”System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ requirePermission=”false” allowDefinition=”MachineToApplication”/>
    </sectionGroup>
   </sectionGroup>
  </sectionGroup>
 </configSections>

What we have done in this step is registering the System.Web.Extensions  namespace, the assembly and its various handlers that are useful in handling AJAX for your ASP.NET 2.0 Application.

2. Then, below the <system.web> add the following settings:-

<pages>
<controls>
<add tagPrefix=”asp” namespace=”System.Web.UI” assembly=”System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
</controls>
</pages>

In this step, we registered the tagprefix of ASP for the ASP.NET AJAX Server controls like UpdatePanel so that we can use the same <asp: prefix while using the same in your pages.  Ex.- <asp:UpdatePanel>

 3. Then find the <compilation debug=”false” /> and you need to replace this line with the following settings:-

<compilation debug=”true”>
<assemblies>
<add assembly=”System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
</assemblies>
</compilation>

This step enables compilation for your website and adds the reference assembly for System.Web.Extensions.

4. Then below the compilation settings (above step), add the following:-

<httpHandlers>
<remove verb=”*” path=”*.asmx”/>
<add verb=”*” path=”*.asmx” validate=”false” type=”System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
<add verb=”*” path=”*_AppService.axd” validate=”false” type=”System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
<add verb=”GET,HEAD” path=”ScriptResource.axd” type=”System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ validate=”false”/>
</httpHandlers>
<httpModules>
<add name=”ScriptModule” type=”System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
</httpModules>

What we have done here is to register the Http Handler and specify that Web Services might be handled using Javascript (asynchronous callback) as well as add the ScriptModule Http Module.

5. Then, after the </system.web> end tag, add the following system.web.extensions settings:-

<system.web.extensions>
<scripting>
<webServices>
<!– Uncomment this line to customize maxJsonLength and add a custom converter –>
<!–
<jsonSerialization maxJsonLength=”500″>
<converters>
<add name=”ConvertMe” type=”Acme.SubAcme.ConvertMeTypeConverter”/>
</converters>
</jsonSerialization>
–>
<!– Uncomment this line to enable the authentication service. Include requireSSL=”true” if appropriate. –>
<!–
<authenticationService enabled=”true” requireSSL = “true|false”/>
–>
<!– Uncomment these lines to enable the profile service. To allow profile properties to be retrieved
and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and
writeAccessProperties attributes. –>
<!–
<profileService enabled=”true”
readAccessProperties=”propertyname1,propertyname2″
writeAccessProperties=”propertyname1,propertyname2″ />
–>
</webServices>
<!–
<scriptResourceHandler enableCompression=”true” enableCaching=”true” />
–>
</scripting>
</system.web.extensions>

In this step, we have additional steps where we can play with JSON Serialization settings and enabling some of the Application Services like AuthenticationService, ProfileService etc.,

6. Thereafter, add the following system.webServer settings:-

<system.webServer>
<validation validateIntegratedModeConfiguration=”false”/>
<modules>
<add name=”ScriptModule” preCondition=”integratedMode” type=”System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
</modules>
<handlers>
<remove name=”WebServiceHandlerFactory-Integrated”/>
<add name=”ScriptHandlerFactory” verb=”*” path=”*.asmx” preCondition=”integratedMode” type=”System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
<add name=”ScriptHandlerFactoryAppServices” verb=”*” path=”*_AppService.axd” preCondition=”integratedMode” type=”System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
<add name=”ScriptResource” preCondition=”integratedMode” verb=”GET,HEAD” path=”ScriptResource.axd” type=”System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
</handlers>
</system.webServer>

Good Luck

AJAX UpdatePanel Animation Extender with Gridview

Hi

try this example:

.aspx

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”ajaxToolkit” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head id=”Head1″ runat=”server”>
    <title>Untitled Page</title>
    <script type=”text/javascript” language=”javascript”>
   
    function onUpdating(){
        // get the update progress div
        var updateProgressDiv = $get(‘updateProgressDiv’);

        //  get the gridview element       
        var gridView = $get(‘<%= this.gvCustomers.ClientID %>’);
       
        // make it visible
        updateProgressDiv.style.display = ”;    
       
        // get the bounds of both the gridview and the progress div
     var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
     var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
       
     var x;
     var y;
    
     // do the math to figure out where to position the element
     if($get(‘rdoCenter’).checked){
         //  center of gridview
         x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) – Math.round(updateProgressDivBounds.width / 2);
         y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) – Math.round(updateProgressDivBounds.height / 2);    
     }
     else if($get(‘rdoTopLeft’).checked){
         //  top left of gridview
         x = gridViewBounds.x;
         y = gridViewBounds.y;
     }
     else{
         //  top right of gridview
         x = (gridViewBounds.x + gridViewBounds.width – updateProgressDivBounds.width);
         y = gridViewBounds.y;
     }

     // set the progress element to this position
     Sys.UI.DomElement.setLocation (updateProgressDiv, x, y);          
    }

    function onUpdated() {
        // get the update progress div
        var updateProgressDiv = $get(‘updateProgressDiv’);
        // make it invisible
        updateProgressDiv.style.display = ‘none’;
    }
   
    </script>

</head>
<body>
    <form id=”form” runat=”server”>
        <asp:ScriptManager ID=”scriptManager” runat=”server” />
        <div>
            &nbsp;<p style=”background-color:AliceBlue; width:95%”>
                Example of using an UpdatePanelAnimationExtender to place an animated gif over a GridView while the<br />
                GridView is being refreshed.  Click the column headers or the paging buttons to cause the grid to refresh<br />
                You can toggle where the animation is to be displayed using the radio buttons<br />
            </p>
           
            <div>
                <input id=”rdoCenter” type=”radio” name=”location” value=”center” checked=”checked” />Center
                <input id=”rdoTopLeft” type=”radio” name=”location” value=”topleft” />Top Left
                <input id=”rdoTopRight” type=”radio” name=”location” value=”topright” />Top Right
            </div>
           
            <br />
            <br />
            <asp:Label ID=”lblTitle” runat=”server” Text=”Customers” BackColor=”lightblue” Width=”95%” />
            <asp:UpdatePanel ID=”updatePanel” runat=”server”>
                <ContentTemplate>
                    <asp:GridView ID=”gvCustomers” runat=”server” AllowPaging=”True” AllowSorting=”True”
                        PageSize=”20″ DataSourceID=”sqldsCustomers” Width=”95%”>
                        <AlternatingRowStyle BackColor=”AliceBlue” />
                        <HeaderStyle HorizontalAlign=”Left” />
                    </asp:GridView>
            <asp:SqlDataSource ID=”sqldsCustomers” runat=”server”
                SelectCommand=”select customerid, companyname, contactname, contacttitle from dbo.customers” ConnectionString=”<%$ ConnectionStrings:NorthwindConnectionString %>” />
                </ContentTemplate>
            </asp:UpdatePanel>
            <ajaxToolkit:UpdatePanelAnimationExtender ID=”upae” BehaviorID=”animation” runat=”server” TargetControlID=”updatePanel”>
                <Animations>
                    <OnUpdating>
                        <Parallel duration=”0″>
                            <%– place the update progress div over the gridview control –%>
                            <ScriptAction Script=”onUpdating();” /> 
                         </Parallel>
                    </OnUpdating>
                    <OnUpdated>
                        <Parallel duration=”0″>
                            <%–find the update progress div and place it over the gridview control–%>
                            <ScriptAction Script=”onUpdated();” />
                        </Parallel>
                    </OnUpdated>
                </Animations>
            </ajaxToolkit:UpdatePanelAnimationExtender>
            <div id=”updateProgressDiv” style=”background-color:#CF4342; display:none; position:absolute;”>
                <span style=”color:#fff; margin:3px”>Loading …</span>
            </div>
        </div>
    </form>
</body>
</html>

in code behind:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (this.IsPostBack)
        {
            System.Threading.Thread.Sleep(3000);
        }
    }
}

Hope it helps

Good Luck

Collapse and expand Node of Treeview

Hi

try this example:

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

<html xmlns=”http://www.w3.org/1999/xhtml“>
<head id=”Head1″ runat=”server”>
    <title>TreeView Demo</title>

    <script language=”javascript” type=”text/javascript”>
        function TreeviewExpandCollapseAll(treeViewId, expandAll)
        {
          var displayState = (expandAll == true ? “none” : “block”);
          var treeView = document.getElementById(treeViewId);
          if(treeView)
          {
              var treeLinks = treeView.getElementsByTagName(“a”);
              var nodeCount = treeLinks.length;
                  
              for(i=0;i<nodeCount;i++)
              {
                   if(treeLinks[i].firstChild.tagName)
                   {
                       if(treeLinks[i].firstChild.tagName.toLowerCase() ==”img”)
                       {
                           var currentToggleLink = treeLinks[i];
                           var childContainer = GetParentByTagName(“table”, currentToggleLink).nextSibling;
                           if (childContainer.style.display == displayState)
                            {
                               eval(currentToggleLink.href);
                            }
                      }
                   }
              }
          }
        }
        function GetParentByTagName(parentTagName, childElementObj)
        {
        var parent = childElementObj.parentNode;
        while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
        {
          parent = parent.parentNode;
        }
        return parent;
        }
    head>
<body>
    <form id=”form1″ runat=”server”>
    <div>
        <asp:TreeView ID=”TreeViewDemo” runat=”server” ExpandDepth=”0″>
            <Nodes>
                <asp:TreeNode NavigateUrl=”http://www.asp.net” Text=”A” Value=”A”>
                    <asp:TreeNode NavigateUrl=”http://www.asp.net” Text=”A1″ Value=”A1″>
                        <asp:TreeNode NavigateUrl=”http://www.asp.net” Text=”A11″ Value=”A11″></asp:TreeNode>
                        <asp:TreeNode NavigateUrl=”http://www.asp.net” Text=”A12″ Value=”A12″></asp:TreeNode>
                    </asp:TreeNode>
                    <asp:TreeNode NavigateUrl=”http://www.asp.net” Text=”A2″ Value=”A2″>
                        <asp:TreeNode NavigateUrl=”http://www.asp.net” Text=”A21″ Value=”A21″></asp:TreeNode>
                        <asp:TreeNode NavigateUrl=”http://www.asp.net” Text=”A22″ Value=”A22″></asp:TreeNode>
                    </asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>
        <a href=”javascript:TreeviewExpandCollapseAll(‘<%=TreeViewDemo.ClientID%>’, true)”>Expand
            All</a> <a href=”javascript:TreeviewExpandCollapseAll(‘<%=TreeViewDemo.ClientID%>’, false)”>
                Collapse All</a>
    </div>
    </form>
</body>
</html>

Good Luck

Check UserName Availability with AJAX

Hi

try this example to check username availability with ajax

step1: Create Webservice called UsernameService.asmx

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Web.Security;
/// <summary>
/// Summary description for UsernameService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]

public class UsernameService : System.Web.Services.WebService {

    public UsernameService () {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }
    [WebMethod]
    public string[] IsAvailable(string TocheckFor)
    {
        string[] myString = new string[2];
        if (Membership.GetUser(TocheckFor) != null)
        {
            myString[0] = string.Format(“{0} is taken”, TocheckFor);
            myString[1] = “false”;
        }
        else
        {
            myString[0] = string.Format(“{0} is available”, TocheckFor);
            myString[1] = “true”;           
        }
        return myString;
    }
   
}

step2: Create Web page Default.aspx

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head runat=”server”>
    <title>Untitled Page</title>
   
    <script type=”text/javascript” >
    function checkName()
    {
        var tb = new Sys.Preview.UI.TextBox($get(‘Username’));
        var name = tb.get_text();
       
        if(name.lenght != 0)
            UsernameService.IsAvailable(name, onIsAvailableCompleted)
    }
   
    function onIsAvailableCompleted(result)
    {
        if(result != null)
        {
            var lbl = new Sys.Preview.UI.Label($get(‘lblAvailability’));
            lbl.set_text(result[0]);
            if(result[1]==’true’)
                document.getElementById(‘lblAvailability’).style.color=”green”;
            else
                document.getElementById(‘lblAvailability’).style.color=”red”;
        }
    }
    </script>
</head>
<body>
    <form id=”form1″ runat=”server”>
        <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
                <Services>
            <asp:ServiceReference Path=”UsernameService.asmx” />
        </Services>
        <Scripts>
            <asp:ScriptReference Name=”PreviewScript.js” Assembly=”Microsoft.Web.Preview” />
        </Scripts>
        </asp:ScriptManager>
        <div>
            Username: <asp:TextBox ID=”Username” runat=”server” Width=”93px”></asp:TextBox>
            <asp:Label ID=”lblAvailability” runat=”server” Text=”Type a username” ForeColor=”DimGray”></asp:Label>
        </div>
    </form>
</body>
</html>

in code behind :

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Username.Attributes.Add(“onkeyup”, “checkName()”);
    }
}

Hope it helps

Good Luck