Download Free Websites - WebCreatorBG

Blog News

WebCreatorBG - Ajax Loader

To be one real ajax website we need to put and ajax loader :D
write this code after the head meta tag


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $(document).ajaxStart(function(){

        $("#wait").css("display", "block");

    });

    $(document).ajaxComplete(function(){

        $("#wait").css("display", "none");

    });

});

</script>

When you see header close tag  put this after the close tag

<div id="wait" style="z-index:1;display:none;position:absolute;top:25%;left:46%;padding:0px;"><img src='https://i.imgsafe.org/16cabc5302.gif' alt="loader" width="50" height="50" /></div>

And with this we finish our SIMPLE AJAX WEBSITE by WebCreatorBG ( Даниел Маринов ).
your new website must must look like this.
We Have two files now index.html and pages.html at the same directory ! look like this !


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $(document).ajaxStart(function(){

        $("#wait").css("display", "block");

    });

    $(document).ajaxComplete(function(){

        $("#wait").css("display", "none");

    });

});

</script>

<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style>

body { background:#333}

header { position:relative; margin:auto; background:#CCC; width:950px; height:150px;}

nav { position:relative; margin:auto; background:#3CF; width:950px; height:80px; border-top-left-radius: 80em 1em;border-top-right-radius: 80em 1em; border-bottom-right-radius:80em 1em;border-bottom-left-radius:80em 1em;}

main { position:relative; margin:auto; background:beige; width:950px; height:400px;}

footer { position:relative; margin:auto; background:#3CF; width:950px; height:80px; border-top-left-radius: 80em 1em;border-top-right-radius: 80em 1em; border-bottom-right-radius:80em 1em;border-bottom-left-radius:80em 1em; text-align:center;}

.logo { position:absolute; margin:auto; background:beige; width:950px; height:150px; text-align:center;}

h2 { font-size:32px; font-style:italic; color:black; text-transform: uppercase;}

small { font-style:oblique; color:black; }

ul { position:absolute; width:900px; height:45px;}

li {  float:left;margin-left:80px; padding:3px 3px 3px 3px; font-size:28px; display:block; text-decoration:none;}

li a:hover {color:white;}

li a {text-decoration:none;color:black;}

</style>

<title> WebCreatorBG HTML5 BASIC </title>

</head>

<body>

<header>

<div class="logo"> <h2> welcome to webcreator bg </h2> <small>HTML 5 First webpage Toturial</small>

</div>

</header>

<div id="wait" style="z-index:1;display:none;position:absolute;top:25%;left:46%;padding:0px;"><img src='https://i.imgsafe.org/16cabc5302.gif' alt="loader" width="50" height="50" /></div>

<nav id="menu">

<ul>

<li><a href="homepage">Home </a></li>

<li><a href="downloads">Downloads </a></li>

<li><a href="aboutus">Abouts US</a>>/li>

<li><a href="contactus">Contact Us</a>/li>

</ul>

</nav>

<main id="content">

				<div id="maintext">

<a href="http://webcreator.free.bg"> Download free website's </a> - WebCreatorBG will teach you how to write on HTML5 and CSS 3 we also use AJAX,JQUERY,JAVASCRIPT,PHP and etc.. all i one visit our official webpage.

				</div>


</main>

<script type="text/javascript">

			$(document).ready(function(){

				

				$('#menu ul li a').click(function(){

					$('#content').load('pages.html #' + $(this).attr('href'));

					return false;

				});

	
			
			});

</script>

<footer>

Даниел Маринов ® Copyright free open source code HTML 5 CSS 3 Validated,Simple Ajax website! Enjoy

<a href="http://webcreator.free.bg"> WebCreatorBG </a>

</footer>

</body>

</html>

pages.html source


<div id="homepage">

<a href="http://webcreator.free.bg"> Download free website's </a> - WebCreatorBG will teach you how to write on HTML5 and CSS 3 we also use AJAX,JQUERY,JAVASCRIPT,PHP and etc.. all i one visit our official webpage.

</div>




<div id="downloads">

<a href="http://webcreator.free.bg"> Download free website's </a> - WebCreatorBG will teach you how to write on HTML5 and CSS 3 we also use AJAX,JQUERY,JAVASCRIPT,PHP and etc.. all i one visit our official webpage.

</div>

	

<div id="aboutus">

<a href="http://webcreator.free.bg"> Download free website's </a> - WebCreatorBG will teach you how to write on HTML5 and CSS 3 we also use AJAX,JQUERY,JAVASCRIPT,PHP and etc.. all i one visit our official webpage.

	

</div>

<div id="contactus">

<a href="http://webcreator.free.bg"> Download free website's </a> - WebCreatorBG will teach you how to write on HTML5 and CSS 3 we also use AJAX,JQUERY,JAVASCRIPT,PHP and etc.. all i one visit our official webpage.



</div>