Get NameValueCollection collection of Webconfig To Clientside

I had one issue that i had to get NameValueCollection  at client side. I get all this array at server side  perfactly. But i want that at client side. So i had lots of RND but not getting proper result. So here i am sharing you one of good solution.

My Web config

<configuration>
  <configSections>
    <section name="MyDictionary" type="System.Configuration.NameValueSectionHandler" />
  </configSections>
  <appSettings>
    <add key="test" value="test"/>
   
  </appSettings>
  <MyDictionary>
    <add key="Regular" value="10"/>
    <add key="Senior" value="11"/>
    <add key="Under25" value="17"/>
    <add key="Child" value="35"/>
    <add key="Educator" value="28"/>
    <add key="Child2" value="134"/>
  </MyDictionary>

</configuration>

MyTest.aspx.cs

    public NameValueCollection section { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {

        if (!Page.IsPostBack)
        {
            section = (NameValueCollection)ConfigurationManager.GetSection("MyDictionary");
            str = section["Regular"];
            keys = section.AllKeys;
         
            for (int i = 0; i < section.Keys.Count; i++)
            {
                Page.ClientScript.RegisterArrayDeclaration("myArray", "'" + section[i] + "'");
                Page.ClientScript.RegisterArrayDeclaration("myArray1", "'" + section.Keys[i] + "'");               
            }

        }


    }

MyTest.aspx

 <script type="text/javascript">
        $(document).ready(function () {           
            myfunction();
        });
        function myfunction() {
            for (var i = 0; i < myArray.length; i++) {
                alert(myArray[i]);
            }
        }
    </script>

Show loading image while Page is loading using jQuery

Web pages takes time to load and sometimes when page is heavy (full of images) then it takes more time to load. Would it not be nice to show loading images or message while your page is loading. It creates responsive webpage and gives nice user experience. The user will come to know that something is loading. In this post, I will show you how to show loading icon/image while page is loading using jQuery.

Related Post:

• Execute jQuery code only after Web Page is loaded completely

How to do it?

First create a div element and assign an ID to it. I have assigned ID as "dvLoading". This div element will be used to show the loading icon.

Now create a style which will be applied to the div element. Basically, this CSS style will set the div position in the middle of the page and also assign width and height. And the background of the div will be an loading gif image.

#dvLoading
{
   background:#000 url(images/loader.gif) no-repeat center center;
   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
}

Now, comes the jQuery part. The div element will be always visible but we need to hide it as soon as our page is loaded completely. In this case, we can't use $(document).ready() to show the loading div. Read here why? Therefore, we need to use window.load event to hide the loading div element. Remember to put this code before closing head tag.

That's it!!!!! 

Live Demo

Feel free to contact me for any help related to jQuery, I will gladly help you.

Css3 Image Loader

Such Amazing CSS3 loader

Its  pure css based loader. Here is the code for it.

Here is html code

<div id="pbOverlay" class="thumbs hasArrows hasCounter hasAutoplay show on prev pbLoading">
        <div class="pbLoader">
            <b></b><b></b><b></b>
        </div>
    </div>

Here is Style (css) code

 <style type="text/css">
      /* PICBOX */
#pbOverlay.show{ opacity:1; pointer-events:auto; }
#pbOverlay{
    opacity:0; overflow:hidden; width:100%; height:100%; position:fixed; z-index:9999; left:0; top:0; text-align:center; pointer-events:none;
    -moz-user-select:none;
    background:rgba(0,0,0,0.85);
    background:radial-gradient(rgba(0,0,0,.6) 0%, rgba(0,0,0,.9) 100%);
    -webkit-transform:translate3d(0px, 0px, 0px);
    -webkit-transition:opacity 300ms ease;
    -ms-transition:opacity 300ms ease;
    transition:opacity 300ms ease;
}
#pbOverlay.msie{ background-color:rgba(0,0,0,.6); }
#pbOverlay.msie.pbLoading .wrapper{ background:url('../images/loading.gif') no-repeat center center; }

@keyframes pbLoaderFrames{ 50%{ height:5px; } }
@-webkit-keyframes pbLoaderFrames{ 50%{ height:5px; } }

#pbOverlay .pbLoader{ visibility:hidden; opacity:0; pointer-events:none; -webkit-transform:scale(.2); transform:scale(.2); position:absolute; z-index:999; top:50%; left:50%; margin:-50px 0 0 -50px; text-align:center; border-radius:100%; box-shadow:15px 32px 60px -20px #FFF inset, 1px 1px 3px 1px #FFF inset, 0 0 20px; width:100px; height:100px; transition:0.3s; -webkit-transition:0.2s; }
#pbOverlay.thumbs .pbLoader{ margin-top:-100px; }
#pbOverlay.pbLoading:not(.msie):not(.error) .pbLoader{ visibility:visible; opacity:1; -webkit-transform:scale(1); transform:scale(1); }
    #pbOverlay .pbLoader b{ display:inline-block; vertical-align:middle; margin:0 2px; width:8px; height:60px; border-radius:5px; background:rgba(255,255,255,0.8); box-shadow:0 0 10px rgba(0,0,0,0.5); -webkit-animation:.9s pbLoaderFrames infinite linear; animation:.9s pbLoaderFrames infinite linear; }
    #pbOverlay .pbLoader b:nth-child(2){ -webkit-animation-delay:.3s; animation-delay:.3s; }
    #pbOverlay .pbLoader b:nth-child(3){ -webkit-animation-delay:.6s; animation-delay:.6s; }
#pbOverlay .pbLoader:before{ content:""; display:inline-block; height:100%; margin-right:-0.25em; vertical-align:middle; }

    </style>