Forum Moderators: open
I found this code on the web and manipulated it to my use, but neither the original nor my changes work....
I just want to get the txt to populate and i can figure out how to do the rest for multiple lyrics.
Thanx in advance!
Maceman
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<script type="text/javascript">function put_link(){ document.getElementById('chosen_link').value = document.getElementById('lyrics').value;}</script>
</head>
<body>
<select id="lyrics">
<option value="http://www.mywebsitehere.com/lyrics/Man.txt">Lyric1</option>
<option value="http://link">Lyric2</option>
<option value="http://link">Lyric3</option>
</select>
<button onclick="put_value();">Get Lyrics</button>
<input type="text" id="chosen_link"/>
</body>
</html>
Your function is called put_link but your calling put_value.
Andrew
Thanx for that. Ok...So I change it to put_link, but all that happened was that the URL pasted into the text box. Do you know how to make the actual contents of the text file go in instead?
Thanx,
Maceman
You'll have to write script that will download the document and then put the contents in the text box.
Take a look at Mozilla's introduction to AJAX [developer.mozilla.org].
Andrew
Pweew, I read the whole thing, but must admit that it is over my head.
I think i learn best by example, that is, if someone made a script using examples, i could 'tweak' it to work for my purposes. I know that may sound lame, but i cannot even think to begin on how to make the code properly as I know nothing about AJAX, however, it does sound exactly what i want to use. It seems to me that AJAX is what is used for these MP3 jukeboxes that are populated from an XML Playlist? Seems similar to what I am trying to achieve, but without music in a directory, but rather just text.
Maceman
Here's an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<script type="text/javascript">
function put_file_contents(url, output){
var httpRequest;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
output.value = httpRequest.responseText;
}
else {
output.value = "error";
}
}
else {
output.value = "Downloading...";
}
};
httpRequest.open('GET', url, true);
httpRequest.send('');
}
</script>
</head>
<body>
<select id="lyrics">
<option value="http://www.mywebsitehere.com/lyrics/Man.txt">Lyric1</option>
<option value="http://link">Lyric2</option>
<option value="http://link">Lyric3</option>
</select>
<button onclick="put_file_contents(document.getElementById('lyrics').value,
document.getElementById('chosen_link'));">Get Lyrics</button>
<input type="text" id="chosen_link"/>
</body>
</html>
Andrew
[edited by: Little_G at 6:31 pm (utc) on Oct. 14, 2008]
[edited by: DrDoc at 5:07 pm (utc) on Oct. 20, 2008]
[edit reason] fixed side scrolling [/edit]
Ok, last question on this. Is there a way to maintain the format of the original file, that is, is there a way that when the text is imported that it maintains the original look, with all the formatting etc...because what happens is that when it populates now, it becomes one long sentence....
Alternatively, if there was a code to add in here that would standardize the 'look' of what is imported, so that it fills the box, rather than one sentence outside the box..... Does this make sense?
I made the text box length and width bigger, but the imported text still wants to stay in a sinbgle sentence without word wrapping or satying formatted....
This is great and you are the first person I have seen anywhere to get this working for me, and i have browsed a number of threads by googling!
Maceman
ps. Here is what the text stadardization would look like:
Bolded and Centred: Lyric Title
Bolded and centred:© 2008
centred: Old Macdonald had a farm
centred: E I E I O
centred: And on his farm he had some cows
centred: E I E I O
-sorry, i couldn't think of another sample song :)
If you are loading a multi-line file then chosen_link would be better off as a textarea [w3.org].
Andrew
Bolded and Centred: Lyric Title
Bolded and centred:© 2008
centred: Old Macdonald had a farm
centred: E I E I O
centred: And on his farm he had some cows
centred: E I E I O
<button onclick="put_file_contents(document.getElementById('lyrics').value, document.getElementById('textarea'));">
<p align="center"><strong>Get Lyrics</strong></p>
</button>
<textarea name="textarea" cols="20" rows="10" wrap="physical" class="box" id="textarea" style="WIDTH: 300px; HEIGHT: 300px"></textarea></td>
</tr>
Thanx again!
Maceman
How is this formatting saved in the files?
Andrew
You could save the files with html formatting and output the contents to a div.
So,
HTML:
<button onclick="put_file_contents(document.getElementById('lyrics').value,
document.getElementById('output'));">
<p align="center"><strong>Get Lyrics</strong></p>
</button>
<div id="output" style="width: 300px; height: 300px"></div>Javascript:
if (httpRequest.status == 200) {
output.innerHTML = httpRequest.responseText;
}Lyrics File:
<h2>Lyric Title</h2>
<h3>© 2008</h3>
<p>Old Macdonald had a farm<br>
E I E I O<br>
And on his farm he had some cows<br>
E I E I O</p>
Andrew
[edited by: DrDoc at 5:07 pm (utc) on Oct. 20, 2008]
[edit reason] fixed side scrolling [/edit]
Anyways, what I had mentioned was that I tried the above code, and what happens if that when i select the lyric from the dropdown menu that has a reference to an html file, what happens is that a new apperance of the dropdown menu and "get Lyrics" button appears below the first set.
I looked in the code to see if I had somehow duplicated something, but I don't see anything of hand. What could cause that? So in short, the text box populates with another dropdown menu and button, rather than the HTML :)
Thanx again!
Maceman
It sounds like the html file you are referencing has a drop down menu and "get Lyrics" button in it.
Andrew
That was exactly the problem! What a dope I am....
Ok, this is working fabulous. Ijust need to do some layout adjusting and such, but it is calling the html perfectly and is retaining the format! Thanx so much!
Maceman
Is there a way to make it so when the text box is populated by the html that the text box sizes to the html size? I had one set of lyrics that was kinda wide so i set my width bigger, and everything works well, but for the smaller sized lyrics, i got all this room around. Is there an auto command or something?
Here is my code:
<td width="420" valign="bottom"></embed>
<select id="lyrics" style="WIDTH: 150px" valign="top">
and then...
div id="output" style="WIDTH: 524px; HEIGHT: 300px"></div></td></tr></table></div>
Thanx,
Maceman
I don't know of a way to auto-size the div, sorry.
Andrew
<div id="output" style="WIDTH: 524px; HEIGHT: 300px; OVERFLOW: auto;"></div>
What happens however is, if i scroll down the lyrics(so lets say the scroll is halfway down) and then i go to select another lyrics from the dropdown menu, it indeed populates with the correct html, but instead of resetting the scroll to the op, it is still halfway down. I wonder if there is something that would reset that DIV each time?
Maceman
ps. I think i create more problems the more things i try :)
I don't get where to put that and how to rename things? Can you give me an example using my code please?
Looks like this is a big issue with many people from what i've seen on several forums, but most require link to rest, i want it to just reset by clicking another selection i nthe drop down...
Thanx,
Maceman
Javascript:
if (httpRequest.status == 200) {
output.innerHTML = httpRequest.responseText;
output.scrollTop = 0;
}Andrew
[edited by: Little_G at 6:17 pm (utc) on Oct. 21, 2008]
That did it! Beautiful!
Thanx so much!
Maceman
Andrew
