JavaScript - Build Html In Javascript

I'm currently using an automation software to automate a series of steps I perform on my computer. One of the tasks involves hundreds of If/Then loops, extracts text from websites using an embedded web browser, computes equations and write text files.

The thing is, in order to share this with somebody else, they also need the same automation software installed, and then need to import it. So it's a process I'm trying to replace by creating a small program with a GUI that involves a simple installation on the user's PC (or ideally without installation). The language must be flexible enough to perform the same actions that I listed above - and more preferably. I'm a complete novice with anything besides HTML/CSS so I'm looking for

A flexible programming language that isn't rocket science to learn from scratch and is ideal for small stand-alone programs
The ability to create a GUI. I'd be happy to read any good reference you have about the language/design knowledge needed for GUI's.

Thanks in advance

Hi I am new here, am having a terrible problem with animation build up.
have searched and found various codes to stop,but can't implement in the .js in a way that works. Maybe am putting in wrong place.

Wondering if anyone can help, would really appreciate it.
Following is the code:
Thank you


Code:

 
var droplinemenu={

arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 600}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
	jQuery(document).ready(function($){
		var $mainmenu=$("#"+menuid+">ul")
		var $headers=$mainmenu.find("ul").parent()
		$headers.each(function(i){
			var $curobj=$(this)
			var $subul=$(this).find('ul:eq(0)')
			this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
			this.istopheader=$curobj.parents("ul").length==1? true : false
			if (!this.istopheader)
				$subul.css({left:0, top:this._dimensions.h})
			var $innerheader=$curobj.children('a').eq(0)
			$innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
			$innerheader.append(
				'<img src="'+ droplinemenu.arrowimage.src
				+'" class="' + droplinemenu.arrowimage.classname
				+ '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
			)
			$curobj.hover(
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					if ($targetul.queue().length<=1) //if 1 or less queued animations
						if (this.istopheader)
							$targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
						if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
							$mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
						$targetul.slideDown(droplinemenu.animateduration.over)
				},
				function(e){
					var $targetul=$(this).children("ul:eq(0)")
					$targetul.slideUp(droplinemenu.animateduration.out)
				}
			) //end hover
		}) //end $headers.each()
		$mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
	}) //end document.ready
}
}

I could use some help. I'm technically a CSS/Javascript newbie, so I have no idea where to start. I've been researching the past few hours, but I'm completely lost.

If anyone could help, I would greatly appreciate it. I don't need someone to build the whole thing for me.

What I could use, is an example.

Basically a simple setup that someone could create real quick would help.

For the example, if anyone has the time and willing to help, make this type of simple setup.

I basically look at wow's talent cal, but this isn't a wow talent calculator. It's for a different game.

I still need 3 trees. You don't have to put in a ton of icons or mouseover tooltips.

I would like this though(for a quick setup):

3 talent trees
2 talent points per tree
each talent has at least 1 talent point that can be added
tooltip that could say like "0%" with 0 talent points in it, and say "33%" when 1 talent point is added.
If possible make the 2nd tier unactive until 1st tier has the point in it.

This would be a simple setup. I don't know how to go about doing it. But, if someone could create something like this, and perhaps a "howto" of how to add new talents, like where to add them in the script files, it would be appreciate.

I know this is a lot of work, but any help ie appreciated.

Hi Guys,
I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled!
I create the following code but it did not work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script language="JavaScript" type="">
function changeColor(){
document.bgColor = "Gray";
}
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var person = "";
person = prompt('What is Your Name:');
if (person == "Foo") {
document.write("<h1 />Welcome " + person);
document.bgColor = "Yellow";
}
else {
document.write("<h1 />Access Denied!!!!");
document.bgColor = "Red";
document.getElementById("gree").disabled = true;
}
</script>

<div>
<p/><input id="gree" type="button" value="Gray " onClick="changeColor();">
</div>
</body>
</html>

as you can see I used the:
document.getElementById("gree").disabled = true;
but it did not work , could you please give an idea how I can solve this problem?
Thanks

I have a table that has a series of dropdowns. Each dropdown is build with JavaScript based on the values of the prior dropdowns. The data for each of these dropdowns comes from a series of XML files which are loaded into a series of arrays on loading. This is all working.

What I need (but can't figure out) is how to dynamically build a sub-table within a specific cell of the parent table based on the values of the prior dropdowns and if the prior dropdowns are changed, how do delete (not just hide) the dynamic table and rebuild it based on the values of the new dropdowns.

Hello,

I'm very new to javascript and am probably dabbling in stuff that I shouldn't if I am new to it. Nonetheless I've exhausted my resources and am seeking some answers from people who know what they're talking about.

I've got this XML file:

Quote:

<?xml version="1.0" encoding="utf-8"?>
<Menu>
<Section>
<Title>Product Information</Title>
<Topic url="howto.html">How to use This Product</Topic>
<Topic url="product.html">Product Overview</Topic>
<Topic url="sysreq.html">System Requirements</Topic>
</Section>
.....
</Menu>

There's more data than that but for brevity that's the way it's constructed and repeats with several Titles and Topics.

Here's the JS i'm using to build a dynamic menu. The goal is to pick up the data and build an Accordion menu out of it:

Quote:
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest(); //create ajax var
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE
}
xhttp.open("GET","menu.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
document.write("<div class='acc'>");
var x=xmlDoc.getElementsByTagName("Section");
for (i=0;i<x.length;i++)
{
document.write("<dt>");
document.write("<a href='#'>" + x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue + "</a></dt>");
document.write("<dd><ul>");
var y=xmlDoc.getElementsByTagName("Topic")[0].childNodes[0];
for (foo=0;foo<x.length;foo++)
{
document.write("<li class='acc_item'><a href='#'>" + x[i].getElementsByTagName("Topic")[0].childNodes[0].nodeValue + "</a></li>");
}
document.write("</ul></dd>");
}
document.write("</div>");
It creates the menu correctly... to a point. It has the correct styling, the accordion works perfectly, it has the correct Titles in the correct places, but when I "expand" one of the Titles it lists the first topic only, and lists it 5 times (the same amount of Titles I have). It then repeats this for every section. Example:

Product Information
How to Use This Product
How to Use This Product
How to Use This Product
How to Use This Product
How to Use This Product

I'm not very confident in the syntax, or what it is exactly doing. Any guidance would be very appreciated. Please keep in mind I'm very new.

Thanks!

I am having trouble writing this javascript for my work, normally I would do this in ASP or PHP, but the environment I am working with will only allow javascript for dynamic function.

The form has two different select boxes and based on your options selected for select box #1 and select box #2, the hidden input field "redirect" (which is currently empty) would then populate dynamically with the URL associated with that combination mentioned below. The hidden redirect input field (now containing dyanmically generated data) would then pass the new value via HTTP_POST to .net script that will handle the redirect processing step fed to it.

Here are the mappings:

If selections = Elementary & Vocabulary = http://www.widget.com/content/elem-vocab

If selections = Elementary & Writing = http://www.widget.com/content/elem-writing

If selections = Elementary & ELD = http://www.widget.com/content/elem-eld

If selections = Middle School & Vocabulary = http://www.widget.com/content/midscl-vocab

If selections = Middle School & Writing = http://www.widget.com/content/midscl-writing

If selections = Middle School & ELD = http://www.widget.com/content/midscl-eld

If selections = High School & Vocabulary = http://www.widget.com/content/hiscl-vocab

If selections = High School & Writing = http://www.widget.com/content/hiscl-writing

If selections = High School & ELD = http://www.widget.com/content/hiscl-eld


Here's a snippet of a different method that I tried, but it did not work. I think the above mentioned method would probably be best.

Code:

<script language="javascript" type="text/javascript">
<!--
function build() {

document.fillgaps.redirect.value = "http://www.widget.com/content/" + document.fillgaps.grade.value + "-" + document.fillgaps.solution.value ;

//print example: http://www.widget.com/content/ELM-VOC

return true;

}

-->
</script>


<form name="fillgaps" action="http://www.widget.com/submit.aspx" method="post" onSubmit="return build();">

<input type="hidden" name="redirect" value="">

<table class="elqFormTable" border="0" cellspacing="2" cellpadding="2">


<tr>
<td valign="top">Grade:</td>
<td>
<select name="grade">
<option value="ELM">Elementary</option>
<option value="MID">Middle School</option>
<option value="HIG">High School</option>
</select>
</td>
</tr>

<tr >
<td valign="top">Solution:</td>
<td>
<select name="solution">
<option value="VOC">Vocabulary</option>
<option value="WRI">Writing</option>
<option value="ELD">ELD</option>
</select>

<!--truncated code -->

It's a sort of mad lib. I have written codes for both windows. I just don't know what code to write in, or outside the tellStory function to display the actual story once the other window is called open....

<html>
<head>
<title>Silly Storey About You</title>
</head>

<script>
function tellStorey() {
setupStoryWindow();
}

function setupStoryWindow(name, contentString) {
var header = "<head><title>" + name
+ " 's story</title><head>"
+ "<h1>" + name + " 's story</h1>";
var storyWindow = window.open('', 'storyWindow');
storyWindow.document.write(header);
storyWindow.document.write(contentString);
storyWindow.document.close();
storyWindow.focus();
}
</script>

<body>
<h1>Tell Your Storey</h1>
<form name="input"
method="get">
<p>Your first name:
<input type="text" name="yourFirstName" /></p>
<p>Your gender:
<select name=yourGenderList>

<option value="girl">girl
<option value="guy">guy
</select></p>
<p>City you'd like to visit some day:
<input type="text" name="city"/></p>
<p>A fruit (plural form):
<input type="text" name="fruit"/></p>
<p>Your favorite teacher's name:
<input type="text" name="teacher" /></p>
<p>Your best friend's name:
<input type="text" name="friend" /></p>
<p>Your favorite actor's name:
<input type="text" name="actor" /></p>
<p>A large animal:
<input type="text" name="animal" /></p>
<p><input type=button value="Tell a Storey"
onclick='tellStorey();'</p>
</form>
</body>
</html>


//here's the story

"One fine morning on valentine's day a" + yourGenderList + "named" + yourFirstName + "woke up so excited. For today was going to be a single's date night in" + city + ", which is well known for "+ fruit + "." + name + "'s friend" + friend + "recommended that I go because they ended up, curiously
enough, meeting and marrying my high school teacher" + teacher + ". I'm just hoping to meet someone that looks like" + actor + ". I've had a crush on"+ actor + "for too many years now. Well, realistically, that probably won't happen, but as long as they look like a" + animal + ", then my night will be worth while!"

Ok, problem has been solved! ^^

I am making an webpage where you get two random photos and you click using the arrow keys which one you like best and that one stays and goes on the versus the next random photo. I got it so far when you start the page it sets two random pictures but i dont know how to do key inputs on html


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
  <title>Which Is better?</title>
  <h1 align = center>Which is better?</h1>
  <script language="JavaScript">
  var theImages = new Array()
  var thePictures = new Array()
    thePictures[1] = 'untitled-1.jpg'
    thePictures[2] = 'untitled-2.jpg'
  thePictures[3] = 'untitled-3.jpg'
  thePictures[4] = 'untitled-4.jpg'
  thePictures[5] = 'untitled-5.jpg'
  thePictures[6] = 'untitled-6.jpg'
  thePictures[7] = 'untitled-7.jpg'
  thePictures[8] = 'untitled-8.jpg'
  thePictures[9] = 'untitled-9.jpg'
  thePictures[10] = 'untitled-10.jpg'
  thePictures[11] = 'untitled-11.jpg'
  thePictures[12] = 'untitled-12.jpg'
  thePictures[13] = 'untitled-13.jpg'
  thePictures[14] = 'untitled-14.jpg'
   thePictures[15] = 'untitled-15.jpg'
    thePictures[16] = 'untitled-16.jpg'
  thePictures[17] = 'untitled-17.jpg'
  thePictures[18] = 'untitled-18.jpg'
  thePictures[19] = 'untitled-19.jpg'
  thePictures[20] = 'untitled-20.jpg'
  thePictures[21] = 'untitled-21.jpg'
  thePictures[22] = 'untitled-22.jpg'
  thePictures[23] = 'untitled-23.jpg'
  thePictures[24] = 'untitled-24.jpg'
   thePictures[25] = 'untitled-25.jpg'
    thePictures[26] = 'untitled-26.jpg'
  thePictures[27] = 'untitled-27.jpg'
  thePictures[28] = 'untitled-28.jpg'
  thePictures[29] = 'untitled-29.jpg'
  thePictures[30] = 'untitled-30.jpg'
  thePictures[31] = 'untitled-31.jpg'
  thePictures[32] = 'untitled-32.jpg'
  thePictures[33] = 'untitled-33.jpg'
  thePictures[34] = 'untitled-34.jpg'
   thePictures[35] = 'untitled-35.jpg'
    thePictures[36] = 'untitled-36.jpg'
  thePictures[37] = 'untitled-37.jpg'
  thePictures[38] = 'untitled-38.jpg'
  thePictures[39] = 'untitled-39.jpg'
  thePictures[40] = 'untitled-40.jpg'
  thePictures[41] = 'untitled-41.jpg'
  thePictures[42] = 'untitled-42.jpg'
  thePictures[43] = 'untitled-43.jpg'
  thePictures[44] = 'untitled-44.jpg'
   thePictures[45] = 'untitled-45.jpg'
    thePictures[46] = 'untitled-46.jpg'
  thePictures[47] = 'untitled-47.jpg'
  thePictures[48] = 'untitled-48.jpg'
  thePictures[49] = 'untitled-49.jpg'
  thePictures[50] = 'untitled-50.jpg'
  thePictures[51] = 'untitled-51.jpg'
  thePictures[52] = 'untitled-52.jpg'
  thePictures[53] = 'untitled-53.jpg'
  thePictures[54] = 'untitled-54.jpg'
   thePictures[55] = 'untitled-55.jpg'
    thePictures[56] = 'untitled-56.jpg'
  thePictures[57] = 'untitled-57.jpg'
  thePictures[58] = 'untitled-58.jpg'
  thePictures[59] = 'untitled-59.jpg'
  thePictures[60] = 'untitled-60.jpg'
  thePictures[61] = 'untitled-61.jpg'
  thePictures[62] = 'untitled-62.jpg'
  thePictures[63] = 'untitled-63.jpg'
  thePictures[64] = 'untitled-64.jpg'
   thePictures[65] = 'untitled-65.jpg'
    thePictures[66] = 'untitled-66.jpg'
  thePictures[67] = 'untitled-67jpg'
  thePictures[68] = 'untitled-68.jpg'
  thePictures[69] = 'untitled-69.jpg'
  thePictures[70] = 'untitled-70.jpg'
  thePictures[71] = 'untitled-71.jpg'
  thePictures[72] = 'untitled-72.jpg'
  thePictures[73] = 'untitled-73.jpg'
  thePictures[74] = 'untitled-74.jpg'
   thePictures[75] = 'untitled-1.jpg'
    thePictures[76] = 'untitled-2.jpg'
  thePictures[77] = 'untitled-77.jpg'
  thePictures[78] = 'untitled-78.jpg'
  thePictures[79] = 'untitled-79.jpg'
  thePictures[80] = 'untitled-80.jpg'
  thePictures[81] = 'untitled-81.jpg'
  thePictures[82] = 'untitled-82.jpg'
  thePictures[83] = 'untitled-83.jpg'
  thePictures[84] = 'untitled-84.jpg'
   thePictures[85] = 'untitled-85.jpg'
    thePictures[86] = 'untitled-86.jpg'
  thePictures[87] = 'untitled-87.jpg'
  thePictures[88] = 'untitled-88.jpg'
  thePictures[89] = 'untitled-89.jpg'
  thePictures[90] = 'untitled-90.jpg'
    thePictures[91] = 'untitled-91.jpg'
  thePictures[92] = 'untitled-92.jpg'
  thePictures[93] = 'untitled-93.jpg'
  thePictures[94] = 'untitled-94.jpg'
  thePictures[95] = 'untitled-95.jpg'
  thePictures[96] = 'untitled-96.jpg'
  thePictures[97] = 'untitled-97.jpg'
  thePictures[98] = 'untitled-98.jpg'
  thePictures[99] = 'untitled-99.jpg'
  thePictures[100] = 'untitled-100.jpg'
    thePictures[101] = 'untitled-101.jpg'
  thePictures[102] = 'untitled-102.jpg'
  thePictures[103] = 'untitled-103.jpg'
  thePictures[104] = 'untitled-104.jpg'
  thePictures[105] = 'untitled-105.jpg'
  thePictures[106] = 'untitled-106.jpg'
  thePictures[107] = 'untitled-107.jpg'
  thePictures[108] = 'untitled-108.jpg'
  thePictures[109] = 'untitled-109.jpg'
  thePictures[110] = 'untitled-110.jpg'
    thePictures[111] = 'untitled-111.jpg'
  thePictures[112] = 'untitled-112.jpg'
  thePictures[113] = 'untitled-113.jpg'
  thePictures[114] = 'untitled-114.jpg'
  thePictures[115] = 'untitled-115.jpg'
  thePictures[116] = 'untitled-116.jpg'
  thePictures[117] = 'untitled-117.jpg'
  thePictures[118] = 'untitled-118.jpg'
  thePictures[119] = 'untitled-119.jpg'
  thePictures[120] = 'untitled-120.jpg'
    thePictures[121] = 'untitled-121.jpg'
  thePictures[122] = 'untitled-122.jpg'
  thePictures[123] = 'untitled-123.jpg'
  thePictures[124] = 'untitled-124.jpg'
  thePictures[125] = 'untitled-125.jpg'
  thePictures[126] = 'untitled-126.jpg'
  thePictures[127] = 'untitled-127.jpg'
  thePictures[128] = 'untitled-128.jpg'
  thePictures[129] = 'untitled-129.jpg'
  thePictures[130] = 'untitled-130.jpg'
    thePictures[131] = 'untitled-131.jpg'
  thePictures[132] = 'untitled-132.jpg'
  thePictures[133] = 'untitled-133.jpg'
  thePictures[134] = 'untitled-134.jpg'
  thePictures[135] = 'untitled-135.jpg'
  thePictures[136] = 'untitled-136.jpg'
  thePictures[137] = 'untitled-137.jpg'
  thePictures[138] = 'untitled-138.jpg'
  thePictures[139] = 'untitled-139.jpg'
  thePictures[140] = 'untitled-140.jpg'
    thePictures[141] = 'untitled-141.jpg'
  thePictures[142] = 'untitled-142.jpg'
  thePictures[143] = 'untitled-143.jpg'
  thePictures[144] = 'untitled-144.jpg'
  thePictures[145] = 'untitled-145.jpg'
  thePictures[146] = 'untitled-146.jpg'
  thePictures[147] = 'untitled-147.jpg'
  thePictures[148] = 'untitled-148.jpg'
  thePictures[149] = 'untitled-149.jpg'
  thePictures[150] = 'untitled-150.jpg'
  
  theImages[1] = 'untitled-1.jpg'
    theImages[2] = 'untitled-2.jpg'
  theImages[3] = 'untitled-3.jpg'
  theImages[4] = 'untitled-4.jpg'
  theImages[5] = 'untitled-5.jpg'
  theImages[6] = 'untitled-6.jpg'
  theImages[7] = 'untitled-7.jpg'
  theImages[8] = 'untitled-8.jpg'
  theImages[9] = 'untitled-9.jpg'
  theImages[10] = 'untitled-10.jpg'
  theImages[11] = 'untitled-11.jpg'
  theImages[12] = 'untitled-12.jpg'
  theImages[13] = 'untitled-13.jpg'
  theImages[14] = 'untitled-14.jpg'
  theImages[15] = 'untitled-15.jpg'
  theImages[16] = 'untitled-16.jpg'
  theImages[17] = 'untitled-17.jpg'
  theImages[18] = 'untitled-18.jpg'
  theImages[19] = 'untitled-19.jpg'
  theImages[20] = 'untitled-20.jpg'
  theImages[21] = 'untitled-21.jpg'
  theImages[22] = 'untitled-22.jpg'
  theImages[23] = 'untitled-23.jpg'
  theImages[24] = 'untitled-24.jpg'
  theImages[25] = 'untitled-25.jpg'
  theImages[26] = 'untitled-26.jpg'
  theImages[27] = 'untitled-27.jpg'
  theImages[28] = 'untitled-28.jpg'
  theImages[29] = 'untitled-29.jpg'
  theImages[30] = 'untitled-30.jpg'
    theImages[31] = 'untitled-31.jpg'
  theImages[32] = 'untitled-32.jpg'
  theImages[33] = 'untitled-33.jpg'
  theImages[34] = 'untitled-34.jpg'
  theImages[35] = 'untitled-35.jpg'
  theImages[36] = 'untitled-36.jpg'
  theImages[37] = 'untitled-37.jpg'
  theImages[38] = 'untitled-38.jpg'
  theImages[39] = 'untitled-39.jpg'
  theImages[40] = 'untitled-40.jpg'
    theImages[41] = 'untitled-41.jpg'
  theImages[42] = 'untitled-42.jpg'
  theImages[43] = 'untitled-43.jpg'
  theImages[44] = 'untitled-44.jpg'
  theImages[45] = 'untitled-45.jpg'
  theImages[46] = 'untitled-46.jpg'
  theImages[47] = 'untitled-47.jpg'
  theImages[48] = 'untitled-48.jpg'
  theImages[49] = 'untitled-49.jpg'
  theImages[50] = 'untitled-50.jpg'
    theImages[51] = 'untitled-51.jpg'
  theImages[52] = 'untitled-52.jpg'
  theImages[53] = 'untitled-53.jpg'
  theImages[54] = 'untitled-54.jpg'
  theImages[55] = 'untitled-55.jpg'
  theImages[56] = 'untitled-56.jpg'
  theImages[57] = 'untitled-57.jpg'
  theImages[58] = 'untitled-58.jpg'
  theImages[59] = 'untitled-59.jpg'
  theImages[60] = 'untitled-60.jpg'
    theImages[61] = 'untitled-61.jpg'
  theImages[62] = 'untitled-62.jpg'
  theImages[63] = 'untitled-63.jpg'
  theImages[64] = 'untitled-64.jpg'
  theImages[65] = 'untitled-65.jpg'
  theImages[66] = 'untitled-66.jpg'
  theImages[67] = 'untitled-67.jpg'
  theImages[68] = 'untitled-68.jpg'
  theImages[69] = 'untitled-69.jpg'
  theImages[70] = 'untitled-70.jpg'
    theImages[71] = 'untitled-71.jpg'
  theImages[72] = 'untitled-72.jpg'
  theImages[73] = 'untitled-73.jpg'
  theImages[74] = 'untitled-74.jpg'
  theImages[75] = 'untitled-75.jpg'
  theImages[76] = 'untitled-76.jpg'
  theImages[77] = 'untitled-77.jpg'
  theImages[78] = 'untitled-78.jpg'
  theImages[79] = 'untitled-79.jpg'
  theImages[80] = 'untitled-80.jpg'
    theImages[81] = 'untitled-81.jpg'
  theImages[82] = 'untitled-82.jpg'
  theImages[83] = 'untitled-83.jpg'
  theImages[84] = 'untitled-84.jpg'
  theImages[85] = 'untitled-85.jpg'
  theImages[86] = 'untitled-86.jpg'
  theImages[87] = 'untitled-87.jpg'
  theImages[88] = 'untitled-88.jpg'
  theImages[89] = 'untitled-89.jpg'
  theImages[90] = 'untitled-90.jpg'
    theImages[91] = 'untitled-91.jpg'
  theImages[92] = 'untitled-92.jpg'
  theImages[93] = 'untitled-93.jpg'
  theImages[94] = 'untitled-94.jpg'
  theImages[95] = 'untitled-95.jpg'
  theImages[96] = 'untitled-96.jpg'
  theImages[97] = 'untitled-97.jpg'
  theImages[98] = 'untitled-98.jpg'
  theImages[99] = 'untitled-99.jpg'
  theImages[100] = 'untitled-100.jpg'
    theImages[101] = 'untitled-101.jpg'
  theImages[102] = 'untitled-102.jpg'
  theImages[103] = 'untitled-103.jpg'
  theImages[104] = 'untitled-104.jpg'
  theImages[105] = 'untitled-105.jpg'
  theImages[106] = 'untitled-106.jpg'
  theImages[107] = 'untitled-107.jpg'
  theImages[108] = 'untitled-108.jpg'
  theImages[109] = 'untitled-109.jpg'
  theImages[110] = 'untitled-110.jpg'
    theImages[111] = 'untitled-111.jpg'
  theImages[112] = 'untitled-112.jpg'
  theImages[113] = 'untitled-113.jpg'
  theImages[114] = 'untitled-114.jpg'
  theImages[115] = 'untitled-115.jpg'
  theImages[116] = 'untitled-116.jpg'
  theImages[117] = 'untitled-117.jpg'
  theImages[118] = 'untitled-118.jpg'
  theImages[119] = 'untitled-119.jpg'
  theImages[120] = 'untitled-120.jpg'
    theImages[121] = 'untitled-121.jpg'
  theImages[122] = 'untitled-122.jpg'
  theImages[123] = 'untitled-123.jpg'
  theImages[124] = 'untitled-124.jpg'
  theImages[125] = 'untitled-125.jpg'
  theImages[126] = 'untitled-126.jpg'
  theImages[127] = 'untitled-127.jpg'
  theImages[128] = 'untitled-128.jpg'
  theImages[129] = 'untitled-129.jpg'
  theImages[130] = 'untitled-130.jpg'
    theImages[131] = 'untitled-131.jpg'
  theImages[132] = 'untitled-132.jpg'
  theImages[133] = 'untitled-133.jpg'
  theImages[134] = 'untitled-134.jpg'
  theImages[135] = 'untitled-135.jpg'
  theImages[136] = 'untitled-136.jpg'
  theImages[137] = 'untitled-137.jpg'
  theImages[138] = 'untitled-138.jpg'
  theImages[139] = 'untitled-139.jpg'
  theImages[140] = 'untitled-140.jpg'
    theImages[141] = 'untitled-141.jpg'
  theImages[142] = 'untitled-142.jpg'
  theImages[143] = 'untitled-143.jpg'
  theImages[144] = 'untitled-144.jpg'
  theImages[145] = 'untitled-145.jpg'
  theImages[146] = 'untitled-146.jpg'
  theImages[147] = 'untitled-147.jpg'
  theImages[148] = 'untitled-148.jpg'
  theImages[149] = 'untitled-149.jpg'
  theImages[150] = 'untitled-150.jpg'

  var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}

var whichImage = Math.round(Math.random()*(p-1));

function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
  var j = 0
var p = thePictures.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = thePictures[i]
}

var whichPicture = Math.round(Math.random()*(p-1));
function showPicture(){
document.write('<img src="'+thePictures[whichPicture]+'"align = right >');
}

//  End -->
</script>
  </head>
  <body>
  
  <script language="JavaScript">
  showImage();
  
  </script>
  <script language="JavaScript">
  showPicture();
  </script>
  
  
  
  <h4 align = center> Click Left or Right arrow key to select which one is better. </h4>
  </body>

</html>

Two things:

I'm making a website for my online portfolio for Uni...

1. I want to make a prev|next (preferably with the numbers after too if possible) to flick through my work so I don't have to scroll around the page.

2. I want to create a slide down menu that stays open when an option is selected.

Hope I've explained it well!

Thanks in advance

Help with JavaScript in HTML?
Okay, I have done everything that I can to try and figure this one out...I am stumped. I need to display the flag of the specific country when the radio button of that flag is clicked.

The book states: Create a Web Page that contains a table with two columns in a single row. In the first column, create a list of radio buttons that contains the name of each of the 10 countries. In the second column, display the flag of the selected country in an anchor element. Use onclick even handlers to display the flag image for each selected country. When the page first loads, the image should be blank.

Here is my code:
Code:

<!DOCTYPE HTML>

<!--My Name-->
<!--Chapter 8 Page 478-->
<!--October 28, 2011-->

<html>

<head>

<title>Country Flags</title>

<script type="text/javascript">
/* <![CDATA[ */

var argentina = "argentina.jpg"

var australia = "australia.jpg"

var bolivia = "bolivia.jpg"

var cuba = "cuba.jpg"

var finland = "finland.jpg"

var france = "france.jpg"

var italy = "italy.jpg"

var peru = "peru.jpg"

var syria = "syria.jpg"

var tunisia = "tunisia.jpg"
/* ]] */
</script>

</head>

<body>

<form name="flags" action=" " method="get">
<table style="border: 1; width: 100%">
<tr valign="top">
<td>


<input type="radio" name="flags" onclick=
"document.argentina.jpg" />
Argentina


<input type="radio" name="flags" onclick=
"document.flags.country.value=austra… />
Australia


<input type="radio" name="flags" onclick=
"document.flags.country.value=bolivi… />
Bolivia


<input type="radio" name="flags" onclick=
"document.flags.country.value=cuba" />
Cuba


<input type="radio" name="flags" onclick=
"document.flags.country.value=finlan… />
Finland


<input type="radio" name="flags" onclick=
"document.flags.country.value=france… />
France


<input type="radio" name="flags" onclick=
"document.flags.country.value=italy" />
Italy


<input type="radio" name="flags" onclick=
"document.flags.country.value=peru" />
Peru


<input type="radio" name="flags" onclick=
"document.flags.country.value=syria" />
Syria


<input type="radio" name="flags" onclick=
"document.flags.country.value=tunisi… />
Tunisia

</td>
</p>
<td>

<textarea name="country" cols="75" rows="20"
style="background-color: Transparent;
border: none; overflow: hidden"></textarea>
</td>
</tr>
</table>
</form>
</p>
</body>
</html>

Can someone please help me out here. Thanks

Hi I am a total newbie to javascript and css and have a menu that I am trying to get to work.
Also in the attachments the on.png need's to go in the images folder (Flyout menu.zip/Flyout menu/images/)
To start I downloaded a template that I liked. But I have a problem because if you look at the attached html page (you need to download all of them to get it to work) when you move your mouse over a menu item that has an '>' it expands with a submenu. The problem is that when you move your mouse onto one of the submenu items the main item that it came from doesn't stay lit up which makes it hard to tell which one you came from (I also think that it doesn't look good). If anyone can edit/add to the java/css/html files and make it work I will be very happy (I have been trying for days now).

Another minor problem probably to do with the css is that I would like the arrows (currently they are just text greater than signs '>') to be images and aligned right and the text to stay aligned left.

Thanks for any help

Hi

I want to use the javascript variable value in html , for example

<script >

var alignment = "Right";

</script>

<html>

<p align = alignment > Hi </p>

</html>

How can i do like this !