|
JavaScript - This Hanjie Puzzle Is Giving Me Fits!
Does anyone know how to make these things work? I have to make this hanjie puzzle and I have at least gotten the black squares to display. I have worked through all the directions three times and run it through the Firebug. I don't understand what it is asking for and don't know how to change the code to make this work, someone please help me!
Code: window.onload = setPuzzle;
var allCells = new Array();
function setPuzzle() {
var puzzleTable = document.getElementById("puzzleCells");
allCells = document.getElementsByTagName("td");
for (var i =0; i < allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
allCells[i].onclick = changeColor;
}
document.getElementById("solution").onclick = showSolution;
document.getElementById("hide").onclick = hideSolution;
document.getElementById("solution").onclick = showSolution;
document.getElementById("check").onclick = checkSolution;
document.getElementById("uncheck").onclick = uncheckSolution;
}
function changeColor(){
this.style.backgroundColor = (this.style.backgroundColor == "black") ? "white" : "black";
}
function showSolution(){
for(var i=0;i<allCells.length; i++) {
if(allCells.className == "dark"){
allCells[i].style.backgroundColor = "black";
} else {
allCells[i].style.backgroundColor = "white";
}
}
checkCount = 0;
}
function hideSolution() {
for(var i=0;i<allCells.length; i++) {
allCells[i].style.backgroundColor = "white";
}
checkCount = " ";
}
function checkSolution() {
var checkCount = 0;
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "black" && allCells[i].className != "dark") {
allCells[i].style.backgroundColor = "red";
} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
checkCount++;
}
return checkCount.value;
}
}
function uncheckSolution() {
for (var i = 0; i< allCells.length; i++) {
if (allCells[i].style.backgroundColor == "red") {
allCells[i].style.backgroundColor = "black";
}
checkCount = " ";
}
}
Similar TutorialsHi guys i am trying to make a sliding 15 puzzle in javascript. I have tried the code and I am able to scramble my board, however when I try to solve it some of my pieces go off the board on click and some even start to disappear on click. If anyone could help me with my for loop in my move function I would really appreciate it. I have posted my index and my game.js file which is my javascript i need help with. index.html Code: <?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Sliding Tiles</title>
<style type="text/css">
h1 {position:absolute; left:100px; font-family:arial}
p {position:absolute; left:100px; top:60px; color:red; font-family:arial; font-weight:bold}
.board {position:absolute; left:100px; width:400px; top:100px; height:400px; background-color:black; border-style:none}
div {position:absolute; width:94px; height:94px; background-color:aqua; border-style:solid; border-width:3px;
text-align:center; font-family:century; font-weight:bold; font-size:60px}
button {position:absolute; left:150px; width:300px; top:550px; height:50px;
background-color:silver; font-family:arial; font-weight:bold; font-size:30px}
</style>
<script src="game.js" type="text/javascript"></script>
</head>
<body>
<h1>Sliding Tiles
<a href="http://validator.w3.org/check?uri=referer">
<img src="valid-xhtml10.gif" alt="Valid XHTML 1.0!" style="border:0;width:88px;height:31px" /></a></h1>
<p>After starting a game, just click on the tile you'd like to move...</p>
<div class="board" id="board"></div>
<div id="tile1" style="left:100px; top:100px" onclick="move(1)">
1
</div>
<div id="tile2" style="left:200px; top:100px" onclick="move(2)">
2
</div>
<div id="tile3" style="left:300px; top:100px" onclick="move(3)">
3
</div>
<div id="tile4" style="left:400px; top:100px" onclick="move(4)">
4
</div>
<div id="tile5" style="left:100px; top:200px" onclick="move(5)">
5
</div>
<div id="tile6" style="left:200px; top:200px" onclick="move(6)">
6
</div>
<div id="tile7" style="left:300px; top:200px" onclick="move(7)">
7
</div>
<div id="tile8" style="left:400px; top:200px" onclick="move(8)">
8
</div>
<div id="tile9" style="left:100px; top:300px" onclick="move(9)">
9
</div>
<div id="tile10" style="left:200px; top:300px" onclick="move(10)">
10
</div>
<div id="tile11" style="left:300px; top:300px" onclick="move(11)">
11
</div>
<div id="tile12" style="left:400px; top:300px" onclick="move(12)">
12
</div>
<div id="tile13" style="left:100px; top:400px" onclick="move(13)">
13
</div>
<div id="tile14" style="left:200px; top:400px" onclick="move(14)">
14
</div>
<div id="tile15" style="left:300px; top:400px" onclick="move(15)">
15
</div>
<form action="">
<button onclick="initialize(); return false">Start a New Game</button>
</form>
</body>
</html>
game.js Code:
var rows = new Array(4)
rows[0] = new Array (4)
rows[1] = new Array (4)
rows[2] = new Array (4)
rows[3] = new Array (4)
function checkWin() {
var winner = false
var checker = new Array(4)
checker[0] = new Array (1, 2, 3, 4)
checker[1] = new Array (5, 6, 7, 8)
checker[2] = new Array (9, 10, 11, 12)
checker[3] = new Array (13, 14, 15, 0)
for (i = 0; i < 4; i++){
for (j = 0; j < 4; j++){
if (rows[i][j] == checker[i][j]){
winner = false
}
}
}
if (winner){
alert("Congratulations! You've Won!")
return true
}
return false
}
function move(tile){
var obj = document.getElementById('tile' + tile)
var win = false
for (i = 0; i < 4; i++){
for (j = 0; j < 4; j++){
if (rows[i][j] == tile){
if (j > 0 && rows[i][j - 1] == 0){
obj.style.left = (j - 2) * 100 + 'px'
rows[i][j - 1] = tile
rows[i][j] = 0
}else if (j < 3 && rows[i][j + 1] == 0){
obj.style.left = (j + 2) * 100 + 'px'
rows[i][j + 1] = tile
rows[i][j] = 0
}else if (i > 0 && rows[i - 1][j] == 0){
obj.style.top = (i - 2) * 100 + 'px'
rows[i - 1][j] = tile
rows[i][j] = 0
}else if (i < 3 && rows[i + 1][j] == 0){
obj.style.top = (i + 2) * 100 + 'px'
rows[i + 1][j] = tile
rows[i][j] = 0
}
win = checkWin()
if (win){
break
}
return
}
}
}
}
function initialize(){
var check = new Array (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15)
for (i = 0; i < 4; i++) {
for (j = 0; j < 4; j++) {
if (i == 3 && j == 3){
rows[i][j] = 0
} else {
var n = Math.ceil(Math.random() * 15)
while (check[n - 1] == 0){
n = Math.ceil(Math.random() * 15)
}
rows[i][j] = n
check[n - 1] = 0
document.getElementById('tile' + n).style.left = (j + 1) * 100 + 'px'
document.getElementById('tile' + n).style.top = (i + 1) * 100 + 'px'
}
}
}
}
trying to make a very simple scrambler for a 15 puzzle, i just cant doanything to comlicated. here is my table. <table border="1" " cellpadding="50" align="center"> <tr> <td ><input type="button" id="1" value="1" onclick=" swap1(id);"></td> <td > <input type="button" id="2" value="2" onclick="swap2(id)"></td> <td> <input type="button" id="3" value="3" onclick="swap3(id)"> </td> <td> <input type="button" id="4" value="4" onclick="swap4(id)"> </td> </tr> <tr> <td> <input type="button" id="5" value="5" onclick="swap5(id)"> </td> <td> <input type="button" id="6" value="6" onclick="swap6(id)"> </td> <td> <input type="button" id="7" value="7" onclick="swap7(id)"> </td> <td> <input type="button" id="8" value="8" onclick="swap8(id)"> </td> </tr> <tr> <td> <input type="button" id="9" value="9" onclick="swap9(id)"> </td> <td> <input type="button" id="10" value="10" onclick="swap10(id)"> </td> <td> <input type="button" id="11" value="11" onclick="swap11(id)"> </td> <td> <input type="button" id="12" value="12" onclick="swap12(id)"> </td> </tr> <tr> <td> <input type="button" id="13" value="13" onclick="swap13(id)"> </td> <td> <input type="button" id="14" value="14" onclick="swap14(id)"> </td> <td> <input type="button" id="15" value="15" onclick="swap15(id)"> </td> <td> <input type="button" id="16" value="" onclick="swap16(id)"> </td> </tr> </table> <p align="center"><input type="button" id="scramble" value="Scramble" onclick="random(id)"></p> <br> how to empty one of the cells and identify the adjacent cells (the ones with which the empty cell could swap on the first move.) Code: <script type="text/javascript">
<!--
var img_name = new Array("vinnpt1.jpg","vinnpt2.jpg","vinnpt3.jpg","vinnpt4.jpg","vinnpt5.jpg","vinnpt6.jpg","vinnpt7.jpg","vinnpt8.jpg");
img_name.sort(function() {return 0.5 - Math.random()})
document.write('<table border="1"><tbody>');
document.write('<tr>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[0]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[1]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[2]+'/>');
document.write('</td>');
document.write('</tr>');
document.write('<tr>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[3]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[4]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[5]+'/>');
document.write('</td>');
document.write('</tr>');
document.write('<tr>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[6]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[7]+'/>');
document.write('</td>');
document.write('<td height="200" width="300">');
document.write('<img src ='+img_name[8]+'/>');
document.write('</td>');
document.write('</tr>');
document.write('</tbody></table>');
document.write('<table border="2"><tbody><tr><td height="50" width="452">Moves Used Goes Here</td><td height="50" width="452">Last Move Goes Here</td></tr></tbody></table>');
//-->
</script>
Please can anyone help? hello I am novice when it comes to writing code and as i'm writing some code for a sliding puzzle game, i have managed to display the images. but now i need to write the functions to see if the image when clicked on is next to the blank one and then to move them if this is true. <Html> <Head> <Title> Sliding Puzzle Game</Title> <Script Language = "JavaScript"> var images = new Array(); //var initialise var id = 0; alert("starting"); window.onerror = handleError; function handleError(strMessage, strURL, intLine) //the above function catches any errors and display what and where. { document.write("<br/>The following Error occurred:"); document.write("<br/>Message: " + strMessage); document.write("<br/>Code: " + strURL); document.write("<br/>On line: " + intLine); } function Write2screen(){ var k=0; for (i=0; i< 4; i++) { for (j=0; j<4; j++) { id++; //give picture unique id after each iteration images[k] = "Images/" + k + ".jpg"; document.write(" <img src= '"+images[k]+"' id='"+id+"'/>"); k++; } document.write("<br/>"); } } function CanMoveTile() { // checks to see whether the cell at postion cellNum // is next to the black tile and returns true if and // only if this is the case } function moveTile(id) { // this function moves the tile that was clicked on (if the tile can actually be moved) } Write2screen(); </Script> </Head> <body onClick=moveTile(id)> </body> </Html> many thanks in advance This is a code I wrote about a javascript game which you should click on each picture so that the puzzle will be done. I have nine pictures with each picture named 1.jpg 2.jpg --- 9.jpg I have three difficulties beginner intermediate hard . The code has logical errors I can't understand . can anybody help me <html> <head> <title> CAIS326 Assignment 3 </title> <script type="text/javascript"> <!-- var seconds = 0; var timerId; var time; var Click1 = 0,Click2 = 0,Click3 = 0,Click4 = 0,Click5 = 0,Click6 = 0,Click7 = 0,Click8 = 0,Click9 = 0; var Pictures = [1,2,3,4,5,6,7,8,9]; function SwapImages() { for(var q=0 ; q<9; q++) document.getElementById("image+q+").src = Pictures[Click+q+ -1]+".jpg"; } function RegisterClicks(Index) { if (Click1 == 0) Click1 = Index; else if (Click2 == 0) Click2 = Index; else if (Click3 == 0) Click3 = Index; else if (Click4 == 0) Click4 = Index; else if (Click5 == 0) Click5 = Index; else if (Click6 == 0) Click6 = Index; else if (Click7 == 0) Click7 = Index; else if (Click8 == 0) Click8 = Index; else if (Click9 == 0) Click9 = Index; for(var m=0; m<9; m++) { if (Click+m+ > 0 && Click+m + 1+ > 0){ SwapImages(); Click+m+ = 0; Click+m + 1+ = 0; } } } function startTimer() { if (document.form1.gamelevel[0].checked) time=60; else if (document.form1.gamelevel[1].checked) time=45; else time=30; // 1000 milliseconds = 1 second timerId = window.setInterval( "updateTime()", 1000 ); } function updateTime() { seconds++; soFar.innerText = seconds; if ( time == seconds) { seconds = 0; window.alert ("Game over Loser..."); clearTimeout(timerId); } } var array = new Array(9); for (var i=0; i<9; i++) { array[i] = i+1; } shuffle(); document.writeln("<table border=1>"); var b = 0; while (b < 9 ) { var num = array[b]; document.writeln("<tr><td><img src=\""+num+".jpg\" id =\"image"+num+" \" onClick=\"RegisterClicks("+num+")\" /></td>"); ++b; num = array[b]; document.writeln("<td><img src=\""+num+".jpg\" id =\"image"+num+" \" onClick=\"RegisterClicks("+num+")\" /></td>"); ++b; num = array[b]; document.writeln("<td><img src=\""+num+".jpg\" id =\"image"+num+" \" onClick=\"RegisterClicks("+num+")\" /></td></tr>"); ++b; } document.writeln("</table>"); function shuffle() { var k = 9; var RandNum; var Temp; for (var n=0; n<9; n++) { RandNum = Math.floor(Math.random()*k); Temp = array[k-1]; array[k-1] = array[RandNum]; array[RandNum] = Temp; k=k-1; } } //--> </script> </head> <body> <form name = "form1" action = ""> <input type="Radio" name = "gamelevel" Value = "Beginner" Checked = "true" /> <font color=#37448E>Beginner</font> <input type="Radio" name = "gamelevel" Value = "Intermediate" /> <font color=#37448E>Intermediate</font> <input type="Radio" name = "gamelevel" Value = "Advanced" /> <font color=#37448E>Advanced</font></div><br/><br/> <input type = "button" value = " start " onClick="startTimer()"/><br/> <p>Seconds you have spent viewing this page so far: <strong id = "soFar">0</strong></p> </form> </body> </html> hi everyone. i have to create the 15 puzzle game and im having a difficult time getting started. can anyone help? i need to create a table (4x4) that has one empty space. All the other spaces must have a random generated value between 1 and 15. All i got so far is a onclick image swapping function.... need help! thanks
I need to make a --very-- simple version of this game: http://javascript.internet.com/games/magic-squares.html. You need to click on the buttons until they're in order, then you win. I'm having trouble with the function that trades the places of the two buttons. So, can anyone tell me how my "swap" function should be? It needs to test if the value of the button next to the button clicked on is blank, and then if it is, the two values trade places. This way, I will hopefully end up with 9 different functions, depending on which square I'm clicking on, because the "id" of the button stays the same, it just swaps the values. It shouldn't use any arrays or anything. Thanks, I appreciate the help! Here's what I have so far: Code:
<html>
<head>
<title>15 Puzzle</title>
<script type="text/javascript">
function swap(id){
if(document.getElementById(id+1).value="")
{
document.getElementById(id+1).value=document.getElementById(id).value;
document.getElementById(id).value="";
alert('It works!');
}
}
</script>
</head>
<p><h1 align="center">15 Puzzle</h1><p>
<p align="center"><input type="button" id="scramble" value="Scramble"></p>
<br>
<table border="3" bordercolor="black" width="300" bgcolor=""
cellpadding="50" align="center">
<tr>
<td ><input type="button" id="1" value="1" onclick=" swap(this.id);"></td>
<td > <input type="button" id="2" value="" onclick="swap(this.id)"></td>
<td> <input type="button" id="3" value="3" onclick="swap(this.id)"> </td>
<td> <input type="button" id="4" value="4" onclick="swap(this.id)"> </td>
</tr>
<tr>
<td> <input type="button" id="5" value="5" onclick="swap(this.id)"> </td>
<td> <input type="button" id="6" value="6" onclick="swap(this.id)"> </td>
<td> <input type="button" id="7" value="7" onclick="swap(this.id)"> </td>
<td> <input type="button" id="8" value="8" onclick="swap(this.id)"> </td>
</tr>
<tr>
<td> <input type="button" id="9" value="9" onclick="swap(this.id)"> </td>
<td> <input type="button" id="10" value="10" onclick="swap(this.id)"> </td>
<td> <input type="button" id="11" value="11" onclick="swap(this.id)"> </td>
<td> <input type="button" id="12" value="12" onclick="swap(this.id)"> </td>
</tr>
<tr>
<td> <input type="button" id="13" value="13" onclick="swap(this.id)"> </td>
<td> <input type="button" id="14" value="14" onclick="swap(this.id)"> </td>
<td> <input type="button" id="15" value="15" onclick="swap(this.id)"> </td>
<td> <input type="button" id="16" value="2" onclick="swap(this.id)"> </td>
</tr>
</table>
</html>
Hi there, I did a few basic tutorials etc, but I dont know if Im even on the right track I would like to make an image or "image button" based puzzle game, handling images and text but no animation, where you go to different Rooms to pick up pieces of the puzzle and put them in your inventory, or drop pieces of the puzzle from your inventory to the location you are in to achieve the puzzle objective. In a Nutshell: Display a grid of image buttons [2 x 3], pressing a button changes which buttons are displayed. The basic idea is to have buttons represent different places, where you can pickup or drop an item, and if you drop the right objects in the right place you win. Example: 2 top buttons [2 x 1] represent your inventory of 2 items (or empty slots), the 4 bottom buttons represent a 2x2 "map" with 4 "locations" buttons (to emulate locations on a map). You press a specific "location" and the 4 bottom buttons are replaced: the middle row is a "map" button to return to the map (with the 4 location buttons) and a "?" button to have a full screen text with info on the current location(which items to bring there) and an exit button to return. the bottom row are 2 items found in that location, and The 2 bottom items can be picked up, these items were randomly placed upon setup of the game, or dropped there by you, if you click on an item button at the bottom it highlights and you must click on a slot in your inventory at the top where the item (or nothingness) goes to replace what was there (item or empty slot). If you select an empty slot button at the bottom of a location and switch it with an item in your top inventory you effectively drop the item from your inventory to that specific location. Can this be done with javascript? Is it better to use HTML5? I would appreciate any help, advice, relevant tutorial link, or code snippet you can throw my way many thanks Ice Hi all. I'm developing After Effects scripts using their Extendscript language - essentially just Javascript with various extensions. I've defined a class, called ScriptSetting, which handles reading and writing of user settings to a prefs file. For example I create a ScriptSetting variable as follows: Code: var mySetting = new ScriptSetting("myScript", "thisSettingKey", 200);
This calls the ScriptSetting constructor function: Code: function ScriptSetting(sectionName, keyName, defaultValue) {
this.sectionName = sectionName;
// Store the type of this setting for conversion later
this.defaultType = defaultValue.constructor;
// Convert any type to a string value for storing
defaultValue = defaultValue.toString();
this.keyName = keyName;
if(!app.settings.haveSetting(this.sectionName, this.keyName)) {
this.value = defaultValue;
this.saveSetting();
} else
this.value = this.getSetting();
}
This calls some of Extendscript's built-in functions, like app.settings.haveSetting() This all works fine - I can then later access mySetting's value with, for example alert(mySetting.value) since I've defined value as part of the class constructor function. However what I'd ideally like to do, if at all possible is to lose the .value part and just be able to access the setting value directly from the setting variable, so in this case alert(mySetting). At the moment, this will just return object Object. Naturally this is because mySetting is an instance of the ScriptSetting object. But I wondered if you can spoof this with a different type (i.e. Array or Number) when accessing it as part of a statement e.g. if(mySetting == 200) { // do something } but still retain all its prototyped methods, e.g. Code: mySetting = 300; mySetting.saveSetting(); Is this possible in Javascript? It's not a deal-breaker - I just want to make my code a bit more readable. Many thanks in advance, Christian When i did a view source , checkbox names are displayed as MedicalAction_listOfTransfers_[0]__rowSelected' so each checkbox has different name and id as well all i am trying to do here is to put a checkall/uncheckall option , also in the jsp page we have a pagination so is that something that cause the checkbox value as null ? function MoveAll(){ var lengthofRecords = document.getElementById('resultsSize').value; for (i = 0; i < lengthofRecords; i++){ var name = 'MedicalAction_listOfTransfers_'+i+'__rowSelected'; var checkBox = document.getElementById(name); alert("check box B4: " + checkBox); - // I AM GETTING NULL VALUE HERE checkBox.checked=checkBox.checked == false ? true:false; alert("check box A4: " + checkBox.checked); //checkBox.checked = checkBox.checked? true:false; } } Please help i am newbie How do I store how many Windows my house has as a variable as this script I made isn't working. Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type="text/javascript"> var test function show_prompt(a_bac) { prompt(a_bac) } function show_alert(a_baf) { alert(a_baf) } </script> <body> <!-- How do I store how many Windows my house has as a variable? --> <input type="button" value="click" onclick="var theanswer = prompt('How many windows does your house have?')" /> <input type="button" value="answer" onclick="alert(theanswer)" /> </body> </html> Hi I'm using an image hover script so when you mouseover a thumbnail it displays a larger version of the image in a javascript/jquery nice image popup (not a popup window but like a floating image). It comes from the script here http://cssglobe.com/lab/tooltip/02/ The trouble is, I need the large image to display above and to the left of the thumbnail - not to the right and below. Looking in the js file I see these values: Code: this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
I've tried making these -500 and -500 but it just makes them like the negative value was not added (the large image goes down 500px). So as I don't understand javascript code I'm thinking that is not the way to give a negative number? Would appreciate any help please In the routine below I'm trying to make sure a date isn't > today. It WORKS FINE in Firefox but I get a NaN in MSN. WHY? And how do I fix it? Thanks Note: ( 2010 2 1 is in testfield and 2010 4 20 is in todayfield) var todayfield = tdyear+" "+tdmonth+" "+tdday; alert ("today=" + todayfield); alert (Date.parse(testfield)); alert (Date.parse(todayfield)); if (Date.parse(testfield) <= Date.parse(todayfield)) I was wondering if there was any way I can give a child element, preferably the first one, a link through a parent element with an ID. An example: Code: <div id="parent"> <a href="/">Name</a> <-! start message -> <b>child element text</b> <-! end message -> </div> I want the bold tag to have the link, basically. But through javascript. Dreamweaver is giving me a syntax error, but i dont understand what is wrong. i copied the line from the source code of the demo file included in the download and it it still telling me there is a syntax error. obviously something is wrong bc my slider isnt auto-sliding. so then i tried copying and pasting from the source code of the web page i got the slider from (http://www.ndoherty.biz/demos/coda-slider/2.0/) Dreamweaver then moved the syntax error warning to the line that only contains my closing script tag what am i doing wrong? why am i getting syntax errors? how can i make this thing autoslide? full code available at: http://mydomainsample.com/fire_rebuild All, I have the following code: console.log("My num is: " + num); console.log("My lat is: " + lat); console.log("My lat length is: " + lat.length); console.log("My long is: " + long); When I get the output, I get the following: My num is: {"1":1,"2":2} My lat is: {"1":"40.59479899","2":"41.4599860"} My lat length is: 36 My long is: {"1":"-75.5549650","2":"-87.596430"} I'm confused on why the length is saying 36 when it's obviously two and the other output shows that??? Let's say I set up a table with <table name=tile1 id=justChecking border=1> When I want to do something with it or get its position, using document.tile1, I get nothing but undefined. But id and getElements work fine: the line alert(document.getElementById('justChecking')); returns [object], and the lines Code: var handle = document.getElementsByTagName("table")[0];
alert("Or, it's seen as " +handle+ " called " +handle.name);
return Or, it's seen as [object] called tile1. So this means that accessing a table via a name isn't doable? How is it that this is a shortcoming that seems to be the nature of IE, and yet not mentioned or searchable? Or maybe I'm doing something moronic. -------------------------------------------------- The code here isn't showing anything new ... merely saving a round of posts in case someone wants the whole thing or wants to copy/paste it. Code: <HTML><BODY>
<TABLE name=tile1 id=justChecking border=1><tbody><tr><td>Very odd,<td>I say.</table>
<br>
<script type="text/javascript">
alert("Seeking tile1 as " +document.tile1);
alert("Maybe detectable as " +document.getElementById('justChecking'));
var handle = document.getElementsByTagName("table")[0];
alert("Or, it's seen as " +handle+ " called " +handle.name);
</script>
</body></html>
I think the `getJSON` should be taking the JSON URL and returning it as a response - The data file has `Author x3 Body x3 and Title x3`. Once it has this it should map it into the `nodes` and give me three nodes for each section of data. However currently its giving me the `console.log` output that I have below and nothing in my `nodes var` **Console Log:** Code: script.js:7 [Object, Object, Object]0: Object1: Object2: Objectlength: 3__proto__: Array[0] **Code:** Code: $(document).ready(function(){
var url = "assets/js/data.json";
$.getJSON(url).done(function(response) {
var nodes = response.map(function(i) {
return $('<div>').append(
$('<div>', {class: 'title'}).text(i.title),
$('<div>', {class: 'author'}).text(i.author),
$('<div>', {class: 'body'}).text(i.body)
);
console.log(response);
});
});
});//Ready function closed
Reply With Quote 01-08-2015, 10:56 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts The data file has `Author x3 Body x3 and Title x3`. Literally??? That is, it has something like Code: {
Author: "Adam",
Author: "Bob",
Author: "Carol",
Body: "Somethhing...",
Body: "something else ...",
Body: "more stuff...",
Title: "Book one",
Title: "Book two",
Title: "Book three"
}
??? I'm sure that's not what you meant, but what *DID* you mean? Why not simply copy/paste the contents of "data.json" to here? i'm working with a javascript on a drupal website, but the saving function seems to work only as soon as i click 2 times on the "save" button. the code that fires the function is: Code: var param ="&usuario="+usuario+"&nivel="+nivel+gano+porc_gano+gasto+porc_gasto+tengo+porc_tengo+debo+ porc_debo+plazo_debo;
var s = document.createElement("script");
s.type = "text/javascript"; s.async = true;
s.src = server_direction +"setMisDatos?callback=respuestaGuardarMisDatos¶m="+encodeURIComponent(param);
var h = document.getElementsByTagName("script")[0];
h.parentNode.insertBefore(s, h); //or h.appendChild(s);
the chrome console tells me the error is in the last line i copied, but i don't undertand what kind of error it is. using chrome console (specifically the "network" one), i see that it's written in red, status/text "failed", type "undefined" size/content "13 B / 0 B"; when it works it's: status/text "200/OK", type "text/json", size/content "256 B/ 38B". i'm not an expert with this, is there some more information that could be useful? the code fires a netbeans function, that stores data to a postgresql database, so i have like 100 variables that has to be stored when i click on the "save button". Actually before i put parentNode.insertBefore, there used to be appendChild(s), but then i found out this algorithm from google analytics, which seems to be working better than the previous one. Having said that, i can tell you that the GET works after the first time i click perfectly, with some weird things happening, like if i browse another tab for a while, then go back to the page, and click on save, it won't work again (same error). The variables are written like this: Code: var plazo_debo_casa1 = (getValor("plazo_debo_casa1"));
var plazo_debo_casa2 = (getValor("plazo_debo_casa2"));
var plazo_debo_casa3 = (getValor("plazo_debo_casa3"));
var plazo_debo_prestamo1 = (getValor("plazo_debo_prestamo1"));
var plazo_debo_prestamo2 = (getValor("plazo_debo_prestamo2"));
var plazo_debo_prestamo3 = (getValor("plazo_debo_prestamo3"));
var plazo_debo ="&plazo_debo_casa1="+plazo_debo_casa1+"&plazo_debo_casa2="+plazo_debo_casa2+"&plazo_debo_casa3="+plazo_debo_casa3+"&plazo_debo_prestamo1="+plazo_debo_prestamo1+"&plazo_debo_prestamo2="+plazo_debo_prestamo2+"&plazo_debo_prestamo3="+plazo_debo_prestamo3;
and then together in the "param" variable. Is it clearer now? i tried to copy document.head.appendChild(s); instead of parentNode.insertBefore(s,h), but it still behaves the same way. Still not any suggestions? This is part of the javascript file loading on my page, and since the function setMisDatos is in netbeans and it works correctly as soon as it's fired (at least, that's what i notice after the first click), i don't think it's worth copying part of it here, right? are there maybe too many variables for the GET method? is there a way to check GET errors? i'm sorry for not being an expert but i would really like some help here. I have a CSS file associated with this that sets the width at "200px." However, I am getting a 40px wide dropdown. Can anybody catch an error in here? Using console.log, I found that el, as soon as it is defined, is = div.dropdown. As soon as .width comes into the picture, it returns as six consecutive 101px and a ton of 40px after that... and continues returning those values till the end. I appreciate any input!! Code:
var Dropdown = function(el) {
this.el = el;
this.handle = el.find("div.dropdown-text");
this.options = el.find("div.dropdown-options");
this.optionsWrap = this.options.parent();
this.action = el.attr("action");
this.type = el.attr("type");
this.target = el.attr("target");
this.Init();
}
Dropdown.prototype.Init = function() {
var self = this;
var extraPadding = 40;
this.isShown = false;
console.log(this);
this.width = this.options.outerWidth() + extraPadding;
this.height = this.options.outerHeight();
if (this.height > 300) {
this.height = 300;
this.options
.height(300)
.width(this.width + 12)
.addClass("scroll-pane")
.jScrollPane({
showArrows: true,
scrollbarWidth: 9
})
this.width += 12;
} else {
this.options.width(this.options.width() + extraPadding);
}
var newWidth = (this.width < 220) ? this.width : 220;
this.el.width(newWidth);
this._AddShadow();
this.optionsWrap.css({
display: "none",
visibility: "visible",
width: this.width + 5,
height: this.height + 5
});
this._SetEvents();
};
Dropdown.prototype.Toggle = function(force) {
if (this.isShown && !force) {
this.optionsWrap.hide();
this.isShown = false;
} else if (!this.isShown && false !== force){
this.optionsWrap.show();
this.isShown = true;
}
}
Dropdown.prototype._AddShadow = function() {
var shadowWidth = 5, layer;
for (var i = 0; i < shadowWidth; i++) {
layer = $('<div class="shadow_layer"> </div>');
layer.css({
opacity: 0.055 * (i + 1),
top: (shadowWidth - i),
left: (shadowWidth - i),
height: this.height,
width: this.width
});
this.optionsWrap.prepend(layer);
}
}
Dropdown.prototype._SetEvents = function() {
var self = this;
this.el.bind('click', function(e) {
var current = $(e.target);
var type = current.attr("type");
if (current.hasClass('dropdown-text') || current.hasClass('dropdown-arrow')) {
if (!self.isShown) {
page.HideAllDropdowns();
}
self.Toggle();
return false;
}
if (current.hasClass('dropdown-opt')) {
switch (type) {
case 'auto': case 'basic':
var html = current.html();
self.handle.html(html);
self.options.find('a.dropdown-opt').each(function() {
$(this).removeClass('selected');
});
if ('auto' == type) {
page.common.Update({
url: current.attr('path'),
params: current.attr('params'),
target: self.target,
parent: true,
method: "POST",
handler: {
handler: function(results) {
var action = this.attr("action");
if (action) { page.events.Fire(action, this, results) };
},
context: current
}
});
}
current.addClass('selected');
self.Toggle();
return false;
case 'multi':
current.toggleClass('selected');
break;
case 'function':
var html = current.html();
self.handle.html(html);
current.Fire();
self.Toggle(false);
break
}
}
return false;
});
}
|
|||||||