JavaScript - Change Order Of Output Classes

http://www.***.com/5.html

i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple....

thanks for any help

ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done?

I'm quite new to javascript and don't often understand what I'm reading, so the search results I found didn't seem to help me much. Being such, if this question has been addressed elsewhere, my apologies.

On my site, I have a navigation pane with 4 links. Two of these links show collapsable submenus. When one clicks a link, I want the CSS class of that link to change. For the two "real" links, I've just changed the class on the page itself. For the two collapsible menus, I'm trying to employ javascript.

Ultimately for these two links, I want the class to change when clicked, and change back when clicked again.

Here's the code for the page:
Code:

<div id="navigation">
	<ul>
		<li><h3><a href="javascript:;" onclick="changeclass(this);" onmousedown="toggleSlide('slidemenu');" class="colmain">COLLAPSIBLE MENU 1</a></h3></li>
			<div id="slidemenu" style="display:none; overflow:hidden; height:100px;">
			
				<li><h4><a href="#" class="sub">SUBMENU LINK 1</a></h4></li>
				<li><h4><a href="#" class="sub">SUBMENU LNK 2</a></h4></li>

			
			</div>
		<li><h3><a href="#" class="main">LINK 1</a></h3></li>
		<li><h3><a href="javascript:;" onclick="changeclass(this);" onmousedown="toggleSlide('slidemenu2');" class ="colmain">COLLAPSIBLE MENU 2</a></h3></li>
			<div id="slidemenu2" style ="display:none; overflow:hidden; height:100px;">
			
				<li><h4><a href="#" class="sub">SUBMENU LINK 1</a></h4></li> 
				<li><h4><a href="#" class="sub">SUBMENU LINK 2</a></h4></li>
			
			</div>
		<li><h3><a href="#" class="main" >LINK 2</a></h3></li>
	</ul>
</div>

Here's the javascript I'm working with, which I adopted from http://www.webdeveloper.com/forum/sh...d.php?t=167660 :

Code:

/*<![CDATA[*/
var colstatus;

function changeclass(obj)
	{
	
		if (colstatus) colstatus.className='colmain'; 
		{
		obj.className='colmainshow';
		colstatus=obj;
		}
		
		else
		{
		obj.className='colmain';
		colstatus=obj; 
		}
		
	}


/*]]>*/

I have three questions about this.

1. Seeing as I've been working with javascript for a grand total of six days so far, could you explain the best way to make my code work? What's the significance of colstatus=obj?

2. The javascript works if I leave out the else statement. It will change the class after being clicked, but, of course, doesn't change it back. However, if I click the other collapsible menu, it will change as expected, but the first will revert back to the original class. Why is this happening?

3. Seeing as the code is adopted, I have no idea what /*<![CDATA[*/ and /*]]>*/ mean. Would you explain?

Thanks in advance for your patience and answers!

Hey all,

I am reading a book called JavaScript patterns. In it, this method is created:
Code:

var klass = function(Parent,template){
	var Child, F, i;
	
	Child = function () {
		if (Child.uber && Child.uber.hasOwnProperty("__construct")) {  
			Child.uber.__construct.apply(this, arguments);
		}
		if (Child.prototype.hasOwnProperty("__construct")) {
			Child.prototype.__construct.apply(this, arguments);
		}
	}
	
	Parent = Parent || Object;  
	
	F = function () {};
	F.prototype = Parent.prototype;
	Child.prototype = new F(); 
	Child.uber = Parent.prototype;  
	Child.prototype.constructor = Child;


	for (i in template) {
		if (template.hasOwnProperty(i)) {
			Child.prototype[i] = template[i];
		}
	}
	return Child;
}

Does anyone have an understanding of why we instantiate a new F() to the Child prototype rather than instantiate the Parent prototype? As you can see above, we assign Parent prototype to F prototype and then instantiate F() object to Child prototype. I'm not sure why it's being done this way.

Code:

	F.prototype = Parent.prototype;
	Child.prototype = new F();

Thanks for response.

Could someone please explain the difference in these two methods of creating objects:

//anonymous self invoking function providing private methods
var a_module = (function() {
var private_variable = "some value";

function private_function() {
//some code
}

return {
public_property: "something"
//etc
}
}()
);
//Can use a_module.public_property with this

Is there any difference between the above and this:

var A_module - new Object();
A_module(property1, property2) = {
this.property1 = property1;
this.property2 = property2;
this.methodName = function(){//code}
}

A_module.prototype.property = "//property"
A_module.newMethod = function() {//code}




Are they both just different ways of creating objects with methods and properties?

Hi Guys,

What is the best way to create a javascript class that has all its methods and properties private unless I want them to be public?

Many thanks for any help,

S

Hi,

I have a question about an oop/class style form of javascript programming.

I have stripped the code down to the basic minimum. The problem is I have created two instances of the same class and have entered data into those classes. But as you will see the two separate instances of the class appear to share the same data.

How do I get my class structure working so separate instances will retain their separate data?

Here is the code:

Index.html
Code:

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
debugger;

// Do this because a page resart seems to keep old data
function SetGlobals()
{
	var ui;
	var el;
	
	// Arr00
	ui = document.getElementById("Arr00");
	el = arr0.arrayGet(0);
	ui.innerHTML = el.m_String;
	
	// Arr01
	ui = document.getElementById("Arr01");
	el = arr0.arrayGet(1);
	ui.innerHTML = el.m_String;
	
	// Arr10
	ui = document.getElementById("Arr10");
	el = arr1.arrayGet(0);
	ui.innerHTML = el.m_String;
	
	// Arr11
	ui = document.getElementById("Arr11");
	el = arr1.arrayGet(1);
	ui.innerHTML = el.m_String;
}

function MyOnLoad()
{
	SetGlobals();
}
</script>
</head>
<body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#000000">

<div id="divScreen" style="display: block; width:100%; height="100%">
	<div id="divMenu" style='float: left; background:#00FF00; border-color: #000000; border-width: 1px;'>
		<table>
			<tr>
				<td>
					Array 0/String 0: <label id="Arr00"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 0/String 1: <label id="Arr01"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 1/String 0: <label id="Arr10"></label>
				</td>
			</tr>
			<tr>
				<td>
					Array 1/String 1: <label id="Arr11"></label>
				</td>
			</tr>
		</table>
	</div>
	<div id="divMain" style='height: 100%; background:#0000FF; margin-left: 250px; border-color: #000000; border-width: 1px;'>
	</div>
</div>
</body>
</html>

Test.js
Code:

var BaseARR = function()
{
	_arr = []; // new Array();
		
	// Public functions that can access private members
	this.Add = function(arg)
	{
        var i, addAt;
 
		if(arg==null || (addAt = FindEnterPos(arg))<0)
		    return false;
				
		// since adding and not deleting anything, nothing of value will be returned
		_arr.splice(addAt, 0, arg);

        return true;
	};
	// This finds the entry position for in
    FindEnterPos = function(arg)
    {
		return (_arr.length + 1);
    };
	this.arrayGet = function(i)
	{
		return ((_arr != null && i >= 0 && i < _arr.length) ? _arr[i] : null);
	};
};

var stringId = function(id, str)
{
	// public has a this. , privates have just var
	this.m_Id = id; // int
	this.m_String = str; // string
};

// This so allow statics
var stringIdARR = function()
{
	BaseARR.call(this);
};

Hey all, my first post here. I'm primarily a designer but need to get more into the code aspect of things (and will be getting jQuery asap), but at the moment i'm very behind on time on a project and could use some quick help.

Basically, I'm making a dynamically loading text box input area for RMA returns for our products. But thats kind of irrelevant, here's my question:


I have an external style sheet with only this in it (more will be added later for future sections, thats why im making it it's own "css-forms.css" file:

Code:

.formpad { padding:3px 3px 3px 3px; }

In my main .html, some of my javascript for my dynamic table contains lines like these:


Code:

var esnImeiInput = "<INPUT type=\"text\" name=\"esn_imei[]\" size=\"20\">";
var invoiceInput = "<INPUT type=\"text\" name=\"invoice[]\" size=\"8\">";
var datePurchaseInput = "<INPUT type=\"text\" name=\"date_purchase[]\" size=\"8\">";
var noteInput = "<INPUT type=\"text\" name=\"notes[]\" size=\"18\">";
var trOpenTag = "<tr>";
var trCloseTag = "</tr>";
var tbOpenTag = "<table>";

var formRows = modelInput + reasonInput + esnImeiInput + invoiceInput + datePurchaseInput + noteInput + "<br />";

for(x=0;x<10;x++)
{
	formRows += modelInput + reasonInput + esnImeiInput + invoiceInput + datePurchaseInput + noteInput + "<br />";	
}

Where inside those vars (INPUT's) would i REFER to the 'class' of .formpad? Basically I just want to add cellpadding to the table that is being dynamically loaded. If anyone has time to help via IM that'd be cool too, this is pretty easy stuff for true coders.


(the test page for all of this is currently at:

http://planetcellinc.com/rma-rev726.html


Any help appreciated, thanks!

-Hrl2k

Hello,

I'm taking Computer Logic in college. I only am truly familiar with HTML and CSS and minimal web hosting stuff. I REALLY want to learn how to program, however. Anyway, we are doing classes/objects and functions. I am trying to figure out how to do this exercise. She starts with having us make this page that has a form that lets you select one of three radio buttons that will change the background color of the web page, along with that there is two text boxes to put a first name and last name. Then there is a button to click which puts your full name concatenated in another box below. All of this, is done, and I pretty much THINK I understand what is going on. Here is the code that we did to get this to happen:

Code:

<html>
<head>
<title>Computer Logic in class</title>
<script type="text/javascript">
var nextColor = "";
var BR = "<br />";

function setColor(newColor)
{
	nextColor = newColor;
}

function changeColor()
{
	document.body.bgColor = nextColor;
}

function displayName()
{
	var firstName = document.ColorAndText.firstName.value;
	var lastName = document.ColorAndText.lastName.value;
	document.ColorAndText.fullName.value = firstName + " " + lastName;
}

</script>
</head>
<body bgcolor="red">
<form name="ColorAndText" action = "">

<input type="radio" name="colors" value="Blue" onclick="setColor(this.value)"/> Blue <br />
<input type="radio" name="colors" value="LightYellow" onclick="setColor(this.value)"/> Light Yellow <br />
<input type="radio" name="colors" value="Yellow" onclick="setColor(this.value)"/> Yellow <br />

<input type="button" name="changeButton" value="changeColor" onclick="changeColor()" /> <br />

<input type="text" name="firstName" value="First Name" size="40" /><br />
<input type="text" name="lastName" value="Last Name" size="40" /><br />
<input type="text" name="fullName" readonly="true" size="40" /><br />

<input type="button" name="displayButton" value="Display name" onclick="displayName()" /> <br />
</form>
</body>
</html>

Okay, now, I have and can do that. Seems to make sense. Now, then, the actual program I need to make is from the following exercises:

Activity 3-4 The owner of a flower shop wants you to develop a form for use on the shop's web site. The form should have a single text box for the user to enter his or her name. Under the text box should be a group of radio buttons for three different kinds of flowers: Roses, Carnations, and Daisies. Below the radio buttons should be a button labeled Request Info, with a read-only text box under it for thanking the user for requesting information. This program doesn't need any functions or onclick attributes for the graphical elements.

Okay, here is the code that does that, very simple HTML.

Code:

<html>
<head>
<title>Computer Logic in class</title>
<script type="text/javascript">
var nextFlower = "";
var BR = "<br />";

function setFlower(newFlower)
{
	nextFlower = newFlower;
}

function displayMessage()
{
	var firstName = document.Flowers.nameBox.value;
	document.Flowers.fullName.value = firstName + "," + nextFlower;
}

</script>
</head>
<body bgcolor="white">
<form name="Flowers" action = "">

<input type="text" name="nameBox" value="Namebox" size="60"><br />

<input type="radio" name="flowers" value="Roses" onclick="setFlower(this.value)"/> Roses <br />
<input type="radio" name="flowers" value="Carnations" onclick="setFlower(this.value)"/> Carnations <br />
<input type="radio" name="flowers" value="Daisies" onclick="setFlower(this.value)"/> Daisies <br />


<input type="button" name="displayButton" value="Request Info" onclick="displayMessage(this.value)" /> <br /><br />
<input type="text" name="thankyou" readonly="true" size="100" value="Thanks for using this program" /> 
</form>
</body>
</html>

Okay, now is where I'm stuck. The following exercise is as follows:

The flower shop owner in the previous activity wants to see where you can make the form interactive and asks you to have the form display a message in the bottom text box that includes the user's name, a comma, and the words "thank you for your inquiry about" followed by the flower name the user selected. Write a function named displayMessage() that accesses the user's name from the first text box and displays the message in the read-only text box. You also need to make the Request Info button call the displayMessage() function when it's clicked. Using Javascript, make this form active by including event triggers and functions.

My teacher has said that I should be able to do this by just referencing these two previous pages of code that I have already pasted. I feel like I am missing something, that I need to be doing something and it's just not working for me. I'm actually really really stuck on this. I haven't even gotten to the second half of the exercise (where I have to have it display about what flower you select) because I cant get this function to work. What am I missing? Also, the exercise we did before these two had us make a very basic account class and object. We don't have to do that at all in this anywhere, but I do know how to do it, in case I need to make a class or something.

ANY AND ALL HELP GREATLY APPRECIATED!!! I just don't know what I'm supposed to do, I can't get it to work.

I have a challenge I gave to myself. I want a script that asks me to put things in order. Say I want a quiz of family, order of age. I have a table with the left cell everybody's name I want a script where I click on a name and it moves over to the right hand cell, up top, then the next clicked named is put under it and so on until all the names are moved over. So far I have this, but I know there is a lot of room for improvment. any suggestions?
<HTML>
<HEAD>
<TITLE>Put Bible books in proper order</TITLE>
</head>

<body>
<h1>Hello World!</h1>
<TABLE BORDER=5><TR><TD>
<FORM NAME="BOOKS">
<script language="javascript" type="text/javascript">
alert('This is what an alert message looks like.');
FUNCTION TESTER() {
ALERT('WORKS');
VAR GOOD=0;
VAR BAD=0;
if (BOOKS.FONE="A") {
GOOD++;
}
ELSE {
BAD++;
};
ALERT("YOU HAVE INCORRECT");
}
</script>

<TABLE BORDER=0><TR><TD>

<TABLE BORDER=1>
<TR><TD><INPUT TYPE="BUTTON" VALUE="Adam" NAME="GONE" onClick="javascript:TEMP.value=this.value";>
<TR><TD><INPUT TYPE="BUTTON" VALUE="Dave" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value";>
<TR><TD><INPUT TYPE="BUTTON" VALUE="Kile" NAME="GTHREE" ONCLICK="javascript:TEMP.value=this.value";>
<TR><TD><INPUT TYPE="BUTTON" VALUE="John" NAME="GFOUR" ONCLICK="javascript:TEMP.value=this.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="Geroge" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value;">
</TABLE>

<TD VALIGN="CENTER" ALIGN="CENTER" WIDTH=30>
<INPUT TYPE="BUTTON" VALUE=" " NAME="TEMP">
<TD>

<TABLE BORDER=1>
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FONE" ONCLICK="javascript:this.value=TEMP.value;TEMP.value=' '">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTWO" ONCLICK="javascript:this.value=TEMP.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTHREE" ONCLICK="javascript:this.value=TEMP.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFOUR" ONCLICK="javascript:this.value=TEMP.value;">
<TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFIVE" ONCLICK="javascript:this.value=TEMP.value;">
</TABLE>

</TABLE>
<INPUT TYPE="BUTTON" NAME="CHECK" onClick="JAVASCRIPT:ALERT()" VALUE="CORRECT???">


</FORM>
</TABLE>
</BODY>
</HTML>

I am using the following code to rotate my banner 3 times.

I am trying to get it to order. Ive set it up so that you can choose yes/no drop down as to whether you wnat a panel to show and I have also set it up with a drop down so you can specify 1,2,3. I want to be able to randomly change the order to say 2, 1, 3 it dosent seem to work with what I have below. Any suggestions?

Code:

<script type="text/javascript">


$(document).ready(function(){ 

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);



$(".ui-tabs-panel > a").hover( 
function() { 
$("#featured").tabs("rotate",0,true); 
}, 
function() { 
$("#featured").tabs("rotate",5000,true); 
} 
); 


<div id="featured" >

---------------------------------------------------------
<%
String sCount="";
String stitle = "";
String iPanels = "";
String sShowPanels = "";
String sContent="";
%>

<ul class="ui-tabs-nav">

<%
for(int i=1;i<7;i++){

sCount="" + i;
stitle = "stitle";
stitle= stitle + i;
iPanels = "iPanels";
iPanels = iPanels + i;
sShowPanels = "sShowPanels";
sShowPanels = sShowPanels + i;

//out.print(requestItem.getFieldValue(iPanels) + "=" + sCount);



if(requestItem.getFieldValue(iPanels).equals(sCount)){


if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes")){

if(requestItem.getFieldValue(stitle)!=null && requestItem.getFieldValue(stitle).length() >2){

%>

<li class="ui-tabs-nav-item" id="nav-fragment-<%=i%>"><a href="#fragment-<%=i%>">
<%=requestItem.getFieldValue(stitle)%>
</a></li>
<%
}
}
}
}

%>
</ul>


<%


for(int i=1;i<7;i++){


sCount="" + i;
stitle = "stitle";
stitle= stitle + i;
iPanels = "iPanels";
iPanels = iPanels + i;
sShowPanels = "sShowPanels";
sShowPanels = sShowPanels + i;
sContent = "sContent";
sContent= sContent + i;



if(requestItem.getFieldValue(iPanels).equals(sCount))
{
if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes"))
{
if(requestItem.getFieldValue(sContent)!=null && requestItem.getFieldValue(sContent).length() >2)
{
%>
<div id="fragment-<%=i%>" class="ui-tabs-panel ui-tabs-hide" style="">
<%=requestItem.getFieldValue(sContent)%>
</div>
<%
}
}
}
}
%>

</div>


</div> <!--content-->

Hi their,

i'm trying to create an online order page

i'm having probelms calculating totals from the options

not sure if i've designed it correctly

i have 3 select options (with 4 different products in each)

a single checkbox for another single product

and a final select tag for amounts (500/1000/2500/5000)

i need to assign each select option a value then * it by the amount select

am i best using onchange/an array or ditching select tags for something easier

any help greatly appreciated

Marty

hi,

This is my proble, I have some controls(textbox's,dropdown's),and using javascript,tab order,when i press "Enter" key the tab order 1 is not working(The cursor is focussed in the control which is tab order is 1, not moved to tab order 2)

please give a solution.

NARASIMHA RAO K.

Hello guys,
please help me in building an order form, the details.
The order form consist of text box product quantity, unit price, total price, sub total price, tax, discount, grand total quantity and grand total price.
There are 8 products so there will be 8 product quantity, unit price, total price text boxes. When a user enter the product quantity and unit price, the total price column should be automatically calculated e.g. if product quantity is 8, unit price is 2 then the total price should come to 16. The sub total price will be automatically calculated which should be the addition of all total prices so as the product quantity. The user will enter the tax and discount amount which should be calculated as percentage. Tax will be added to sub total and discount will be subtracted from sub total and then the total price will be displayed in the grand total text box.

Please help me to develop this form.

Thank You

Hi,

I need help with my javascript codes to finish my order form.

The first problem I am encountering is this:

I need the quantity to appear automatically in the total quantity for sub total.

how is this?

I have assigned TotalQuantity.value for the quantity.

Thank you.

You can see the image here.
http://img821.imageshack.us/i/oderform.jpg/

Code:

 strapplicantid=document.getElementById('applicantid').value;
$.get("spt.asp"+ '?id=' + strapplicantid + '&rnde='+ Math.round(Math.random() * 10000), function(data){
   alert("Data Loaded: " + data);
    
 });
alert("here");

why is the alert("here") happenign before the alert dataloaded.
I want to be albe to load the html into the variable data and then use that variable. How is this possible to do?