Acid.JS Web 2.0 Components Help Topics

LoadingPanel.JS

LoadingPanel.JS Setup, Installation and Help Topics

Enhance your site's look and feel during AJAX requests with the fully customizable state-of-the art LoadingPanel.JS without writing a single line of code!

LoadingPanel.JS allows you to display cool loading overlay to your webpages during your async requests to the server. The loading overlay and message is fully customizable and can fit to any website design. The deployment and customization of the script is a matter of minutes.

View online demo of LoadingPanel.JS or download it straight away. Buy via PayPal.

Because the component or parts of it are rendered entirely on the client, and the source is not available via the standard View Source command of the browser, it is recommended that you use IE DevToolBar or FireBug or other troubleshooting and code inspection tool (such as Opera Dragonfly or the development tools of Safari and Google Chrome) in order to inspect the HTML and the CSS classes.

Requirements

  • Standards-compliant (XHTML1.0/1.1, HTML5) or skinny doctype page - the control will not initialize on non-standards-compliant pages.
  • Web-server (Apache, IIS)

Supported Browsers

  • 6
  • 7
  • 8
  • 9
  •  
  •  
  •  
  •  

Deployment and Initialization of the Control

To copy a chunk of code from the listings below and keep its indentation, double click to select it, then right click and choose "Copy" from the context menu or use Ctrl + C.

1. Place the runtime scripts of LoadingPanel.JS in the header (between the <head>...</head> tags) section of the page:

<script type="text/javascript" src="LoadingPanel.JS/Scripts/LoadingPanel.JS.js"></script>

2. To initialize LoadingPanel.JS, use its init() method. It should be added after the runtime scripts from the previous step in a <script>...</script> tag.

<script type="text/javascript">
	rootfolder: "",
	overlay: "#3b3b3b",
	text: "Contacting Server. Please, wait...",
	font: "normal 12px 'Segoe UI', 'Trebuchet MS', Arial, Verdana, Serif",
	color: "#fff",
	textalign: "center",
	msgwidth: 200,
	msgheight: 46,
	msgbackground: "#3b3b3b",
	spinnerposition: "center",
	overlayopacity: 6,
	spinnerurl: "loading.gif",
	roundedcorners: "6px 6px 6px 6px",
	dropshadowspread: 10,
	dropshadowcolor: "#000000",
	borderwidth: 1,
	bordercolor: "#fff"
});
</script>

Public Methods

The component has three public methods - one to initialize the script on the page (init()) and two other to toggle its visibility on and off - show() and hide().

ajaxloadingpanel.init()
  • rootfolder - If LoadingPanel.JS folder is in the root of your website, leave blank, if it is in another folder, for example "Scripts", use rootfolder: "Scripts/" and do not forget the trailing slash "/".
  • overlay - Valid hex color value for the modal overlay.
  • text - Text of the loading message box.
  • font - CSS string, representing the font properties of the loading message box.
  • color - Valid hex color value for the text of the loading message box.
  • textalign - "center", "left" or "right" - alignment of the text in the message box.
  • msgwidth - Integer, representing the width of the message box in pixels, do not add px as the unit is added automatically.
  • msgheight - Integer, representing the height of the message box in pixels, do not add px as the unit is added automatically.
  • msgbackground - Valid hex color value for the background of the loading message box.
  • spinnerposition - "center", "left" or "right", representing the horizontal position of the animated gif in the message box.
  • overlayopacity - Integer between 0-9, representing the opacity of the modal overlay. 0 is fully transparent.
  • spinnerurl - The animated gif, stored in the LoadingPanel.JS/LoadingIndicators folder of LoadingPanel.JS. Do not add path to the file, as it is added automatically.
  • roundedcorners - should be number + pixel values, for example "6px 6px 6px 6px", representing the radius of the top, right, bottom and left borders of the loading message box.
  • dropshadowspread - Integer representing the spread of the dropshadow, do not add px as the unit is added automatically.
  • dropshadowcolor - Valid hex color value of the shadow of the loading message box.
  • borderwidth - Integer, representing the width in pixels of the border of the loading message box, do not add px as the unit is added automatically.
  • bordercolor - Integer, representing the color of the border of the loading message box
ajaxloadingpanel.show()

The method can be used during AJAX requests to display the loading panel. To use this method, the loading panel should be initialized on the page (ajaxloadingpanel.init()).

ajaxloadingpanel.hide()

The method can be used to hide the loading panel after a successful AJAX requests. To use this method, the loading panel should be initialized on the page (ajaxloadingpanel.init()).

Troubleshooting

If you have set everything right, but you still cannot see the rounded corners in Internet Explorer, most probably this is because your web server does not serve the correct content type for .htc files that are used in LoadingPanel.JS. If you experience such issue, check your server configuration and update it to use the correct content-type. For Apache, you can do this in a .htaccess file:

AddType text/x-component .htc

Tips

1. If you do not want to display a dropshadow, set the dropshadowspread property to 0.

2. If you do not want to display rounded corners to the loading message box, set the four values of the roundedcorners property to 0.

3. If you do not want to round only a specific corner of the loading message box, set its value to 0. The four values of the roundedcorners property represent the four corners of the box clockwise - top, right, bottom and left.

4. If you don't want to display a loading indicator animation, leave the spinnerurl property blank.

5. If you don't want to display any text in the loading message box, use &nbsp; as value of the text of the component.

Create Custom Loading Indicators

Difference Between the Lite and the Full Versions

The Lite version of LoadingPanel.JS is for testing purposes only, cannot be used on a live set and displays a trial message at the top of the page on which it is used. If you wish to have that message removed, please, purchase the script for USD20 on the following page.

If you consider purchasing more than one Acid.JS component you may create and order a custom Creative Web 2.0 Bundle and save money. More information about the Creative Web 2.0 Bundle program is available on my blog.

Upgrade to the Full Version after Purchase

After getting the full version you will notice that it contains only certain files, not the entire distribution required to run the script - the rest of the skins and JavaScript. You have to replace the files in the trial version distribution with the ones that you have received after having purchased the full version manually. After this, the control should work without trial notices and the emails sent by it will not contain trial strings.