can please any one tell me how i can create a loading on my site and let page to load all pictures and then start to showing the site ? is it possible to write this codes with java query and css3 or i need to learn some thing else ? Here is my HTML code . thanks every one .
<?php
/**
*@copyright Copyright (C) 2008 - 2009 . All rights reserved.
* @license
*/
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template.css" type="text/css" />
<?php if($this->direction == 'rtl') : ?>
<link href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/template_rtl.css" rel="stylesheet" type="text/css" />
<?php endif; ?>
<link id="JTKLocalCss" href="css/template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(document).on("click","#menu-oc",function() {
jQuery("#menu-drop").slideToggle("slow");
});
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 0) {
jQuery("#header").addClass("fixed");
jQuery("#header").addClass("goblack");
} else {
jQuery("#header").removeClass("fixed");
jQuery("#header").removeClass("goblack");
}
});
jQuery("#introcenter").animate({width: "0"},600,function (){
jQuery(".intro").animate({height : "0"},600,function () {
jQuery("#main").animate({opacity : "1"},500);
});
});
});
</script>
<style>
</style>
</head>
<body>
<div id="main">
<div id="header">
<button id="menu-oc">HELLO</button>
</div>
<div id="menu-drop">
<div id="menu">
<jdoc:include type="modules" name="menu" style="html" />
</div>
</div>
<div id="index">
<div id="top">
<jdoc:include type="modules" name="top" style="html" />
</div>
<div id="top2">
<jdoc:include type="modules" name="top2" style="html" />
</div>
<div id="center">
<jdoc:include type="modules" name="center" style="html" />
</div>
<div id="contents">
<jdoc:include type="component" />
</div>
<div id="bottom">
<jdoc:include type="modules" name="bottom" style="html" />
</div>
<div id="bottom2">
<jdoc:include type="modules" name="bottom2" style="html" />
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" style="html" />
</div>
</div>
</div>
<div id="introcont">
<div id="introtop" class="intro"></div>
<div id="introcenter"></div>
<div id="introdown" class="intro"></div>
</div>
</body>
</html>
