Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 2033

Oct 24th, 2006

Please help a newbie - Javascript basic

Expand Post »

Hi All,

I wonder if any Javascript experts can help me. I have the following code on my site which create a rotating graphic in the header every time the page loads. This works great.

However what I want to do is to change the way it works slightly so that I do not have to update the code in the future.

I would like to be able to put all the image address into a text file and then for the javascript to read them from there rather than hard codeing into the web page

or

for the javascript to read all the filenames from a directory of another server?

Is this possible and can anyone help me.

Many thank in advance.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
#header {
background:#476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}
 
Basically my script works by overwriting the 'background' definition at the <body> part of the template. I wrote the following right after the <body> tag:
 
<script type="text/javascript">
 
var banner= new Array()
 
banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
banner[3]="http://static.flickr.com/108/269053262_608edbdda4_o.jpg"
banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
var random=Math.round(4*Math.random());
 
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
 
</script>
#header {
background:#476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}

Basically my script works by overwriting the 'background' definition at the <body> part of the template. I wrote the following right after the <body> tag:

<script type="text/javascript">

var banner= new Array()

banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
banner[3]="http://static.flickr.com/108/269053262_608edbdda4_o.jpg"
banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");

</script>

Similar Threads

Javascript / css menu image help, pls? in HTML and CSS
Javascript - how to stop/halt/break this loop/script plss in JavaScript / DHTML / AJAX
help with creating form counter in PHP
Need help in design and javascript code for Dynamic form in JavaScript / DHTML / AJAX
Cube Root Calculator in C++

flub

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

3 posts
since Oct 2006

Permalink

Oct 24th, 2006

Re: Please help a newbie - Javascript basic

HI,

Yes this very Much possible you can use the XML file for store the URLs,
I this in one of my project

here is the solution:

For Example:http://www.katarey.com/forHelp/xml_javascript.html

make a XML file Name

img.xml

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<?xml version="1.0" encoding="iso-8859-1"?>
<images>
<img>http://static.flickr.com/84/269053449_acad87a793_o.jpg</img>
<img>http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg</img>
<img>http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg</img>
<img>http://static.flickr.com/108/269053262_608edbdda4_o.jpg</img>
<img>http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg</img>
</images>
<?xml version="1.0" encoding="iso-8859-1"?>
<images>
<img>http://static.flickr.com/84/269053449_acad87a793_o.jpg</img>
<img>http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg</img>
<img>http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg</img>
<img>http://static.flickr.com/108/269053262_608edbdda4_o.jpg</img>
<img>http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg</img>
</images>

then a html/php/asp what ever, i am using xml_javascript.html

xml_javascript.html

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script type="text/javascript">
//http://www.katarey.com
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("img.xml")
var banner= new Array()
 
nodes=xmlDoc.documentElement.childNodes
banner[0]= nodes.item(0).text
banner[1]= nodes.item(1).text
banner[2]= nodes.item(2).text
banner[3]= nodes.item(3).text
banner[4]= nodes.item(4).text
 
var random=Math.round(4*Math.random());
 
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP; width:740px; height:185px;');
document.write(" }");
document.write("</style>");
 
//Remove this Linke after testing
alert(banner[random]);
//*******************************
 
</script>
<body>
<div id="header"> </div>
</body>
<script type="text/javascript">
//http://www.katarey.com
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("img.xml")
var banner= new Array()

nodes=xmlDoc.documentElement.childNodes
banner[0]= nodes.item(0).text
banner[1]= nodes.item(1).text
banner[2]= nodes.item(2).text
banner[3]= nodes.item(3).text
banner[4]= nodes.item(4).text

var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP; width:740px; height:185px;');
document.write(" }");
document.write("</style>");

//Remove this Linke after testing
alert(banner[random]);
//*******************************

</script>
<body>
<div id="header"> </div>
</body>

Rahul
http://www.katarey.com

Last edited by katarey; Oct 24th, 2006 at 8:01 pm. Reason: for adding the Example

katarey

Reputation Points: 39

Solved Threads: 23

Junior Poster

Offline

167 posts
since Jul 2005

Permalink

Oct 25th, 2006

Re: Please help a newbie - Javascript basic

That'll only work in Internet Explorer surely?

Do Netscape have an XMLDOM object equivalent? I know you can use a XMLHTTP transaction in Windows AND Netscape... but that's possibly overkill.

http://www.jibbering.com/2002/4/httprequest.html

MattEvans

Moderator

Featured Poster

Reputation Points: 522

Solved Threads: 64

Veteran Poster

Offline

1,091 posts
since Jul 2006

Permalink

Oct 25th, 2006

Re: Please help a newbie - Javascript basic

Try this:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
var xmlDoc;
if (window.ActiveXObject)
     xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
else if (document.implementation && document.implementation.createDocument)
     xmlDoc= document.implementation.createDocument("","doc",null);
var xmlDoc;
if (window.ActiveXObject)
     xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
else if (document.implementation && document.implementation.createDocument)
     xmlDoc= document.implementation.createDocument("","doc",null);

BudBrocken

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

9 posts
since Oct 2006

Permalink

Oct 25th, 2006

Re: Please help a newbie - Javascript basic

Thanks everyone, I will give it a try.

Many many thanks.

flub

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

3 posts
since Oct 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript printing

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Is it possible to print a frame by clicking a button in a pop-up? (JAVASCRIPT)

DaniWeb Message

Cancel Changes

User Name
Password