milov.nl

Interaction design • webdevelopment • web art • photography

milov.nl : forum : coding : '2 JavaScript questions'

2 JavaScript questions pro.hu,arpa,dave, 050909 23:48
Hy!
I have two questions. If you know the answer, please write.
Thanks.

first:
It is possible to switch CSS stylesheets with JavaScript?
(e.g. it is 3 radiobuttons, and the site looking is depend on the switch of them 1-style_1.css 2-style_2.css 3-style_3.css)

second:
It is possible to manage a .txt file with JavaScript?
(e.g. I would make a html page, that one part is random generated from the .txt with JavaScript)

Sorry, if my sentences are unintelligible, but my english is very bad... :((

Thank you very much!
Vielen Dank!
Koszonom szepen! (Hu)
dsl51B6C2F8.pool.t-online.hu
Re: 2 JavaScript questions Calm_Pear, 050910 07:00
Hi Dave,

The first question seems simple but requires some elaborate JavaScript; luckily someone already wrote something for us. Check this link: http://www.alistapart.com/articles/alternate/

The answer for the second question is more complex, I’ll cook up some script and post it at a later time.
h103091.upc-h.chello.nl
Re: 2 JavaScript questions Calm_Pear, 050910 08:21
You can use JavaScript to read from a file on the server, you cannot write to the file nor can you delete the file, move the file or do whatever with it. You will need server side scripting to do that like php.

Okay, three samples below, the first one uses an array and writes random from the array to a div element.
The second sample uses the xmlhttp object to read from a file, splits the content and randomly displays the content in the div element.
The last sample also uses the xmlhttp object but reads from different files on the server and displays the content in the div element.

Note: the xmlhttp object will not work with older browsers or any other funky browser nobody uses anyway. Internet Explorer 5+ and Mozilla 1.3+ are sure to be able to do the samples. This was tested on Explorer 6.0 and Firefox 1.0.6.
Some more info can be found here: http://jibbering.com/2002/4/httprequest.html
h103091.upc-h.chello.nl
Re: 2 JavaScript questions Calm_Pear, 050910 08:21 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="javascript" type="text/javascript">

//<![CDATA[

<!--

var randomcontent = new Array("Apple", "Banana", "Orange", "Pear");

function getit(){return randomcontent[Math.floor(Math.random() * randomcontent.length)];}

function writeit(){

	document.getElementById("content").innerHTML = getit();

}

//-->

//]]>

</script>

</head>

<body>



<div id="content"></div><br />

<input type="button" value="get" onclick="writeit()">



</body>

</html>
 
h103091.upc-h.chello.nl
Re: 2 JavaScript questions Calm_Pear, 050910 08:22 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="javascript" type="text/javascript">

//<![CDATA[

<!--

var xmlhttp; var tmp;

window.onload = function(){

	try{

		xmlhttp = new XMLHttpRequest();

	}catch(e){

		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

	}

}

function writeit(){

	if (!xmlhttp && typeof XMLHttpRequest!='undefined'){

		alert("Could not create xmlhttp object!");

	}else{

		xmlhttp.open("GET", "content.txt", true);

		xmlhttp.send("");

		xmlhttp.onreadystatechange=function() {

			if (xmlhttp.readyState==4) {

				if (xmlhttp.status!=200){

					alert("The file was not found or something else went wrong!");

				}else{

					tmp = xmlhttp.responseText;

					var a = tmp.split(",");

					document.getElementById("content").innerHTML = a[Math.floor(Math.random() * a.length)];

				}

			}

		}

	}

}

//-->

//]]>

</script>

</head>

<body>



<div id="content"></div><br />

<input type="button" value="get" onclick="writeit()" id=button1 name=button1>



</body>

</html>
 
content.txt
Apple, Banana, Orange, Pear
h103091.upc-h.chello.nl
Re: 2 JavaScript questions Calm_Pear, 050910 08:26 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="javascript" type="text/javascript">

//<![CDATA[

<!--

var xmlhttp; var tmp;

window.onload = function(){

	try{

		xmlhttp = new XMLHttpRequest();

	}catch(e){

		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

	}

}

var randomfile = new Array("1.txt", "2.txt", "3.txt");

function getit(){return randomfile[Math.floor(Math.random() * randomfile.length)];}

function writeit(){

	if (!xmlhttp && typeof XMLHttpRequest!='undefined'){

		alert("Could not create xmlhttp object!");

	}else{

		xmlhttp.open("GET", getit(), true);

		xmlhttp.send("");

		xmlhttp.onreadystatechange=function() {

			if (xmlhttp.readyState==4) {

				if (xmlhttp.status!=200){

					alert("The file was not found or something else went wrong!");

				}else{

					tmp = xmlhttp.responseText;

					document.getElementById("content").innerHTML = tmp

				}

			}

		}

	}

}

//-->

//]]>

</script>

</head>

<body>



<div id="content"></div><br />

<input type="button" value="get" onclick="writeit()" id=button1 name=button1>



</body>

</html>
 
Don't forget to upload three text files with all three having something different in it:
1.txt 2.txt 3.txt
The code above assumes that the files (content.txt, 1.txt...) are in the same directory as the above html files are. If the files need to be somewhere else just change the following part


xmlhttp.open("GET", "content.txt", true);

xmlhttp.open("GET", "http://www.url.com/files/content.txt", true);
 
Or change the array:


var randomfile = new Array("http://www.url.com/files/1.txt", "http://www.url.com/files/2.txt", "http://www.url.com/files/3.txt");
 
Good luck!
h103091.upc-h.chello.nl
Re: 2 JavaScript questions pro.hu,arpa,dave, 050919 12:45
Thank you very much!
dsl51B663B5.pool.t-online.hu
Pages: 1