|
JavaScript - Need Opinion On Drop Down Navigation (usability Etc) And Possible Code Optimization
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. Similar TutorialsHey 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>
Hi, I'm after a drop down script that basically you press categories and down it drops with say one side products by category the left side and say product by price the right side. Ign.com do it when you click on one of the top links I'm just not sure of the name and the most easiest to implement? Any help wolf be great Many thanks Joe Been working my *** off on this for a few days trying to keep updating it to make it most efficient with everything I learn... I'm quite proud of it so far considering I'm not actually the best coder lol most JS and PHP confuses the crap outa me unless I do it from scratch. So anyways here is the link. Tell me what you think. Suggestions would be amazing. I'd love to know what I screwed up as long as you explain in detail as to why and how to fix it. I really hate when people hand me a huge snippet and expect me to understand it -_- Thanks Shelby LINK http://opentech.durhamcollege.ca/~in...rittains/labs/ (Its an interface to display my school web design labs... the interface it self has almost NOTHING to do with school work as my labs are mostly based off php and we don't even touch JS till the third year =[ so its safe ^.^ so don't worry I'm not asking you to do my school work ^.^) Hi I use dreamweaver to build sites, and so don't really have to do much with the code, however adobe cs5 has removed the navigation bar tool and I am totally lost without it. I know Java script is needed... Could anyone help? If someone has some code ,for a vertical navigation bar with 8 buttons, 3 images for each button, buttonup mouse over and button down (which is of course a link to another page), that I could copy and edit, it would help alot! Hello all! I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more. It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca). My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time. Here is my Javascript: Code:
var categoryLink=new Array();
var counter;
var link = "";
categoryLink[0] = "";
categoryLink[1] = "";
categoryLink[2] = "";
counter = "0";
$(document).ready(function() {
$(".atonal").live('click', function() { {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "atonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".tonal").live('click', function() {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "tonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".being").live('click', function() {
alert("sometext");
categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
if (categoryLink[1]=="") {
categoryLink[1] = "being";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".doing").live('click', function() {
alert("sometext");
if (categoryLink[1]=="") {
categoryLink[1] = "doing";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".abstract").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "abstract";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".documentary").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "documentary";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
and the HTML in question: Code: <table> <tr> <td height="35" width="210" valign="top">choose your sound</td> <td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td> <td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td> </tr> <tr> <td height="35" width="210" valign="top">choose your text</td> <td width="165" valign="top"><a href="#" id="being">being words</a></td> <td width="165" valign="top"><a href="#" id="doing">doing words</td> </tr> <tr> <td height="35" width="210" valign="top">choose your image</td> <td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td> <td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td> </tr> </table> I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great! The 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? 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? 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'm trying to edit a script that allows multiple drop downs, and simply adds a table depending on the answers (ready for form submittion) this works 100% in firefox, but falls over in IE.... this is the code Code: <script type="text/javascript">
function f (sel) {
var d = document, dv;
if (d.getElementById) {
for (var ii=0; ii < sel.options.length; ii++) {
dv = d.getElementById(sel.options[ii].value);
if(dv) dv.style.display = sel.options[ii].selected? "block": "none";
}
}
}
function convf (sl) {
if (sl.selectedIndex==1) {
var disp = document.getElementById('yesc');
disp.style.display='block';
} else {
var disp = document.getElementById('yesc');
disp.style.display='none';
}
}
</script>
<!--[if IE]>
<script type="text/javascript">
function f(sel){
var d=document, dv;
if(d.getElementById){
for(var ii=0; ii<sel.options.length; ii++){
dv=d.getElementById(sel.options[ii].text);
if(dv)
dv.style.display=sel.options[ii].selected?"block":"none";
}
}
}
</script>
<![endif]--> <script type="text/javascript">
function showhide()
{
var radi = document.getElementById('radio1');
var row1 = document.getElementById('one');
var row2 = document.getElementById('two');
if (radi.checked == true) {
row1.style.display = '';
row2.style.display = 'none';
}
else {
row1.style.display = 'none';
row2.style.display = '';
}
}
</script>
any ideas why this wont work? http://www.engtechjobs.co.uk/candreg.php I have some code to pick a wire size and conduit size from 2 separate drop down list. Then inside the js it is evaluated to decide how many wires. My problem is I can't figure out how to make the drop down options go into the JS. I just put in an error alert to test if they were for now. Here is my code: Code: function fillcap(){
var wire = document.getElementById("wireSize");
var conduit = document.getElementById("conduitSize");
if (wire.option.length >= 10 && conduit.option.length == .5) {
windows.alert("Wire Size exceeds conduit max fill!")
}
And the html Code: <h2>Fill Capacity</h2><br>
<b>Wire Size</b><br>
<select id ="wireSize">
<option value="1">#14</option>
<option value="2">#12</option>
<option value="3">#10</option>
<option value="4">#8</option>
<option value="5">#6</option>
<option value="6">#4</option>
<option value="7">#3</option>
<option value="8">#2</option>
<option value="9">#1</option>
<option value="10">1/0</option>
<option value="20">2/0</option>
<option value="30">3/0</option>
<option value="40">4/0</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="600">600</option>
<option value="700">700</option>
<option value="750">750</option>
</select> <br>
<b>Conduit Size</b><br>
<select id="conduitSize">
<option value=".5">1/2</option>
<option value=".75">3/4</option>
<option value="1">1</option>
<option value="1.25">1-1/4</option>
<option value="1.5">1-1/2</option>
<option value="2">2</option>
<option value="2.5">2-1/2</option>
<option value="3">3</option>
<option value="3.5">3-1/2</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select><br>
<input value="Wires allowed" onclick="fillcap()" type="button">
<input type="text" name="myresultbox" id="resultbox10"> Wires<br>
Thank you for any advice. I have been searching for a long time but have been unsuccessful on how to develop a drop down menu but have the menu items show in a list above the main nav. Not below. I really like the way this functions: http://www.sohtanaka.com/web-design/examples/toggle/ But I would like the item in the list to appear above the main nav so it animates up not down. Can anyone help me on how to alter this js code to perform this task? Here is the jQuery file link: http://code.jquery.com/jquery-latest.js I tried going through this js file but it very complex. Can anyone tell me what I need to change to have the animation roll up instead of down? Any help would be most appreciated. Hello everyone! So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). I'm hoping someone can tell me why it is happening and how to fix it! Code: // JavaScript Document
var posX;
var posY;
var element;
function drag(event) {
element = document.getElementById("square");
posX = event.clientX;
posY = event.clientY;
element.addEventListener("mousemove", move, false);
}
function move(event) {
if (typeof(document.getElementById("square").mouseup) == "undefined")
element.addEventListener("mouseup", drop, false);
//Prevents redundantly adding the same event handler repeatedly
element.style.left = event.clientX - posX + "px";
element.style.top = event.clientY - posY + "px";
}
function drop() {
element.removeEventListener("mousemove", move, false);
element.removeEventListener("mouseup", drop, false);
}
the html is a simple (position is set to relative): <p id="square" onmousedown="drag(event)">meep</p> Lastly, and most importantly, thank you all for your time =] EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library. Hello there, CodingForums.com! I'm a newbie to Javascript, HTML, XHTML, CSS-- and oh god, everything, so please bear with me! I have come to understand that to get any better, I'll need support. I hope you guys (and gals) can assist! Here is my issue: I'm currently trying to develop a first-draft calculator that will allow me to calculate some values for work and the way I want it requires me to do it with a pair of drop-downs. Take a look at it he http://www.projectvoid.co.uk/ I would like to select the first drop-down, on the left-hand side (Current Lighting Products -> Type of Lamp) and for the right-hand side to copy it's selected value (Energy Efficient Products -> Type of Lamp). Furthermore, it shouldn't interfere with the fact that I'm also using those values with my dependent drop-down, below (Wattage). The only piece of code I've found that might help is this: Code: function setSelect(name1, name2)
{
var select1 = document.forms.formname.elements[name1];
var select2 = document.forms.formname.elements[name2];
select1.selectedIndex = select2.selectedIndex;
}
I am also unsure how to utilize it. I look forward to your aid! Thank you in advance. Okay, I'm having some trouble getting my head around how to do this.. Code: <select> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option value="Rhino">Rhino</option> <option value="Bird">Bird</option> <option value="Rooster">Rooster</option> </select> <select> <option value="0202A">Rhino - Text</option> <option value="0203A">Rhino - Text2</option> <option value="0204A">Bird - Text1</option> <option value="0205A">Bird - Text2</option> <option value="0202B">Rhino - Text</option> <option value="0204B">Rhino - Text2</option> <option value="0204C">Rooster - Text1</option> <option value="0205C">Rooster - Text2</option> <option value="0206C">Rooster - Text3</option> </select> So say we had those three drop-downs. I'm looking to make it so that second drop-down only has options corresponding to a relationship between the first and the third drop-down. Example - if you select A in the first drop-down you only see Rhino and Bird in the second drop-down. If you select B you will only see Rhino in the second drop-down. Lastly, if you select C you will only see Rooster in the second drop-down. Just can't figure this out. >.< I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it... I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same.... My live demo is here! Thank you for any help and/or advice in advance, Best Regards, Tim Dear Forum guys, i need a serious help of something i am making a website for a client, and as you can see the picture by clicking on this link http://user3.jabry.com/davidasp/pic.html i've made a navigation bar with javascript and underneath it is a flash swf file however when my mouse is over the navigation bar the drop down sub menu is appearing behind the flash as you can see in the picture. Please... what is wrong ???? why isn't it appearing infornt of the flash file. the code of the page is .... <body> <!-- DO NOT MOVE! The following AllWebMenus linking code section must always be placed right AFTER the BODY tag--> <!-- ******** BEGIN ALLWEBMENUS CODE FOR menu ******** --> <script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="../menu.js" type="text/javascript"></script><script type="text/javascript">awmBuildMenu();</script> <!-- ******** END ALLWEBMENUS CODE FOR menu ******** --> <div id="container"> <div id="header"></div> <div id="navig"><span id="awmAnchor-menu"> </span></div> <div id="nav-submenu" ></div> <div id="mainContent"> <div id="homeflash"> <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="786" height="200"> <param name="movie" value="../uploads/flash/en-main.swf" /> <param name="quality" value="high" /> <embed src="../uploads/flash/en-main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="786" height="200"></embed> </object> </div> .... and also as you can see in the picture the background is also breaking apart. Please help me guys, i can't figure out why is this happening??? Thank you I'm trying to learn to write javascript myself. So please, don't right anything for me, just steer me in the right direction. The way I have my my navigation set up is when the user clicks on a section of the main nav, the subnav displays beneath the header (see the pic more a visual idea). I want the the subnav for "Services" to be displayed on all pages that are listed under Services. Same thing for everything else on the nav bar. They way it's set up right now, the "about" submenu is displayed on every page. If the user clicks on "services" then that submenu displays. Just in case you need it, I'm posting the code for that. Like I said above, please don't write anything for me, just point me in the right direction. Code: /*Javascript to display Sub Menu */
function showAbout() {
if(subnav.style.display=="none") {
subnav.style.display="block";
services.style.display="none";
contact.style.display="none";;
partners.style.display="none";
}
else subnav.style.display="none";
}
function showServices() {
if(services.style.display=="none"){
services.style.display="block";
subnav.style.display="none";
contact.style.display="none";
partners.style.display="none";
}
else services.style.display="none";
}
function showContact() {
if(contact.style.display=="none"){
contact.style.display="block";
subnav.style.display="none";
services.style.display="none";
partners.style.display="none"
}
else contact.style.display="none";
}
function showPartners() {
if(partners.style.display=="none"){
partners.style.display="block";
subnav.style.display="none";
services.style.display="none";
contact.style.display="none";
}
else partners.style.display="none";
}
|
|||||||