|
JavaScript - Optimization Help Needed
So, this code does what it's supposed to do (check an array for dis-allowed input and supply the appropriate keyboard for touchscreen users) but I was worried that maybe this wasn't the most succinct logic...
Code:
kb=2,kp=1;
for(var i in Setup.DisAllowed){
if(Setup.DisAllowed[i]==0)
kp=0;
if(Setup.DisAllowed[i]==1||Setup.DisAllowed[i]==2)
kb--;
}
if(kp)APP.Module('KeyPad');
if(kb)APP.Module('KeyBoard');
if(kp&&kb)APP.Module('AlphaNumeric');
Keeping in mind the Setup.DisAllowed array and APP.Module method are fixed in stone, would anyone recommend a better way to use the array to select the necessary keyboard? Similar TutorialsThe following is inside a loop: Code: store1 = (Employees[i][3]==1)?'selected="true"':''; store2 = (Employees[i][3]==2)?'selected="true"':''; store3 = (Employees[i][3]==3)?'selected="true"':''; store4 = (Employees[i][3]==4)?'selected="true"':''; myTable+= '<td><select id="store' + i + '" onchange="" style="color:'+color1+' ; width:125px ; height:35px" >' +'<option ' + store1 + ' value="1">Pasadena</option>' +'<option ' + store2 + ' value="2">Alvin</option>' +'<option ' + store3 + ' value="3">Angleton</option>' +'<option ' + store4 + ' value="4">Bay City</option>' +'</select></td>' I originally came up with the idea in a similar part of the app that allowed choosing between employees and would ideally prefer something similar: Code: function BUILD_EMP_SELECTOR(){
empSelector = '<select id="empSelect" onchange="UPDATE_EMP();">';
for (i=1 ; i<AllEmployees.length ; i++){
Booleanselect = (i==me)?'selected="true"':'';
empSelector += '<option ' + Booleanselect + ' value="' + i + '">' + AllEmployees[i] + '</option>';
}
empSelector += '</select>';
ID('employee').innerHTML = empSelector;
}
The problem I'm having is that I would like to optimize the part of the first code that chooses which store a particular employee is at. I've also come up with this, but I'm not sure if its the best solution, or if it's even any better than my first: Code: store1=store2=store3=store4='';sel='selected="true"';
Employees[i][3]==1&&(store1=sel);
Employees[i][3]==2&&(store2=sel);
Employees[i][3]==3&&(store3=sel);
Employees[i][3]==4&&(store4=sel);
Also, while I would have to hard code additional stores +'<option ' + store5 + ' value="5">Elsewhere</option>' I would rather not have to add an additional "else if store5=" if possible. I know this is mostly code, and not much question, but what I'm looking for is mostly your opinions/recommendations... Ok, I have some extensive animation going on in this script. I have all the behavior I want out of this script. A 3D carousel interface, each window in the carousel is a separate UI window. It uses active scrolling for navs and content...like (iphone). The problem is that I have optimized to my best and still cant gain any performance out of IE. It runs pretty fast in FF, and in Safari. I have reversed loops, I have vared all my Math, I have stripped equations, could do more I guess, and I have made attempts at preventing even bubbling. I have minimized the use of <img> tags as well. I have even cached most methods and use a constructor method to create new HTML elements. At this point I am starting to feel like I am getting into techniques and areas of JS I just don't understand well. Here is example of a method I would like to optimize: Code:
this.anim = function () {
var s = Math.sin(s3D.A * .01);
var c = Math.cos(s3D.A * .01);
var xs = Math.round((s * this.x) + (c * this.z));
var zs = Math.round((s * this.z) - (c * this.x));
var ysSpeed = Math.round((s3D.Y - this.ys) / (s3D.speed * .1));
this.ys += ysSpeed;
var D = nw / (nw + zs);
var w = Math.round(D * (nw * s3D.zOOm));
var h = Math.round(w * s3D.HW);
var Zac = Math.round(this.Z * nw * this.ac);
var Zas = Math.round((this.Z * nw) * this.as);
var calcOTop = px(Math.round(nh * .5 + this.ys * D - (h * .5)));
var calcOtcTop = px(Math.round((h * .1 *D) - (w * .550)));
var calcOleft = px(Math.round(nw * .5 + xs * D - (w * .5)));
var calcOzindex = Math.round(D * 9);
var pxW = px(w);
var pxH = px(h);
var barHeight = px(Math.round(h * .2));
var barFontSize = px(Math.round(.031 * w));
var otvHeight = px(Math.round(h * .091));
var oMenuHeight = "90%";
var calcOMenuLeft = px(Math.round(w * .1 *D -(w *.480)));
var centerOtop = px(Math.round(nh * .4 + this.ys));
var centerOleft = "50%";
var floatLogotop = px(Math.round((nh * .68) + (this.ys + 20)));
var floatLogoleft = "50%";
if(this.Z > .4 && this.dZ || this.pZ > 0){
var s3Dspeed = Math.round(s3D.A -= xs / 50);
//s3Dspeed;
}
if(this.dZ){
this.Z *= 1.01;
this.x = Zac;
this.z = Zas;
}
if(this.Z > .8 && this.dZ){
this.dZ = false;
this.pZ = s3D.temp;
fadeOpacity("closeButton1"+newNID, 0, 100, 500);
fadeOpacity("closeButton2"+newNID, 0, 100, 500);
}
if(this.dZ == false && this.Z > .4){
if(this.pZ > 0) {
this.pZ--;
} else {
this.Z *= .995;
this.x = Zac;
this.z = Zas;
}
}
Any Help? This is a fairly nasty piece of calculation. Any way to make this run faster? Hey guys, I'm new both to this forum and javascript, I have made this small game to get me used to the canvas element, and basically just to entertain myself. http://beta.amando-filipe.co.cc/pong.html Right, take a look at the source code, I had to make that big Start() function so it would work on firefox, I am used to google chrome and apparently even badly made javascript runs on it, so I had to do a quick fix for firefox, what is the other way? Apparently I can't call functions inside the start function with events, like onmousedown etc. Here is the lates code, not yet uploaded to the site: Code: <!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="http://i.imgur.com/N7PTg.png">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>canvasPong</title>
<style type='text/css'>
body{background-color:#333; text-align:center;}
#text{width:750px;text-align:left;margin:0 auto;color:#FFF;}
.painted{background-color:#222;border-ballRadius:5px; -moz-border-ballRadius:5px; padding:5px; margin: 5px;}
iframe{background-color:#999;padding:5px;border-ballRadius:5px; -moz-border-ballRadius:5px;}
</style>
<script type='text/javascript'>
var ballSpeedX = 1;
var ballSpeedY = 1; //5
var pause = false;
var lost = false;
var pts = 0;
timer = false;
var time = 0;
var scoreset = false;
function Start() { /* System variables */
var frameDelay = 20;
var players = document.getElementById('players');
var playerInfo = players.getContext('2d');
var screen = document.getElementById('screen'); // Set up animation screen
var ctx = screen.getContext('2d'); // Set up animation screen
var out = document.getElementById('out'); // Set up information screen
var writeTo = out.getContext('2d'); // Set up information screen
var WIDTH = document.getElementById('screen').width;
var HEIGHT = document.getElementById('screen').height;
var WWIDTH = document.getElementById('out').width;
var WHEIGHT = document.getElementById('out').height; /* END */
/* Coordinate variables */
/* Colour related variables */
var R = 0;
var G = 0;
var B = 0; /* end */
/* Object variables */
var ballRadius = 10;
var ballX = ballRadius + 2;
var ballY = ballRadius + 2; /* end */
var lap = 0; /* end */
var paddleY = 0;
var prevPadY = 0;
var paddleWidth = 10;
var paddleHeight = 60;
var padDistToWall = 5;
var paddleX = WIDTH - padDistToWall - paddleWidth;
var mousemoved = false;
var speed;
var key = 0;
var highScores = [0, 0, 0, 0, 0];
highScores.length = 5;
var usr = ["", "", "", "", ""];
usr.length = 5;
var pify = 8;
var playerY = 20;
function bounce() {
if (pts >= 10) {
lost = true;
}
if (lost === true) {
frameDelay = 10000;
paddleY += 0;
ballSpeedX += 0;
ballSpeedY += 0;
writeCtx("You lost", 200, 150, 'purple', 50);
writeCtx("Press space bar to start new game", 180, 210, 'purple', 15);
if (scoreset === false) {
checkScore();
}
} else if (pause === true) {
frameDelay = 10000;
ballSpeedX += 0;
ballSpeedY += 0;
paddleY += 0;
writeCtx("Paused", 200, 150, 'purple', 50);
writeCtx("Press space bar to resume", 195, 210, 'purple', 15);
} else {
ballX += ballSpeedX;
ballY += ballSpeedY;
if (ballX - ballRadius <= 0) {
ballSpeedX *= -1;
} else {
ballSpeedX *= 1;
}
if (ballY + ballRadius >= HEIGHT || ballY - ballRadius <= 0) {
ballSpeedY *= -1;
} else {
ballSpeedY *= 1;
}
if (ballY >= paddleY && ballY <= paddleY + paddleHeight && ballX + ballRadius > paddleX && ballX - ballRadius < paddleX + paddleWidth) { // Hits paddle horizontally
if (speed >= 30) {
ballSpeedX += 0;
ballSpeedY += 0;
} else {
ballSpeedX += Math.random();
ballSpeedY += Math.random() + 0.2;
}
ballSpeedX *= -1;
R = randomNum(100, 255);
G = randomNum(100, 255);
}
if(ballX >= paddleX && ballX <= paddleX + paddleWidth && ballY + ballRadius > paddleY && ballY - ballRadius < paddleY + paddleHeight){
ballSpeedY *= -1;
}
if (ballX + ballRadius >= WIDTH) {
pts += 1;
ballX = 20;
ballY = randomNum(20, 380);
writeCtx("OOOPS!", 200, 150, 'purple', 50);
}
}
}
function randomNum(min, max) {
var Xz = Math.random() * max;
while (Xz < min) {
Xz = Math.random() * max;
}
return Math.round(Xz);
}
function paddle() {
ctx.beginPath();
ctx.fillStyle = '#00CD00';
if (paddleY === undefined) {
paddleY = 0;
}
if (paddleY + paddleHeight >= HEIGHT) {
paddleY = HEIGHT - paddleHeight;
}
if (paddleY < 0) {
paddleY = 0;
}
ctx.fillRect(paddleX, paddleY, paddleWidth, paddleHeight);
}
function rect(x, y, w, h) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.fill();
}
function write(what, whereX, whereY, colour, size) {
writeTo.textBaseline = 'top';
writeTo.fillStyle = colour;
writeTo.font = "bold " + size + "px sans-serif";
writeTo.fillText(what, whereX, whereY);
}
function writeCtx(whatt, whereXt, whereYt, colourt, sizet) {
ctx.textBaseline = 'top';
ctx.fillStyle = colourt;
ctx.font = "bold " + sizet + "px sans-serif";
ctx.fillText(whatt, whereXt, whereYt);
}
function writePlayerInfo(whatz, whereXz, whereYz, colourz, sizez) {
playerInfo.textBaseline = 'top';
playerInfo.fillStyle = colourz;
playerInfo.font = "bold " + sizez + "px sans-serif";
playerInfo.fillText(whatz, whereXz, whereYz);
}
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
writeTo.clearRect(0, 0, WWIDTH, WHEIGHT);
playerInfo.clearRect(0, 0, WWIDTH, WHEIGHT);
}
function round(x, y, rad, shape, colour) {
ballRadius = rad;
ctx.beginPath();
ctx.fillStyle = colour;
ctx.arc(x, y, rad, 0, Math.PI * 180, false);
ctx.fill();
}
function delay(millis) {
var date = new Date();
var curDate = null;
do {
curDate = new Date();
}
while (curDate - date < millis);
}
function checkScore() {
if ((time / 1000) > highScores[0] && (time / 1000) > highScores[1]) {
scoreset = true;
for (n = highScores.length; n > 0; n--) {
highScores[n] = highScores[n - 1]; // Scroll down.
usr[n] = usr[n - 1];
}
highScores[0] = (time / 1000);
usr[0] = prompt("You have set a new record, insert a nickname to save your score", "");
} else if ((time / 1000) > highScores[1] && (time / 1000) > highScores[2]) {
scoreset = true;
for (n = highScores.length; n > 1; n--) {
highScores[n] = highScores[n - 1]; // Scroll down.
usr[n] = usr[n - 1];
}
highScores[1] = time / 1000;
usr[1] = prompt("You have set a new record, insert a nickname to save your score", "");
} else if ((time / 1000) > highScores[2] && (time / 1000) > highScores[3]) {
scoreset = true;
for (n = highScores.length; n > 2; n--) {
highScores[n] = highScores[n - 1]; // Scroll down.
usr[n] = usr[n - 1];
}
highScores[2] = time / 1000;
usr[2] = prompt("You have set a new record, insert a nickname to save your score", "");
} else if ((time / 1000) > highScores[3] && (time / 1000) > highScores[4]) {
scoreset = true;
for (n = highScores.length; n > 3; n--) {
highScores[n] = highScores[n - 1]; // Scroll down.
usr[n] = usr[n - 1];
}
highScores[3] = time / 1000;
usr[3] = prompt("You have set a new record, insert a nickname to save your score", "");
} else if ((time / 1000) > highScores[4]) {
scoreset = true;
for (n = highScores.length; n > 4; n--) {
highScores[n] = highScores[n - 1]; // Scroll down.
usr[n] = usr[n - 1];
}
highScores[4] = time / 1000;
usr[4] = prompt("You have set a new record, insert a nickname to save your score", "");
}
}
function draw() {
clear();
round(ballX, ballY , ballRadius, 0, 'rgb(' + R + ',' + G + ',' + B + ')');
write('Ball X: ' + Math.round(ballX) + 'px', 2, 2, 'white', 12);
write('Ball Y: ' + Math.round(ballY) + 'px', 2, 14, 'white', 12);
write("pad height: " + Math.round(paddleY) + 'px', 2, 26, 'white', 12);
write('Balls lost: ' + pts + "/10", 2, 38, 'white', 12);
write("ball speed: " + (speed * 100) + "px/s", 2, 50, 'white', 12);
write("time: " + time / 1000 + "s", 2, 62, 'white', 12);
writePlayerInfo('Highscores', 29, 4, 'white', 16);
playerY = 20;
for (u = 0; u < highScores.length; u++) {
if (highScores[u] !== 0) {
writePlayerInfo(usr[u] + ", " + highScores[u] + 's', 8, playerY, 'white', 12);
playerY += 12;
}
}
speed = Math.round(Math.abs(Math.sqrt(ballSpeedX * ballSpeedX + ballSpeedY * ballSpeedY)));
if (mousemoved === false) {
writeCtx("Hello there, the computer is now controlling the paddle.", 10, 50, 'red', 22);
writeCtx("Move the mouse over the paddle to start playing.", 40, 80, 'red', 22);
writeCtx("Speed increases whenever the ball touches the paddle.", 10, 110, 'red', 22);
writeCtx("Use the space bar to pause.", 120, 140, 'red', 22);
paddleY = ballY ;
paddleY -= paddleHeight / 2;
}
paddle();
bounce();
}
function init() { // Set up stuff
draw();
return setInterval(draw, frameDelay);
}
function setStuff(e) {
timer = true;
mousemoved = true;
if (pause === true || lost === true) {
paddleY = paddleY;
} else {
prevPadY = paddleY;
paddleY = e.pageY - screen.offsetTop - 10 - (paddleHeight / 2);
}
}
function count() {
if (timer === true && lost === true) {
time += 0;
} else if (timer === true && pause === false && lost === false) {
time += 100;
}
}
init();
setInterval(count, 100);
screen.addEventListener('mousemove', setStuff, true);
}
function checkKey(event) {
key = event.keyCode;
if (key == 32 && lost === true) {
ballSpeedX = 5;
ballSpeedY = 5;
time = 0;
pts = 0;
lost = false;
scoreset = false;
} else if (key == 32 && pause === false) {
pause = true;
} else if (key == 32 && pause === true) {
pause = false;
}
}
function show_hide(what) {
var object = document.getElementById(what);
if (object.style.display == 'none') {
object.style.display = 'block';
} else {
object.style.display = 'none';
}
}
//]]>
</script>
</head>
<body>
<body onload="Start()" onkeydown="checkKey(event);">
<div id="text">canvasPong is the classic pong game done with the HTML5 canvas element.<br/>
You can only lose 10 balls, the person that lasts the longest time wins!<br/><br/>
<div class="painted" onclick="show_hide('brow');">Browser compatibility(click to show/hide):</div>
<ul id="brow" style="display:none">
<li>Google chrome: Good.</li>
<li>Safari: Works.</li>
<li>Firefox v3.5 and over: Laggy.</li>
<li>Untested but likely to work on: Opera and IE9+.</li><br/>
</ul>
<div class="painted" onclick="show_hide('bug');">Bugs and things to be fixed(click to show/hide):</div>
<ul id="bug" style="display:none;">
<li>Only your score is stored, working on saving ALL scores.</li>
<li>Sometimes the ball goes mad when it touches the paddle</li>
<li>"OOPS" is too fast</li>
<li>Ball physics could be better, I hate maths.</li>
</ul>
Coded by Amando Abreu<br/>
Last edited: 30/12/2010, 01:00</div>
<canvas id="players" width="150" height="400" style="border:2px solid blue;"></canvas>
<canvas id="screen" width="600" height="400" style="border:2px solid blue;"></canvas>
<canvas id="out" width="150" height="400" style="border:2px solid blue;"></canvas> <br/> <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbeta.amando-filipe.co.cc%2Fpong.html&layout=standard&show_faces=false&width=450&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
</body>
</html>
What else could be optimized for optimal performance? thanks a lot. i am building a graphing calculator, it works but it is slow. graph.graph(equ) is the main function it graphs. i think that this is the problomatic area. Code: var initgraph = function( canvasid )
{
var graph =
{
}
;
graph.logmsg = [];
var dlog;
graph.curlog = ( document.getElementById( "dlog" ) ) ? document.getElementById( "dlog" ) : null;
if ( graph.curlog === null ){
graph.dlog = function()
{
}
;
}
else{
graph.dlog = dlog = function( str )
{
graph.logmsg.push( str );
var temp = graph.logmsg.join( "\n" );
graph.curlog.value = temp;
return str;
}
;
}
//alert( 'debbuging log initalized' );
graph.canvas = document.getElementById( canvasid );
graph.dlog( "canvas found" );
graph.dlog( "width: " + ( graph.w = parseInt( document.defaultView.getComputedStyle( graph.canvas, null ).width, 10 ) ) );
graph.dlog( "height: " + ( graph.h = parseInt( document.defaultView.getComputedStyle( graph.canvas, null ).height, 10 ) ) );
graph.h2 = Math.round( graph.h / 2 );
graph.w2 = Math.round( graph.w / 2 );
graph.dlog( "computed styles calculated" );
graph.ctx = graph.canvas.getContext( "2d" );
graph.dlog( 'canvas context gained' );
graph.ctx.fillStyle = "#E0FFFF";
graph.dlog( 'styles set' );
graph.ctx.translate( graph.w2, graph.h2 );
graph.ctx.stroke();
graph.ctx.save();
graph.dlog( 'canvas context saved' );
graph.ctx.beginPath();
graph.dlog( 'axis postitions have been calculated' );
graph.lg = [];
graph.gs = [];
graph.dlog( 'arrays initialized' );
graph.goodsize = 1;
if( graph.h < 200 || graph.w < 200 ){
alert( "Canvas for graph is too small.\n Minimum recomended size is 200 X 200, recomended size is 500 X 500.\nSize is " + graph.h + " X " + graph.w + ".\n Graphs may be hard to see or they may be pointless." );
graph.goodsize = 0;
}
else{
graph.dlog( "graph is big enuf" );
}
if( graph.h != graph.w ){
alert( "The canvas is not square. Graph may not look right." );
graph.goodsize = 0;
}
else{
graph.dlog( 'graph is square' );
}
graph.lineTo = function( x, y ){
graph.ctx.lineTo( x, - y );
return graph;
}
;
graph.moveTo = function( x, y ){
graph.ctx.moveTo( x, - y );
return graph;
}
;
graph.dot = function( xx, yy )
{
if( ( typeof xx !== "number" || typeof yy !== "number" ) || Math.abs( xx ) > graph.w2 || Math.abs( yy ) > graph.h2 )
{
graph.dlog( "Dot (" + xx + ", " + yy + ") will not fit on the graph. Will not attempt to graph." );
return graph;
}
graph.ctx.fillStyle='#2B167B';
yy = 0 - Math.round( yy );
xx = Math.round( xx );
graph.ctx.fillRect( xx - 1, yy + 1, 3, 3 );
return graph;
}
;
graph.dlog( 'basic graphing methods created' );
graph.da = function( axes,ticks,orgin )/////////////////////////////////////////////////////////////////////////////////////////
{
// if ( clr === true )
// {
// graph.ctx.clearRect( - graph.w2, - graph.h2, graph.h, graph.w );
// } // old stuf.
graph.ctx.strokeStyle = "#2B167B";
if( axes ){
graph.moveTo( - graph.w2, 0 );
graph.lineTo( graph.w2, 0 );
graph.moveTo( 0, - graph.h2 );
graph.lineTo( 0, graph.h2 );
//alert('axes')
}
if( ticks ){
var j = - 3;
var i = - graph.w2;
for( i; i <= graph.w2; i += 10 )
{
graph.ctx.moveTo( i, j+0.5 );
graph.ctx.lineTo( i, j +5.5 );
}
j = - 3;
i = - graph.h2;
for( i; i <= graph.h2; i += 10 )
{
graph.ctx.moveTo( j+0.5, i );
graph.ctx.lineTo( j + 5.5, i );
}
// alert('ticks')
}
if( orgin ){
graph.dot( 0, 0)
// alert('orgin')
}
graph.ctx.stroke();
graph.ctx.beginPath();
return graph;
}
;
graph.dlog( 'axis drawing method initialized' );
graph.clrAll = function(){
graph.gs = [];
graph.ctx.fillStyle="#eoffff"
graph.ctx.fillRect( -graph.w2, -graph.h2, graph.w, graph.h );
graph.ctx.beginPath();
graph.dlog('graph cleared');
return graph;
}
graph.clrAll();
graph.dlog( 'axes drawn' );
graph.ec = function( /*y=*/equ ){
if( typeof equ !== "string" )
{
alert( "Equation must be a string." );
return false;
}
equ = equ.replace( /\|([^\|]+)\|/g, "Math.abs($1)" );
equ = equ.replace( /([a-z0-9\.\-]+)\s*\^\s*([a-z0-9\.\-]+)/, "Math.pow($1,$2)" );
// eventually this will allow for normal human syntax equations and not only javascript syntax ones
return equ;
}
;
graph.dlog( 'equation interpreter initialized' );
graph.graph = function( /*y=*/equ ){
equ = graph.ec( equ );
graph.ctx.strokeStyle='#800000';
if( equ === false )
{
alert( 'Pass equation as a string without the "y=", "f(x)=", "g(x)=" or similar.' );
return graph;
}
var a=graph.lg;
graph.gs[graph.gs.length] = equ;
var i = 0;
for( var x = 0 - graph.w2; x <= graph.w2; x ++ )
{
try
{ var a=graph.lg;
graph.lg[x] = eval(equ);
}
catch( e )
{
alert(graph.dlog("Bad syntax!"));
return graph
}
if( isNaN( graph.lg[x] ) || Math.abs( graph.lg[x] ) > graph.h2 )
{
if(isNaN(graph.lg[x])){
i=0}
}
else{
if( i === 0 ){
graph.moveTo( x, graph.lg[x] )
i = 1;
}
else{
graph.lineTo( x, graph.lg[x])
graph.ctx.stroke();
}
}
}
dlog('graphed '+equ);
return graph;
}
;
graph.dlog( 'main graphing object initialized. \ngraph library finished. exiting grafit.js' );
return graph;
}
// ---------------------------------------
;
it is used in this way Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<link rel='stylesheet' href="jsgraphcalcstyle.css" type="text/css" />
<title>Javascript graphing calculator</title>
<script type="text/javascript" src="untitled1.js">
</script>
</head>
<body>
<script type="text/javascript" src='clik.js'>
</script>
<form id="form" action='javascript:graf()' onsubmit="graf()" name="form">
<h1>Javascript Graphing Calculator</h1>
<div id="fakepad" class='back'>
<div id='back'>
<table summary="main structure">
<tr>
<td colspan="4"><canvas id="screen" class='back' title='Graph' width="500" height="500"></canvas></td>
</tr>
<tr>
<td colspan="2">
<span class="mem">f</span>(x) =
<input type="text" class='back' id="equat" accesskey="f" />
</td>
<td><button type="button" id="enter" value="Graph" onclick="graf()" accesskey="g">
<span class="mem">G</span>raph</button>
</td>
<td>
<!--
<input type="button" id="clear" value="Clear" onclick="graph.clrAll();">-->
<button type="button" id='clear' value='clear' onclick="clr();" accesskey="c">
<span class="mem">C</span>lear</button>
</td>
</tr>
<tr>
<td rowspan="2">
<input type="checkbox" id="showaxes" value="yes" checked='checked' onclick="clik()" accesskey="a" />
<label for="showaxes">Show <span class='mem'>a</span>xes</label>
<!-- results in Show axes with the a underlined-->
<br />
<input type='checkbox' id='showticks' value='yes' checked='checked' onclick='clik()' accesskey="t" />
<label for="showticks">Show <span class='mem'>t</span>ick marks</label>
<!-- results in Show tick marks with the t underlined-->
<br />
<input type="checkbox" id="showorgin" value="yes" disabled="disabled" onclick='da()' accesskey="o" />
<label for='showorgin' id='orginlab' class='dis'>Show <span class="mem">o</span>rgin</label>
<!-- results in Show orgin with the o underlined-->
<br />
</td>
<td><!--spacer--></td><!--spacer-->
<td><!--spacer--></td><!--spacer-->
</tr>
</table>
</div>
</div><!--inline div, requier <br>-->
<br />
finish the function above and press Graph to graph it.<br />
Each tick mark on the graph is 10 units.
<div id='debug' class="c2">
<textarea id='dlog' class="back" cols='70' rows="7" readonly="readonly">
</textarea><br />
<p class="c1">debugging log</p>
</div><span><br />
<input type='button' id='dbut' onclick="dis()" value="Show debugging log" /></span>
</form><script type="text/javascript" src='init.js'>
</script>
</body>
</html>
Hey guys, While I know you cannot use javascript for SEO, I need something similar. What I need is something like a search and replace program or something that does this: it takes aspects of the filename and incorparates it into the meta tags. For example, if a file was named "1x9.html" I would want it to edit the meta tag Season 1 Episode 9 I was just wondering if you guys know if such a thing exists. Like I would write a script or something in the program, saying for it to search and replace meta tags in file names, and it would 1. Analyze the filename (for this example it will be "1x9.html" 2. Input " Season 1 Episode 9 " into the meta tags (analyzing the first character in "1x9" as [Season] [First Character] , analyzing the "x" in 1x9 as [Episode] and analyzing the last character in "1x9" as [Last Character] I need to do this for like 80 thousand files, and I cannot do it 1 by 1. All of the elements that need to be in the meta tags already exist in the webpage contents or webpage filename. I was wondering if you guys know the best way for me to go about this? Hi, I managed to make a jquery drop down navigation system. I'm needing an opinion on the code as I suspect it could be alot cleaner and more efficient. A couple of niggling usability problems bug me - when a main link is in its active state and it is clicked on again it will slide up and then down again - I'd prefer it if it just stayed down and didn't move anywhere. The major thing that bugs me is if you think it breaks usability etiquette becuase the buttons move everywhere. If you think this is the case I will not use it. I understand there are forums for usability testing but if anyone has their opinions I'd be happy to hear them. You can view the navigation system he http://www.jrcreativedesign.co.uk/nav.html Thanks very much for your time and consideration. Hello all, I'm nick3d, from the UK. I'm new to this forum... Anyway... I am struggling with a project, basically what I want is. I want a slide in menu bar to the left of my screen, which is also a floating menu, so it follows my page when scrolled up and down, also, in the menu on the left I want the links to be like this UserCP FAQ Calender etc... Then once link clicked I want this to happen UserCP Change View Edit FAQ Calender, etc. so tabs can be opened, are there any available scripts out there which does all this?? Or could any one point me in the right direction? Hello guys i really need your help please. i need a code that when a button or image is clicked then a div's width and height are changed. Ive managed to get a few codes that does this, but the real problem is that, the contents of the div is an embedded flash file and i thought that by setting the flash width and height to 100% then the flash would fit to the new size of the div, but it just didnt work. I need a code that when a button is clicked then the div's and the flash's width and height are changed. please have a look at the temp website (http://latinunit.net/temp/ , you will understand where im coming from. on the right hand side i have a flash chat in a div , div is controled by a script that allows it to follow the scrollers up and down. My goal is to add a little button in the same div that says expand or maximise so when clicked the the div expands aswell as the flash file. i have spent 2 days on this little issue i just cant make it work, so please anyone can help me. Hi all, I'm a new member of this forum. I need help. My validation code checks for errors while filling out a permission form. If any of the fields are invalid it alerts a javascript box. But it disappears only after 2 mouse clicks. Can anyone help me out? Thank you. prik Hi everyone, Im have a problem here with having a mouseover hilight effect on my table. Can anyone help ? Im not great at js. PHP Code: if($i%2 == 0){$rcolor='#313131';}else{$rcolor='#212121';} $sql=mysql_query("SELECT * FROM ranks_memberxp WHERE xp <=$mem[points] ORDER BY xp DESC LIMIT 1"); $rank=mysql_fetch_assoc($sql); $sql=mysql_query("SELECT color FROM member_groups WHERE id=$mem[gid]"); $mem_color=mysql_result($sql,0); $out[body].=" <tr style='background-color:$rcolor' height='24' > <td valign='center' width='2%' align='center' background='$config[cellbgx]'><font color='white' size='3'> $i "; if($xp2[xperience_lastupdate] >= $xp2[xperience]){ $arrowicon=$out[body].="<img src='./images/rank_up.gif' border='0'>"; } else if($xp2[xperience_lastupdate] <= $xp2[xperience]){ $arrowicon=$out[body].="<img src='./images/rank_down.gif' border='0'>"; } else{ $arrowicon=""; } $out[body].=" </font></td> <td valign='center' width='7%' align='center'><img src='./images/flags/{$mem[country]}_small.gif' border='0' /></td> <td valign='center' width='7%' align='left' background='$config[cellbgx]'><a href='./profile.php?account=$mem[id]'><b><span style='color:$mem_color' size='3'>$mem[name]</span></b></a></td> <td valign='center' width='7%' align='center' background='$config[cellbgx]'><img src='$rank[image]' height='15px' width='15px' title='$rank[name]'/></td> <td valign='center' width='7%' align='center'>$pmerleague $pmerforum</td> <td valign='center' width='7%' align='center'><a href='aim:goim?screenname=$mem[aim]&message=Hello, are you there?'><img border='0' align='absmiddle' src='http://360IcoNs.com/images/aim.gif'></a></td> <td class='tag' valign='center' width='19%' background='http://www.360icons.com/theme/dark-grunge/images/box.png' style=' padding-left:130px;' align='center'>$mem[xbl]</td> <td valign='center' width='7%' align='center'><b>$mem[points]</b></td> <td valign='center' width='8%' align='center'>$online</td> <td valign='center' width='8%' align='center'>$mem[Joined]</td> </tr></text>"; CAN SOMEONE TRY EDIT THAT TO GET IT TO WORK ? I just cant get it.... Hello! I am currently having some troubles finishing my website. www.djbobambo.com. I would like the music to play on every html page but the problem is that when i change a pages the music resets and begins from the beginning. I would like it to continue so when you change from page to page the music keeps playing. Any ideas? Thanks! This is the code i use: Code: <img id="music" onclick="musicfunc()" src="images/buttons/on.png" width="195" height="20" style="float: center; padding-right: 50px; padding-top: 58px;">
<OBJECT id="MediaPlayer" width="1" height="1" style="position:absolute; left:0;top:0;" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject">
<PARAM name="URL" value="home.mp3">
<PARAM name="AutoStart" value="True">
<PARAM name="PlayCount" value="9999">
</OBJECT>
<script type="text/javascript">
var musicstat = "1";function musicfunc(){if(musicstat == "0"){document.getElementById ('music').src="images/buttons/on.png";musicstat = "1";document.getElementById("MediaPlayer").setAttribute("URL", "home.mp3");}else if(musicstat == "1"){document.getElementById ('music').src="images/buttons/off.png";musicstat = "0";document.getElementById("MediaPlayer").setAttribute("URL", "");}}
</script>
I have created most of the code however I would like to expand my options. Basically the code changes an image when a user makes a selection from a drop down menu. <head> Code: <script language="javascript">
function linkrotate(which){
var mylinks=new Array()
mylinks[0]="http://www.#.com"
mylinks[1]="http://www.#.com"
mylinks[2]="http://www.#.com"
window.location=mylinks[which]
}
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>
<body> Code: <table border="0" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><form name="mygallery"><p><select name="picture" size="1" onChange="showimage()"> <option selected value="image1.jpg">Option 1</option> <option value="image2.jpg">Option 2</option> <option value="image3.jpg">Option 3</option> </select></p> </form> What I would like to do it have two drop down menus that work together instead of one - providing a more accurate image for the user. Right now the user has one option to select from the drop down menu in which the image is changed. I'd like to be able to have the user choose from two drop down menus. For example: Drop down menu number 1 Shoe Color: Black or Red Drop down menu number 2 Shoelace Color: White or Brown Where a user chooses 'Black' from the first option then the images will only show a black shoe with white laces or brown laces (based on their choice from the next drop-down menu. Furthermore, where a user chooses 'Red' from the first option then image from the next choice will only show a red shoe with white or brown laces. I have been trying for hours to do the following: - Change the background of a div by clicking a link from another div tag. - It also needs to change back when clicked again. I know there are alot of experienced coders out there and I'm eager to learn... help would be appreciated! Hi I'm trying to download the security image from this site (at the bottom): http://pacesalsa.promotionexpert.com...2/register.jsp However, every time one refreshes the image, the image changes (obviously). So, I'm trying to figure out how to download the current image on the page to a jpg or png (or any image file type). Could someone please tell me how to do this? Thanks. Hi guys i am new to this forum facing some issues with my php code. The code below says on click go to cart.php I want to add a condition to the same-- if(reasons==Internal) { go to="cart1.php" } else { go to="cart.php" } Kindly help me with the same.... <td> <p align="center"> <input name="Next" type="button" id="Next" value="Next" onmouseover="reasonempty();"onclick='javascript:window.location.href="cart.php?form=tmrfForm&field=" +document.getElementById("reasons").value+"&field5="+document.getElementById("weekend").value,"","to p=0,left=400,width=1000,height=1000,menubar=yes,toolbar=yes,scrollbars=yes,resizable=yes,status=yes" ; return false;'> </p> </td> Will appreciate if pls put the code ....... I am needing to use javascript to show a prompt, and when the user enters a number from 1-12 (1 for each month of the year) it adds it to a new array. Then when the user types "stop" it prints the corresponding months. I'm new to javascript so I am not quite sure how to go about doing it. This is what I have currently, but I don't think it is right. Code: <script type="text/javascript">
var month=['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var selmonth= new Array();
var month2=prompt('Which Month', '');
if (month2==1){
selmonth[0] = month[1];
var month2=prompt('Which Month', '');
}
if (month2==2){
selmonth[1] = month[2];
var month2=prompt('Which Month', '');
}
if (month2==3){
selmonth[2] = month[3];
var month2=prompt('Which Month', '');
}
if (month2==4){
selmonth[3] = month[4];
var month2=prompt('Which Month', '');
}
if (month2==5){
selmonth[4] = month[5];
var month2=prompt('Which Month', '');
}
if (month2==6){
selmonth[5] = month[6];
var month2=prompt('Which Month', '');
}
if (month2==7){
selmonth[6] = month[7];
var month2=prompt('Which Month', '');
}
if (month2==8){
selmonth[7] = month[8];
var month2=prompt('Which Month', '');
}
if (month2==9){
selmonth[8] = month[9];
var month2=prompt('Which Month', '');
}
if (month2==10){
selmonth[9] = month[10];
var month2=prompt('Which Month', '');
}
if (month2==11){
selmonth[10] = month[11];
var month2=prompt('Which Month', '');
}
if (month2==12){
selmonth[11] = month[12];
var month2=prompt('Which Month', '');
}
if (month2=='stop'){
document.write(selmonth.join(" <br> "));
}
else{
alert('Please enter a valid value');
}
</script>
It'd be great if someone is able to help me. Thanks. Hello. I want to display some text in some part of website when user "rolls over" an image. How can I make it possible? Text position must be totally flexible. (not over image) Pretty pretty please help me with this I am running out of time and pulling my hair out with this whole thing. Thanks a million in advance! Rhonda <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script> function numberGuess() { stringVar=prompt("Enter your guess number"); while (stringVar<999) { } } </script> <script> function enterNames() { stringVar=prompt("Enter name"); } </script> <script> function enterProducts() { stringVar=prompt("Enter product name"); return } </script> </head> <body> <p> </p> <h1>WDV221 Intro Javascript</h1> <h3 align="center">Javascript Loops</h3> <p>Topics: loops, for loops, while loops, sentinels!</p> <p>Place all script code on this page.</p> <p>1. Create a function that will ask you for a number until you enter 999 which will end the loop. You do not need to display the number. </p> <p>2. Create a function that will ask you for a name until you tell the function that you do not have any more names. After you enter each name it will ask you if you have more names to enter. If you enter yes the process will continue. Display each name at the end of the following sentence.</p> <p>The name you entered is: </p> <p>3. Create a runtime script that will use a prompt( ) to accept how many products will be displayed. Use a for loop to display "Product Name" and the product number as a <p> element.</p> <p><strong>Example output:</strong></p> <p>Product Name 1</p> <p>Product Name 2</p> <p>...</p> <p>4. Create a runtime script that will use a nested for loop to create a table with 3 rows and 5 cells. Place the same number or a letter in each cell. </p> <p>Hint: Write a table in HTML. Do a row first then do multiple rows. </p> <p>5. Create a function called totalSales( ) that will ask the user to enter an amount until you enter "done". Add those amounts together and display them in an alert when the user is done entering amounts..</p> <p>Have fun!!</p> </body> </html> new to JavaScript, simple question... question: how do i determine an output from a prompt to be bold? e.g. a user enters "hello" and the output printed from the prompt becomes bold one=parseFloat(prompt('enter number',0.bold)); I'm working very hard to create a dynamic web-site for use in the education sector using server-side php/MySQL and client-side HTML with javascript. I have a logon page (index.php) which looks to see if the cookie 'mylogon' is set with the value 'Again'. This cookie is set when the PHP element on the server detects an invalid username/password combination. If so I have a javascript function (see below) call from the HTML <body onload="check_invalid_user()"> I know that the function Get_Cookie is working ok and that the javascript variable 'again' has the value 'Again' in it and has a length of 5. The alert function is not executed though. function check_invalid_user() { again = Get_Cookie('mylogon'); // document.write(again); // document.write(again.length); If (again == 'Again') { alert("User-id and/or password incorrect -- Please re-enter"); } } ============= Any help would be appreciated Many thanks in advance. (Yeah you guessed it I'm new and raw to this stuff. |
|||||||