First I used this tutorial: http://webdesign.torn.be/tutorials/j.../page-loading/
For some reason, it doesn't work for me:
Here's my layout.
index.html
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- <title>The Venue - New Student building</title>
- <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
- <script type="text/javascript" src="miniTab.js"></script>
- <link href="css2.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="prototype.js"></script>
- <script type="text/javascript">
- // <![CDATA[
- document.observe('dom:loaded', function () {
- var newsCat = document.getElementsByClassName('newsCat');
- for (var i = 0; i < newsCat.length; i++) {
- $(newsCat[i].id).onclick = function () {
- getCatPage(this.id);
- }
- }
- });
- function getCatPage(id) {
- var url = 'load-content4.php';
- var rand = Math.random(9999);
- var pars = 'id=' + id + '&rand=' + rand;
- var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
- }
- function showLoad () {
- $('newsContent').style.display = 'none';
- $('newsLoading').style.display = 'block';
- }
- function showResponse (originalRequest) {
- var newData = originalRequest.responseText;
- $('newsLoading').style.display = 'none';
- $('newsContent').style.display = 'block';
- $('newsContent').innerHTML = newData;
- }
- // ]]>
- </script>
- //////////////blablablablbaalblabalbalblablablabla
- </head>
- <body>
- <div id="newsContainer" style="background-image: url(images/menuGradient.png); background-repeat:repeat-x; width:100%;" align="center">
- <table width="980" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#1B1B1B">
- <tr><td width="960" align="center" background="http://bytes.com/images/menuGradient.png" >
- <div id="newsCategoriesContainer">
- <ul id="miniflex" >
- <span>
- <li><div class="newsCat" id="tabHome"><a class="active" title="">Home</a></div></li>
- <li><div class="newsCat" id="tabInformation"><a title="">Information</a></div></li>
- <li><div class="newsCat" id="tabGallery"><a>Gallery</a></div></li>
- <li><a href="/archives/" title="">Blog</a></li>
- <li><a href="/the-language-in-the-lab/" title="">About us</a></li>
- <li><a href="/demo/animated-minitabs/" title="">Sitemap</a></li>
- <li><a href="/contact/" title="">Contact us</a></li>
- </span>
- </ul></div>
- //////////////////blablablablalblabllablablabllablbllbalblablablablablabal
- <tr><td width="960" valign="top" align="left">
- <div style="width: 960px; position: relative;">
- <div id="newsLoading" align="center"><img src="loading_indicator.gif" title="Loading..." alt="Loading..." border="0" vspace="100" /></div>
- <div>
- <div id="newsContent"></div>
- </div>
- </div>
- </td></tr>
- </table>
- </div>
- </body>
- </html>
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
- </head>
- <body>
- <?php
- function stringForJavascript($in_string) {
- $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);
- $str = ereg_replace('"', '\\"', $str);
- return $str;
- }
- switch($_GET['id']) {
- case 'tabHome':
- include('Home.html');
- break;
- case 'tabInformation':
- include('deleteme_frameContent1.html');
- break;
- case 'tabGallery':
- include('Gallery.html');
- break;
- default:
- $content = 'There was an error.';
- }
- print stringForJavascript($content);
- usleep(600000);
- ?>
- </body>
- </html>
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Gallery</title>
- <script type="text/javascript" src="javascript/prototype.js"></script>
- <script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
- <script type="text/javascript" src="javascript/lightwindow.js"></script>
- <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
- </head>
- <body>
- <a href="http://bytes.com/images/other/futureSu/side1.jpg" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/side1.jpg" height="100" width="100" /></a>
- <a href="http://bytes.com/images/other/futureSu/side2.jpg" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/side2.jpg" height="100" width="100" /></a>
- <a href="http://bytes.com/images/other/futureSu/final.jpg" onFocus="if(this.blur)this.blur()" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/final.jpg" height="100" width="100" /></a>
- <a href="flash/SnowDrivingFail.mov" class="lightwindow" params="lightwindow_width=340,lightwindow_height=260" title="vid">mp4 vid</a>
- </body>
- </html>
effects.js, lightwindow.js, prototype.js, scriptaculous.js
Ok, if I copy all the gallery.html code into my main index page it all works, also if I run Gallery.html it self it the javascript also works... Thus providing it's not an error with gallery.html
Images, etc all BODY content displays correctly (just not the javascript).
But the error is within the DIV containing the changeable content. And not loading the javascript from other pages.
Please Help someone to get my main page to run the external javascript?
p.s. i uploaded my site, hoping to make it easier for you guys:
index2.html (click Gallery at top, and choose image):
http://mediaproject-su.netne.net/index2.html
Gallery.html (to prove the JS works):
http://mediaproject-su.netne.net/Gallery.html