JavaScript - Is It Possible To Make An App That Creates A Gif That Shows The Process Of A Finished

Probably a noob question but I'm to the point where I need suggestions.

I am trying to make an object that adds more objects to the page onclick. For example, I have an image (lets say its a plus sign) that I want users to click to add a new predesignated image (lets say its an image that the user can label with text) to the page. I want the user to be able to create a page/list full of user labeled images.

Thanks.

I was curious if anyone could show me how to create a button that will run a certain script ie: press button named "reveal" -> scroll box is created with other buttons inside it that do other functions.

all help is appreciated I ave no idea how to go about doing this

Hi, I have an admin page in which I enter information for a Math Education website. I have to pre-load 10 video fields just in case a lesson has 10 videos. This is an over simplification:

--------------------------------------------
Subject: ____________
Chapter: ____________
Lesson: _____________
--------------------------------------------
Video 1
Video Title: __________
Video Desc:__________
--------------------------------------------
Video 2
Video Title: __________
Video Desc:__________
--------------------------------------------
.
.
.
--------------------------------------------
Video 10
Video Title: __________
Video Desc:__________
--------------------------------------------


What I would like to do is load 1 single video field and then have a button that when it is clicked automatically creates another field. Any ideas? I'm sure this is possible but everything I know I've learned from searching the internet and reading a few simple books so my knowledge is fragmented.

THANKS!

I need to automate a repeated process that fills out a form and submits it automatically. Can someone lead me to the right direction on accomplishing this? - Thanks!

The way I have my code now inorder to create .XX places I use
Code:

var valueY=Math.round(valueX*100)/100;

That way if valueX=15.6898 it would give valueY=15.69.

but the problem arises when I want it

valueX=15.6 to display valueY=15.60

I did some research and people said to use .toFixed(2) but i can't get it to add in the zero if it isn't already there.

Any help I would be very helpful.

All,
Say I have a four part process to add something to my website. I'd like to have a bar at the top of my page (if you need an example, something simliar to FedEx to show where you package is along the way) that will get updated upon each page move so the user knows how far along they are in the process and how much farther they have to go? Any type of tutorials or ideas (whether it's PHP and jQuery or any other combination) I'd greatly appreciate them. Thanks in advance for any guidance. Thanks.

Hi all,

I'm stumped on finding a way in javascript to create an object factory whose instances are also object factories. In short I want something like that below, but no joy ... any clues?


Code:

function createClass () {
	return new createClass()
	function createClass() {
		return new createInstance ()
		function createInstance () {
			//Default properties, values and methods which might later be extended
		}
	}
}

var createDoor = createClass();
var door1 = createDoor();
var door2 = createDoor();

var createChair = createClass();
var chair1 = createChair ();
var chair2 = createChair ();

I need for the form to do the following:
when age is greater than or equal to 65 enter "yes" in the hidden field
when age is less than 65 enter "no" in the hidden filed
return true

Create a page processAge.htm that
Writes the message on the page
Hi name. At age # you may retire.
or
Hi name. At age # you are not ready to retire. Get to work.
name is the name entered on the form.
# is the age entered on the form.

Java:
Code:

<script type="text/javascript">
/* <![CDATA[ */
function validateSubmission() {
  var retValue = true;
  if (document.forms[0].name.value == "") {
      window.alert("You did not fill in one of the following required fields: Name or Age.");
      retValue = false;
      }
}
function checkForNumber(fieldValue) {
  var numberCheck = isNaN(fieldValue);
  if (numberCheck == true) {
    window.alert("You must enter a numeric value!");
    return false;
    }
} 
/* ]]> */
</script>

Body:
Code:

<form action="processAge.htm" method="get" onsubmit="makeList(); return validateSubmission(); ">
<table frame="border" rules="cols" >
<tr>
<td valign="top">
<h2>Retirement</h2>
<p>Name<br />
<input type="text" name="name" size="40" /></p>
<p>Age<br />
<input type="text" name="age" size="40" onchange="return checkForNumber(this.value);" /></p>
<p style="text-align: center"><input type="submit" value="Send" /><input type="reset" />
<input type="hidden" name="Retirement" /></p>
</td></tr>
</table>
</form>

Process Page:
Code:

<script type="text/javascript">
/* <![CDATA[ */
document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>");
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
  formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
  document.writeln(formArray[i] + "<br />");
}
/* ]]> */
</script>

Thanks for any help!

I have a form that I've made in the XHTML comprised of text boxes and radio buttons. I want to put a button on the page that when clicked, takes the values in the data, processes it client-side and then outputs it to the same page that it took the data from.

I'm having difficulty know exactly how to reference the data in each form element. So far, it seems like I can use getElementById, but my efforts so far have stymied me.

The code is this:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>QuadWay DomQuote</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />

<!-- external script declarations -->		
<script type="text/javascript" src="chkValidityOfNumber.js"></script>
<script type="text/javascript" src="calcQuote.js"></script>
<script type="text/javascript" src="calcGoodsAndServicesTax.js"></script>
<script type="text/javascript" src="calcTotalCostIncludingGST.js"></script>
<script type="text/javascript" src="outPutResultsToPage.js"></script>

</head> 


<body>

        <form action="" name="quadway">
<!-- create fields to enter customer details into -->
                <b>Customer Details</b>
               
                <p>Customers Full Name:
                        <input type="text" id="customersfullname" name="custName" />
                        </p>
                       
                        <p>Contact Telephone Number:
                        <input type="text" id="customerstelephonenumber" name="phoneNumber" />
                        </p>
                       
                        <p>Customers Address:
                        <textarea id="customersaddress" name="custAddress" cols="20" rows="5"></textarea>
                        </p>
               
                                <hr />
<!-- create fields to enter the regularity of service -->              
                <b>Regularity</b>
                        <p>
                        <input type="radio" name="regularity" value="1" />
                        Once only
                        </p>
                       
                        <p>
                        <input type="radio" name="regularity" value="4" checked />
                        Weekly
                        </p>
                       
                        <p>
                        <input type="radio" name="regularity" value="2" />
                        Fortnightly
                        </p>
                       
                        <p>
                        <input type="radio" name="regularity" value="1" />
                        Monthly
                        </p>
               
                                <hr />
 
<!-- create radio buttons to select the contract period -->                            
                <b>Contract Period</b>
                        
                        <p>
                        <input type="radio" name="contractperiod" value="1" />
                        N/A (Once Only)
                        </p>
						
						<p>
                        <input type="radio" name="contractperiod" value="6" />
                        Six Months
                        </p>
                       
                        <p>
                        <input type="radio" name="contractperiod" value="12" />
                        One Year
                        </p>
                       
                        <p>
                        <input type="radio" name="contractperiod" value="24" />
                        Two Years
                        </p>
               
                                <hr />
 
<!-- create radio buttons to select the type of service -->                            
                <b>Type</b>
                        <p>
                        <input type="radio" name="typeOfService" value="1" />
                        Standard
                        </p>
                       
                        <p>
                        <input type="radio" name="typeOfService" value="1.4" />
                        Premium
                        </p>
               
                                <hr />
 
<!-- create fields to enter how many bedrooms, living areas and service areas there are and their area -->                                                             
                <b>Bedrooms</b>
                        <p>Number of bedrooms:
                        <input type="text" name="numBedrooms" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        </p>
                       
                        <p>Area:
                        <input type="text" name="areaBedrooms" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        m2
                        </p>
                       
                <b>Living Areas</b>
                        <p>Number of living areas:
                        <input type="text" name="numLivAreas" size="2" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        </p>
                       
                        <p>Area:
                        <input type="text" name="areaLivAreas" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        m2
                        </p>
                       
                <b>Service Areas</b>
                        <p>Number of service areas:
                        <input type="text" name="numServAreas" size="2" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        </p>
                       
                        <p>Area:
                        <input type="text" name="areaServArea" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        m2
                        </p>
		<input type="button" name="calculateQuoteButton" value="Calculate Quote" onClick = "calcQuoteBeforeTax(this.form)"></input>
		
		
			var theForm=document.getElementById("quadway");
			<input type="button" name="tester" value="test" onClick = "alert(document.quadway.getElementById.elements[0].value);"></input>
		
		
		</form>
                                <hr /><hr />

	<b>Quote</b>




</body>
</html>

Right down the bottom, under the word 'Quote is where the output should go.

Any suggestions on how to do this?

Regards


Jenny

Hi all,

I have a photo gallery on a page, when viewed in IE it will show nothing after it hits this gallery.

The error that is produced is - "'null' is null or not an object"

The code I have for my photo gallery is below, I have a feeling (though it is only a hunch) that it maybe to do with the IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules; line.

I have tried swapping the styleSheets[3] for different values 0-5 but to no effect.

Code:

var thumbProportion = .17 // thumbnails are 32% of their full size;
	var IE = false; 
	if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}

	function swapImg(nImg,nSwapImgClass,nFullSizeImg){		
		
		var thumbImg = nImg;
		var thumbImgAlt = thumbImg.alt;
		var origFullWidth = nFullSizeImg.width; 		
		var origFullHeight = nFullSizeImg.height;		
		var tempImgHolder = nFullSizeImg.src;
		var origFullAlt = nFullSizeImg.alt;
		nFullSizeImg.src = thumbImg.src;
		thumbImg.src = tempImgHolder;
		nSwapImgClass.style.width = nFullSizeImg.width + "px";
		thumbImg.style.width =  Math.round(origFullWidth * thumbProportion) + "px";	
		thumbImg.style.height =  Math.round(origFullHeight * thumbProportion) + "px";	
		thumbImg.alt = origFullAlt;
		thumbImg.title = origFullAlt;
		nFullSizeImg.alt = thumbImgAlt;
		nFullSizeImg.title = thumbImgAlt;
		nCaption.firstChild.data = thumbImgAlt;
	}

	function init(){

		var nImg = document.getElementById('fullSizeContainer');
		var fullSizeImg = nImg.getElementsByTagName('img')[0];
		nCaption = nImg.getElementsByTagName('div')[0];		
		IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules;
		for (i=0; i<nRule.length; i++)
			{
		 	 if (nRule[i].selectorText == ".swapImg")
				{	
				 var swapImgClass = nRule[i];
				 nRule[i].style.width = fullSizeImg.width + "px";				 
				}		
			}	
		var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
		for (i=0; i<nGallery.length; i++)
			{
			 nGallery[i].onclick = function()
				{
			 	 swapImg(this.firstChild,swapImgClass,fullSizeImg);
			 	 return false;
				}			
		 	nGallery[i].href = "#";			
			}	
	}

	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);

If anyone can help I would really appreciate it!

I have a 'show more' link on my page and wish to allow users who disable javascript to automatically see this normally hidden div as the link obviously will not work.

is this possible ?

the info in the hidden div will be taken from MySQL databases.

Code:

<div><!-- start of div2 -->
	<div class="floatleft"><a href="#" id="textbox-show" class="showLink" onclick="showHide('textbox');return false;">Show more</a>
	</div>
			<div><!-- start of div3 -->
				<div id="textbox" class="more">
					<div class="formtitles">Show more&nbsp;&nbsp;<a href="#" id="textbox-hide" class="hideLink" onclick="showHide('textbox');return false;">Hide this content</a>
					</div>

					<div>

						<div class="containercolour3">
							<div class="rtopcolour3">
								<div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div>
							</div>
			
							<div class="formspacer">Hidden text</div>
			
							<div class="rbottomcolour3">
								<div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div>
							</div>
						</div>

					</div>

			</div>
			<!-- end of div3 --></div>
<!-- end of div2 --></div>

The code that I have below has three different buttons: When you click then name of each button the image of the button will appear. What I am trying to do is
create a mini slide show. Instead of having 3 buttons, I just want one button called "tools" that you click and every time you click the button a different image of a tool will appear. I have heard you can use just about all my code below but add in the modulus operator somehow to achieve this... Does anybody have any suggestions or know how to do this???



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
img {display: block;
margin-left: auto;
margin-right: auto; }




</style>
</head>

<body>



<img id="shown" src="/tools/hoe.jpg" alt="hoe">


<script>
function imageView(saw)
{
document.getElementById("shown").src="/tools/"+saw+".jpg";
}
imageView('saw');
</script>





<p><input type="button" value="Saw" onclick="imageView('saw')">
</p>
<p><input type="button" value="Hoe" onclick="imageView('hoe')">
</p>

<p><input type="button" value="Tree Trimmer" onclick="imageView('tree_trimmer')">
</p>


</body>
</html>

Hi Guys
I'm trying to find a way to insert a dropdown eg:


<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>

...place the dropdown to the left and have an information panel to the right.
i.e. if a user chooses Volvo a panel to the right would appear saying eg "Volvo is a strong car"
and so on for other selections eg "Audi is a fast car" if the user selects Audi in the dropdown.

THANKS

My slideshow is working in the dreamweaver preview, but not showing up when i upload and view on the internet.

http://www.kristynaswebpages.com/home2a.html

I have this in the head section:

Code:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [1024, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://www.kristynaswebpages.com/falcon_1.jpg", "", "", "The A Control Room is blah blah blah"],
		["http://www.kristynaswebpages.com/falcon_2.jpg", "", "", "The A Control Room is blah blah blah"],
		["http://www.kristynaswebpages.com/falcon_3.jpg"], 
		["http://www.kristynaswebpages.com/falcon_4.jpg", "", "", "The A Control Room is blah blah blah"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})


</script>

and then i put <div id="fadeshow1"></div> where I wanted the slideshow to appear (between the menu bar and the text at the bottom).

I have tried writing the pic links as both "http://www.kristynaswebpages.com/falcon_2.jpg" and "falcon_2.jpg"


If anyone could help, that would be so awesome!

Hello there

I'm trying to code a menu which when clicking say the 'news' button, a div will appear to the right containing the news, if you then click the button below, say 'information', the news div will be replaced by the 'information' div. I can figure out how to make a single menu item show and hide a div, but I can't for the life of me figure out how to do it for a whole menu.

Any help greatly appreciated!