How do I call the content via Ajax from a seperate container (URL: http://internetbusinesspotential.com/cdc/slidedown-menu2.html )
This is my issue, I am trying to call an html file to fill in a #content container on the page with an ajax call. I am already using a Javascript Drop down effect on the ul="nav" menu's primary li elements. Here is the div specificity: #maincontainer #leftMenu #nav li a
I know this is something simple and I am just overlooking it.
the #content container goes through the motions with the load gif and will even reload the home content back again if you click on the sub nav elements
PLEASE HELP!!
Head of Document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slide down menu</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/slidedown-menu2.css">
<script type="text/javascript" src="js/slidedown-menu2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="css/contentBase.css">
<link rel="stylesheet" href="css/css.css">
<script type="text/javascript" src="js/js.js"></script>
HTML:
<body>
<div id="mainContainer">
<div id="leftMenu">
<h3><a href="#">Topic Homepage</a></h3>
<!-- START OF MENU -->
<div id="nav_slidedown_menu">
<ul id="nav">
<li><a href="article1.html">Products</a>
<ul>
<li><a href="#">Menus</a>
<ul>
<li><a href="#">Download</a>
<ul>
<li><a href="#">Download</a></li>
</ul>
</li>
<li><a href="#">Demo</a></li>
</ul>
</li>
<li><a href="#">Calendar scripts</a>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Demo</a></li>
<li><a href="#">Is it cross browser?</a>
<ul>
<li><a href="#">yes it is</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Window scripts</a>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Demo</a></li>
</ul>
</li>
<li><a href="#">Form widgets</a>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Demo</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="article2.html">Support</a>
<ul>
<li><a href="#">Phone</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">QnA</a></li>
</ul>
</li>
<li><a href="article3.html">History</a>
<ul>
<li><a href="#">1900 - 1940</a></li>
<li><a href="#">1941 - 1980 </a></li>
<li><a href="#">1981 - Present time</a></li>
</ul>
</li>
<li><a href="article4.html">The team</a>
<ul>
<li><a href="#">Person A</a>
<ul>
<li><a href="#">CV</a>
<ul>
<li><a href="#">Job 1</a></li>
<li><a href="#">Job 2</a></li>
<li><a href="#">Job 3</a></li>
</ul>
</li>
<li><a href="#">Education</a></li>
<li><a href="#">Experience</a>
<ul>
<li><a href="#">Job 1</a>
<ul>
<li><a href="#">Accomplished this</a></li>
<li><a href="#">Accomplished that</a></li>
</ul>
</li>
<li><a href="#">Job 2</a></li>
<li><a href="#">Job 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Person B</a></li>
<li><a href="#">Person C</a></li>
<li><a href="#">Person D</a></li>
<li><a href="#">Person E</a></li>
</ul>
</li>
<li><a href="article5.html">Locations</a>
<ul>
<li><a href="#">Norway</a></li>
<li><a href="#">United States</a></li>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">Sweden</a></li>
<li><a href="#">Denmark</a></li>
<li><a href="#">Finland</a></li>
</ul>
</li>
</ul>
</div>
<div class="bottom"></div>
<!-- END OF MENU -->
<script type="text/javascript">
initSlideDownMenu();
</script>
</div>
<div class="contentContainer">
<div id="wrapper">
<div id="content">
<h2>Welcome!</h2>
<p>This is where the content will load in here...</p>
</div>
</div>
</div>
</div>
</body>
JavaScript:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
CSS:
@charset "utf-8";
/* CSS Document */
/*
General rules
*/
#mainContainer #leftMenu{
position:relative;
margin:0;
padding:0/* 12px 0 0*/;
height:auto;
width:179px;
color:#fff;
clear:both;
float:left;
background:transparent url('../img/bg_leftNav_new.gif') repeat-y top left;
}
.optional #leftMenu {z-index:10;}
#leftMenu, #mainContainer .bottom {background:transparent url('../img/bg_leftNav_new.gif') repeat-y top left;}
.topicHome #nav_slidedown_menu li#local-az-link {display:none;}
body #mainContainer h3 a {
background-image: url('../img/bg_leftMenuH3_blue.gif');
color: #FFF;
line-height: 28px;
padding-left: 5px;
}
#leftMenu,
#mainContainer .bottom {
background: transparent url('../img/bg_leftMenu_blue.gif') repeat-y top left;
}
/* Active menu item */
#nav_slidedown_menu .nav_activeItem {
font-weight:bold;
color: #ccc;
}
#nav_slidedown_menu li{
list-style-type:none;
position:relative;
}
#nav_slidedown_menu ul{
margin:0px;
padding:0px;
position:relative;
}
#nav_slidedown_menu div{
margin:0px;
padding:0px;
}
/* Layout CSS */
#nav_slidedown_menu .slideMenuDiv2{
width:175px;
}
#nav_slidedown_menu .slideMenuDiv3{
width:225px;
}
#nav_slidedown_menu{
width:205px;
}
/* All A tags - i.e menu items. */
#nav_slidedown_menu a{
color: #fff;
text-decoration:none;
display:block;
clear:both;
width:170px;
padding-left:2px;
}
/* Active menu item */
#nav_slidedown_menu .nav_activeItem {
font-weight:bold;
color: #CCC;
}
/*
A tags
*/
#nav_slidedown_menu .slMenuItem_depth1{ /* Main menu items */
margin-top:0px;
background: #4a6bad;
font-weight:bold;
padding: 5px .5px 5px 5px;
}
#nav_slidedown_menu .slMenuItem_depth2{ /* Sub menu items */
margin-top:0px;
background: #7faee2;
font-weight:bold;
padding: 5px .5px 5px 15px;
}
#nav_slidedown_menu .slMenuItem_depth3{ /* Sub menu items */
margin-top:0px;
background: #dcecfb;
color: #000;
padding: 5px .5px 5px 25px;
}
#nav_slidedown_menu .slMenuItem_depth4{ /* Sub menu items */
margin-top:0px;
background: #edf5fe;
color: #000;
padding: 5px .5px 5px 25px;
}
#nav_slidedown_menu .slMenuItem_depth5{ /* Sub menu items */
margin-top:0px;
background: #fff;
color: #000;
padding: 5px .5px 5px 25px;
}
/* UL tags, i.e group of menu utems.
It's important to add style to the UL if you're specifying margins. If not, assign the style directly
to the parent DIV, i.e.
#nav_slidedown_menu .slideMenuDiv1
instead of
#nav_slidedown_menu .slideMenuDiv1 ul
*/
#nav_slidedown_menu .slideMenuDiv1 ul{
padding:1px;
}
#nav_slidedown_menu .slideMenuDiv2 ul{
margin:0px;
padding: 0px 10px 0px 0px;
}
#nav_slidedown_menu .slideMenuDiv3 ul{
margin-left:0px;
padding: 0px 10px 0px 0px;
}
#nav_slidedown_menu .slMenuItem_depth4 ul{
margin-left:15px;
padding:1px;
}
#mainContainer .bottom { /* bottom */
position:relative;
margin:0 0 0em 0;
height:15px; /** = height of bottom cap/shade */
width:179px;
border:none;
background-color:#4a6bad;
background-position:bottom left;
}
#mainContainer .bottom {
background: transparent url('../img/bg_leftNav_new.gif') repeat-y bottom left;
}
#wrapper {
width: 480px;
margin: 10px 0 0 15px;
background: #0d0d0d url(img/header.jpg) no-repeat;
padding: 58px 25px 55px 25px;
border: 12px solid #2e2e2e;
position:relative;
}
h1 {
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 0.3em 0;
text-indent:-99999px;
}
#load {
display: none;
position: absolute;
right: 10px;
top: 10px;
background:url(../img/ajax-loader.gif);
width: 43px;
height: 11px;
text-indent: -9999em;
}
.contentContainer { float:left; width: 200px;}
#content {
}
h2 {
margin: 0;
padding: 0.5em 0;
color:#568945;
font-family:Helvetica, Arial, Sans-serif;
}
p {
margin: 0;
padding: 0.4em 0;
color:#686868;
line-height:1.4em;
}
#content img.right {
float: right;
margin: 0 0 8px 8px;
}
#foot {
padding: 15px;
color: white;
text-align: center;
margin: 30px 0 0 0;
border-top:1px solid #222222;
}
