|
JavaScript - Absolute Positioning Of Nested Elements
I am working on a puzzle that produces a container div.
Within that div are produced a grid of 9.16. or 25 tiles. The tiles are positioned absolutely so I can be sure of their relative placement. The container div width and height is calculated according to a preset tile width and height (square actually). So the width of the container should adjust to either 3,4 or 5 tile widths and heights. The trouble is that the offset position of the top left tile is different relative to the container for each different set of tiles (even though it is supposed to be the same position relative to the container for each). I do this so I can apply dragging to the container div. The tiles will follow the container when it is moved and the game will not loose its place when tiles swap locations. (one tile is elected as blank, and tiles, one to left, right, top or bottm, with game content, will swap location with blank when clicked) Sample posted at http://www.jekillen.com/jekillen/con...e_dev_ALT.html Similar TutorialsThis may be a basic programing problem but I am writing a function to validate a form using a bunch of else-if statements and encounters a problem when I use nested if/else-if statements. It will not continue on to the next else-if, after it returns false. Code: // to check each entry on the form and alert user if entry is invalid.
function checkform(){
var checkssn = /(\d{3})-(\d{2})-(\d{4})/;
var checkphone = /(\d{3})-(\d{4})/;
var checkname = /[a-zA-Z]+(\.|,|\s)*/;
var checkzip = /(^967|^968)\d{2}(-\d{4})?$/;
// check to see if user have selected an Election
if (!document.f1.elections[0].checked && !document.f1.elections[1].checked && !document.f1.elections[2].checked && !document.f1.elections[3].checked) {
window.alert("Please select an Election!")
return false;
// check to see if user entered a valid SSN
} else if ( checkssn.test(document.f1.ssn.value) == false){
window.alert("[1]. Please enter a valid social security number in the format ddd-dd-ddd");
return false;
// check to see if user entered a valid home telephone number or business telephone number
}else if ( document.f1.home_phone.value == '' && document.f1.business_phone.value == '') {
window.alert("[4]. Please enter a Home or Business telephone number!")
return false;
} else if ( document.f1.home_phone.value != ''){
if (checkphone.test(document.f1.home_phone.value) == false){
window.alert("[4]. Please enter a valid home phone number in the format ddd-ddd");
return false;
}
} else if ( document.f1.business_phone.value != ''){
if ( checkphone.test(document.f1.business_phone.value) == false){
window.alert("[4]. Please enter a valid business phone number in the format ddd-ddd");
return false;
}
// check to see if user entered a valid Name
}else if ( checkname.test(document.f1.lastname.value) == false){
window.alert("[5]. Last Name can only consist of letters, periods(.), commas(,) and spaces");
return false;
}else if ( checkname.test(document.f1.firstname.value) == false){
window.alert("[5]. First Name can only consist of letters, periods(.), commas(,) and spaces");
return false;
The problem occurs when it validates the phone numbers. When a valid number is entered, it will not move to the next else-if statement to validate the name. It's been years since I program in Java/C, so I'm a bit rusty. Any help is appreciated. -Alex Hey Guys, I'm currently a seasoned programmer who is in a programming class at my school. We're currently learning advanced JavaScript, and we're on the topic of nested loops. After teaching us about for and while loops, my teacher gave us a little puzzle to solve. It's kind of difficult to explain, but I'll give you guys my current code and what it outputs. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Word Reversal</title>
<script type="text/javascript">
var ask = prompt("How many words do you want?","");
while (ask < "1")
{
alert("You have to have at least one word!");
var ask = prompt("How many words do you want?","");
}
var num = parseInt(ask) + 1;
var final = "";
for (var i=1; i < num; i++)
{
var word = prompt("What's word " + i + "?");
final = final + "Word " + i +": " + word + "<br/>";
}
</script>
</head>
<body>
<script type="text/javascript">
document.writeln(final);
</script>
</body>
</html>
The current output, when the user wants two words, and word 1 is one and word 2 is two, comes out to be: Code: Word 1: one Word 2: two Which is great, but the only problem is, this is what the output's supposed to be: Code: Word 2: two Word 1: one I'm stumped. I've had numerous programming challenges in my life which I've solved, but I'm not sure where to go next on this one. The script is supposed to use a nested loop, but what goes in what loop to reverse the order of the user's input? I asked my teacher for help, but he told me "Ask someone else." I asked another seasoned programmer in my class, who was just about as stumped as I was, so I went back to my teacher. "Well, ask another person" he replied. And can you believe this guy has a Master's Degree of Computer Science? So I'm asking you guys: the community. I hope someone will be able to help me. On top of that, I have to help and tutor two special education students in my class on this kind of stuff during class, and they can't get the project done until I get it done, as they learn from analyzing and copying my work (which my teacher told me to do). They get upset when they have nothing to code, and they end up goofing off the entire period, or using it as a study hall. I need to get them back on track, so we can move on to the next project. Please help me with this code - it would be greatly appreciated. Thank you! OK i'm trying to make an affiliate section for my page in javascript, I used double arrays and it's terribly coded. Please help. I'm new to this... Code: <html>
<body>
<script type="text/javascript">
var alley = new Array();
alley[0] = new Array( "http://stereo.b1.jcink.com/", "http://i49.tinypic.com/5klkb6.gif", "Stereo Wired" );
alley[1] = new Array ( "http://s1.zetaboards.com/N2010/", "http://sixpop.com/files/246/n2010.png", "N2010" );
alley[2] = new Array ( "http://theipodnation.net", "http://img15.imageshack.us/img15/1043/affiipod.png", "The Ipod Nation" );
for ( i = 3; i < alley.length; i++ ) {
for ( m = 0; m < alley[i].length; m++ ) {
document.write(" <a href='" + alley[i][m][0] + "'><img src='" + alley[i][m][1] + "' alt='" + alley[i][m][2] + "' /></a> ")
}
}
</script>
</body>
</html>
I'm trying to reuse some code in a different context to do a different job. The code to be reused contains hundreds of lines similar to a = new b.c.d(e,f) with different value for e and f. I need to create a new user defined object with the structure b.c.d. I've made numerous attempts along the lines of: Code: function d (e, f) {
this.e = e;
this.f = f;
}
function c () {
this.d = d (e, f);
}
function b () {
this.c = c;
}
var a = new b.c.d("test", "message");
with various permuations of functional declarations. However I get error message "Object expected" or "b.c.d is null or not an object" at the final line of the example. It works with the test line var a = new d("test", "message") but not when I start to build up the expression. How should I define of b.c.d? Hi I need help to finish this code with using nested if statements A price of a ticket to a passenger will be: First Class 500 Economy Class (with meal) 400 Economy Class (without meal) 200 How I can write a JavaScript code according to the following specifications: a. Read the class that the passenger wants to travel on. b. If the class is the first class, print the price of ticket. c. If the class is the economy class, ask the user if he/she wants a meal on the flight. Then print the price of the ticket according to the response of the passenger. The program should simply accept one possible strings the user enters; it is not required to work for all possible inputs such as First, first, FIRST or Yes , yes, YES. This is the code which I have been trying { var inputNum = prompt("Enter the class you want\n first class?\neconomy? :"); if (isNaN(inputNum)) { if (inputNum.match(/first class/)) { document.write("<h1><center>your Ticket is 500<\center><\h1>"); } else { prompt("<h1>if you want a meal on the flight press OK <\h1>"); document.write("<h1>your ticket is 400<h1>,"); } } Hello codingforums.com! Right, this is probably going but such a stupid newbie thread but here goes.. I've finally got myself into gear to start learning javascript. I've been watching video tutorials, learning from websites and simply learning by error. I understand the concept of for loops, but the whole nested thing doesn't seem to click for some reason. I thought i understood and managed to write a piece of code that constantly writes '*' across the screen. Could someone with some pretty damn good knowledge of javascript be able to walk me through step by step of my script to explain what actually is happening? It would help loads. here is the script, many thanks!! <script type="text/javascript"> var counter = 0; function writeStars(){ for(i=0;i<1;i++){ for(a=0;a<=counter;a++){ document.write("*"); } counter++ document.write("<br />"); } } setInterval("writeStars()", 200); </script> Hello. I was wondering if there is a way to call a second Javascript function from within the first. For example: <script>...call first function...</script> Inside first function: If (a==1) <script>...call second function...</script> else (a==2) <script>...call third function...</script> My thinking as to why I would need this is because I need to access two different Google Maps API codes. If that isn't possible, does anyone have any other suggestions? Hello everyone! I just thought this might require some javascript, so I posted this here. Anyway, how do I create an element that is absolutely positioned first, and then, when it goes to the top of the page, it becomes fixed? Thanks Lucas Hi there, am working on an assignment to replicate the caesar cipher. i've written a function to move the cipher text one postion to the right and it works. i'm now trying to write another function that calls on the first where the signal character and index character do not match. The function then returns a new array. Here is the first function and it's test call: Code:
function right(letterArray)
{
var lowerArray = new Array(letterArray.length);
for (var letter = 0; letter < letterArray.length; letter = letter + 1)
{
lowerArray[letter] = letterArray[letter - 1];
if(letter == letterArray.length - 1)
{
lowerArray[0] = letterArray[letterArray.length - 1];
}
}
return lowerArray;
}
function testTask02()
{
right(cipherArray)
window.alert(right(cipherArray));
// calls the right() function with cipherArray, an array of lower case
// characters as an argument.
// displays the return value in a dialogue box.
}
And here is the bit i'm having trouble with: Code: function rotateToPosition(signalCharacter, indexCharacter, plainAlphabet, cipherAlphabet)
{
var resultArray = new Array(cipherAlphabet.length);
for (var copy = 0; copy < cipherAlphabet.length; copy = copy + 1)
{
resultArray[copy] = cipherAlphabet[copy];
resultArray[indexCharacter] = resultArray[copy];
}
var signalPosition = signalCharacter;
for (var position = 1; position < plainAlphabet.length; position = position + 1)
{
if (plainAlphabet[position] == plainAlphabet[signalPosition])
{
signalPosition = position;
}
}
while (resultArray[indexCharacter] != plainAlphabet[signalPosition])
{
right(resultArray);
}
return resultArray;
}
function testTask03()
{
rotateToPosition('A', 'g', plainArray, cipherArray)
window.alert(rotateToPosition('A', 'g', plainArray, cipherArray));
// calls the rotateToPosition() function with signal character,
// index character, an array of upper case letters and an
// array of locwer case letters as arguments.
// displays the return value in a dialogue box
//TO DO TASK 3 (iii)
}
Been working on this for hours and my brain is fried! If anyone can point me in the right direction that would be awesome. Many thanks I'm running into issues while trying to make some simple code to loop through and display different combinations of 3 colours. I want to show 3 boxes on screen and then loop through/increment each possible combination of colours. For simplicity's sake I'm trying to go from black to white in each box like this: (box1rgb/box2rgb/box3rgb) step 1: 000 000 000 step 2: 000 000 111 step 3: 000 000 222 . . . step 256: 000 000 255255255 step 257: 000 111 000 step 258: 000 111 111 step 259: 000 111 222 . . . step 512: 000 111 255255255 step 513: 000 222 000 step 514: 000 222 111 . etc. Yes, I know the thing will take a long time to complete! The colour is being set by the statement document.getElementById("box#").style.backgroundColor = "rgb(" + p1 + "," + p1 + "," + p1 + ")"; where p1 is the incrementing variable. Firstly I tried to do it using nested "for" loops. Code: for (p3=0;p3<=255;p3++) {
document.getElementById("box03").style.backgroundColor = "rgb(" + p3 + "," + p3 + "," + p3 + ")";
for (p2=0;p2<=255;p2++) {
document.getElementById("box02").style.backgroundColor = "rgb(" + p2 + "," + p2 + "," + p2 + ")";
for (p1=0;p1<=255;p1++) {
document.getElementById("box01").style.backgroundColor = "rgb(" + p1 + "," + p1 + "," + p1 + ")";
}
}
}
But of course the code executes far too rapidly for each combination to be seen. It all chewed up lots of CPU and nothing was smooth. To slow the process, I tried a single recursive loop using a timeout statement: Code: function loopandshow() {
document.getElementById("box01").style.backgroundColor = "rgb(" + currentcolour + "," + currentcolour + "," + currentcolour + ")";
currentcolour += 1;
if (currentcolour <= 255) window.setTimeout("loopandshow();", 20);
}
This worked smoothly for a single box but I couldn't work out how to nest this format 3 levels deep and have each level increment only when the deeper level had completed the cycle. Any advice would be gratefully appreciated. Thanks in advance. I have the below html. In the below code, I have an onmouseover and onmouseout on the parent DIV of three nested DIVs. Whenever I mouse INTO the nested DIVs, the onmouseout event fires for the outermost DIV. Is there a way to prevent this? <html> <head> <script language="JavaScript"> function mouseOnDiv() { alert("mouseon outerDiv"); event.cancelBubble = true; } function mouseOffDiv() { alert("mouseoff outerDiv"); event.cancelBubble = true; } </script> </head> <body> <div style="border:1px solid red; position:absolute" onmouseover="mouseOnDiv()" onmouseout="mouseOffDiv()"> This is some text <div style="border:1px solid blue; position:relative"> This is some text in the middle div <div style="border:1px solid green; position:relative"> <ul> <li>Item 1</li> </ul> </div> </div> </div> </body> </html> I'm having trouble getting this nested loop to work. It only outputs the last image and I want it to loop through the images. Code: function loadgallery (){
var picarray= new Array ()
picarray[0]="pic1.jpg"
picarray[1]="pic2.jpg"
picarray[2]="pic3.jpg"
picarray[3]="pic4.jpg"
picarray[4]="pic5.jpg"
picarray[5]="pic6.jpg"
for (j=0;j<picarray.length ;j++ ){
pic=picarray[j]
var tdarray = document.getElementsByTagName("td");
for (i=0;i<tdarray.length;i++ ){
tdarray[i].innerHTML='<select name="select1"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option></select><img src="pics/'+picarray[j]+'">';
}
}
}
window.onload=loadgallery;
Hopefully this is something easy to fix. I am using Javascript in Adobe Pro 9 for a form and though I managed to get a different if/else to work, this nested one is giving me fits. If anyone could correct, I would like to know why it fails. I get the following error which highlights the blue line of code: SyntaxError: syntax error 169: at line 170 Code: var ACDex = this.getField("ACDex");
var ArmorMaxDex = this.getField("ArmorMaxDex").value;
var ShieldMaxDex = this.getfield("ShieldMaxDex").value;
if(ArmorMaxDex => ShieldMaxDex){
if(ArmorMaxDex => DexMod){
ACDex.value = ArmorMaxDex;
}Else{
ACDex.value = DexMod;
}
}Else{
if(ShieldMaxDex => DexMod) {
ACDex.value = ShieldMaxDex;
}Else{
ACDex.value = DexMod;
}
}
I have a nested if that is not working, well I have two which are pretty much the same code apart from one has more conditions. The one with the least does not work. It is basically a quick password checker to see if the typed password matches the previously typed and then display an image according. Code: function checkPass(id){
var pass = document.getElementById(id).value;
if(pass == "")
{
notValid(id);
}
else if(id == "pwd2" && pass !== document.getElementById("pass").value || document.getElementById("pass").value == "")
{
notValid(id);
}
else
{
isValid(id);
};
};
If it is blank it calls notvalid and if the second if flags it calls notvalid however if it is ok then it does not do the else. Any ideas?? Thanks. js code is as follows: Code: uniqueNo=(function(){
var no=0;
return function(){ return no++; }
})()
document.writeln(uniqueNo()); // 1st time call
document.writeln(uniqueNo()); // 2nd time call
document.writeln(uniqueNo()); // 3rd time call
the result is 1 2 3 why after the 2nd call, the declaration 'var no=0' is useless -- seems 'no' is updated and stored each time it is called? many thanks Looks to me like this ought to work, but since I'm here obviously it doesn't. Regarding the HTML in question, there are divs and they do contain child elements. I'm trying to write this in as generic a fashion as possible, without using IDs or other means of targeting elements. And yes, the jQuery library is referenced/linked to the page. Any pointers much appreciated. Thank you <script type="text/javascript"> // <![CDATA[ var x=0; var h=1000; var Divs=document.getElementsByTagName("div"); function fades() { var i=0; var s=0; $("div").fadeOut(1000); while(x<Divs.length) { setInterval('fadeIns()',h); } } function fadeIns() { if(i<100) { Divs[x].childNodes[s].style.opacity=i/100; i++; } else if(s<Divs[x].childNodes.length) { clearInterval(h); s++; i =0; setInterval('fadeIns()',h); } else { clearInterval(h); x++; fades(); } } window.onload=fades; // ]]> </script> Okay, I have another problem. I really can't figure out why it's not working in IE. The only problem I can think of would be using nested loops. Here's the part of the code that isn't working. It's not generating an error, it's just not returning anything. I know you guys hate when I post entire code, so I trimmed it down as much as I can. It's referring to an already stated xml document with xmlDoc. And it's goal is to return a table of rows that meet certain criteria. If you can see any syntax errors that explorer would not like, that's really what I'm asking for. Thanks in advance, Julian Code: var entries = Array.prototype.slice.call(arguments, 1);
var headers = 0;
for (var i=0;i<xmlDoc.getElementsByTagName('entry').length;i++) {
var x = headers;
headers += xmlDoc.getElementsByTagName('header').length;
var id = xmlDoc.getElementsByTagName('entry')[i].getAttribute("id");
if (entries.indexOf(id) >= 0) {
content += '<tr>';
for (x;x<headers;x++) {
content += '<td>' + xmlDoc.getElementsByTagName('item')[x].firstChild.nodeValue + '<\/td>';
}
}
content += '<\/tr>';
}
return content;
Sorry folks, Im not sure that I am using the correct terminology here. What i would like to do is sort an array based on the [SortBy] value, however this array is nested. For instance: ar.[SortBy]"PartNumber" ar.[0].[PartNumber]"123" ar.[0].[PartName]"Widget1" ar.[1].[PartNumber]"345" ar.[1].[PartName]"Widget2" ar.[2].[PartNumber]"456" ar.[2].[PartName]"Widget3" ar.[3].[PartNumber]"567" ar.[3].[PartName]"Widget4" Thanks! I'm having a javascript problem with nested elements. Consider an example in which you have two nested elements with element 2 being inside of element 1 and only element 1 has an onmouseout event handler. <div style="position:relative;border:1px solid red;width:300px;height:300px" onmouseout="alert('whatever')"> //element 1 <div style="position:absolute;border:1px solid blue;left:50%;top:50%;margin-left:-50px;margin-top:-50px;width:100px;height:100px">//element 2 </div> </div> The 2 problems here are as follows: 1- Moving the mouse pointer over element 2 from element 1 causes a onmouseout with element 1. But this is a minor problem. 2- Moving the mouse pointer from element 2 back to element 1 causes a mouseout with ,I believe, element 2 even though there is no onmouseout event handler here. This is a major problem. Is problem #2 due to possibly an automatic inheritance of the onmouseover handler from element 1 onto element 2 OR is it the result of event capturing or what else? I can't tell either way. If it's due to inheritance how do you stop this from taking place? The strange thing is that tutorials give this kind of scenario with element 2 inside of element 1 with both elements having the same event handler but they don't say what happens in this case with just one element having a specific event handler. Thank you. After struggling with this for the past 2 days, I've decided it is time to seek out some help. The program is a calculator to show the monthly payments required depending on if the terms are for 2, 3, 4, or 5 year financing. I have the following 4 variables that I need to be placed in the inner loop, but not sure how to do it. pay24, pay36, pay48, pay60 The following loop creates a 4 row x 2 column table which I need it to do, but the inner loop needs to show the value of the 4 variables above. Can someone assist me in this problem? Code: for ( var i=24; i<=60; i+=12 ) {
document.write("<tr>");
document.write("<td align=center>" + i + "</td>");
for ( var j = 2; j <= 2; j++ ) {
document.write("<td align=right>" + j + "</td>");
}
document.write("</tr>");
}
|
|||||||