|
JavaScript - Help With Puzzle In Javascript
Hi 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'
}
}
}
}
Similar TutorialsThis 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> 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>
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> 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 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>
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
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 = " ";
}
}
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 Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free. I have Googled, but there are so many that I am almost dizzy with the choices. Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic. Frank Does anyone know how to make URL links that use Javascript still work when users have Javascript disabled on their browser? The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version. I tried the <script><noscript> tags, but I'm not sure if I'm using it correctly, as my URL completely disappears. Below is my HTML/Javascript code: <p class="download"> <script type="text/javascript">document.write("<span style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\" onclick=\"window.open( 'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+ Math.floor( Math.random()*11 ) );\" >The Child Magazines Media Kit</a></span> (PDF 1 MB) ");</script> <noscript><span style="text-decoration: underline;"><a href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf" >The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript> </p> Thanks for any help, Michael Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks Hey, I've got to make the values of some textboxes change the co-ordinates of my sprite on a canvas and havent a clue on how to do it, Here is my form with the two textboxes and submit button: <form> x: <input type="text" name="x" /><br /> y: <input type="text" name:"y" /><br /> <input type="submit" value="Submit"/><br /> </form> And i need it so that they change the values of these: //this shows where my sprite will start on the canvas var block_x; var block_y; searched the internet for hours and cant really find anything i understand or works. any help is much appreciated Hi Guys I am trying to modify the functionality of my page. I want to be able to activate this piece of code using another javascript function. This is the code I want to activate: Code: <script type="text/javascript"><!--
$('#button-cart').bind('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/update',
type: 'post',
data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea, .date_data input[type=\'text\']'),
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();
if (json['error']) {
if (json['error']['warning']) {
$('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.warning').fadeIn('slow');
}
for (i in json['error']) {
$('#option-' + i).after('<span class="error">' + json['error'][i] + '</span>');
}
}
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
$('.success').fadeIn('slow');
$('#cart_total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
}
}
});
});
//--></script>
And this is how I want the format of the function to be: function testsession() { if there is a session called 'hiredate' { activate the script above } else { var el = document.getElementById("product_data"); } } I just dont know how to write this in javascript Could you help me if possible please I want to insert this js snippet Code: function addText(smiley) {
document.getElementById('message').value += " " + smiley + " ";
document.getElementById('message').focus();
return false;
}
to a loaded iframe with name&id chtifrm. I can access it & change embed something in its html via using something like: Code: $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>');
.... Code: parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none'
but how do I insert js in the head of loaded iframe? I got an index.php Code:
<html>
<form action="bacakomik.php" method='post'>
<select name="kodekomik">
<option value='../komik1/|23'>Judul Komik1</option>
<option value="../komik2/|20">Judul Komik2</option>
<option value="../komik3/|10">Juduk Komik3</option>
<option value="../komik4/|20">Judul Komik4</option>
</select>
<input type="submit" />
</form>
<?php
echo ('<select>');
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
echo ('</select>');
?>
</html>
As you can see, each of the option brings specific value "../komik1/|23" komik1 is a directory | is a delimiter 23 is the pages in one chapter and can be considered also as how many images are there on a specific directory This is my bacakomik.php Code: <?php
$dirkomik = $_POST['kodekomik'];
$exploded = explode("|", $dirkomik);
echo ($exploded[0]); //picture directory
echo ("<br>");
echo ($exploded[1]); //total page in the comic
$pagecount = (int)$exploded[1];
//Take last posted value, process it right away
echo ('<FORM name="guideform"> ');
echo ('<select name="guidelinks">');
$i=1;
do {
echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>');
$i= $i+1;
}while($i <= $pagecount); //Printing option and select
echo ("</select>");
?>
<input type="button" name="go" value="Go!" onClick="document.getElementById('im').src=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value+'.png';"> </FORM>
<img src="img0.jpg" id="im">
With the current code on bacakomik.php, I only can change the img src of id "im" in the same directory only. What I want is that the Javascript could "add" the "$exploded[0]" variable so that the picture can be loaded from different directory. Anyone can do this? I believe that the fix should be somewhere on input tag inside OnClick, or do you know where? Anyway, I found this on the net http://p2p.wrox.com/php-faqs/11606-q...avascript.html Please help me to those who can... All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero I wrote a log function that took note of various function calls. Thinking that functions are first class objects, and objects have properties, I made the name of each logged function a property of that function, e.g., brightenInnerPara.name = "brightenInnerPara"; Every browser I tried (Firefox, MSIE, Opera, Chrome, Safari) accepted the assignment, no problem. In Firefox and MSIE, the result was what I wanted: brightenInnerPara.name == "brightenInnerPara" But in the others, the result was: brightenInnerPara.name == null Question 1. Which Javascript is correct here? I favor Firefox and MSIE, not merely because they were willing to give me what I wanted, but also because it makes no sense to accept an assignment statement without throwing an error and then give it a null semantics, like Chrome, Opera, and Safari did. I found a workaround, using assignments like this: brightenInnerPara.prototype.name = "brightenInnerPara"; To my surprise, that worked in every browser. But I don't know why. It seems that such assignments are enough to cause each function to have its own distinct prototype. Question 2. Just how inefficient is my workaround, and why does it work? I designed a simple mobile in html , i want to link it to strings such that.... example : there are numbers from 0 to 9 and when ever i click on a number and then click on another after all the click i made and at last when i click on the " dial" (for example purpose) it should prompt all the numbers in sequence where i click. example to make it clear for my purpose : 1 2 3 4 5 6 7 8 9 * 0 # Dial (button) I clicked on "4" then "6" then "9" and then i hit the "dial" button the it shold show an alert box displaying "469" . I think it isn't a big challenge for you javascript coders. Please post the whole javascript code for this function, also the id's defined to the html separetly by you I am just learning and up on queries , so want your help Thaks a ton |
|||||||