Learn VBA & Macros in 1 Week!

JavaScript - 2d Collision Not Working

Full Excel VBA Course - Beginner to Expert

2d Collision Not Working	View Content

im making a sniper game where you shoot apples, and i need to check when the crosshairs are on the apple whenever the user clicks the canvas (note that the onclick listener is in the html, thats why you dont see it, and ive checked that it works). This code doesnt work
Code:

var crosshair = [250, 200];
var appley = [-100,-400,0,-250];
var applex = [0,200,400,500];
var canvas = document.getElementById("game");
function getMousePos(canvas, evt) {
	var rect = canvas.getBoundingClientRect();
        return {
		x: evt.clientX - rect.left,
		y: evt.clientY - rect.top
        };
}
var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function(evt) {
	var mousePos = getMousePos(canvas, evt);
        crosshair[0] = mousePos.x;
	crosshair[1] = mousePos.y;
}, false);
function draw(x, y, image){
	var context = canvas.getContext("2d");
	var imageObj = new Image();
	imageObj.onload = function() {
		context.drawImage(imageObj, x, y);
	};
	imageObj.src = image;
}
function shoot(){
	for(i = 0; i < 4; i++){
		if(crosshair[0]-400 > applex[i] && crosshair[0]-400 < applex[i]+80 &&   // THIS IS THE COLLISION
		   crosshair[1]-300 > appley[i] && crosshair[1]-300 < appley[i]+80){
			appley = 500;
			alert("hit");
		}
	}
}
function main(){
	draw(0,0,"background.jpg");
	for(i = 0; i < 4; i++){
		draw(applex[i],appley[i],"apple.png");
		appley[i] = appley[i]+10;
		if(appley[i] > 450){
			appley[i] = -50;
			applex[i] = Math.floor((Math.random() * 5) + 1)*100;
		}
	}
	draw(crosshair[0]-400, crosshair[1]-300, "crosshair.png");
}
var mainint = setInterval(function(){main();}, 100);

help plz

Full Excel VBA Course - Beginner to Expert

Help With Javascript Collision?

Similar Tutorials

View Content

Hello,
I'm making a simple javascript game. There is a square stage with a bouncing ball in it. The user can move a paddle along the bottom of the square using the arrow keys to hit the ball, and make it continue bouncing. If the user's paddle doesn't reach the ball in time, it falls to ground, game over.
However, my collision isn't working. The ball falls right through my paddle. What am I doing wrong?

Code is he

<!DOCTYPE HTML PUBLIC>

<html>
<head>
<title>Bask-A-Bounce!</title>
<style>
#stage{
position: absolute;
top: 100;
left: 100;
border: 3px solid black;
width: 500;
height: 500;
background-color: #E0FFFF;
}
#paddle{
position: absolute;
top: 470;
left: 228;
width: 64;
height: 16;

}
#ball{
position: absolute;
top: 4;
left: 200;
width: 16;
height: 16;
}
#score{
position: absolute;
top: 486;
left: 0;
width: 500;
height: 14;
background-color: rgb(32,128,64);
}
</style>
<script language="JavaScript">
//get info, process data, update screen objects
//instance vars
var ball;
var paddle;
var score;
//initial speeds
var dx = 5;
var dy = 5;
var currentScore = 0;
var timer;
//set initial conditions for ball and paddle
var paddleLeft = 228;
var ballLeft = 300;
var ballTop = 4;

function init(){
//instantiate HTML object instance vars
ball = document.getElementById('ball');
paddle = document.getElementById('paddle');
score = document.getElementById('score');
//register key listener with document object
document.onkeydown = keyListener;
//start the game loop
start();
}

function keyListener(e){
if(!e){
//for IE
e = window.event;
}
if(e.keyCode==37 && paddleLeft > 0){
//keyCode 37 is left arrow
paddleLeft -= 4;
paddle.style.left = paddleLeft + 'px';
}
if(e.keyCode==39 && paddleLeft < 436){
//keyCode 39 is right arrow
paddleLeft += 4;
paddle.style.left = paddleLeft + 'px';
}

}

function start(){
//game loop
detectCollisions();
render();

//end conditions
if(ballTop < 470){
//still in play - keep the loop going
timer = setTimeout('start()',50);
}
else{
gameOver();
}
}

function detectCollisions(){
//just reflect the ball on a collision
//a more robust engine could change trajectory of ball based
//on where the ball hits the paddle
if(collisionX())
dx = dx * -1;
if(collisionY())
dy = dy * -1;
}

function collisionX(){
//check left and right boundaries
if(ballLeft < 4 || ballLeft > 462)
return true;
return false;
}

function collisionY(){
//check if at top of playing area
if(ballTop < 4)
return true;
//check to see if ball collided with paddle
if(ballTop > 470){
if(ballLeft > paddleLeft && ballLeft < paddleLeft + 64)
return true;
}
return false;
}

function render(){
moveBall();
updateScore();
}

function moveBall(){
ballLeft += dx;
ballTop += dy;
ball.style.left = ballLeft;
ball.style.top = ballTop;
}

function updateScore(){
currentScore += 5;
score.innerHTML = 'Sco ' + currentScore;
}

function difficulty(){
//as the game progresses, increase magnitude of the vertical speed
if(currentScore % 1000 == 0){
if(dy > 0)
dy += 1;
else
dy -= 1;
}
}

function gameOver(){
//end the game by clearing the timer, modifying the score label
clearTimeout(timer);
score.innerHTML += " Game Over";
score.style.backgroundColor = 'rgb(128,0,0)';
}

</script>
</head>
<body onLoad="init()">
<h1>Bask-A-Bounce</h1>
<div id="stage">
<div id="paddle">
<img src="paddle1.gif">
</div>
<div id="ball">
<img src="ball.gif">
</div>
<div id="score">
Sco 0
</div>
</div>

<embed name="SJT"
src="SJT.mp3"
loop="false"
hidden="true"
autostart="true">
</embed>

</body>
</html>

My Collision Detection Fails!!!

Similar Tutorials

View Content

i cant get collission detection to work. i tryed but it always caused an infinite loop. heres the code.
Code:

<html>
<!-- main file.-->
<head>

<title>lightning generator</title>

</head>

<body>
<canvas id='world' width='500' height='500' style='border: 1px solid black; padding:0;'></canvas>
<script type="text/javascript" src='world.js'></script>
<script type='text/javascript' src='eC.js'></script>
<script type='text/javascript' src='world.ground.js'></script>
<script type='text/javascript'>
world.bolt = {
}
;
world.bolt.paths = [];
// main obj inits

world.bolt.draw = function(){

   var x, y;
   for( var id = 0; id <= world.bolt.draw.num; id ++ ){
   
      world.ctx.moveTo( world.bolt.paths[id].x[world.bolt.paths[id].x.length-1],  world.bolt.paths[id].y[world.bolt.paths[id].y.length-1] );
      var mdx=Math.floor(Math.random()*world.bolt.paths[id].mdx);
      x = world.bolt.paths[id].x[world.bolt.paths[id].iters] + ((Math.random()<Math.random())?mdx:-mdx);
      y = ++ world.bolt.paths[id].iters;
      world.bolt.paths[id].x.push( x );
      world.bolt.paths[id].y.push( y );
      world.ctx.strokeStyle = world.bolt.paths[id].color;
      world.ctx.lineTo( x,  y );
      
   
   world.ctx.stroke();
   //world.ctx.beginPath();
   }   if(x%3==0){ world.ctx.fillStyle=world.skyColor;
    world.ctx.fillRect(0,0,world.w,world.h);}
}
world.bolt.draw.num=-1;
world.bolt.cpath = function( x, y, mdx, srate, id, color ){
   world.bolt.paths[id] = {
   }
   ;
   world.bolt.paths[id].iters = 0;
   world.bolt.paths[id].x = [];
   world.bolt.paths[id].y = [];
   world.bolt.paths[id].x[0] = x;
   world.bolt.paths[id].y[0] = y;
   world.bolt.paths[id].mdx = mdx;
   world.bolt.paths[id].srate = srate;
   world.bolt.paths[id].color = color;
   world.bolt.draw.num += 1;
}
world.bolt.cpath(250,0, 5,5,0,'rgba(255,255,150,.5)');
window.setInterval(world.bolt.draw,100)
window.setTimeout('world.bolt.cpath(125,0,5,5,1,"rgba(255,10,0,.5)")',1000);
</script>
</body>
</html>

Code:

//world.js
var world = {
skyColor:'rgba(0,0,100,.009)'  
}
;
world.canvas = document.getElementById( 'world' )
world.canvas.cstyle = document.defaultView.getComputedStyle( world.canvas, null )
world.w = parseInt( world.canvas.cstyle.width, 10 );
world.h = parseInt( world.canvas.cstyle.height, 10 );
world.ctx = world.canvas.getContext( '2d' );

finally,
Code:

// world.ground.js

world.ground = {
}
;
world.ground.level = [];


world.ground.make = function( GArray, length ){

   world.ctx.strokeStyle = '#000000';
   world.ground.level = [];
   world.ctx.fillStyle = '#FFF';
   world.ctx.fillRect( 0, 0, world.w, world.h );
   world.ground.level = GArray;
   for ( world.ground.make.i = 0; world.ground.make.i <= length; world.ground.make.i ++ ){
      if ( GArray[world.ground.make.i + 1] === undefined ){
         GArray[world.ground.make.i + 1] = GArray[world.ground.make.i];
      }

      world.ctx.moveTo( world.ground.make.i, ( world.h ) );
      world.ctx.lineTo( world.ground.make.i, ( world.h - GArray[world.ground.make.i] ) );
   }
   world.ctx.stroke();
   world.ctx.beginPath();
}
;

world.ground.create = function( func, width ){
   func = ec( func );
   if( func === false ){
      alert( 'Pass equation as a string without the "y=", "f(x)=", "g(x)=" or similar.' );
      return world;
   }
   if( func == 'perspicaciousness' ){
      return world;
   }
   var temp = [];
   for( var x = 0; x <= width; x ++ ){
      temp[x] = eval( func );
   }
   world.ground.make( temp, width );
}
;
world.ground.create.test='4';
world.ground.create( world.ground.create.test, 500 );

in the end of world.bolt.cpath,there should be a way to use the local varis X and Y, and world.ground.js's world.ground.level[] to detect it. sorry for the gigantic length. thanks in advanced. the jsnerd

2d Polygon Collision And Reaction

Similar Tutorials

View Content

I am having troubles getting two polygons to collide and react properly. For now, I just have two boxes. One box is stationary in the center of my canvas while another one is controlled by the keypad arrow keys and flies around. I have no problem detecting when my flying box intersects the stationary box. However, what I am having troubles with is getting the flying box to hit the stationary box and react as if it was an actual object blocking it's path. For now I just need to have my flying box be able to hit the stationary box on any side and have the stationary box block the flying box's motion. At some point, however, I will likely need to do this same kind of reaction between multiple edged 2d polygons. Can anyone help me with this simple box example and also help me track down a more complex scenario similar to this:

http://www.codeproject.com/Articles/...sion-Detection

This article seems to be exactly what I am looking for but it is in C#. The way the flying object just slides along the edge of the intersecting polygon is all I need my flying object to do. However, I need an example in javascript so that I can incorporate it into an HTML5 canvas object.

Javascript Game Collision Only Works Sometimes

Similar Tutorials

View Content

i have a simple collision if statement in the main interval in a javascript game. The problem is, it only sometime works, as in i have to shoot at zombies multiple times for them to disappear, when it should only take 1 bullet. i have arrays for the players bullets x and y values, and 5 zombies x and y values(4 total arrays). The collision code is at the bottom of the main() function.
here is the code:
Code:

var missed = 0;
var score = 0;
var on = 1;
var bulletx = [];
var bullety = [];
var zombiex = [700,600,800,1000,900];
var zombiey = [0,100,300,200,50];
function draw(image, x, y){
	var canvas = document.getElementById("game");
	var context = canvas.getContext("2d");
	var imageObj = new Image();
	imageObj.onload = function() {
	context.drawImage(imageObj, x, y);
	};
	imageObj.src = image;
}
document.onkeydown = checkKey;
function checkKey(e) {
if(on === 1){
	if(on === 1){
		e = e || window.event;
		if (e.keyCode == '40') {
			down();
		}else if (e.keyCode == '38') {
			up();
		}else if(e.keyCode == '32'){
			bullety.push(y+50);
			bulletx.push(100);
			score = score - 1;
    		}
	}
}
}
var y = 300;
function down(){
	y = y+50;
	draw("player.png", 0, y);
}
function up(){
	y = y-50;
	draw("player.png", 0, y);
}
draw("player.png",0,y);
function main(){
	draw("background.png",0,0);
	draw("player.png",0,y);
	for(i = 0; i < 5; i++){
		draw("zombie.png",zombiex[i],zombiey[i]);
		zombiex[i] = zombiex[i] - 5;
		if(zombiex[i] < -100){
			zombiex[i] = 600;
			zombiey[i] = Math.random()*450
			missed = missed+1;
		}
	}
	if(missed === 5){
		clearInterval(mainint);
		alert("5 zombies passed you, and America has fallen");
		alert("sco  "+score);
		on = 0;
	}
	for(i = 0; i < bulletx.length; i++){
		draw("background.png",0,0);
		draw("bullet.png",bulletx[i],bullety[i]);
		bulletx[i] = bulletx[i]+30;
		if(bulletx[i] > 700){
			bulletx.splice(i,1);
			bullety.splice(i,1);
		}
		if(bulletx[i] > zombiex[i] && bullety[i] > zombiey[i]-20 && bullety[i] < zombiey[i]+70){
			zombiex[i] = 600;
			zombiey[i] = Math.random()*450
			score = score + 10;
		}
	}
}
var mainint = setInterval(function(){main();}, 50);

Collision Detection In A Game Using Javascript

Similar Tutorials

View Content

hey guys i'm making a lunar lander game using javascript.i want the player to land the spaceship on a black line i've drawn. but i have problems getting it right.when the player lands it properly in the line i want it to display a dialogue box which says u landed it perfectly.but the problem is even if i land it outside the line it gives me that message.so after spending sometime with it i figured out that my if statement is not working properly.it doesn't take the value from my x axis and only considers the value from my y axis.for eg lets say i drew the line from 560px to 600px on the x axis and its located at 700px on the y axis and this is my if statement
if((TopPos>695)&&(rightPos>560)&&(rightPos<600))
{
alert('you landed perfectly')
}

this is supposed to work but if i go above 600px but still maintains the height above 695 it says i have won.i have included the code could some point me out where i'm making the mistake thank you .

Code:

<html>
<head>
<title>Lunar lander</title>

<script language="JavaScript"> 
var TopPos=100;
var fuel = 300;
var gravity = 0.0001;
var speed = 0.0005;
var moveBy = 366;
var Xpix = 1000;

function animation(){
TopPos +=gravity

document.getElementById("divlander").style.top = TopPos + "px";
if ((TopPos>604)&&(Xpix<526)){
			alert('win');
	}
	else if ((moveBy<100)&&(moveBy>500)){
			alert('crashed');
	}
if(TopPos<610)
window.setTimeout("animation()",30);
gravity +=0.03;
gravity += speed;
var f = document.game.fuel.value;
f--;
document.game.fuel.value = f;
if (f<=0){
document.game.fuel.value ="0";
gravity=10;
gr=0;
speed=10;
f=1;
alert('out of fuel');
}
}
function moveObj(name, Xpix, Ypix) 
{    
   	obj = document.getElementById(name);
	
	px = parseInt(obj.style.left) + Xpix;		
	py = parseInt(obj.style.top) + Ypix;
	obj.style.left = px;
	obj.style.top = py;
}

function ProcessKeypress(e)
{
	var myObj = "divlander";
	var moveBy = 10;
	
	if (e.keyCode) keycode=e.keyCode;
	else keycode=e.which;
	ch=String.fromCharCode(keycode);
   
	if(ch=='a') 		moveObj(myObj, -moveBy, 0);
	else if(ch=='d') 	moveObj(myObj, moveBy, 0);
	else if(ch=='w') 	gravity = -1;
	
		
}



</script>
<form name='game'>
<body onKeyPress="ProcessKeypress(event);">
<body onload ="animation();">
<input type=button value='200' name="fuel">

<p><img id="divlander" style="z-index: 0; left: 1000px; position: absolute; top: 100px" img src="lunar_lander_72dpi2.png"></p>
<img src="Serenity2.jpg";>
<p><<body>

</body>
</form>
</html>

Javascript Mouse Position/circle Collision

Similar Tutorials

View Content

so basically I have a div that contains the image of a circle and I need to check if the mouse is touching the circle.

what approach should I take to this?

I need to call another function when the mouse leaves the circle (which will be a square speaking physically)

I would assume it has to do with radius, but I am not really sure how to do this with a circle shape.

thanks a ton!

Links Not Working In Ie7/opera, And Shadowbox/lightbox Not Working

Similar Tutorials

View Content

Ok, here's the page as it is right now:
http://www.crackin.com/dev/index.php

The paganation for the top 3 images is Sweet Pages: http://tutorialzine.com/2010/05/swee...tion-solution/
The content loading below is a page-replace script I got he http://css-tricks.com/dynamic-page-replacing-content/
And I'm also trying to integrate shadowbox (or lightbox, whichever will work) into the lower set of images.

I have 2 problems right now I can't figure out, and I'm sure it somehow has to do with the fact I'm trying to mash 3 different JS addons into a single page, I'm still pretty new to this whole JS thing...

First problem I'm having is that IE7 and Opera don't like the links in the upper images. Clicking a gallery image does not load the associated page below from those 2 browsers, however IE8 and FF seem to work fine.

Second problem is getting shadowbox/lightbox to work on those lower images. I tried a couple different things but main thing I did is make sure the script is actually working by setting the header text to a link with shadowbox attached and that worked. That same link doesn't work when applied to the lower images (loads image in new window). Lightbox does the same thing.

Thanks for any help.

Zeroclipboard (jquery Version) Semi-working And Not Working

Similar Tutorials

View Content

Hi All,

I have two sites using zeroclipboard (hosted at google code) one works only in firefox and barely, the other is not working at all. It does use Flash, but I think the issue is on the js side of things.

On both links, clicking the filename below the thumbnail will copy and add the link as an IMG code to a div below.

*working* link
http://pics.boasbysatyra.com/access/spiders.php
This one only works in FF, and the clip area is offset badly.

Here is the template for the zc code:

Code:

<div class="photo" style="float: left; padding: 4px;">
<div class="exif"><a href="[~41~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://pics.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>

And the JS for the page:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}

Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');
function initMenu() {
    $('#menu ul').hide();
    $('#menu ul:first').show();
    $('#menu li a').click(function() {
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            //return false;
            }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    });
}
$(document).ready(function() {
    initMenu();
});

Now on to the totally broken one - it creates the elements required, but gives them a 0x0 area!

http://jb.boasbysatyra.com/forum-pic...cs/nature.html

Code:

div class="photo" style="float: left; margin: 4px;">
<div class="exif"><a href="[~133~]?dir=[+images_dir+]&file=[+filename+]" rel="shadowbox[exif_[+content_id+]]" title="exif data for [+filename+]" alt="exif data for [+filename+]">EXIF Data</a></div>
           <a class="thumb" rel="shadowbox[[+content_id+]]" href="[+images_dir+][+filename+]" title="[+title+] | [+description+]">
                <img src="[+thumbs_dir+][+filename+]" alt="[+title+]" />
            </a>
<div id="d_clip_container[+filename+]" style="position:relative; width: 120px; height: 0.5em;">
 <div class="filecode" id="d_clip_button[+filename+]">[+filename+]
       <script language="JavaScript">
           var clip = new ZeroClipboard.Client();
           clip.setText( 'http://jb.boasbysatyra.com[+images_dir+][+filename+]' );
           clip.glue( 'd_clip_button[+filename+]','d_clip_container[+filename+]' );
           clip.addEventListener( 'onComplete', my_complete );

        function my_complete( client, text ) {
                $('.picklist').append('<div class="piclinks">[IMG]' + text + '[/IMG]</div>');
        }
       </script>
</div>
</div>
</div>

On this one I wrapped it as suggested on the zc site, I originally started with the code for the other site - it didn't work, so I went tweaking...

Here is the JS:

Code:

var needRef;
//flag for page reload
function pEdit(){
needRef = 1;
}
Shadowbox.init({
    handleOversize: "resize",
    modal: true,
    initialHeight: 32,
    initialWidth: 400,
    overlayOpacity: 0.85,
        onClose: function(){//check for reload flag and reload
if (needRef == 1){needRef = 0; window.location.href=window.location.href;}
}
});
ZeroClipboard.setMoviePath('/js/zc/ZeroClipboard10.swf');

$(document).ready(function() {
$(".dim img").fadeTo("slow", 0.65);
$(".dim img").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.65);
});
$('#mainContent').hide().fadeIn(1200);
        //When page loads...
        $(".tab_content").hide(); //Hide all content
//      $("ul.tabs li:first").addClass("active").show(); //Activate first tab
//      $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul.tabs li").click(function() {

                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content

                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active ID content
                return false;
        });

});
(function($) {
   $(document).ready(function(){
 $('.menu1').ptMenu();
       $('.menu2').ptMenu({vertical:true});
   });
})(jQuery);

I have taken a look at this for a few days and tried many things with no luck, any help is appreciated.

Thanks!

Javascript Working On Local But Not Working When Uploaded To Host.

Similar Tutorials

View Content

I hope I have this post in the right place! Any help would be very much appreciated...

I have a feature on my website that allows users to choose the website background (using alternate css sheets) and then uses an externally linked javascript file to store the background choice as a cookie so it is consistent throughout the website.

This works perfectly locally (i.e. when previewing my website on my computer) but now it is uploaded to my host it doesn't appear to be working. (with the same browser)

My javascript is he
http://www. b r p - e n v .com/javascript/backgroundchange.js (with no spaces)

The website that the javascript file is linked to is http://www. b r p - e n v .com (with no spaces)

In the head I have:
<script type="text/javascript" src="../javascript/backgroundchange.js"></script>

...then I have: <body onload="set_style_from_cookie()">

...and for users to choose which background:
<form>
<input type="image" src="../images/white-background-thumb.jpg"
onclick="switch_style('bg1');return false;"
name="theme" value="White" id="bg1">
etc...
</form>

My problem is: The background reverts back to the default when moving to a different page. This would indicate that the background choice is not being saved in cookies. But this works locally!

I have tried putting the javascript directly onto each page but I still had the same problem.

I hope someone can help, I will be so grateful if I can get this to work.

Many thanks indeed!

Javascript Not Working With Firefox It Is Working Fine With Ie

Similar Tutorials

View Content

hereis the html file and javascripton click of this button a
html *****************************
<table class=matcolor id=topnav cellspacing=0
cellpadding=0 width=550 border=0 bgcolor="#FFCCCC">
<tbody>
<tr align=middle>
<td id=menu1
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Desk Top Publishing </font></div>
</td>
<td width=1 bgcolor=#ff9900 class="mat"></td>
<td id=menu2
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Transcription</font></div>
</td>
<td width=1 bgcolor=#ff9900 class="mat"></td>
<td id=menu3
onMouseOver="this.className='mPrimaryOn';showmenu(this);"
onClick="this.document.location.href=''"
onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20">
<div align="center"><font color="#FF0000">Accounts Processing </font></div>
</td>
</tr>
</tbody>
</table>
*****************************************

<script language=JavaScript>
ix = document.getElementById('tblmenu1').getBoundingClientRect();
new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10);
</script>
**any thing i have to alter to work in firefox
please help

Jquery Working On Local Iis But Working On Server

Similar Tutorials

View Content

I have a usercontrol which get inputs from the user and show the slideshows. I have added jquery.js and jqfancytransitions.js to the control. when i apply the effects dynamically it is working on local iis but the same coding is not working on iis server. The link for the page is http://www.gloriatech.com/slideshow.aspx . Actually it display the images but no effects are applied. I also checked the js files, it is in right path only.When i checked this page in firebug , it shows the error which is " Sys is undefined". I dont know how to solve it. Can anyone help me?

Thanx in advance.

Box Not Working

Similar Tutorials

View Content

In my website, I have a script that I need help to get working. This is my script.
Code:

<script language="Javascript">
<!--
if (screen.width>=1024)
 {
document.write('<td width="20%"><table border="0" cellpadding="0" cellspacing="0" width="162">
<tr><td height="29" style="background:url("/Custom/Top2.png");color:#116111;" align="center"><b>Newest Tutorial</b></td></tr>
<tr><td height="160" style="background:url("/Custom/Middle2.png") #000000;padding:5px 5px 0 5px;">$MYINF_8$</td></tr>
<tr><td><img src="/Custom/Bottom2.png" border="0"></td></tr>
</table>
</td>');
 }
//-->
</script>

It is supposed to detect if someone has a widescreen monitor, and then add the extra box if it is widescreen.
For some unknown reason, its not working. No extra box appears. Does anyone know where I went wrong?

Edit: $MYINF_8$ is what goes inside the box.

Help...been Working On This All Day!

Similar Tutorials

View Content

Why Is This Not Working?

Similar Tutorials

View Content

Script::.
Code:

<script language="javascript">
function temp(form)
{
	oops = "";
    var sum = 0;
        var fld = (form.level.value);
		var val = fld.value.replace(/\s/g, "" );
		if ( val != "")
		{
			var deg = parseFloat(fld.value);
            if ( isNaN(deg) || deg < 0)
			 {
                fld.value = "0";
                oops += "\nInvalid Level";
            } else if ( deg != 0 ) {
                sum += Math.pow( deg, 3 );}
		}
		if ( oops != "" )
    {
        alert("You must correct these errors:\n" + oops);
        return false;
    }
       form.totalexp.value = sum ;
}
</script>

Html::.
Code:

<form style="text-align:center">
<p>Level</p>
<p><input size=30 maxlength=30 value=0 name="level" onfocus="this.value=''"/></p>
<input type=button onclick=temp(this.form) value=Calculate /> 
<input type=reset name=clear id=clear value=Clear /></p>
<blockquote><p>Total Exp <input name="totalexp" size=40 maxlength=40 readonly=""/></p></blockquote></form>

Can someone help me. Whats wrong with my js code and i am noob to J.S.
Your help is most appreciated.

Why The Else Is Not Working?

Similar Tutorials

View Content

hi
jus want to ask why is the else not working in the showmore and showless function
i have two div which shld conduct the same way of working which is to show the rest of the text with the show more and min the text with the show less function
anyone know what my mistake is?

Code:

function showmore() {
 if (document.getElementById("mydiv1") ){
document.getElementById("mydiv1").innerHTML = "";
document.getElementById("mydiv1").innerHTML = txt1 + "<font color = '#0000FF' size = '1'><a onclick='showless();return false'>.....read less</a>";txt1;
}
else {
document.getElementById("mydiv").innerHTML = "";
document.getElementById("mydiv").innerHTML = txt + "<font color = '#0000FF' size = '1'><a onclick='showless();return false'>.....read less</a>";txt;
}
}

function showless() {

 if (document.getElementById("mydiv1")){
document.getElementById("mydiv1").innerHTML = shorttxt1 + "<font color = '#0000FF' size = '1'><a onclick='showmore();return false'>.....read more</a>";
}
else {
document.getElementById("mydiv").innerHTML = shorttxt + "<font color = '#0000FF' size = '1'><a onclick='showmore();return false'>.....read more</a>";
}
}

thanks
Reply asap!!!

Pop Ups Not Working In Ie8

Similar Tutorials

View Content

Hi guys,

For some reason, in IE8, on product pages (Example) of my ecommerce site, the 'Size Chart' and 'Email to a Friend' popups don't work, and the product image lightbox won't work either. I have turned pop-up blocker off but they still don't work. These popups work in every other browser I have tested in, including IE7. It seems to only be IE8 that is having this problem.

Here is the HTML:
Code:

<div class="row ">

<label >Size: </label>

<strong class="fl"><select name="size" id="size" onchange="checkstock(this.value)"><option value="">Select Size</option><option value="S">S</option><option value="M">M</option><option value="L">L</option><option value="XL">XL</option><option value="XXL">XXL</option></select></strong> 
		  
<span style="text-decoration: underline;" class="size_chart more" title="size_chart1">+ Size Chart</span>

<div style="display: none;" class="size_chart1 hide" > <div class="close"></div>

<img src="http://www.projectdisobey.com/disobeyclothing/wp-content/themes/eCommerce3/images/size_chart.jpg" alt="" />
					  
</div>

<!-- size chart -->

</div>

Code:

<ul class="fav_link">
     
<li class="print"> <a href="#" onclick="window.print();return false;">Print</a> </li>
     
<li class="rss"> <a href="http://feeds.feedburner.com/DisobeyClothing">RSS</a> </li>
     
<li class="emailtofriend">
     
<span style="text-decoration: underline;" class="more" title="tellafrnd_div">Email to a Friend</span>
     
<span id="tellafrnd_success_msg_span"></span>
     
<div style="display: none;" id="tellfrnddiv" class="tellafrnd_div hide">
     
<iframe src="http://www.projectdisobey.com/disobeyclothing/?page=tellafriend_form&amp;pid=402" style="border: medium none ; width: 547px; height: 558px;" frameborder="0" ></iframe>
     
</div>
     
</li>
     
<li class="share"> <div class="a2a_kit addtoany_list"> <a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.projectdisobey.com/disobeyclothing/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/> </a> </div>
     
<script type="text/javascript"><!--
var a2a_config = a2a_config || {};
a2a_config.linkname="Know Your Enemy";
a2a_config.linkurl="http://www.projectdisobey.com/disobeyclothing/?p=402";
a2a_config.color_main = "f3f3e7";a2a_config.color_border = "C0C88A";a2a_config.color_link_text = "332402";a2a_config.color_link_text_hover = "332402";a2a_config.color_bg = "7f6f2";
     
a2a_config.num_services = 14;
//--></script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>
     
</li>
     
</ul>

Here is the Javascript:
Code:

<script type="text/javascript"> var closebutton='<?php bloginfo('template_directory'); ?>/library/js/closebox.png'; </script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/js/fancyzoom.js"></script>

<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true});
		$('#medium_box_link').fancyZoom({width:400, height:300});
		$('#large_box_link').fancyZoom();
		$('#flash_box_link').fancyZoom();
	});
</script>


<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){

$('.hide').hide();

$('body').append('<div id="infoBacking"></div><div id="infoHolder" class="large"></div>');
$('#infoBacking').css({position:'absolute', left:0, top:0, display:'none', textAlign:'center', background:'', zIndex:'600'});
$('#infoHolder').css({left:0, top:0, display:'none', textAlign:'center', zIndex:'600', position:'fixed'});
if($.browser.msie){$('#infoHolder').css({position:'absolute'});}


$('.more').mouseover(function() {$(this).css({textDecoration:'none'});} );
$('.more').mouseout(function() {$(this).css({textDecoration:'none'});} );

$('.more').click(function(){

if ($('.' + $(this).attr("title")).length > 0) {

	browserWindow()
	getScrollXY()

	if (height<totalY) { height=totalY; }

	$('#infoBacking').css({width: totalX + 'px', height: height + 'px', top:'0px', left:scrOfX + 'px', opacity:0.85});
	$('#infoHolder').css({width: width + 'px', top:scrOfY + 25 + 'px', left:scrOfX + 'px'});
	source = $(this).attr("title");

	$('#infoHolder').html('<div id="info">' + $('.' + source).html() + '<p class="clear"><span class="close"><?php _e('Close X');?></span></p></div>');

	$('#infoBacking').css({display:'block'});
	$('#infoHolder').show();
	$('#info').fadeIn('slow');
}

$('.close').click(function(){
	$('#infoBacking').hide();
	$('#infoHolder').fadeOut('fast');
});

});

/* find browser window size */
function browserWindow () {
	width = 0
	height = 0;
	if (document.documentElement) {
		width = document.documentElement.offsetWidth;
		height = document.documentElement.offsetHeight;
	} else if (window.innerWidth && window.innerHeight) {
		width = window.innerWidth;
		height = window.innerHeight;
	}
	return [width, height];
}
/* find total page height */
function getScrollXY() {
	scrOfX = 0; 
	scrOfY = 0;
	if( typeof( window.pageYOffset ) == 'number' ) {
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		scrOfY = document.body.scrollTop;
		scrOfX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}
	totalY = (window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null);

	totalX = (window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null);
	
	return [ scrOfX, scrOfY, totalY, totalX ];
}

return false;
				});
/* ]]> */
</script>

Anybody have any suggestions as to what the problem might be (and how I can rectify it)? If you need more info, please let me know...

Thanks!

Sum Of Int Not Working

Similar Tutorials

View Content

This is not working, any idea ?

Code:

function respuestas1() {
	var radios=document.getElementsByTagName("input");
	var values;
	for (var i=0; i<radios.length; i++) {
		if (radios[i].type==="radio" && radios[i].checked) {
			values=radios[i].value;
			sum = 0;
			for (var i=0; i<values.length; i++) {
				sum = sum + Number(values[i]);
				alert(sum);
			}
		}
	}
}

Xml Not Working Please Help.. Im New

Similar Tutorials

View Content

Won't validate help...pasor error?
Wtf i suck at this.

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!--Prolog Above-->
<!--dataset is the name of the Root Element-->
<!--Artist, Album, and, Publisher are the names of the namespaces, Ar, Al, and, Pu are the prefixes-->
<dataset xmlns:Al="Album" xmlns:Ar="Artist" xmlns:Pu="Publisher" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<!--Elements, blank text is data-->
<dataset>
<Al:Album>
	<Al:Album ID ="">
		<Al:Genre =""></Al:Genre>
		<Al:AmountSold =""></Al:AmountSold>
		<Al:PublishDate =""></Al:PublishDate>
		<Al:Artist =""></Al:Artist>
	</Al:Album>
</Al:Album>
<Ar:Artist>
	<Ar:Artist ID ="">
		<Ar:Awards =""></Ar:Awards>
		<Ar:Location =""></Ar:Location>
		<Ar:Region =""></Ar:Region>
		<Ar:LabelID =""></Ar:LabelID>
	</Ar:Artist>
</Ar:Artist>
<Pu:Publisher>
	<Pu:Publisher ID ="">
		<Pu:AmountSold =""></Pu:AmountSold>
		<Pu:Artist = ""></Pu:Artist>
		<Pu:PublishDate =""></Pu:PublishDate>
		<Pu:Manager = ""></Pu:Manager>
	</Pu:Publisher>
</Pu:Publisher>
</dataset>

Trying To Use && Like In Php, But Its Not Working

Similar Tutorials

View Content

I am trying to use "&&" like in PHP, but JavaScript doesn't like it:

Code:

if (document.forms["form"]["30"].value == "" && document.forms["form"]["32"].value == "") {foobar;}

So, if both these conditions are true, then foobar.

Does anyone know why it doesn't work?

Why Is The \t Now Working?

Similar Tutorials

View Content

I think that if there is more space between the columns that it would be easier to read, but whatever I try is not working. Just putting tabs between them is my latest idea, however, the space is not all that big. Is it possible that I have entered it wrong?

Thank you, the code is below:

<html>

<head>
<title>Exercise</title>
<script type = "text/javascript">

</script>
</head>
<body>
<p>what? seriously, this is working?</p>
</body>

</html>