JavaScript - Switch Menus + One More Related Question

Okay so if you go to this website:

http://gameusd.com/

You can pick your game & country -- say its world of warcraft US

And then you pick your realm and faction, and then it gives you the prices on those particular realms/factions.

What i wanted to know was if it was possible to somehow make a program that fetches the prices of EVERY single realm/faction and lists them all side by side and in order of lowest to highest price or whatever. Would massively appreciate if somehow could tell me if its possible. Because obviously doing it all manually would be a huge pain in the *** and take hours.

Hi guys, Im not sure my subject decsription gives an exact description of what i am after but i will try and explain my requirements a bit better.

I have an header menu there are items in this menu but there are a lot of them and if you try view on a normal 1024 x 760 you have to horizontal scroll to view all the items, but on my monitor 1920 x 1080 it is fine.
I don't want to do it this way since I hate having to scoll both horizontal and vertical. I would like to be able to change the items on this header to become a rollover dropdown menu when they would normally be hidden becuase of the screen width. I have seen this done before I am just unsure about how to implement this.

can anyone point me in the direction of some good resources for this?

Thanks

EDIT----------------------------------------------------------------------------------------------

I am using jQuery if that make it easier to fine a script that would do this

Hi Friends,
i have a smal task i.e
i have textbox1 ,botton,textbox2 when i enter 21 value then i click button its get in sama row values in textbox2.
i have xml file like this
<DATAPACKET >
<ROWDATA>
<R_ID>101</R_ID>
<R_NAME>R-12</R_NAME>
<R_TEMP>4.266</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>20</R_ID>
<R_NAME>R-22</R_NAME>
<R_TEMP>4.266</R_TEMP>
<R_COLOR>Green</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>21</R_ID>
<R_NAME>R-32</R_NAME>
<R_TEMP>4.266</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>104</R_ID>
<R_NAME>R-134A</R_NAME>
<R_TEMP>4.246</R_TEMP>
<R_COLOR>Light Blue</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>21</R_ID>
<R_NAME>R-290</R_NAME>
<R_TEMP>4.246</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>31</R_ID>
<R_NAME>R-401A</R_NAME>
<R_TEMP>4.246</R_TEMP>
<R_COLOR>Pink</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>32</R_ID>
<R_NAME>R-401B</R_NAME>
<R_TEMP>4.264</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>108</R_ID>
<R_NAME>R-402A</R_NAME>
<R_TEMP>4.426</R_TEMP>
<R_COLOR>Light Greem</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>129</R_ID>
<R_NAME>R-402B</R_NAME>
<R_TEMP>4.266</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>110</R_ID>
<R_NAME>R-404A</R_NAME>
<R_TEMP>4.246</R_TEMP>
<R_COLOR>Orange</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>121</R_ID>
<R_NAME>R-407A</R_NAME>
<R_TEMP>4.267</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>122</R_ID>
<R_NAME>R-408A</R_NAME>
<R_TEMP>4.267</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>113</R_ID>
<R_NAME>R-409A</R_NAME>
<R_TEMP>4.267</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>134</R_ID>
<R_NAME>R-407C</R_NAME>
<R_TEMP>4.264</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
<ROWDATA>
<R_ID>115</R_ID>
<R_NAME>R-410A</R_NAME>
<R_TEMP>4.426</R_TEMP>
<R_COLOR>White</R_COLOR>
</ROWDATA>
</DATAPACKET >
then i try this hear i get all values
function gettxt() {
results = new Array;
var searchterm = document.getElementById("searchme").value;
if (searchterm == null || searchterm == "") {
alert("Enter textbox value");
return false;
}
var istrlen1 = searchterm.length;
var tempname1;
if (istrlen1 == 1) {
tempname1 = searchterm;
}
if (istrlen1 == 2) {
tempname1 = searchterm;
}
if (istrlen1 == 3) {
tempname1 = searchterm;
}
if (istrlen1 == 4) {
tempname1 = searchterm;
}
for (i = 0; i < x.length; i++) {
var name = x[i].getElementsByTagName("R_ID")[0].firstChild.nodeValue;
var name1 = x[i].getElementsByTagName("R_NAME")[0].firstChild.nodeValue;
var exp = new RegExp(tempname1, "i");
if (name.match(exp) != null) {
y = y + 1;
results.push(name1);
}
}
textbox2.value = results;
}
i try the above code hear small problom when i enter 21 and click button its display 21,121,123... related values i dont want like that
for example textbox1=21 buttonclick textbox2=R-32,r-407A,r-408A like that i dont want like that
i want textbox1=21 buttonclick textbox2=R-32 only in same row value
please any one knows well in js please resolve my problom

I already got the following JavaScript code working somewhat (originally taken from a different thread in a different forum and tweaked to give qty ceiling [10] and floor [2] values). However, it seems to work for only one qty variable, and the subtractQty function doesn't seem to subtract properly (at least in Opera 11).

Code:

<html>
	<head>
		<title></title>
		<style type="text/css">
		
		</style>
		<script type="text/javascript">
		function subtractQty(){
			var x=document.getElementById("qty").value;
			var y=document.getElementById("maxqty").value;
			if(x - 1 < 2 || y + x <= 40)
				return;
			else {
				document.getElementById("qty").value--;
				document.getElementById("maxqty").value=y+x*4;
				document.getElementById("textqty").innerHTML = document.getElementById("qty").value;
				document.getElementById("textmaxqty").innerHTML = document.getElementById("maxqty").value;
			}
		}
		function additionQty(){
			var x=document.getElementById("qty").value;
			var y=document.getElementById("maxqty").value;
			if(x >= 10 || y - x < 2)
				return;
			else{
				document.getElementById("qty").value++;
				document.getElementById("maxqty").value=y-x*4;
				document.getElementById("textqty").innerHTML = document.getElementById("qty").value;
				document.getElementById("textmaxqty").innerHTML = document.getElementById("maxqty").value;
			}
		}
		</script>
	</head>
	<body>
		<form name="f1">
			<input type='hidden' name='qty' id='qty' value=2 />
			<input type='hidden' name='maxqty' id='maxqty' value=40 />
			<div id="textqty">2</div>
			<input type='button' name='subtract' onclick='javascript: subtractQty();' value='-'/>
			<input type='button' name='add' onclick='javascript: additionQty();' value='+'/>
			<div id='textmaxqty'>40</div>
		</form>
	</body>
</html>

What I'd want to happen would be the following: if let's say we have 5 pairs of buttons, making it look something like this:
A: 2 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
D: 2 [+] [-]
E: 2 [+] [-]
maxqty: 40
Whenever the user clicks on the [+] button for A, it would subtract (current value + 1) * 4 from maxqty and raise A to 3, then when the user clicks on the [+] for C, it would subtract (current value + 1) * 4 from maxqty and raise C to 3, without having to copy paste multiple functions.

I'm already thinking of arrays, but being more used to PHP than Javascript -- and I'm thinking I might actually have to use AJAX for this, although I'm really in the dark with AJAX in particular -- I'm rather confused and somewhat stumped on the coding.

Suggestions?

im new to webpage programming,but do hav some basic c/c++ programming skill. in order for me to understand the following codes, what should i read?
i had read thru w3schools.com html and javascript tutorials but it is stil difficult for me to understand the codes,can somebody help me?thanks!


Code:

function getQuery() {
                var scoping             = "&project=${currentProject}&projectScopeUp=" + projectScopeUp + "&projectScopeDown=" + projectScopeDown;
                var paging              = "&pagesize=100";
 
                return {
                    "currentProject"   : "/iteration:current/project",
                    "#storyType"        : "/typedefinition?query=(Name = \"Hierarchical Requirement\")",
 
                    "taskUnit"          : "${iteration/workspace/workspaceConfiguration/taskUnitName}",
                    "storyStates"       : "${#storyType/attributes[name=schedule state]/allowedvalues/stringvalue}",
 
                    "iteration"         : "/iteration:current?fetch=name,objectid&order=StartDate",
                    "iterations"        : "/iterations?fetch=name,objectid&order=StartDate,Name&project=${currentProject}&projectScopeUp=false&projectScopeDown=false" + paging,
 
                    "users"             : "/users?fetch=displayname,loginname,emailaddress,objectid" + paging,
 
                    "tasks"             : "/tasks?fetch=taskindex,name,objectid,formattedid,owner,blocked,estimate,todo,actuals,state,workproduct&query=(Iteration = ${iteration})" + scoping + paging,
 
                    "stories"           : "/hierarchicalrequirement?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal,tasks&order=Rank&query=(Iteration = ${iteration})" + scoping + paging,
                    "defects"           : "/defect?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal&order=Rank&query=(Iteration = ${iteration})" + scoping + paging,
                    "defectsuite"       : "/defectsuite?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal&order=Rank&query=(Iteration = ${iteration})" + scoping + paging,
                    "testsets"          : "/testset?fetch=rank,blocked,formattedid,name,objectid,owner,project,schedulestate,taskestimatetotal,taskremainingtotal,taskactualtotal&query=(Iteration = ${iteration})" + scoping + paging
                };
            }

I posted this once, but it disappeared, and I have no notifications that I did anything wrong. I read the rules before posting and wasn't breaking any so I am not sure why it disappeared but here goes again.

I am trying to learn Javascript (particularly OOP) from a series of screencasts by Douglas Crockford. I have developed a theoretical "game" to build to illustrate it to myself better, and learn by example.

I must be misunderstanding how inheritance works, because my code is not producing the results I thought it would.

Here is what I have, followed by an explanation of my understanding.
Code:

$(function() {

function object(o) {
	function Funct() {}
	Funct.prototype = o;
	return new Funct();
}


soldier = {
      pointsCost: 0,
      movement: "1 Infantry Block",
      validTargets: {},
      weapons: {
			"Main Weapon": {
				"Weapon Type": "M4 Carbine",
				"Fire Range": 12
			},
			"Secondary Weapon": {
				"Weapon Type": "JCP .45",
				"Fire Range": 3
			}
		}
};

var rifleman = object(soldier); 
rifleman.pointsCost += 10;
rifleman.validTargets.target1 = "Infantry"
rifleman.weapons["Secondary Weapon"]["Weapon Type"] = "";
rifleman.weapons["Secondary Weapon"]["Fire Range"] = "";


var heavyGunner = object(soldier);
heavyGunner.pointsCost += 20;
heavyGunner.validTargets.target1 = "Infantry";
heavyGunner.validTargets.target2 = "Light Armor";
heavyGunner.weapons["Main Weapon"]["Weapon Type"] = "SAW M249";
heavyGunner.weapons["Main Weapon"]["Fire Range"] = 12;
heavyGunner.weapons["Secondary Weapon"]["Weapon Type"] = "";
heavyGunner.weapons["Secondary Weapon"]["Fire Range"] = "";
 
var sniper = object(soldier);
sniper.pointsCost += 30;
sniper.validTargets.target1 = "Infantry";
sniper.weapons["Main Weapon"]["Weapon Type"] = "Savage .308";
sniper.weapons["Main Weapon"]["Fire Range"] = 20;
sniper.weapons["Secondary Weapon"]["Weapon Type"] = "JCP .45";
sniper.weapons["Secondary Weapon"]["Fire Range"] = 3;

 
var demolitions = object(soldier);
demolitions.pointsCost += 30;
demolitions.validTargets.target1 = "Infantry";
demolitions.validTargets.target2 = "Light Armor";
demolitions.validTargets.target3 = "Artilery";
demolitions.validTargets.target4 = "Structures";
demolitions.weapons["Main Weapon"]["Weapon Type"] = "SMAW MK153";
demolitions.weapons["Main Weapon"]["Fire Range"] = 16;
demolitions.weapons["Secondary Weapon"]["Weapon Type"] = "M1014 Combat Shotgun";
demolitions.weapons["Secondary Weapon"]["Fire Range"] = 1; 


var infantry = { 

    rifleman: rifleman, 
    
    heavyGunner: heavyGunner, 
     
    sniper: sniper, 
     
    demolitions: demolitions 
 
};



console.log(infantry);

});

I start by creating an object function that accepts an object passed in, and sets it to the prototype of a constructor (that would allow me to create a new object linked to, and inheriting from, the initial passed in object)

I initialized a solider object literal, and pass that into the object function while creating 4 new objects (rifleman, heavyGunner, sniper, demolitions)
These four should inherit from and customize upon the soldier object.

The way I understood inheritance is that the new objects (example. rifleman) would inherit properties from the old object (i.e. soldier) and change or add properties, affecting only the new (rifleman) object but not changing the old(solider) object.

this works ok somewhat in my example, until it comes to nested objects.
In the above example I have objects as values for some Object's properties. (i.e. validTargets and weapons) When I change or add these, all of the new objects seem to inherit the last declarations, from demolitions, as if demolitions is actually changing that part of the soldier object so that the other's inherit those properties.

From my viewpoint, I expected these values to not be changed and that the 4 infantry types had no link to each other, but only to the soldier object.

I apparently misunderstood something, or coded something wrong.

Some minor notes:
-I will be updating most of the "string" values to be objects, so for instance, the validTargets value of "Infantry" would actually be the infantry object, stating that any of the 4 solider types would be a valid target.
- I intend to create weapons as their own viable objects in the future, and pass those objects instead of "strings"
- I intend to extend this (once this is working) to create an armor object that contains armor type units, similar in structure to the infantry object.
- If I can get this all to work, I may make this into a "simple" dice style battle game. but that is way off, I just want to get this nesting of objects to work with inheritance for now.

Thanks in advance for any help you can provide.
Here is a link to the "live" example. (not much different there except if you have firebug you can see the console.log method showing the objects, and how they are inheriting in properly from my POV.)

Link to Live example...


Blue

Hello:
I have a Fire Fox 3.5.2 error console message regarding a DHTML script:
Error: uncaught exception: [Exceptions: ... "Not enough arguments" nsresult
"0x8057001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" Location: "JS frame :: (file path) upHandler :: line 102" no data]

The line referenced is:
document.removeEventListener('mouseup', upHandler);

It is part of a drag function that is applied to a container div.

I have successfull used this code block, copied from Orielly's Javascript:
The Definitive Guide, 4th Edition in another project.

The only real difference is that the code in the working use is div tags hard coded. In the one giving me problems, the div tags are written using document.write() in a function that is called in the body of the document when the page loads.
I could supply the code context, but it is several hundred lines.
The project is not available at present on the web to surf to but the
one project that works is
jekillen.com/jekillen/content/web_design/OOP_panel/test_OOP_DEV_ALT.php
The code in question is 'beginDrag'. There is a panel called fortune cookie
which the user can drag, and a panel called 'Advisory' that the user can also
drag around after clicking button labeled 'message'.
Any info, suggestions, advice?
Thanks in advance.
Jeff K

Hey guys.

I have a weird issue (you kind of have to see it for yourself to understand). If you double click on the next or previous button quickly (within 500 miliseconds of each other) it creates a double of the next slide.

http://insidehb.com/imageofday/

Let me know if you can help.

Thanks.

Dear all

I came across the following very simple code for dragging a square around using javascript. It is drawn on the html5 canvas. Despite being very simple it has certainly exposed some gaps in my pretty flakey javascript knowledge. I am generally ok with the idea of drag and drop (i.e. start drag on mouse click, stop drag on mouse release) but my questions are as follows:

(1) I cannot see where the variable e is defined, yet it is used all the time.

(2) In the init funciton at the bottom, an onmousedown listener seems to be attached to the canvas. However it equals the function myDown, but myDown doesn't have parentheses after it. So the myDown function is not actually going to be exectuted. So what is it doing instead?

Thanks in advance. I have tried to research this myself but haven't had any success yet.

Matt



Code:

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>Canvas Drag and Drop Test</title> 
</head> 
<body> 
<section> 

<div> 
<canvas id="canvas" width="400" height="300"> 
This text is displayed if your browser does not support HTML5 Canvas. 
</canvas> 
</div> 

<script type="text/javascript"> 

var canvas; 
var ctx; 
var x = 75; 
var y = 50; 
var dx = 5; 
var dy = 3; 
var WIDTH = 400; 
var HEIGHT = 300; 
var dragok = false; 

function rect(x,y,w,h) { 
 ctx.beginPath(); 
 ctx.rect(x,y,w,h); 
 ctx.closePath(); 
 ctx.fill(); 
} 

function clear() { 
 ctx.clearRect(0, 0, WIDTH, HEIGHT); 
} 

function init() { 
 canvas = document.getElementById("canvas"); 
 ctx = canvas.getContext("2d"); 
 return setInterval(draw, 10); 
} 

function draw() { 
 clear(); 
 ctx.fillStyle = "#FAF7F8"; 
 rect(0,0,WIDTH,HEIGHT); 
 ctx.fillStyle = "#444444"; 
 rect(x - 15, y - 15, 30, 30); 
} 

function myMove(e){ 
 if (dragok){ 
  x = e.pageX - canvas.offsetLeft; 
  y = e.pageY - canvas.offsetTop; 
 } 
} 

function myDown(e){ 
 if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + 
 canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && 
 e.pageY > y -15 + canvas.offsetTop){ 
  x = e.pageX - canvas.offsetLeft; 
  y = e.pageY - canvas.offsetTop; 
  dragok = true; 
  canvas.onmousemove = myMove; 
 } 
} 

function myUp(){ 
 dragok = false; 
 canvas.onmousemove = null; 
} 

init(); 
canvas.onmousedown = myDown; 
canvas.onmouseup = myUp; 

</script> 

</section> 
</body> 
</html>

Hi All.....I am new to javascript coding ...I am unable to forward from my jsp to servlet file via javascript
below is my code....

[JSP CODE]

<html>
<body>
<form action="Bean" method="get" name="form1">

<ul>
<li><a onclick="javascript:view('vprod')" name="vprod">View</a></li>
</ul>

[Script Code]

function view(value)
{

alert(value);
document.form1.action="/Bean";
document.form1.submit();

}


Please can one help me in this regard.....Thanks in Advance

Hi friends,

i have xnl file like

<DATAPACKET >
<data1>
<R_ID>101</R_ID>
<R_PRE>38</R_PRE>
<R_PRE2>39</R_PRE2>
<R_TEMP>8.35</R_TEMP>
<R_TENP2>0.64</R_TENP2>
</data1>
<data1>
<R_ID>102</R_ID>
<R_PRE>36</R_PRE>
<R_PRE2>37</R_PRE2>
<R_TEMP>7.23</R_TEMP>
<R_TENP2>1.21</R_TENP2>
</data1>
<data1>
<R_ID>103</R_ID>
<R_PRE>34</R_PRE>
<R_PRE2>36</R_PRE2>
<R_TEMP>7.21</R_TEMP>
<R_TENP2>1.95</R_TENP2>
</data1>
<data1>
<R_ID>104</R_ID>
<R_PRE>32</R_PRE>
<R_PRE2>35</R_PRE2>
<R_TEMP>6.25</R_TEMP>
<R_TENP2>2.30</R_TENP2>
</data1>
<data1>
<DATAPACKET >

then i have textbox...when i type 101 its go and get all data in the row in text area like

101
32
6025
2.30

please give me any idea how to do this

i m try this
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "Refrigerater.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("ROWDATA");

//x = xmlDoc.getElementsByTagName("data1");

function displayInfo(selBox) {
x = xmlDoc.getElementsByTagName("ROWDATA");
var col = (selBox.options[selBox.selectedIndex].text);
document.getElementById("show").innerHTML = "&nbsp;" + col;
}

Please resolve my problem

Thanks
Venkat.S

this is my javascript code:
Code:

var aaa, aab;
aaa = choo.chooserver0.checked;
aab = choo.chooserver1.checked;
k=(aaa==true)?0:(aab==true)?1:(aaa=true&&aab==true)? 'b2' : false ;

now when the checkbox with id chooserver0 is checked, it sets k's value to 0, and when checkbox with id chooserver1 is checked it sets its value to 1, but when both are checked it must set value to b2, but it sets value to 0, why?

and when i write it as:

Code:

var aaa, aab;
aaa = choo.chooserver0.checked;
aab = choo.chooserver1.checked;
k=(aaa=true&&aab==true)? 'b2' :(aaa==true)?0:(aab==true)?1: false ;

when box 1 is checked, it sets k= false, when box2 is checked it sets k= 'b2' and when both are checked it sets k = 'b2'... why is code doing so?

just a general question really... now that I've finally started using switches, it seems to me that they're just a big if /else if statement, with an else thrown in at the end for the default.

but that can't be right. I know that in javascript there are a million ways to achieve the same result, but why would they (whoever they are) go to the trouble of making two basic operations that do exactly the same thing?

to me it seems that switches are better for lots of conditions and if else is a quick way to work with two or three, but apart from readability, are there any inherent advantages in choosing one approach over the other?

all opinions appreciated, and I hope I don't start another argument.

Hello all

I have a video playlist useing iframe
http://alohainvesting.com/html5/Html5player.html

Is there a way to get same results without iframes?

i just want to switch items on nav to the wrapper window.

can this be done?

Thanks

Here is the code, in full:


<htmll">

<head><title></title>

<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
function checkGrade(grade, value) {

switch (grade) {

case "A":
if(grade == '90')
window.alert("Your grade is excellent.");
break;
case "B":
window.alert("Your grade is good.");
break;
case "C":
window.alert("Your grade is fair.");
break;
case "D":
window.alert("You are barely passing.");
break;
case "F":
window.alert("You failed.");
break;
}
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>

</head>
<body>

<form name="gradeForm"action="Your Grades">
<input type="text" name="grade" />
<input type="button" value="Check Grade" onclick="checkGrade(document.gradeForm.grade.value);" />

</form>

</body>

</html>

What's throwing me off is the "A" in the case. As well, "(document.gradeForm.grade.value)"

I need to make it a IF statement, but not sure how to call that function.