When I click my links to load the new page in the designated div with ajax the jquery effect on the div fires off and displatys the same information. i have external .html files made and the java script is set up to load all pages in the #content div.
<ul id="navigationMenu"> <li> <a class="home" href="index.html"> <span>Home</span> </a> </li> <li> <a class="about" href="about.html"> <span>About</span> </a> </li> <li> <a class="services" href="services.html"> <span>Services</span> </a> </li> <li> <a class="portfolio" href="portfolio.html"> <span>Portfolio</span> </a> </li> <li> <a class="contact" href="contact.html"> <span>Contact us</span> </a> </li> </ul> </div> $(document).ready(function() { var hash = window.location.hash.substr(1); var href = $('#navigationMenu 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) } }); $('#navigationMenu 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 () { $("li", "#navigationMenu").click(function (event) { var url = $(this).attr("href"), hash = url.replace(".html", ""), content = $("#content"); content.html("<p>Loading...</p>"); $.ajax({ url : url, dataType : "html", success : function(data){ content.find("p").fadeout(function(){ content.find("p").html(data); window.location.hash = hash; }); } }) event.preventDefault(); }); }); function loadContent() { $('#content').load(toLoad,'',showNewContent()) } function showNewContent() { $('#content').show('normal',hideLoader()); } function hideLoader() { $('#load').fadeOut('normal'); } return false; }); });
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function do_the_click(brl)
{
alert(brl);
var url = eval("brl");
$( "#content" ).load(url, function() {
alert( "Load was performed." );
});
}
</script>
</head>
<body>
<ul id="navigationMenu">
<li>
<a class="home" href="#" onclick="do_the_click('index.html');">
<span>Home</span>
</a>
</li>
</ul>
<div class="abc" id = "content">
</div>
</body>
</html>
and please create folder with name js which contains the jquery library in parallel of this sample.html and create one sample index.html in parallel of it, hope this works for you
Here is the code you can use:
$(function () {
$("a", "#navigationMenu").click(function (event) {
var url = $(this).attr("href"),
hash = url.replace(".html", ""),
content = $("#content");
content.html("<p>Loading...</p>");
$.ajax({
url : url,
dataType : "html",
success : function(data){
content.find("p").fadeout(function(){
content.html(data);
window.location.hash = hash;
});
}
})
event.preventDefault();
});
});
This is the answer to load the data all in one page in the same div, then hide it, then display it as the links are clicked in nav.
<!-- The navigation css is in styles.css --> <div id="main"> <ul id="navigationMenu"> <li> <a class="home" href="#home"> <span>Home</span> </a> </li> <li> <a class="about" href="#about"> <span>About</span> </a> </li> <li> <a class="services" href="#services"> <span>Services</span> </a> </li> <li> <a class="portfolio" href="#portfolio"> <span>Portfolio</span> </a> </li> <li> <a class="contact" href="#contact"> <span>Contact us</span> </a> </li> </ul> </div> <!-- The wrapper and the content div control the jquery slide up effect --> <div id="wrapper"> <div id="content"> <!-- The 5 pages content divs will display in this area --> <!-- The actual content I want to switch in and out of the panel, this is hidden --> <div id="home" class="pages"> <h1 style=color:#7fff00;>Welcome</h1> <p>hey this is cool</p> </div> <div id="about" class="pages"> <h1 style=color:#6495ed;>My Qualifications</h1> <p>2 Whole bunch of text 2</div> <div id="services" class="pages"> <h1 style=color:#ee7621;>Welcome</h1> <p>3 Whole bunch of text 3</div> <div id="portfolio" class="pages"> <h1 style=color:#ffb90f;>Welcome</h1> <p>4 Whole bunch of text 4</div> <div id="contact" class="pages"> <h1 style=color:#ff1493;>Welcome</h1> <p>5 Whole bunch of text 5</div> </div> </div> <!-- This is the slide show --> <div id="container"> <div id="examples"> <ul id="example1"> <li> <img src="images/slide0.gif" width="600" height="270" alt="" /> </li> <li> <img src="images/slide1.gif" width="600" height="270" alt="" /> </li> <li> <img src="images/slide2.gif" width="600" height="270" alt="" /> </li> <li> <img src="images/slide3.gif" width="600" height="270" alt="" /> </li> <li> <img src="images/slide4.gif" width="600" height="270" alt="" /> </li> </ul> <script type="text/javascript"> $("#example1").zAccordion({ timeout: 4000, slideWidth: 600, width: 960, height: 270 }); </script> </div> </div> <div id="foot"> <a href="#top"><img src="img/upArrow.png" width="100" /></a> </div> </body> </html> $(document).ready(function () { $(".pages").hide(); $("#navigationMenu a").click(function (e) { e.preventDefault(); var item = this.href.split("#")[1]; $(".pages:visible").slideUp(function () { $("#" + item).slideDown(); }); }); $("#home").show(); }); .pages{ display: none}