Navi's

Necessity, the mother of invention

  • Visitor Map

    Locations of Site Visitors
  • Flag Counter

    free counters

Archive for the ‘Javascript’ Category

Show loader on page load in asp.net

Posted by Navi's on March 24, 2011

To show loader while page is loading we have to use bellow code snippet. put this code on your master page or page. And overrride the OnLoad and Render methods.

protected override void OnLoad(EventArgs e)
    {
        if (!IsPostBack)
        {
            Response.Buffer = false;
            Response.Write("<div id='divImage'><div style='float: right;'><img src='loader.gif' />Please wait...</div></div>");
            Response.Flush();
        }
        base.OnLoad(e);
    }
    protected override void Render(HtmlTextWriter writer)
    {
        if (!IsPostBack)
        {
            Response.Clear();
            Response.ClearContent();
        }
        base.Render(writer);
    }
   

and to hide loader we uses bellow javascript code snippet. Put this code at the end of page

 
<script language="javascript" type="text/javascript">
        try
          {
                var divLImage =  document.getElementById("divImage")
                if (divLImage != null && typeof(divLImage ) != 'undefined')
                   {
                        divLImage .style.display="none";
                        divLImage .parentNode.removeChild(divLoadingMessage);
                   }
         }
        catch(e)
         {
         }
    
    </script>

css for loader div

#divImage {
     position: absolute;
    padding: 4px;
    top: 0px;
    right: 0px;
    color: gray;
    font-size: 13px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    width: 150px;
    font-weight: bold;
    height:20px;
}

Whenever you request any page it’ll show loader on that page during load.
That’s it 🙂

Advertisements

Posted in .Net, Javascript | 2 Comments »

Show loader during postback with ajax in asp.net

Posted by Navi's on March 24, 2011

To show loader during post back using ajax. We can do this very easy manner.
Please wait loader

First, we have to create css for loader.


#divImage {
    position: absolute;
    padding: 4px;
    top: 0px;
    right: 0px;
    color: gray;
    font-size: 13px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    width: 150px;
    height:20px;
 }

After this we have to include the scriptmanager on page or masterpage.

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

Then we use bellow javascript function for async postback. We added two events InitializeRequest and EndREquest these events handles the loader to show/hide.

<script type="text/javascript">
             // Get the instance of PageRequestManager.
             var prm = Sys.WebForms.PageRequestManager.getInstance();
             // Add initializeRequest and endRequest
             prm.add_initializeRequest(prm_InitializeRequest);
             prm.add_endRequest(prm_EndRequest);
            
             // Called when async postback begins
             function prm_InitializeRequest(sender, args) {
                 // get the divImage and set it to visible
                 var panelProg = $get('divImage');                
                 panelProg.style.display = '';
             }
 
             // Called when async postback ends
             function prm_EndRequest(sender, args) {
                 // get the divImage and hide it again
                 var panelProg = $get('divImage');                
                 panelProg.style.display = 'none';
             }
    </script>

Now, we define the loader div in UpdatePanel.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="divImage" style="display: none">
                <div style="float: right;">
                    <img src="loader.gif" height="20px" />Please wait...</div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

Whenever the async post back occurs the loader div will show and hide when request ends.

That’s it… 🙂

To generate loader image we can use bellow links
ajaxload.info
preloaders.net

Posted in .Net, Javascript | Leave a Comment »

Disable Right Click using jQuery

Posted by Navi's on January 20, 2011

To disable right click on web page you can do this using jQuery.

You can download jQuery Library and include it and use bellow code of snippet.


<script src="jquery.min.js" type="text/javascript"></script>

$(function() {
            $(this).bind("contextmenu", function(e) {
                e.preventDefault();
            });
        }); 

That it 🙂

Posted in .Net, Javascript, jQuery | Tagged: | Leave a Comment »

Dropdownlist with checkbox

Posted by Navi's on July 15, 2010

Some times we need a DropDownList with checkbox. Either we use some ready made controls like Infragistics WebDropDown or create your own with TextBox, CheckBoxList and AjaxControlToolkit.

So, If we want to create our own DropDownList with checkbox we need first AjaxControlToolkit. You can download it from here.

We will use PopupControlExtender control. So lets start.

First add the one TextBox control and set some properties of its.

<asp:TextBox ID="txtDropDown" runat="server" Text="Select" ReadOnly="true" Style="background: url(DropDownarrow.png) no-repeat right; border: solid 1px #7F9DB9; padding-right: 30px;"></asp:TextBox>

Now Put Panel control with some default settings. Add CheckBoxList control within the Panel and PopupControlExtender control after the panel .

<asp:Panel ID="pnlDDL" runat="server" BackColor="White" Style="border: solid 1px #7F9DB9; overflow: auto; overflow-x: hidden; display: none; height: 250px; width: 250px;">

<asp:CheckBoxList id="chkList" runat="server"/>
</asp:Panel>

<ajaxtoolkit:PopupControlExtender runat="server" ID="popExtDDL" TargetControlID="txtDropDown" PopupControlID="pnlDDL" Position="Bottom" />

That’s it. Now you can Bind the CheckBoxList control with DataSource and it will show you the dropdown with CheckBox.
If you want to add the select all checkbox you can add the checkbox above the CheckBoxList. You can use simple HTML control checkbox control.

<input type="checkbox" id="chkAll" style="margin-left: 3px; display: none; font-size: 8pt" /><span style="font-size: 8pt;">Select All</span>

And use the jQuery for select all. To use jQuery you need to include the jQuery library in your page. You can download it from here.

 $(document).ready(function() {
            $('#chkAll').click(function() {
                $("#<%= chkList.ClientID %> input:checkbox").attr('checked', this.checked);
            });
});

This is the benefit of jQuery.

Now we need to selected items of CheckBoxList. For this we can use LINQ in place of looping.

IEnumerable<int> allChecked = (from item in chkList.Items.Cast<ListItem>()
                               where item.Selected
                               select int.Parse(item.Value));

This will return you the collection of selected items.

References:
http://bit.ly/99luaN

Posted in .Net, Javascript | 1 Comment »

getElementByClassName in Javascript

Posted by Navi's on April 29, 2010

We already use document.getElementById and document.getElementByTagName but what if we have a html control that doesn’t have any id. It has only applied css class.
In that case we need to find out that control using applied class.

function getElementByClassName(sourceElement,ClassName){
var ctrl=sourceElement.childNodes;
for (var i = 0; i < ctrl.length; i++)
        if (ctrl[i].className == ClassName) {
                  //here we get that control and do what ever you want
                  ctrl[i].style.display='none';
        }
}

This is the basic function with sourceElement and ClassName parameter. Here the sourceElement is the

element which contains that div or control you want to find i.e. parant element and the ClassName is the css class that applied on that div or control which you want to find.

This is helpful if you are not using any javascript library i.e. jQuery, prototype, dojo etc…

Posted in Javascript | Leave a Comment »

Modify Style css class value by Javascript

Posted by Navi's on March 26, 2010

Very critical problem like we have a table and it contains lots of rows  and we need to change the CSS (background color) for each row.

What are the possible solution for this:
Either traverse each rows of table and set CSS class or use jQuery for add CSS class

but above solutions takes too much performance issues.

For this problem I got an idea i.e. Modify applied Style CSS at run time.

So, we need to create same copy of CSS style which already applied on rows of table.
Suppose we applied .xyz class on each rows.

<tr class='xyz'> 

And in .xyz class is look like this .xyz{ background:red}
We will change this .xyz class at run time and set background: green

This terminology is called set Rules (IE) or CssRules(Netscape familly) for style sheet.

To detect browser use navigator.appName and compare this value with “Netscape” or “Microsoft Internet Explorer”

First put the style sheet block in head section.

Setting rules for IE:

var inStyleSheet = document.styleSheets["inStyleSheetBlock"];

//Add rule
 if (inStyleSheet.rules.length == 0) {
inStyleSheet.addRule("tr .xyz", "background-color: green");
inStyleSheet.addRule("tr .xyz", "background-color: green");
}

//Remove rule
for (i = 0; i < inStyleSheet.rules.length; i++) {
                        inStyleSheet.removeRule()
                    }

To remove all rules from page we need to make a recursive call, because its not removing all applied rule at once. So we have to call removeRule till it will remove all created rules.

To get the how many rules at present in a page we can use rules.length property. It will return the count of rules in named style block.

 if (inlineStyleSheet.rules.length != 0)
            for (i = 0; i < inStyleSheet.rules.length; i++) {
                        inStyleSheet.removeRule()
                    }

Set rules for Netscape family [ Firefox ] :

var inStyleSheet = document.getElementById('inStyleSheetBlock').sheet;

//Add rule
inStyleSheet.insertRule("tr .xyz {background-color: green}", 0);
inStyleSheet.insertRule("tr .xyz {background-color: green}", 1);

//Remove rule

for (i = 0; i < inStyleSheet.cssRules.length; i++) {
                        inStyleSheet.deleteRule(i)
                    }

Same recursive steps applied here to remove rule.

if (inlineStyleSheet.cssRules.length != 0)
     for (i = 0; i < inStyleSheet.cssRules.length; i++) {
                        inStyleSheet.deleteRule(i)
                    }

Perform add and delete rules based on your condition.

References :
http://bit.ly/cCtKQY
http://bit.ly/cTBDIO
http://bit.ly/9IGBRk
http://bit.ly/40NVsg

-n’s

Posted in .Net, Javascript | 11 Comments »