sparkythex
10-08-2009, 06:12 PM
i was trying to have my site load a picture & then a text file that is a comment about the picture, currently viewed.
well i had the picture part of it done.
i was able to hard code in a way to do a text file.
so then i tried to adjust what i wrote to also update the comment/note section.
the following code does have me trying this several ways but i really only need one. i don't really care how it is done.
currently i load the picture & the text (text part not working) by an array that is contained within the html javascript.
i would rather have this array loaded by a *.js (javascript file) if that is possible.
the reason is so that i edit my list instead of the html code, i fear at some point i might mess up the html with the constant editing.
this is part of the line that i added to show the comments. if it is removed it does cycle the image ok.
located in:
function showImage(i)
document.getElementById('newsBox').appendChild(newsArray[n]).src= newstxt[n];
but also in:
function removeImage(i)
<!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>Test Page</title>
<script type="text/javascript">
<!--
//Set the timing for the slideshow here:
var SecondsBetweenImages=2;
//add image URLs here, separated by comma
//relative URL is ok.
var images=new Array('http://irongun.50webs.com/pages/irongun.jpg',
'http://irongun.50webs.com/pages/2008-05-07.jpg',
'http://irongun.50webs.com/pages/end.jpg');
//for the news & comments part
var newstxt=new Array('http://irongun.50webs.com/news/news1.txt',
'http://irongun.50webs.com/news/news2.txt',
'http://irongun.50webs.com/news/news3.txt');
//Ok, let's load all the images into an Object Array:
var imageArray=new Array();
for(i=0;i<images.length;i++)
{
imageArray[i]=document.createElement('img');
imageArray[i].id='image_'+i;
imageArray[i].src=images[i];
}
//Ok, let's load all the news into an Object Array:
var newsArray=new Array();
for(n=0;n<newstxt.length;n++)
{
newsArray[n]=document.createElement('textarea');
newsArray[n].id='news_'+n;
newsArray[n].src=images[n];
}
//Functions to navigate images
var current=0;
function First()
{
removeImage(current);
current=0;
showImage(current);
}
function Previous()
{
removeImage(current);
current=current-1;
if(current==-1) current=images.length-1;
showImage(current);
}
function Next()
{
removeImage(current);
current++;
if(current==images.length) current=0;
showImage(current);
}
function Last()
{
removeImage(current);
current=images.length-1;
showImage(current);
}
//For the slide show
var slideShow=false;
function Play_Stop(obj)
{
if(!slideShow){
slideShow=setInterval("Next()",SecondsBetweenImages*1000);
obj.innerHTML="Stop >"
}else{
clearInterval(slideShow);
obj.innerHTML="Play >"
slideShow=false;
}
}
function showImage(i)
{
document.getElementById('imageBox').appendChild(imageArray[i]).src=images[i];
document.getElementById('newsBox').appendChild(newsArray[n]).src= newstxt[n];
}
function removeImage(i)
{
document.getElementById('imageBox').removeChild(document.getElementById('image_'+i));
document.getElementById('newsBox').removeChild(document.getElementById('news_'+n));
}
function init()
{
document.getElementById('image_0').src=images[0];
}
var XHR=false;
function loadHTML(url) {
if (window.XMLHttpRequest) {
XHR = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
document.getElementById('imageBox').innerHTML="This document is trying to access an ActiveXObject. If you trust this site, allow the action by clicking on the bar above.";
}
}
}
if (XHR) {
XHR.onreadystatechange = showContents;
XHR.open("GET", url, true);
XHR.send(null);
}
else {
document.getElementById('imageBox').innerHTML = "Error 501: Request not implemented - XMLHttpRequest() method not found in browser library.";
}
}
function showContents() {
if (XHR.readyState == 4) {
if (XHR.status == 200) {
if (XHR.responseText) {
var outMsg=XHR.responseText;
}
else {
var outMsg = "Error 500: Forbidden.";
}
}
else {
var outMsg = "<h2>Error 404: File Not Found.</h2>";
}
document.getElementById('imageBox').innerHTML = outMsg;
}
}
window.onload=init;
-->
</script>
</head>
<body>
<a href="javascript: void(0)" onclick="First()"><< First</a> |
<a href="javascript: void(0)" onclick="Previous()">< Back</a> |
<a href="/archive.html" onclick="loadHTML(this.href); return false;">Archive</a> |
<a href="javascript: void(0)" onclick="Play_Stop(this)">Play ></a> |
<a href="javascript: void(0)" onclick="Next()">Next ></a> |
<a href="javascript: void(0)" onclick="Last()">Last >></a>
<div id="imageBox">
<img id="image_0" src="" alt="Loading..." border="1" />
</div>
<div id="newsBox">
news: <br>
<textarea rows="10" cols="125" readonly="readonly" border="1">
<script language="JavaScript">
<!-- begin
document.write(newsArray[n]);
// end hiding -->
</script>
</textarea>
<br>
<table border="1">
<script language="JavaScript">
<!-- begin
document.write(newsArray[n]);
// end hiding -->
</script>
</table>
</div>
</body>
</html>
thanks for looking at my problem even if you can't solve it. :p
well i had the picture part of it done.
i was able to hard code in a way to do a text file.
so then i tried to adjust what i wrote to also update the comment/note section.
the following code does have me trying this several ways but i really only need one. i don't really care how it is done.
currently i load the picture & the text (text part not working) by an array that is contained within the html javascript.
i would rather have this array loaded by a *.js (javascript file) if that is possible.
the reason is so that i edit my list instead of the html code, i fear at some point i might mess up the html with the constant editing.
this is part of the line that i added to show the comments. if it is removed it does cycle the image ok.
located in:
function showImage(i)
document.getElementById('newsBox').appendChild(newsArray[n]).src= newstxt[n];
but also in:
function removeImage(i)
<!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>Test Page</title>
<script type="text/javascript">
<!--
//Set the timing for the slideshow here:
var SecondsBetweenImages=2;
//add image URLs here, separated by comma
//relative URL is ok.
var images=new Array('http://irongun.50webs.com/pages/irongun.jpg',
'http://irongun.50webs.com/pages/2008-05-07.jpg',
'http://irongun.50webs.com/pages/end.jpg');
//for the news & comments part
var newstxt=new Array('http://irongun.50webs.com/news/news1.txt',
'http://irongun.50webs.com/news/news2.txt',
'http://irongun.50webs.com/news/news3.txt');
//Ok, let's load all the images into an Object Array:
var imageArray=new Array();
for(i=0;i<images.length;i++)
{
imageArray[i]=document.createElement('img');
imageArray[i].id='image_'+i;
imageArray[i].src=images[i];
}
//Ok, let's load all the news into an Object Array:
var newsArray=new Array();
for(n=0;n<newstxt.length;n++)
{
newsArray[n]=document.createElement('textarea');
newsArray[n].id='news_'+n;
newsArray[n].src=images[n];
}
//Functions to navigate images
var current=0;
function First()
{
removeImage(current);
current=0;
showImage(current);
}
function Previous()
{
removeImage(current);
current=current-1;
if(current==-1) current=images.length-1;
showImage(current);
}
function Next()
{
removeImage(current);
current++;
if(current==images.length) current=0;
showImage(current);
}
function Last()
{
removeImage(current);
current=images.length-1;
showImage(current);
}
//For the slide show
var slideShow=false;
function Play_Stop(obj)
{
if(!slideShow){
slideShow=setInterval("Next()",SecondsBetweenImages*1000);
obj.innerHTML="Stop >"
}else{
clearInterval(slideShow);
obj.innerHTML="Play >"
slideShow=false;
}
}
function showImage(i)
{
document.getElementById('imageBox').appendChild(imageArray[i]).src=images[i];
document.getElementById('newsBox').appendChild(newsArray[n]).src= newstxt[n];
}
function removeImage(i)
{
document.getElementById('imageBox').removeChild(document.getElementById('image_'+i));
document.getElementById('newsBox').removeChild(document.getElementById('news_'+n));
}
function init()
{
document.getElementById('image_0').src=images[0];
}
var XHR=false;
function loadHTML(url) {
if (window.XMLHttpRequest) {
XHR = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
document.getElementById('imageBox').innerHTML="This document is trying to access an ActiveXObject. If you trust this site, allow the action by clicking on the bar above.";
}
}
}
if (XHR) {
XHR.onreadystatechange = showContents;
XHR.open("GET", url, true);
XHR.send(null);
}
else {
document.getElementById('imageBox').innerHTML = "Error 501: Request not implemented - XMLHttpRequest() method not found in browser library.";
}
}
function showContents() {
if (XHR.readyState == 4) {
if (XHR.status == 200) {
if (XHR.responseText) {
var outMsg=XHR.responseText;
}
else {
var outMsg = "Error 500: Forbidden.";
}
}
else {
var outMsg = "<h2>Error 404: File Not Found.</h2>";
}
document.getElementById('imageBox').innerHTML = outMsg;
}
}
window.onload=init;
-->
</script>
</head>
<body>
<a href="javascript: void(0)" onclick="First()"><< First</a> |
<a href="javascript: void(0)" onclick="Previous()">< Back</a> |
<a href="/archive.html" onclick="loadHTML(this.href); return false;">Archive</a> |
<a href="javascript: void(0)" onclick="Play_Stop(this)">Play ></a> |
<a href="javascript: void(0)" onclick="Next()">Next ></a> |
<a href="javascript: void(0)" onclick="Last()">Last >></a>
<div id="imageBox">
<img id="image_0" src="" alt="Loading..." border="1" />
</div>
<div id="newsBox">
news: <br>
<textarea rows="10" cols="125" readonly="readonly" border="1">
<script language="JavaScript">
<!-- begin
document.write(newsArray[n]);
// end hiding -->
</script>
</textarea>
<br>
<table border="1">
<script language="JavaScript">
<!-- begin
document.write(newsArray[n]);
// end hiding -->
</script>
</table>
</div>
</body>
</html>
thanks for looking at my problem even if you can't solve it. :p