Site hosting news, tutorials, tips, How Tos and more

Latest Posts from Rei Tu


Winter App Installer Updates

application installer update

The latest version of these applications are now available in the control panel app installer:

Visit Winhost to learn more about our application hosting solutions



Spring App Installer Updates

application installer update

The latest version of these applications are now available in the control panel app installer:

ShoppingCart.NET and vevoCart were removed from the application installer because the project seems to be abandoned.

Visit Winhost to learn more about our application hosting solutions



Winter App Installer Updates

Announcement

The latest version of these applications are now available in the control panel app installer:

Visit Winhost to learn more about our application hosting solutions



Spring App Installer Updates

Announcement

The latest version of these applications are now available in the control panel app installer:

Visit Winhost to learn more about our application hosting solutions



Fall App Installer Updates

Announcement

The latest version of these apps are now available through the Winhost control panel application installer:

Visit Winhost to learn more about our application hosting solutions



Spring App Installer Updates

Announcement

The latest version of these apps are now available in the control panel app installer:

* Drupal has replaced Acquia Drupal.

Visit Winhost to learn more about our application hosting solutions



Programming 101 Tips: 2 Ways to Add a Loading Icon “Spinner” to Your Website

For budding new web developers, here are two ways to add a “spinner” icon to indicate that your website is busy loading data. The first method uses jQuery’s .ajax method and the second method uses Javascript’s new Fetch API. For the spinner icon, we will use an icon from Font Awesome. I prefer this method because it reduces load time. A well crafted css-styled .png/.gif icon would work as well.

First, install Font Awesome by downloading it (you can get the Free for Web version) and then follow the various instructions on their site to add it to your project (look on the right for Using Font Awesome With). Since I am developing with Visual Studio, I just use NuGet’s Package Manager to install it for me. To add it to your web page, add a stylesheet reference in the <head> element. Since I’m using Visual Studio, my reference looks like this:

<link rel="stylesheet" href="/Content/font-awesome.min.css" />


Next, you will also need to install jQuery and add a reference for it as well:

<script src="/Scripts/jquery-3.4.1.min.js"></script>


jQuery can also be installed via NuGet’s Package Manager in Visual Studio.

Now, add the spinner by adding this line to your page in the <body> element:

<div id="Spinner"><i class="fa fa-spinner fa-3x fa-spin"></i></div>


It can be placed anywhere in the <body> element, but I prefer to place it at the top for organization reasons (i.e. easy reference). The <i> element is used to create the font-awesome icon and the “Spinner” id will be used for further styling. Here is the markup for the “Spinner” css:

#Spinner {
    color: blue;
    left: 47%;
    position: fixed;
    top: 47%;
    visibility: hidden;
    z-index: 1;
}


This should place the spinner in the middle of the page and hides it initially until you activate it (i.e. make it visible) via jQuery. The z-index is used to overlay it over a page.

Now, when making your .ajax call, use the following format:

        $.ajax({
            type: "GET", // GET, POST, DELETE, etc.
            url: "https://www.mysite.com/api/dosomething", // some url
            beforeSend: function () {
                $("#Spinner").css("visibility", "visible");
            },
            complete: function () {
                $("#Spinner").css("visibility", "hidden");
            },
            success: function (response) {
                // do something with response data
            }
        });


By changing the value of css property “visibility” using jQuery, you’re turning the spinner on before the ajax call is made and off after it finishes which gives it the illusion that the site is processing data.

If you plan to use Javascript’s new Fetch API, here is the sample markup:

    $("#Spinner").css("visibility", "visible");
    fetch("https://www.mysite.com/api/dosomething") // some url
        .then(response => response.json())
        .then(function (response) {
            // do something with response data
            $("#Spinner").css("visibility", "hidden");            
        })
        .catch(err => {
           // handle error
           $("#Spinner").css("visibility", "hidden");
        });


The spinner is turned on right before the fetch call is made and then off when it completes. I also added it to the catch clause because the spinner would still remain active when it errors out since the code to deactivate it never executes.

Hope these tips help those young and upcoming rock-star developers. 🙂

Visit Winhost to learn more about our ASP.NET hosting solution



Fall App Installer Updates

Announcement

The latest version of these apps are now available through the control panel app installer:

Visit Winhost to learn more about our application hosting solutions