responsive
1.2.6

Preloader

Table of contents:

A few words about preloader

Preloader is an HTML element displayed during preloading of jAccordion. Preloader is usually placed inside jAccordion but can be placed even outside. Preloader can consist of multiple elements such as images, headings, paragraphs, spans, divs, etc.

Note: I recommend to take a look at some premade .gif preloaders.

Requirements

Preloader can be basically any HTML element placed inside or even outside jAccordion, nevertheless there are few conditions which you should follow when creating or customizing preloader.

Placement in HTML structure

Preloader which is placed inside accordion has to be its direct children.

<div class="accordion noJS">
	<div class="preloader">Loading content...</div>	<!--Preloader can be placed here-->
	<div class="jAccordion-slidesWrapper">
		<div class="preloader">Loading content...</div>	<!--Preloader cannot be placed here-->
		<div class="jAccordion-slide">
			<!--Content of slide-->
			<div class="preloader">Loading content...</div>	<!--Preloader cannot be placed here-->
			<img src="images/banner1.png" width="910" height="380" alt="slide1" />
		</div>
	</div>
  	<div class="preloader">Loading content...</div>	<!--Preloader can be placed here-->
</div>

CSS

Preloader which is placed inside accordion has to be absolutely positioned.

Example of css rule with the least number of necessary properties for timer placed inside jAccordion container:

.accordion .preloader {
	position: absolute;
}

Note: Almost every demonstration used in Options and API and both templates has defined css rule .accordion .preloader {} which can be easily customized to suit your needs. (Some themes don't use preloader and css rule is not defined.)

Cleaning the mess

Preloader should be removed after preloading is done using callback attached to event onReady.

Note: Code below explains how to remove preloader inside jAccordion, removal of preloader placed outside jAccordion is basically same - just use different selector when event onReady is triggered.

Note #2: Code below is placed inside <head> section of your website as described in jAccordion activation.

Example of an configuration section with removal of preloader after preloading is finished:

<script type="text/javascript">
	jQuery(document).ready(function( $ ) {
		$('.accordion').jAccordion({
			//Here can be placed jAccordion options separated by comma
			onReady : function() {
				$('.preloader', this.$accordion).remove();	//Comment this line to see the preloader if testing locally.
			}
		});
	});
</script>

jAccordion by maniacpc, exclusively for CodeCanyon