|
JavaScript - Drawing And Converting
Hi, I was wondering - how can I convert something that a user draws inside canvas? Say, they draw a square, how could I convert that to print "You have drawn a square" - this would be posted to a text file.
Thanks in advance. Similar TutorialsHow would i draw a line on a page dynamically, like if i were clicking points on a map and i wanted to link them together. How could i do that? i found this, but maybe you know of something better that would not require coordinates Hello, Codingforums. I have looked on Google for a solution, done a handful of things, and cannot get my script to draw to the page. Code: <html>
<head>
<script type="text/javascript" src="imageFuncs.js"></script>
<script type="text/javascript">
showImages = function() {
var drawingCanvas = document.getElementById("map");
// Check the element is in the DOM and the browser supports canvas
if (drawingCanvas.getContext) {
var ctx = drawingCanvas.getContext("2d");
var imageSources = new Array("map.jpg");
var images = new Array();
images = loadImages(imageSources);
for (var i = 0; i < images.length; i++) {
var img = new Image();
img.src = images[i].src;
img.onload = function(){
ctx.drawImage(img,0,0,screen.width,screen.height);
}
}
}
}
</script>
</head>
<body onload="showImages()">
<canvas id="map">Your browser does not support canvases...</canvas>
</body>
</html>
The problem appears on the ctx.drawImage(img,0,0,screen.width,screen.height); line. I read that the drawImage method will not draw the image if the images are not loaded, which is why I tried an onload event for img. When I run the code the way it is now, I get a attempt to run compile-and-go script on a cleared scope error from Firebug. When I remove the onload event, the script runs without errors. Either way, no image is drawn on the page. Any help? If it helps, this is the loadImages function that I used to get the array of loaded image objects: Code: function loadImages(sources){
var images = new Array();
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].src = sources[src];
}
return images;
}
I am trying to create an Asteroids type game using JavaScript along with html5's canvas element for drawing. I have searched around and have looked at examples but I can't figure out what is wrong with my rendering that I do in the game loop that is run every frame. The problem appears to be only that the canvas is not cleared at the beginning of each frame but I feel there might be something wrong also. The code used and shown below only works in Firefox but not Google Chrome or Safari. Here is a picture of what it renders in Chrome: What is is supposed to look like and is in Firefox: Here is my set up for drawing on the canvas: Code: var canvas = null;
var c2d = null;
//...
window.onload = init;
function init() {
canvas = document.getElementById('canvas');
c2d = canvas.getContext('2d');
setInterval( step, 1000/FPS );
//...
//c2d.setTransform(1,0,0,1,0,0); // reset to identity <--Do I need this?
}
Below is the game loop function. Am I clearing the canvas correctly because it does not clear the screen? Also am I using the save and restore functions correctly? Each asteroid and player drawn is at a different of position and rotation so am I doing it correct to draw them? Code: function step() {
//...
canvas.width = canvas.width; //clear canvas PROBLEM
//Things I have tried:
//canvas.height = canvas.height; //clear canvas
//c2d.clearRect(0, 0, canvas.width, canvas.height);
for (u=0;u<asteroids.length;u++) {
c2d.save();
asteroids[u].draw();
c2d.restore();
}
c2d.save();
player.draw();
c2d.restore();
c2d.strokeStyle = "#000000";
c2d.stroke();
}
Below is the Asteroid and Player drawing functions. The Asteroid is a polygon and the Player is a triangle. Both rotate and are draw correctly but should I be passing a reference to the drawing reference? Code: function Asteroid_draw() {
c2d.translate( this.x, this.y );
c2d.rotate(this.angle);
for (i=0;i<this.points_x.length-1;i++) {
c2d.moveTo(this.points_x[i],this.points_y[i]);
c2d.lineTo(this.points_x[i+1],this.points_y[i+1]);
}
c2d.moveTo(this.points_x[0],this.points_y[0]);
c2d.lineTo(this.points_x[this.points_x.length-1],this.points_y[this.points_x.length-1]);
}
function Player_draw() {
c2d.translate( this.x, this.y );
c2d.rotate(this.angle);
//Points {0,-12}{7,5}{-7,5}
c2d.moveTo(0,-12);
c2d.lineTo(7,5);
c2d.moveTo(7,5);
c2d.lineTo(-7,5);
c2d.moveTo(-7,5);
c2d.lineTo(0,-12);
}
Any help is appreciated. I'm having a problem with the <CANVAS> element in JavaScript. here's what i'm trying to do: I need 3 different canvas elements for writing a signature to. they must all 3 be visible at the same time My problem that i'm having is that i can't seem to get the code to work which will write to more than one canvas. here's my code: Code: <html>
<head>
<script language="javascript">
function WriteSignature(element, event)
{
document.addEventListener("mousemove", PenHandler, true);
document.addEventListener("mouseup", upHandler, true);
event.stopPropagation();
event.preventDefault();
function PenHandler(event)
{
var x = event.clientX;
var y = event.clientY;
// mouse event goes here
var canvas1 = document.getElementById("Canvas1");
var ctx = canvas1.getContext("2d");
var PenSize = 2;
ctx.fillStyle = "Black";
ctx.fillRect (x, y, PenSize, PenSize);
event.stopPropagation();
}
function upHandler(event)
{
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", PenHandler, true);
event.stopPropagation();
}
}
</script>
</head>
<body>
<Canvas id="Canvas1" Width="400" Height="100" Style="border:2px solid black" onmousedown="WriteSignature(this, event);"></Canvas><br><br>
<Canvas id="Canvas2" Width="400" Height="100" Style="border:2px solid black" onmousedown="WriteSignature(this, event);"></Canvas><br>
</body>
</html>
I have a Canvas controller Class and a new Sprite Controller class Please note I'm not using GIF sprites these are proper programmable sprites like you get in C game engines So i have a Class that controls my Canvas and the Drawing of my Canvas what i mean by this is if you call a new instance of my Class it will create a new Canvas if you already have a canvas you can get a JSRenderEng Object from your Canvas id Now my problem lies with getting my sprites to draw them self's currently my sprites can only appear in one place in a 100x100 px canvas they load as 98x98 1top 1left so they should be a perfect mathematical square inside the canvas with a 1px border, for some reason its not drawing But here is an explination about the classes The Canvas handles the start of the drawing events by going though the sprites attached to the canvas and then calls there draw method, However i seam to have a problem with this my draw method is being fired but is not rendering on the canvas can any one spot the problem. PHP Code: this.draw = function(){ //this.updateParams(); var context = this._canvas.getContext("2d"); context.beginPath(); context.fillRect( 98, 98, 1, 1 ); context.fillStyle = "#000000"; context.fill(); context.closePath(); } Was putting the width and height and the location in the wrong order (DURRRR) Hi Everyone I am trying to write some code to create an object in JS that contains the x,y coords for a shape i wish to draw. I create the shape, and then in a draw function I draw the shape to the screen from the object I created erlier. Trouble it is does not seem to work :S have anyone got and ideas? Code: var myShape = new newShape(200,200);
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 50);
} // init
function newShape(x,y){
this.un_X=x
this.un_Y=y
function drawAll() {
ctx.beginPath();
ctx.arc(un_X,un_Y,30,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
} // drawAll
} // newShape
function draw() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
myShape.drawAll();
} // draw
init();
Thanks in advance Code:
<html>
<head>
<title>test</title>
</head>
<body>
<script language = "javaScript">
var clouds = [];
var i = 0;
while(i <= 5) {
var cld = new Image();
cld.onload = function()
{
clouds.push(cld);
}
cld.src = "cloud.png";
i++;
}
document.write(clouds.length);
</script>
</body>
</html>
Where am I messing up clouds.length returns 0. Why? I know this is simple, but it will get more complex. I can search for the code, but I would like feedback as to what I'm doing wrong. This is more than likely going to be a multi stage question. More to come... ------ Also, I would like to say that this is my first post. Thanks in advance to those who reply. Not sure if this should be in the ASP forum or this one (probably could go either), so here goes. I don't know hardly any - probably best to say dont know any at all - javascript. However I have a need to convert some code from asp to js. the code is checking to see if certain variables are null and if so counting how many of those variables are as such. the ASP looks like this: Code: <% Dim counter counter = 0 if a <> "" then classcounter = classcounter + 1 if b <> "" then classcounter = classcounter + 1 if c <> "" then classcounter = classcounter + 1 if d <> "" then classcounter = classcounter + 1 if e <> "" then classcounter = classcounter + 1 if f <> "" then classcounter = classcounter + 1 %> I need to know how to convert this to js so I can show this number to the user without sending data to the server first. I have searched the net for something similar but I am not having much luck finding any examples that do what I would like it to do (maybe this is not something that can/should be done in js?). I hope this makes sense...thanks! Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<script type = "text/javascript">
var strCurrency = new Array(6);
strCurrency[0]="Pound";
strCurrency[1]="Marc";
strCurrency[2]="Franc";
strCurrency[3]="Dollar";
strCurrency[4]="Nordic";
strCurrency[5]="Fivesmon";
var dblExchangeRate = new Array(6);
dblExchangeRate[0]="1";
dblExchangeRate[1]="74";
dblExchangeRate[2]="8.54";
dblExchangeRate[3]="6.25";
dblExchangeRate[4]="98.1";
dblExchangeRate[5]="1.32";
function convertNumbers
{
}
</SCRIPT>
I want to see what the function would look like to be able to convert into different currencies by using arrays. I know that this would be a useless way to do it as they are updated every day, but it's for personal education purposes. (Note: The website contained a textbox in which to enter the amount in pounds, a drop-down box allowing the user to select currency, a button to click to convert, and another text box showing amount of money after converting.) Any help is greatly appreciated. I am trying to convert following pesudocose to javascript. Dont know where am i messing it up. Any help will be great PSEUDOCODE: Program TaxCalc Read purchase If(purchase>=0 AND purchase<=7) tax=0 else if(purchase>=8 AND purchase<=21) tax=1 else if(purchase>=22 AND purchase<=35) tax=2 else if(purchase>=36 AND purchase<=49) tax=3 else if(purchase>=50 AND purchase<=64) tax=4 else if(purchase>=65 AND purchase<=78) tax=5 else if(purchase>=79 AND purchase<=92) tax=6 else if(purchase>=93 AND purchase<=99) tax=7 else print error the number should be >=0 and <=99 print tax End Program JAVASCRIPT that I have so far <html> <body> <script type="text/javascript"> // Program name: Tax Calculation // Purpose: Find tax for amounts under $1 // Name: Niral Patel // Date: 2/15 START //Declare variables var purchase; //Amount to be entered by user var tax; //Tax to be calculated //Welcome the user //Ask them to enter an amount less than a dollar document.write("This program will help you calculate tax" + BR); document.write("Please enter the amount, the amount has to be less than a dollar" + BR); purchase = prompt("Enter the amount for which tax is to be calculated:",ES); purchase = parseInt(purchase) if (purchase >= 0 ) { tax = 0 } else if (purchase >= 7 ) { tax = 0 } else if (purchase >= 21 ) { tax = 2 } else if (purchase >= 35 ) { tax = 3 } else if (purchase >= 49) { tax = 4 } else if (purchase >= 64 ) { tax = 5 } else if (purchase >= 78 ) { tax = 6 } else if (purchase >= 92 ) { tax = 7 } else if (purchase >= 93 ) { tax = 6 } else if (purchase >= 99 ) { tax = 6 } else { document.write("Number should be between 0 and 99." +BR); } display tax; Stop </script> </body> </html> Hello, I need your help converting the code below from VBA to Javascript. I am basically attempting to export a recordset to an excel file. VBA: Code: '-------------------------------------------------------
Public Sub ExportTOExcel()
'-------------------------------------------------------
Set oExcel = CreateObject("Excel.Application")
Set oBook = oExcel.Workbooks.Add
Set oSheet = oBook.Worksheets(1)
Dim j As Long
Dim lngCol As Long
Dim lngRow As Long
Dim Field As Object
rs.MoveFirst
lngRow = 1
With oSheet
Do While Not rs.EOF
lngCol = 0
For Each Field In rs.Fields
lngCol = lngCol + 1
.Cells(lngRow, lngCol) = Field.Value
Next
lngRow = lngRow + 1
rs.MoveNext
Loop
End With
oBook.SaveAs "C:\Book5.xls"
Workbooks.Open fileName:="C:\Book5.xls"
End Sub
Thanks for everyones help in advance, Cheers, J Hello, I need your help. How can I convert the following code to Javascript: Code: 'SEARCH BY FILE NUMBER IN FILE NUMBER WHEN THE ENTER KEY IS PRESSED Private Sub h1_KeyDown(ByVal KeyCode As msforms.ReturnInteger, ByVal Shift As Integer) If KeyCode = vbKeyReturn Then KeyCode = 0 Call btn_search_Click End If End Sub Thanks for all your help in advance J I am having an issue with converting my decimal to a percentage... any suggestions? Thanks - it's probably an easy solution, but I am lost below is my code (cost * .06) is where the issue is - Thanks! var cost = prompt("What is the cost of your purchase?", "") document.write("Return Value: "+cost,("<br />")); var salestax = cost * .06 document.write("Return Value: "+salestax,("<br />")); var total = cost + salestax document.write(cost + salestax); deleted
I have written a card trick in C++. The purpose of the card trick is the player picks 4 cards and then based on the 4 cards they pick 4 more cards. The player can then switch the card and the computer does some math to determine how to which card was switched. Right now all i can figure out is how to display and flip the card. This is the program I have written in C++ Code: #include <iostream>
#include <string>
using namespace std;
int main()
{
int num[4];
char suite[4];
int code[4];
int mycode[4];
int code2[4];
int mycode2[4];
int i=0;
int error=0;
int k=4;
int pick;
cout<<"Welcome to our card trick. I believe that given some cards I would be able to tell you which card you switched. Dont believe me! Well lets play. First I will let you pick four cards, then I will pick four cards. Next I will pick four cards. Then you will have the opportunity to pick a card to switch. Then I will tell you which card you switched. Promise I wont peek! Lets begin."<<endl;
for(i=0; i<4; i++){
cout<<"Enter card number"<<endl;
cin>>num[i];
cout<<"Enter suit"<<endl;
cin>>suite[i];
}
for(i=0; i<4; i++){
if (suite[i]=='D'||suite[i]=='H')
code[i]=1;
else
code[i]=0;
cout<<code[i];
}
mycode[0]=code[0]+code[2]+code[3];
mycode[0]=mycode[0] % 2;
mycode[1]=code[0]+code[1]+code[3];
mycode[1]=mycode[1] % 2;
mycode[2]=code[0]+code[1]+code[2];
mycode[2]=mycode[2] % 2;
mycode[3]=code[1]+code[2]+code[3]+1;
mycode[3]=mycode[3] % 2;
for(i=0; i<4; i++){
cout<<mycode[i];
}
cout<<endl;
cout<<"Which position would you like to switch out for a new card? Position 0-7."<<endl;
cin>>pick;
switch (pick){
case 0:
if(code[pick]==1)
code[pick]=0;
else
code[pick]=1;
break;
case 1:
if(code[pick]==1)
code[pick]=0;
else
code[pick]=1;
break;
case 2:
if(code[pick]==1)
code[pick]=0;
else
code[pick]=1;
break;
case 3:
if(code[pick]==1)
code[pick]=0;
else
code[pick]=1;
break;
case 4:
pick=pick-4;
if(mycode[pick]==1)
mycode[pick]=0;
else
mycode[pick]=1;
break;
case 5:
pick=pick-4;
if(mycode[pick]==1)
mycode[pick]=0;
else
mycode[pick]=1;
break;
case 6:
pick=pick-4;
if(mycode[pick]==1)
mycode[pick]=0;
else
mycode[pick]=1;
break;
case 7:
pick=pick-4;
if(mycode[pick]==1)
mycode[pick]=0;
else
mycode[pick]=1;
break;
}
//copying into switched
for(i=0; i<4; i++){
code2[i]=code[i];
}
for(i=0; i<4; i++){
mycode2[i]=mycode[i];
}
cout<<"Switched: ";
for(i=0; i<4; i++){
cout<<code2[i];
}
for(i=0; i<4; i++){
cout<<mycode2[i];
}
cout<<endl;
cout<<"New: ";
mycode[0]=code[0]+code[2]+code[3];
mycode[0]=mycode[0] % 2;
mycode[1]=code[0]+code[1]+code[3];
mycode[1]=mycode[1] % 2;
mycode[2]=code[0]+code[1]+code[2];
mycode[2]=mycode[2] % 2;
mycode[3]=code[1]+code[2]+code[3]+1;
mycode[3]=mycode[3] % 2;
for(i=0; i<4; i++){
cout<<code[i];
}
for(i=0; i<4; i++){
cout<<mycode[i];
}
cout<<endl;
//Decoding
for(i=0; i<3; i++){
if (mycode2[i] != mycode[i]){
error=error+1;
k=k+1;
}
}
switch (error){
case 0:
cout<<"The final position was switched."<<endl;
break;
case 1:
cout<<"The card was switched from position "<<k<<endl;
break;
case 2:
k=k-4;
cout<<"The card was switched from position "<<k<<endl;
break;
case 3:
cout<<"The card was switched from the zero position."<<endl;
break;
}
return 0;
}
This is the what I have so far for javascript. Code: <html>
<head>
<script language="JavaScript">
{
//These are the first button graphics
thumb1= new Image();
thumb1.src = "75/back-blue-75-3.png";
hover1 = new Image();
hover1.src = "75/clubs-2-75.png";
//These are the second button graphics
thumb2= new Image();
thumb2.src = "75/back-blue-75-3.png";
hover2 = new Image();
hover2.src = "75/clubs-q-75.png";
//These are the third button graphics
thumb3= new Image();
thumb3.src = "75/back-blue-75-3.png";
hover3 = new Image();
hover3.src = "75/clubs-a-75.png";
thumb4= new Image();
thumb4.src = "75/back-blue-75-3.png";
hover4 = new Image();
hover4.src = "75/diamonds-2-75.png";
thumb5= new Image();
thumb5.src = "75/back-blue-75-3.png";
hover5 = new Image();
hover5.src = "75/joker-b-75.png";
thumb6= new Image();
thumb6.src = "75/back-blue-75-3.png";
hover6 = new Image();
hover6.src = "75/spades-a-75.png";
thumb7= new Image();
thumb7.src = "75/back-blue-75-3.png";
hover7 = new Image();
hover7.src = "75/clubs-3-75.png";
thumb8= new Image();
thumb8.src = "75/back-blue-75-3.png";
hover8 = new Image();
hover8.src = "75/hearts-a-75.png";
thumb9= new Image();
thumb9.src = "75/back-blue-75-3.png";
hover9 = new Image();
hover9.src = "75/hearts-k-75.png";
thumb10= new Image();
thumb10.src = "75/back-blue-75-3.png";
hover10 = new Image();
hover10.src = "75/diamonds-6-75.png";
thumb11= new Image();
thumb11.src = "75/back-blue-75-3.png";
hover11 = new Image();
hover11.src = "75/diamonds-10-75.png";
thumb12= new Image();
thumb12.src = "75/back-blue-75-3.png";
hover12 = new Image();
hover12.src = "75/spades-5-75.png";
thumb13= new Image();
thumb13.src = "75/back-blue-75-3.png";
hover13 = new Image();
hover13.src = "75/joker-r-75.png";
thumb14= new Image();
thumb14.src = "75/back-blue-75-3.png";
hover14 = new Image();
hover14.src = "75/clubs-j-75.png";
thumb15= new Image();
thumb15.src = "75/back-blue-75-3.png";
hover15 = new Image();
hover15.src = "75/clubs-6-75.png";
thumb16= new Image();
thumb16.src = "75/back-blue-75-3.png";
hover16 = new Image();
hover16.src = "75/hearts-5-75.png";
thumb17= new Image();
thumb17.src = "75/back-blue-75-3.png";
hover17 = new Image();
hover17.src = "75/diamonds-k-75.png";
thumb18= new Image();
thumb18.src = "75/back-blue-75-3.png";
hover18 = new Image();
hover18.src = "75/diamonds-8-75.png";
thumb19= new Image();
thumb19.src = "75/back-blue-75-3.png";
hover19 = new Image();
hover19.src = "75/hearts-9-75.png";
thumb20= new Image();
thumb20.src = "75/back-blue-75-3.png";
hover20 = new Image();
hover20.src = "75/spades-j-75.png";
thumb21= new Image();
thumb21.src = "75/back-blue-75-3.png";
hover21 = new Image();
hover21.src = "75/hearts-2-75.png";
thumb22= new Image();
thumb22.src = "75/back-blue-75-3.png";
hover22 = new Image();
hover22.src = "75/hearts-q-75.png";
thumb23= new Image();
thumb23.src = "75/back-blue-75-3.png";
hover23 = new Image();
hover23.src = "75/clubs-8-75.png";
thumb24= new Image();
thumb24.src = "75/back-blue-75-3.png";
hover24 = new Image();
hover24.src = "75/clubs-k-75.png";
thumb25= new Image();
thumb25.src = "75/back-blue-75-3.png";
hover25 = new Image();
hover25.src = "75/diamonds-a-75.png";
thumb26= new Image();
thumb26.src = "75/back-blue-75-3.png";
hover26 = new Image();
hover26.src = "75/spades-2-75.png";
thumb27= new Image();
thumb27.src = "75/back-blue-75-3.png";
hover27 = new Image();
hover27.src = "75/spades-q-75.png";
thumb28= new Image();
thumb28.src = "75/back-blue-75-3.png";
hover28 = new Image();
hover28.src = "75/clubs-7-75.png";
thumb28= new Image();
thumb28.src = "75/back-blue-75-3.png";
hover28 = new Image();
hover28.src = "75/diamonds-j-75.png";
thumb28= new Image();
thumb28.src = "75/back-blue-75-3.png";
hover28 = new Image();
hover28.src = "75/diamonds-3-75.png";
thumb29= new Image();
thumb29.src = "75/back-blue-75-3.png";
hover29 = new Image();
hover29.src = "75/hearts-j-75.png";
thumb30= new Image();
thumb30.src = "75/back-blue-75-3.png";
hover30 = new Image();
hover30.src = "75/clubs-4-75.png";
thumb31= new Image();
thumb31.src = "75/back-blue-75-3.png";
hover31 = new Image();
hover31.src = "75/spades-3-75.png";
thumb32= new Image();
thumb32.src = "75/back-blue-75-3.png";
hover32 = new Image();
hover32.src = "75/spades-k-75.png";
thumb33= new Image();
thumb33.src = "75/back-blue-75-3.png";
hover33 = new Image();
hover33.src = "75/diamonds-4-75.png";
thumb34= new Image();
thumb34.src = "75/back-blue-75-3.png";
hover34 = new Image();
hover34.src = "75/spades-10-75.png";
thumb35= new Image();
thumb35.src = "75/back-blue-75-3.png";
hover35 = new Image();
hover35.src = "75/clubs-5-75.png";
thumb36= new Image();
thumb36.src = "75/back-blue-75-3.png";
hover36 = new Image();
hover36.src = "75/clubs-9-75.png";
thumb37= new Image();
thumb37.src = "75/back-blue-75-3.png";
hover37 = new Image();
hover37.src = "75/diamonds-7-75.png";
thumb38= new Image();
thumb38.src = "75/back-blue-75-3.png";
hover38 = new Image();
hover38.src = "75/diamonds-q-75.png";
thumb39= new Image();
thumb39.src = "75/back-blue-75-3.png";
hover39 = new Image();
hover39.src = "75/spades-6-75.png";
thumb40= new Image();
thumb40.src = "75/back-blue-75-3.png";
hover40 = new Image();
hover40.src = "75/spades-9-75.png";
thumb41= new Image();
thumb41.src = "75/back-blue-75-3.png";
hover41 = new Image();
hover41.src = "75/diamonds-9-75.png";
thumb42= new Image();
thumb42.src = "75/back-blue-75-3.png";
hover42 = new Image();
hover42.src = "75/hearts-3-75.png";
thumb43= new Image();
thumb43.src = "75/back-blue-75-3.png";
hover43 = new Image();
hover43.src = "75/hearts-10-75.png";
thumb44= new Image();
thumb44.src = "75/back-blue-75-3.png";
hover44 = new Image();
hover44.src = "75/diamonds-5-75.png";
thumb45= new Image();
thumb45.src = "75/back-blue-75-3.png";
hover45 = new Image();
hover45.src = "75/spades-7-75.png";
thumb46= new Image();
thumb46.src = "75/back-blue-75-3.png";
hover46 = new Image();
hover46.src = "75/spades-4-75.png";
thumb47= new Image();
thumb47.src = "75/back-blue-75-3.png";
hover47 = new Image();
hover47.src = "75/hearts-8-75.png";
thumb48= new Image();
thumb48.src = "75/back-blue-75-3.png";
hover48 = new Image();
hover48.src = "75/hearts-4-75.png";
thumb49= new Image();
thumb49.src = "75/back-blue-75-3.png";
hover49 = new Image();
hover49.src = "75/hearts-7-75.png";
thumb50= new Image();
thumb50.src = "75/back-blue-75-3.png";
hover50 = new Image();
hover50.src = "75/spades-8-75.png";
thumb51= new Image();
thumb51.src = "75/back-blue-75-3.png";
hover51 = new Image();
hover51.src = "75/hearts-6-75.png";
}
//This is the function that calls for change in buttons
function imageflip(thumbnailID,imageName)
{
document.images[thumbnailID].src = eval(imageName + ".src");
}
</script>
<title>Hey there! Welcome to my world!</title>
</head>
<body>
<font face="arial" size="7">
Pick 4 cards!</font><br><br>
<a href="#" onClick="imageflip('icon1','hover1')">
<img src="75/back-blue-75-3.png" border="0" name="icon1"/></a>
<a href="#" onClick="imageflip('icon2','hover2')">
<img src="75/back-blue-75-3.png" border="0" name="icon2"/></a>
<a href="#" onClick="imageflip('icon3','hover3')">
<img src="75/back-blue-75-3.png" border="0" name="icon3"/></a>
<a href="#" onClick="imageflip('icon4','hover4')">
<img src="75/back-blue-75-3.png" border="0" name="icon4"/></a>
<a href="#" onClick="imageflip('icon5','hover5')">
<img src="75/back-blue-75-3.png" border="0" name="icon5"/></a>
<a href="#" onClick="imageflip('icon6','hover6')">
<img src="75/back-blue-75-3.png" border="0" name="icon6"/></a>
<a href="#" onClick="imageflip('icon7','hover7')">
<img src="75/back-blue-75-3.png" border="0" name="icon7"/></a>
<a href="#" onClick="imageflip('icon8','hover8')">
<img src="75/back-blue-75-3.png" border="0" name="icon8"/></a>
<a href="#" onClick="imageflip('icon9','hover9')">
<img src="75/back-blue-75-3.png" border="0" name="icon9"/></a>
<a href="#" onClick="imageflip('icon10','hover10')">
<img src="75/back-blue-75-3.png" border="0" name="icon10"/></a>
<a href="#" onClick="imageflip('icon11','hover11')">
<img src="75/back-blue-75-3.png" border="0" name="icon11"/></a>
<a href="#" onClick="imageflip('icon12','hover12')">
<img src="75/back-blue-75-3.png" border="0" name="icon12"/></a>
<a href="#" onClick="imageflip('icon13','hover13')">
<img src="75/back-blue-75-3.png" border="0" name="icon13"/></a>
<a href="#" onClick="imageflip('icon14','hover14')">
<img src="75/back-blue-75-3.png" border="0" name="icon14"/></a>
<a href="#" onClick="imageflip('icon15','hover15')">
<img src="75/back-blue-75-3.png" border="0" name="icon15"/></a>
<a href="#" onClick="imageflip('icon16','hover16')">
<img src="75/back-blue-75-3.png" border="0" name="icon16"/></a>
<a href="#" onClick="imageflip('icon17','hover17')">
<img src="75/back-blue-75-3.png" border="0" name="icon17"/></a>
<a href="#" onClick="imageflip('icon18','hover18')">
<img src="75/back-blue-75-3.png" border="0" name="icon18"/></a>
<a href="#" onClick="imageflip('icon19','hover19')">
<img src="75/back-blue-75-3.png" border="0" name="icon19"/></a>
<a href="#" onClick="imageflip('icon20','hover20')">
<img src="75/back-blue-75-3.png" border="0" name="icon20"/></a>
<a href="#" onClick="imageflip('icon21','hover21')">
<img src="75/back-blue-75-3.png" border="0" name="icon21"/></a>
<a href="#" onClick="imageflip('icon22','hover22')">
<img src="75/back-blue-75-3.png" border="0" name="icon22"/></a>
<a href="#" onClick="imageflip('icon23','hover23')">
<img src="75/back-blue-75-3.png" border="0" name="icon23"/></a>
<a href="#" onClick="imageflip('icon24','hover24')">
<img src="75/back-blue-75-3.png" border="0" name="icon24"/></a>
<a href="#" onClick="imageflip('icon25','hover25')">
<img src="75/back-blue-75-3.png" border="0" name="icon25"/></a>
<a href="#" onClick="imageflip('icon26','hover26')">
<img src="75/back-blue-75-3.png" border="0" name="icon26"/></a>
<a href="#" onClick="imageflip('icon27','hover27')">
<img src="75/back-blue-75-3.png" border="0" name="icon27"/></a>
<a href="#" onClick="imageflip('icon28','hover28')">
<img src="75/back-blue-75-3.png" border="0" name="icon28"/></a>
<a href="#" onClick="imageflip('icon29','hover29')">
<img src="75/back-blue-75-3.png" border="0" name="icon29"/></a>
<a href="#" onClick="imageflip('icon30','hover30')">
<img src="75/back-blue-75-3.png" border="0" name="icon30"/></a>
<a href="#" onClick="imageflip('icon31','hover31')">
<img src="75/back-blue-75-3.png" border="0" name="icon31"/></a>
<a href="#" onClick="imageflip('icon32','hover32')">
<img src="75/back-blue-75-3.png" border="0" name="icon32"/></a>
<a href="#" onClick="imageflip('icon33','hover33')">
<img src="75/back-blue-75-3.png" border="0" name="icon33"/></a>
<a href="#" onClick="imageflip('icon34','hover34')">
<img src="75/back-blue-75-3.png" border="0" name="icon34"/></a>
<a href="#" onClick="imageflip('icon35','hover35')">
<img src="75/back-blue-75-3.png" border="0" name="icon35"/></a>
<a href="#" onClick="imageflip('icon36','hover36')">
<img src="75/back-blue-75-3.png" border="0" name="icon36"/></a>
<a href="#" onClick="imageflip('icon37','hover37')">
<img src="75/back-blue-75-3.png" border="0" name="icon37"/></a>
<a href="#" onClick="imageflip('icon38','hover38')">
<img src="75/back-blue-75-3.png" border="0" name="icon38"/></a>
<a href="#" onClick="imageflip('icon39','hover39')">
<img src="75/back-blue-75-3.png" border="0" name="icon39"/></a>
<a href="#" onClick="imageflip('icon40','hover40')">
<img src="75/back-blue-75-3.png" border="0" name="icon40"/></a>
<a href="#" onClick="imageflip('icon41','hover41')">
<img src="75/back-blue-75-3.png" border="0" name="icon41"/></a>
<a href="#" onClick="imageflip('icon42','hover42')">
<img src="75/back-blue-75-3.png" border="0" name="icon42"/></a>
<a href="#" onClick="imageflip('icon43','hover43')">
<img src="75/back-blue-75-3.png" border="0" name="icon43"/></a>
<a href="#" onClick="imageflip('icon44','hover44')">
<img src="75/back-blue-75-3.png" border="0" name="icon44"/></a>
<a href="#" onClick="imageflip('icon45','hover45')">
<img src="75/back-blue-75-3.png" border="0" name="icon45"/></a>
<a href="#" onClick="imageflip('icon46','hover46')">
<img src="75/back-blue-75-3.png" border="0" name="icon46"/></a>
<a href="#" onClick="imageflip('icon47','hover47')">
<img src="75/back-blue-75-3.png" border="0" name="icon47"/></a>
<a href="#" onClick="imageflip('icon48','hover48')">
<img src="75/back-blue-75-3.png" border="0" name="icon48"/></a>
<a href="#" onClick="imageflip('icon49','hover49')">
<img src="75/back-blue-75-3.png" border="0" name="icon49"/></a>
<a href="#" onClick="imageflip('icon50','hover50')">
<img src="75/back-blue-75-3.png" border="0" name="icon50"/></a>
<a href="#" onClick="imageflip('icon51','hover51')">
<img src="75/back-blue-75-3.png" border="0" name="icon51"/></a>
</body>
</html>
ok, quick and to the point. I have this... Code: <a href="www.mylink.com" class="myclass">click</a> and I wanna change it to a javascript function that can be called via the SAME tag, but with this link: Code: <a href="javascript: myfunction()">click</a> Here's what i have so far: Code: <head>
<script type="text/javascript">
function myfunction()
{
window.location.href='www.mylink.com';
}
</script>
</head>
<body>
<a href="javascript: myfunction()">click</a>
</body>
this works to the point where it only opens the link, but now i can't figure out how to add the class to it. I tried adding it inside the body tag, but it doesn't work. So, I'm wondering if it's possible to set the class in the javascript. Thanks in advance for the help, I really appreciate it Hi , I have a data coming as a string which contains single quotes and double quotes but it is showing up as Code: ' and " it should show it as Code: ' and " How do I fix this issue. in JavaScript. I have some data on the client side in javascript arrays that I display to user in a html table on the webpage. I want to give an option to the user to save the data in excel. I thought of a solution that involves: 1. Create an http request and post the data as json 2. On server using jsp convert the json data to html table 3. Set the response headers to open the response in excel This solution works, but does not look optimal. Why to send a http request to server when all the data is there on client side. I tried creating a new document on the client side and open that in a new window. That does not open the document in excel as the response header is not set. Any suggestions on how to achieve this. I want to avoid http request to server. Thanks, Pawinder Hi I have the following code which is created server side to convert postcodes from a database into coordinates. I'm fairly sure there's something in the javascript which is preventing all the postcodes from the code being converted. Does anyone have any ideas... This code has been taken from something else so could probably be tidied up a lot but every time I try it stops working. Thanks Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Geocoding UK Postcodes with Google APIs Demo</title>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
</head>
<body>
<div id="message"></div>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["PL14 4PW, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["EX10 0QN, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["BH19 3HG, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["CT18 8HB, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["NR9 4DD, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["BT94 5HF, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["FK17 8HY, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["SY7 9LT, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["LL58 8HU, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["SA62 3AL, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["DL8 3HQ, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
<script type="text/javascript">
var delay = 0;
if (GBrowserIsCompatible()) {
var geo = new GClientGeocoder();
function getAddress(search, next) {
geo.getLocations(search, function (result)
{
if (result.Status.code == G_GEO_SUCCESS) {
var p = result.Placemark[0].Point.coordinates;
var lat=p[1];
var lng=p[0];
document.getElementById("message").innerHTML += lat+ ',' +lng+'<br />'; //This is the line to change...
var point2 = new GLatLng(lat,lng); //Need to create this on the fly from the postcode in the database
var marker2 = createMarker(point2,'rtyrty');
map.addOverlay(marker2);
}
next();
}
);
}
var addresses = ["YO18 8RE, UK"];
var nextAddress = 0;
function theNext() {
if (nextAddress < addresses.length) {
setTimeout('getAddress("'+addresses[nextAddress]+'",theNext)', delay);
nextAddress++;
} else {
}
}
theNext();
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
</script>
</body>
</html>
Hi, I have a javascript program that currently takes the contents of a *.txt file and converts it to a string-type variable using a hidden iframe. For my pruposes it would be much nicer to read a *.csv file instead, however the method I'm using creates the "open/save file" pop-up window. All files are client-side and in the same folder on one computer; this is NOT server-side or internet-based. It is simply javascript used in an HTA file as programming code. The *.csv does not need to be edited, just read. I need to know how to convert the text of this *.csv file into a string variable. I have heard of using "xmlHTTPRequest (AJAX)" but am not familiar with how to use this. Any advice or code would be greatly appreciated. |
|||||||