I’m working on a new website. I have coded many before but not as advanced as this one.
I have one html file which is the main page. Now, I am changing the content of the page via ajax. Everything works fine. So when I click on, lets say, the “Home” menu, it calls the function, and gets ANOTHER HTML file which has content in it.
In my main html I have this:
<html>
<head>
<title>
Estancia
</title>
<link rel="stylesheet" href="css/stylesheet.css"/>
<link rel="stylesheet" href="webfont/webFontStylesheet.css" type="text/css" charset="utf-8"/>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<body onLoad = "javascript:home()">
<div id = "bodyLeft">
<!-- This is just a sideskirt -->
</div>
<div id = "bodyRight">
<!-- This is just a sideskirt -->
</div>
<div id = "header">
<h1>
Estancia
</h1>
</div>
<div id = "footer">
<h5>
Copyright© 2013
</h5>
</div>
<div id = "background">
<!-- This is just the background color -->
</div>
<div id = "scrollCover">
<!-- Used to cover the scrolled content -->
</div>
<div id = "body">
</div>
<div id = "content">
If you see this then the page did not load correctly. Try reloading the page. If problem persists, try reinstalling the Mozilla Firefox Browser. <br/><br/> Error: Javascript may not be working. <br/> Fix: Enable Javascript in your browser.
</div>
<div id = "menu">
<div id = "home" onClick="javascript:home()">
<a href = "#"> Home </a>
</div>
<div id = "information">
<a href = "#"> Information </a>
<span id = "aboutDrop">
<a class = "about" href="#" onClick = "javascript:about()"> About </a>
<br/>
<a class = "map" href="#" onClick = "javascript:map()"> Map </a>
</span>
</div>
<div id = "history" onClick = "javascript:history()">
<a href = "#"> History </a>
</div>
<div id = "pictureGallary">
<a href = "#"> Picture Gallary </a>
<span id = "pictureGalleryDrop">
<a class = "ef" href = "#" onClick = "javascript:estanciaFarm()"> Estancia Farm </a>
<br/>
<a class = "ca" href = "#" onClick = "javascript:cattle()"> Cattle </a>
<br/>
<a class = "ga"href = "#" onClick = "javascript:game()"> Game </a>
<br/>
<a class = "go" href = "#" onClick = "javascript:goats()"> Goats </a>
<br/>
<a class = "sh" href = "#" onClick = "javascript:sheep()"> Sheep </a>
</span>
</div>
</div>
</body>
No problems here… when I click it loads correctly.
So, when Home is clicked, it changes the content via ajax like this:
var xmlhttp = new XMLHttpRequest();
var path;
var div;
function home()
{
path = "html/home.html";
div = "content";
AJAX(path, div);
}
function AJAX(path, div)
{
xmlhttp.open("GET", path, false);
xmlhttp.send();
if (xmlhttp.readyState == 4)
{
document.getElementById(div).innerHTML = xmlhttp.responseText;
}
}
As you can see it loads another html file onto the content.
So, here is that html file’s code:
<html>
<head>
<link rel="stylesheet" href="css/homeMenu.css"/>
<script type="text/javascript" src="js/javascript.js"></script>
</head>
<body>
<div id = "slideshow">
<div id = "first">
<img id = "a1" src = "images/home/img1_e.jpg"/>
<img id = "a2" src = "images/home/img2_e.jpg"/>
<img id = "a3" src = "images/home/img3_e.jpg"/>
<img id = "a4" src = "images/home/img4_e.jpg"/>
</div>
<div id = "second">
<img id = "b4" src = "images/home/img4_e.jpg"/>
<img id = "b1" src = "images/home/img1_e.jpg"/>
<img id = "b2" src = "images/home/img2_e.jpg"/>
<img id = "b3" src = "images/home/img3_e.jpg"/>
</div>
<div id = "third">
<img id = "c3" src = "images/home/img3_e.jpg"/>
<img id = "c4" src = "images/home/img4_e.jpg"/>
<img id = "c1" src = "images/home/img1_e.jpg"/>
<img id = "c2" src = "images/home/img2_e.jpg"/>
</div>
<div id = "fourth">
<img id = "d2" src = "images/home/img2_e.jpg"/>
<img id = "d3" src = "images/home/img3_e.jpg"/>
<img id = "d4" src = "images/home/img4_e.jpg"/>
<img id = "d1" src = "images/home/img1_e.jpg"/>
</div>
</div>
</body>
When I load this html file on its own, it works fine. All I need to change is to add “../” to every image path’s beginning. I’m sure you would know why. Fast description is that if its on its own, it if in another file, so it needs to go back once. when it loads via ajax into the other html which is the main one, its outside every file and just goes into it. OK, So that is clear.
The problem… the ONLY problem I’m facing is that when I load the home.html file on its own, it executes its javascript like a piece of cake.
BUT, when it loads into the main html, it soes not work. THERE is NO way its executing. I’ve tried internal javascript but its not working, still.
Here’s the javascript:
var useBSNns;
if (useBSNns)
{
if (typeof(bsn) == "undefined")
bsn = {}
var _bsn = bsn;
}
else
{
var _bsn = this;
}
_bsn.Crossfader = function (divs, fadetime, delay )
{
this.nAct = -1;
this.aDivs = divs;
for (var i=0;i<divs.length;i++)
{
document.getElementById(divs[i]).style.opacity = 0;
document.getElementById(divs[i]).style.position = "absolute";
document.getElementById(divs[i]).style.filter = "alpha(opacity=0)";
document.getElementById(divs[i]).style.visibility = "hidden";
}
this.nDur = fadetime;
this.nDelay = delay;
this._newfade();
}
_bsn.Crossfader.prototype._newfade = function()
{
if (this.nID1)
clearInterval(this.nID1);
this.nOldAct = this.nAct;
this.nAct++;
if (!this.aDivs[this.nAct]) this.nAct = 0;
if (this.nAct == this.nOldAct)
return false;
document.getElementById( this.aDivs[this.nAct] ).style.visibility = "visible";
this.nInt = 50;
this.nTime = 0;
var p=this;
this.nID2 = setInterval(function() { p._fade() }, this.nInt);
}
_bsn.Crossfader.prototype._fade = function()
{
this.nTime += this.nInt;
var ieop = Math.round( this._easeInOut(this.nTime, 0, 1, this.nDur) * 100 );
var op = ieop / 100;
document.getElementById( this.aDivs[this.nAct] ).style.opacity = op;
document.getElementById( this.aDivs[this.nAct] ).style.filter = "alpha(opacity="+ieop+")";
if (this.nOldAct > -1)
{
document.getElementById( this.aDivs[this.nOldAct] ).style.opacity = 1 - op;
document.getElementById( this.aDivs[this.nOldAct] ).style.filter = "alpha(opacity="+(100 - ieop)+")";
}
if (this.nTime == this.nDur)
{
clearInterval( this.nID2 );
if (this.nOldAct > -1)
document.getElementById( this.aDivs[this.nOldAct] ).style.visibility = "hidden";
var p=this;
this.nID1 = setInterval(function() { p._newfade() }, this.nDelay);
}
}
_bsn.Crossfader.prototype._easeInOut = function(t,b,c,d)
{
return c/2 * (1 - Math.cos(Math.PI*t/d)) + b;
}
Please, what is going wrong that it does not want to execute when home.html its being loaded into the main html but when home.html is executed on its own it works?
I know you’ve put a lot of work into what you have but it might be beneficial to look in to a jQuery plugin, such as Cycle. http://malsup.com/jquery/cycle
Otherhand, you need to remove
<script type="text/javascript" src="js/javascript.js"></script>from theHome.htmlpage you are retrieving and have that in the head of themain.htmlfile you are loading your secondary pages from. It will be called not be executed inline via the AJAX load which is the problem you are having. So we move it to themain.htmland we will call it manually when ourhome.htmlpage is loaded.I’ve altered your
AJAXmethod to take a callback method or function when AJAX is successful. You will see the third parameter to yourAJAXmethod is the function to call when done, in our case it isstartBSNyou will see where I wrapped yourjs/javascriptfunction further down with this method.I’ve removed your
js/javascript.jsand included it in the head ofmain.html, you should remove it from yourhome.htmlI’ve also wrapped your
js/javascript.jscode into a callable function calledstartBSNotherwise it would run on page load as anonymous functions.Here is your
js.javascriptfile with the surrounding functionstartBSN