Learn VBA & Macros in 1 Week!

JavaScript - Imagemap Image Flip Works In Chrome Only On Css/html Valid Page.

Full Excel VBA Course - Beginner to Expert

Imagemap Image Flip Works In Chrome Only On Css/html Valid Page.	View Content

this page will display new images when you mouseover the red and orange arrows on the menu on the right side in chrome, but not ff, ie, opera, and safari. Any ideas as to why these other browsers aren't running the code like chrome? guessing this is javascript related - anyone want to offer any clues?

Full Excel VBA Course - Beginner to Expert

Please Help With Js On Page Flip

Similar Tutorials

View Content

I followed a tutorial for an HTML5 flip book...
It was pretty good but you couldn't add links or any sort of interactivity on the pages so I tweaked it a bit and figured out how to adjust the z-index so that I could add links to the pages...
Only one problem when you go back a page it's not updating the z-index.
Here is the sample file:
http://www.schrene.web44.net/Books/F...ok/Book-B.html
I couldn't figure out exactly where to adjust the z-index on the back flip...
Here is the code:
Code:

(function () {
	
	// Dimensions of the whole book
	var BOOK_WIDTH = 830;
	var BOOK_HEIGHT = 260;
	
	// Dimensions of one page in the book
	var PAGE_WIDTH = 400;
	var PAGE_HEIGHT = 250;
	var SELECTABLE_WIDTH =60;
	
	// Vertical spacing between the top edge of the book and the papers
	var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
	
	// The canvas size equals to the book dimensions + this padding
	var CANVAS_PADDING = 60;
	
	var page = 0;
	
	var canvas = document.getElementById( "pageflip-canvas" );
	var context = canvas.getContext( "2d" );
	
	var mouse = { x: 0, y: 0 };
	
	var flips = [];
	
	var book = document.getElementById( "book" );
	
	// List of all the page elements in the DOM
	var pages = book.getElementsByTagName( "section" );
	
	// Organize the depth of our pages and create the flip definitions
	for( var i = 0, len = pages.length; i < len; i++ ) {
		pages[i].style.zIndex = len - i;
		
		flips.push( {
			// Current progress of the flip (left -1 to right +1)
			progress: 1,
			// The target value towards which progress is always moving
			target: 1,
			// The page DOM element related to this flip
			page: pages[i], 
			// True while the page is being dragged
			dragging: false
		} );
	}
	
	// Resize the canvas to match the book size
	canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
	canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );
	
	// Offset the canvas so that it's padding is evenly spread around the book
	canvas.style.top = -CANVAS_PADDING + "px";
	canvas.style.left = -CANVAS_PADDING + "px";
	
	// Render the page flip 60 times a second
	setInterval( render, 1000 / 60 );
	
	document.addEventListener( "mousemove", mouseMoveHandler, false );
	document.addEventListener( "mousedown", mouseDownHandler, false );
	document.addEventListener( "mouseup", mouseUpHandler, false );
	
	function mouseMoveHandler( event ) {
		// Offset mouse position so that the top of the spine is 0,0
		mouse.x = event.clientX - book.offsetLeft - ( BOOK_WIDTH /2 );
		mouse.y = event.clientY - book.offsetTop;
		
	}
	
	function mouseDownHandler( event ) {
		if (Math.abs(mouse.x) < PAGE_WIDTH) {
			if (mouse.x < 0 && page - 1 >= 0) {
				flips[page - 1].dragging = true;
				
			}
			else if (mouse.x >(PAGE_WIDTH - SELECTABLE_WIDTH) && page +1 <flips.length)  {
				flips[page].dragging = true;
				canvas.style.zIndex=100;
			}
		}
		
		// Prevents the text selection cursor from appearing when dragging
		event.preventDefault();
	}
	
	function mouseUpHandler( event ) {
		for( var i = 0; i < flips.length; i++ ) {
			// If this flip was being dragged we animate to its destination
			if( flips[i].dragging ) {
				// Figure out which page we should go to next depending on the flip direction
				if( mouse.x < 0 ) {
					flips[i].target = -1;
					page = Math.min( page + 1, flips.length );
				}
				else {
					flips[i].target = 1;
					page = Math.max( page - 1, 0 );
				}
			}
			
			flips[i].dragging = false;
			
		}
		canvas.style.zIndex=0;
	}
	
	function render() {
		
		context.clearRect( 0, 0, canvas.width, canvas.height );
		
		for (var i = 0; i < flips.length; i++) {
			var flip = flips[i];
			
			if( flip.dragging ) {
				flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
			}
			
			flip.progress += ( flip.target - flip.progress ) * 0.2;
			
			// If the flip is being dragged or is somewhere in the middle of the book, render it
			if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
				drawFlip( flip );
			}
			
		}
		
	}
	
	function drawFlip( flip ) {
		// Strength of the fold is strongest in the middle of the book
		var strength = 1 - Math.abs( flip.progress );
		
		// Width of the folded paper
		var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
		
		// X position of the folded paper
		var foldX = PAGE_WIDTH * flip.progress + foldWidth;
		
		// How far the page should outdent vertically due to perspective
		var verticalOutdent = 20 * strength;
		
		// The maximum width of the left and right side shadows
		var paperShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
		var rightShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
		var leftShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
		
		
		// Change page element width to match the x position of the fold
		flip.page.style.width = Math.max(foldX, 0) + "px";
		
		context.save();
		context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
		
		
		// Draw a sharp shadow on the left side of the page
		context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
		context.lineWidth = 130 * strength;
		context.beginPath();
		context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
		context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
		context.stroke();
		
		
		// Right side drop shadow
		var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);
		rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
		rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');
		
		context.fillStyle = rightShadowGradient;
		context.beginPath();
		context.moveTo(foldX, 0);
		context.lineTo(foldX + rightShadowWidth, 0);
		context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
		context.lineTo(foldX, PAGE_HEIGHT);
		context.fill();
		
		
		// Left side drop shadow
		var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
		leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
		leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');
		
		context.fillStyle = leftShadowGradient;
		context.beginPath();
		context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
		context.lineTo(foldX - foldWidth, 0);
		context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
		context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
		context.fill();
		
		
		// Gradient applied to the folded paper (highlights & shadows)
		var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
		foldGradient.addColorStop(0.35, '#fafafa');
		foldGradient.addColorStop(0.73, '#eeeeee');
		foldGradient.addColorStop(0.9, '#fafafa');
		foldGradient.addColorStop(1.0, '#e2e2e2');
		
		context.fillStyle = foldGradient;
		context.strokeStyle = 'rgba(0,0,0,0.06)';
		context.lineWidth = 0.5;
		
		// Draw the folded piece of paper
		context.beginPath();
		context.moveTo(foldX, 0);
		context.lineTo(foldX, PAGE_HEIGHT);
		context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
		context.lineTo(foldX - foldWidth, -verticalOutdent);
		context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
		
		context.fill();
		context.stroke();
		
		
		context.restore();
	}
	
})();

Any help would be greatly appreciated

Javascript Flip Image Help

Similar Tutorials

View Content

Right now I have the code set up so that cards are displayed in on the screen and then when the card is clicked it flips. My question is how do I organize the cards into rows of 7? So I would like for each row to have 7 cards. Then after the card is flipped how do I make it move to the last row?

Currently this is the code that I have:
Code:

<html>
<head>
<script language="JavaScript">
{
//These are the first button graphics
thumb1= new Image();
thumb1.src = "75/back-blue-75-3.png";
hover1 = new Image();
hover1.src = "75/clubs-2-75.png";

//These are the second button graphics
thumb2= new Image();
thumb2.src = "75/back-blue-75-3.png";
hover2 = new Image();
hover2.src = "75/clubs-q-75.png";

//These are the third button graphics
thumb3= new Image();
thumb3.src = "75/back-blue-75-3.png";
hover3 = new Image();
hover3.src = "75/clubs-a-75.png";

thumb4= new Image();
thumb4.src = "75/back-blue-75-3.png";
hover4 = new Image();
hover4.src = "75/diamonds-2-75.png";

thumb5= new Image();
thumb5.src = "75/back-blue-75-3.png";
hover5 = new Image();
hover5.src = "75/joker-b-75.png";

thumb6= new Image();
thumb6.src = "75/back-blue-75-3.png";
hover6 = new Image();
hover6.src = "75/spades-a-75.png";

thumb7= new Image();
thumb7.src = "75/back-blue-75-3.png";
hover7 = new Image();
hover7.src = "75/clubs-3-75.png";

thumb8= new Image();
thumb8.src = "75/back-blue-75-3.png";
hover8 = new Image();
hover8.src = "75/hearts-a-75.png";

thumb9= new Image();
thumb9.src = "75/back-blue-75-3.png";
hover9 = new Image();
hover9.src = "75/hearts-k-75.png";

thumb10= new Image();
thumb10.src = "75/back-blue-75-3.png";
hover10 = new Image();
hover10.src = "75/diamonds-6-75.png";

thumb11= new Image();
thumb11.src = "75/back-blue-75-3.png";
hover11 = new Image();
hover11.src = "75/diamonds-10-75.png";

thumb12= new Image();
thumb12.src = "75/back-blue-75-3.png";
hover12 = new Image();
hover12.src = "75/spades-5-75.png";

thumb13= new Image();
thumb13.src = "75/back-blue-75-3.png";
hover13 = new Image();
hover13.src = "75/joker-r-75.png";

thumb14= new Image();
thumb14.src = "75/back-blue-75-3.png";
hover14 = new Image();
hover14.src = "75/clubs-j-75.png";

thumb15= new Image();
thumb15.src = "75/back-blue-75-3.png";
hover15 = new Image();
hover15.src = "75/clubs-6-75.png";

thumb16= new Image();
thumb16.src = "75/back-blue-75-3.png";
hover16 = new Image();
hover16.src = "75/hearts-5-75.png";

thumb17= new Image();
thumb17.src = "75/back-blue-75-3.png";
hover17 = new Image();
hover17.src = "75/diamonds-k-75.png";

thumb18= new Image();
thumb18.src = "75/back-blue-75-3.png";
hover18 = new Image();
hover18.src = "75/diamonds-8-75.png";

thumb19= new Image();
thumb19.src = "75/back-blue-75-3.png";
hover19 = new Image();
hover19.src = "75/hearts-9-75.png";

thumb20= new Image();
thumb20.src = "75/back-blue-75-3.png";
hover20 = new Image();
hover20.src = "75/spades-j-75.png";

thumb21= new Image();
thumb21.src = "75/back-blue-75-3.png";
hover21 = new Image();
hover21.src = "75/hearts-2-75.png";

thumb22= new Image();
thumb22.src = "75/back-blue-75-3.png";
hover22 = new Image();
hover22.src = "75/hearts-q-75.png";

thumb23= new Image();
thumb23.src = "75/back-blue-75-3.png";
hover23 = new Image();
hover23.src = "75/clubs-8-75.png";

thumb24= new Image();
thumb24.src = "75/back-blue-75-3.png";
hover24 = new Image();
hover24.src = "75/clubs-k-75.png";

thumb25= new Image();
thumb25.src = "75/back-blue-75-3.png";
hover25 = new Image();
hover25.src = "75/diamonds-a-75.png";

thumb26= new Image();
thumb26.src = "75/back-blue-75-3.png";
hover26 = new Image();
hover26.src = "75/spades-2-75.png";

thumb27= new Image();
thumb27.src = "75/back-blue-75-3.png";
hover27 = new Image();
hover27.src = "75/spades-q-75.png";

thumb28= new Image();
thumb28.src = "75/back-blue-75-3.png";
hover28 = new Image();
hover28.src = "75/clubs-7-75.png";

thumb28= new Image();
thumb28.src = "75/back-blue-75-3.png";
hover28 = new Image();
hover28.src = "75/diamonds-j-75.png";

thumb28= new Image();
thumb28.src = "75/back-blue-75-3.png";
hover28 = new Image();
hover28.src = "75/diamonds-3-75.png";

thumb29= new Image();
thumb29.src = "75/back-blue-75-3.png";
hover29 = new Image();
hover29.src = "75/hearts-j-75.png";

thumb30= new Image();
thumb30.src = "75/back-blue-75-3.png";
hover30 = new Image();
hover30.src = "75/clubs-4-75.png";

thumb31= new Image();
thumb31.src = "75/back-blue-75-3.png";
hover31 = new Image();
hover31.src = "75/spades-3-75.png";

thumb32= new Image();
thumb32.src = "75/back-blue-75-3.png";
hover32 = new Image();
hover32.src = "75/spades-k-75.png";

thumb33= new Image();
thumb33.src = "75/back-blue-75-3.png";
hover33 = new Image();
hover33.src = "75/diamonds-4-75.png";

thumb34= new Image();
thumb34.src = "75/back-blue-75-3.png";
hover34 = new Image();
hover34.src = "75/spades-10-75.png";

thumb35= new Image();
thumb35.src = "75/back-blue-75-3.png";
hover35 = new Image();
hover35.src = "75/clubs-5-75.png";

thumb36= new Image();
thumb36.src = "75/back-blue-75-3.png";
hover36 = new Image();
hover36.src = "75/clubs-9-75.png";

thumb37= new Image();
thumb37.src = "75/back-blue-75-3.png";
hover37 = new Image();
hover37.src = "75/diamonds-7-75.png";

thumb38= new Image();
thumb38.src = "75/back-blue-75-3.png";
hover38 = new Image();
hover38.src = "75/diamonds-q-75.png";

thumb39= new Image();
thumb39.src = "75/back-blue-75-3.png";
hover39 = new Image();
hover39.src = "75/spades-6-75.png";

thumb40= new Image();
thumb40.src = "75/back-blue-75-3.png";
hover40 = new Image();
hover40.src = "75/spades-9-75.png";

thumb41= new Image();
thumb41.src = "75/back-blue-75-3.png";
hover41 = new Image();
hover41.src = "75/diamonds-9-75.png";

thumb42= new Image();
thumb42.src = "75/back-blue-75-3.png";
hover42 = new Image();
hover42.src = "75/hearts-3-75.png";

thumb43= new Image();
thumb43.src = "75/back-blue-75-3.png";
hover43 = new Image();
hover43.src = "75/hearts-10-75.png";

thumb44= new Image();
thumb44.src = "75/back-blue-75-3.png";
hover44 = new Image();
hover44.src = "75/diamonds-5-75.png";

thumb45= new Image();
thumb45.src = "75/back-blue-75-3.png";
hover45 = new Image();
hover45.src = "75/spades-7-75.png";

thumb46= new Image();
thumb46.src = "75/back-blue-75-3.png";
hover46 = new Image();
hover46.src = "75/spades-4-75.png";

thumb47= new Image();
thumb47.src = "75/back-blue-75-3.png";
hover47 = new Image();
hover47.src = "75/hearts-8-75.png";

thumb48= new Image();
thumb48.src = "75/back-blue-75-3.png";
hover48 = new Image();
hover48.src = "75/hearts-4-75.png";

thumb49= new Image();
thumb49.src = "75/back-blue-75-3.png";
hover49 = new Image();
hover49.src = "75/hearts-7-75.png";

thumb50= new Image();
thumb50.src = "75/back-blue-75-3.png";
hover50 = new Image();
hover50.src = "75/spades-8-75.png";

thumb51= new Image();
thumb51.src = "75/back-blue-75-3.png";
hover51 = new Image();
hover51.src = "75/hearts-6-75.png";

}


//This is the function that calls for change in buttons 

function imageflip(thumbnailID,imageName)
{
document.images[thumbnailID].src = eval(imageName + ".src");
}
</script>
<title>Hey there! Welcome to my world!</title>
</head>
<body>
<font face="arial" size="7">
Pick 4 cards!</font><br><br>
<a href="#" onClick="imageflip('icon1','hover1')">
<img src="75/back-blue-75-3.png" border="0" name="icon1"/></a>

<a href="#" onClick="imageflip('icon2','hover2')">
<img src="75/back-blue-75-3.png" border="0" name="icon2"/></a>

<a href="#" onClick="imageflip('icon3','hover3')">
<img src="75/back-blue-75-3.png" border="0" name="icon3"/></a>

<a href="#" onClick="imageflip('icon4','hover4')">
<img src="75/back-blue-75-3.png" border="0" name="icon4"/></a>

<a href="#" onClick="imageflip('icon5','hover5')">
<img src="75/back-blue-75-3.png" border="0" name="icon5"/></a>

<a href="#" onClick="imageflip('icon6','hover6')">
<img src="75/back-blue-75-3.png" border="0" name="icon6"/></a>

<a href="#" onClick="imageflip('icon7','hover7')">
<img src="75/back-blue-75-3.png" border="0" name="icon7"/></a>

<a href="#" onClick="imageflip('icon8','hover8')">
<img src="75/back-blue-75-3.png" border="0" name="icon8"/></a>

<a href="#" onClick="imageflip('icon9','hover9')">
<img src="75/back-blue-75-3.png" border="0" name="icon9"/></a>

<a href="#" onClick="imageflip('icon10','hover10')">
<img src="75/back-blue-75-3.png" border="0" name="icon10"/></a>

<a href="#" onClick="imageflip('icon11','hover11')">
<img src="75/back-blue-75-3.png" border="0" name="icon11"/></a>

<a href="#" onClick="imageflip('icon12','hover12')">
<img src="75/back-blue-75-3.png" border="0" name="icon12"/></a>

<a href="#" onClick="imageflip('icon13','hover13')">
<img src="75/back-blue-75-3.png" border="0" name="icon13"/></a>

<a href="#" onClick="imageflip('icon14','hover14')">
<img src="75/back-blue-75-3.png" border="0" name="icon14"/></a>

<a href="#" onClick="imageflip('icon15','hover15')">
<img src="75/back-blue-75-3.png" border="0" name="icon15"/></a>

<a href="#" onClick="imageflip('icon16','hover16')">
<img src="75/back-blue-75-3.png" border="0" name="icon16"/></a>

<a href="#" onClick="imageflip('icon17','hover17')">
<img src="75/back-blue-75-3.png" border="0" name="icon17"/></a>

<a href="#" onClick="imageflip('icon18','hover18')">
<img src="75/back-blue-75-3.png" border="0" name="icon18"/></a>

<a href="#" onClick="imageflip('icon19','hover19')">
<img src="75/back-blue-75-3.png" border="0" name="icon19"/></a>

<a href="#" onClick="imageflip('icon20','hover20')">
<img src="75/back-blue-75-3.png" border="0" name="icon20"/></a>

<a href="#" onClick="imageflip('icon21','hover21')">
<img src="75/back-blue-75-3.png" border="0" name="icon21"/></a>

<a href="#" onClick="imageflip('icon22','hover22')">
<img src="75/back-blue-75-3.png" border="0" name="icon22"/></a>

<a href="#" onClick="imageflip('icon23','hover23')">
<img src="75/back-blue-75-3.png" border="0" name="icon23"/></a>

<a href="#" onClick="imageflip('icon24','hover24')">
<img src="75/back-blue-75-3.png" border="0" name="icon24"/></a>

<a href="#" onClick="imageflip('icon25','hover25')">
<img src="75/back-blue-75-3.png" border="0" name="icon25"/></a>

<a href="#" onClick="imageflip('icon26','hover26')">
<img src="75/back-blue-75-3.png" border="0" name="icon26"/></a>

<a href="#" onClick="imageflip('icon27','hover27')">
<img src="75/back-blue-75-3.png" border="0" name="icon27"/></a>

<a href="#" onClick="imageflip('icon28','hover28')">
<img src="75/back-blue-75-3.png" border="0" name="icon28"/></a>

<a href="#" onClick="imageflip('icon29','hover29')">
<img src="75/back-blue-75-3.png" border="0" name="icon29"/></a>

<a href="#" onClick="imageflip('icon30','hover30')">
<img src="75/back-blue-75-3.png" border="0" name="icon30"/></a>

<a href="#" onClick="imageflip('icon31','hover31')">
<img src="75/back-blue-75-3.png" border="0" name="icon31"/></a>

<a href="#" onClick="imageflip('icon32','hover32')">
<img src="75/back-blue-75-3.png" border="0" name="icon32"/></a>

<a href="#" onClick="imageflip('icon33','hover33')">
<img src="75/back-blue-75-3.png" border="0" name="icon33"/></a>

<a href="#" onClick="imageflip('icon34','hover34')">
<img src="75/back-blue-75-3.png" border="0" name="icon34"/></a>

<a href="#" onClick="imageflip('icon35','hover35')">
<img src="75/back-blue-75-3.png" border="0" name="icon35"/></a>

<a href="#" onClick="imageflip('icon36','hover36')">
<img src="75/back-blue-75-3.png" border="0" name="icon36"/></a>

<a href="#" onClick="imageflip('icon37','hover37')">
<img src="75/back-blue-75-3.png" border="0" name="icon37"/></a>

<a href="#" onClick="imageflip('icon38','hover38')">
<img src="75/back-blue-75-3.png" border="0" name="icon38"/></a>

<a href="#" onClick="imageflip('icon39','hover39')">
<img src="75/back-blue-75-3.png" border="0" name="icon39"/></a>

<a href="#" onClick="imageflip('icon40','hover40')">
<img src="75/back-blue-75-3.png" border="0" name="icon40"/></a>

<a href="#" onClick="imageflip('icon41','hover41')">
<img src="75/back-blue-75-3.png" border="0" name="icon41"/></a>

<a href="#" onClick="imageflip('icon42','hover42')">
<img src="75/back-blue-75-3.png" border="0" name="icon42"/></a>

<a href="#" onClick="imageflip('icon43','hover43')">
<img src="75/back-blue-75-3.png" border="0" name="icon43"/></a>

<a href="#" onClick="imageflip('icon44','hover44')">
<img src="75/back-blue-75-3.png" border="0" name="icon44"/></a>

<a href="#" onClick="imageflip('icon45','hover45')">
<img src="75/back-blue-75-3.png" border="0" name="icon45"/></a>

<a href="#" onClick="imageflip('icon46','hover46')">
<img src="75/back-blue-75-3.png" border="0" name="icon46"/></a>

<a href="#" onClick="imageflip('icon47','hover47')">
<img src="75/back-blue-75-3.png" border="0" name="icon47"/></a>

<a href="#" onClick="imageflip('icon48','hover48')">
<img src="75/back-blue-75-3.png" border="0" name="icon48"/></a>

<a href="#" onClick="imageflip('icon49','hover49')">
<img src="75/back-blue-75-3.png" border="0" name="icon49"/></a>

<a href="#" onClick="imageflip('icon50','hover50')">
<img src="75/back-blue-75-3.png" border="0" name="icon50"/></a>

<a href="#" onClick="imageflip('icon51','hover51')">
<img src="75/back-blue-75-3.png" border="0" name="icon51"/></a>



</body>
</html>

Javascript Flip Image Help

Similar Tutorials

View Content

I am trying to make a webpage displaying a card trick. What I want to do is have the user click on the card and then it flips the image. However I am having trouble doing this. Right now I have it set to flip when the user hovers over the card. I thought I could change it but I guess not.

This is what I have so far.
Code:

//These are the first button graphics
thumb1= new Image();
thumb1.src = "75/back-blue-75-3.png";
hover1 = new Image();
hover1.src = "75/clubs-2-75.png";

function imageflip(thumbnailID,imageName)
{
document.images[thumbnailID].src = eval(imageName + ".src");
}

<a href="#" onMouseClick="imageflip('icon1','hover1')">
<img src="75/back-blue-75-3.png" border="0" name="icon1"/></a>

Also I am new to javascript and I was wondering if anyone could steer me in the right direction. What I want to do is have the user pick 4 cards and then the next four cards will be based on the previous four cards. For example if the user picks 4 red cards then I would want the user to only have the option of picking four black cards. Can someone help me with this.

Works In Ff And Chrome But Not Ie

Similar Tutorials

View Content

Go figure huh??? Anyways I have a script a co-worker wrote and it works in FF and Chrome but IE will not work. Get's a 'activeTab' is null or not an object error, I checked for commas and fixed a semi-colon that was missing in two spots but not change in IE. Anyone willing to throw me a bone?

code below:

Code:

	<table class="tan-header rounded-box" style="padding:0px;border:0px;width:560px" cellspacing=0 cellpadding=0>
	<tr class="headerrow">
        <td class="main">
			<div style="font-weight:bold;padding-top:4px;">
				<span ID="Sample Pricing _show" class="arrow-box" style="display:none;"><a href="javascript:Expand('Sample Pricing ');">
				<img alt="Click arrow to expand this panel" src="images/right.png" border=0 align="absmiddle"></a></span>
				<span ID="Sample Pricing _hide" class="arrow-box"><a href="javascript:Contract('Sample Pricing ');">
				<img alt="Click arrow to collapse this panel" src="images/down.png" border=0 align="absmiddle"></a></span>
				Sample Pricing 
			</div>
		</td>
		<td class="end"></td>
	</tr>
	<tr class="contentrow">
		<td class="main">





		<div id="Sample Pricing ">
<p><em>Based on the following spec's:  </em></p>
<ul>
  <li>8.5 x 11 </li>
  <li>70# high quality opaque paper</li>
</ul>
<p align="center"> </p>
<div align="center">	
	<table id="pricing_table_tabs">
    <th>
      <td id="option1" class="active_pricing_table_tab">Option 1</td>
      <td id="option2" class="">Option 2</td>
    </th>
	</table>
  <table width="494" border="1" id="pricing_table1" class="active_table">
    <tr>
      <th width="80" height="30" scope="col">Quantity</th>
      <th width="95" scope="col">1 Color </th>
      <th width="95" scope="col">2 Colors</th>
      <th width="95" scope="col">4 Colors</th>
      <th width="95" scope="col"> </th>
    </tr>
    <tr>
      <td><div align="center">250</div></td>
      <td><div align="center">$197.69</div></td>
      <td><div align="center">$221.58</div></td>
      <td><div align="center">$420.26</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">500</div></td>
      <td><div align="center">$210.78</div></td>
      <td><div align="center">$233.79</div></td>
      <td><div align="center">$434.75</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">1000</div></td>
      <td><div align="center">$238.92</div></td>
      <td><div align="center">$262.30</div></td>
      <td><div align="center">$446.18</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">2000</div></td>
      <td><div align="center">$298.84</div></td>
      <td><div align="center">$316.78</div></td>
      <td><div align="center">$481.68</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">2500</div></td>
      <td><div align="center">$328.26</div></td>
      <td><div align="center">$345.55</div></td>
      <td><div align="center">$499.10</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">3000</div></td>
      <td><div align="center">$358.50</div></td>
      <td><div align="center">$373.05</div></td>
      <td><div align="center">$513.08</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">4000</div></td>
      <td><div align="center">$416.68</div></td>
      <td><div align="center">$430.29</div></td>
      <td><div align="center">$548.58</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">5000</div></td>
      <td><div align="center">$476.63</div></td>
      <td><div align="center">$485.45</div></td>
      <td><div align="center">$585.15</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">10000</div></td>
      <td><div align="center">$713.26</div></td>
      <td><div align="center">$758.94</div></td>
      <td><div align="center">$751.91</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">15000</div></td>
      <td><div align="center">$879.51</div></td>
      <td><div align="center">$925.01</div></td>
      <td><div align="center">$919.47</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">20000</div></td>
      <td><div align="center">$1041.92</div></td>
      <td><div align="center">$1092.30</div></td>
      <td><div align="center">$1085.25</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
  </table>
  <table width="494" border="1" id="pricing_table2" class="inactive_table">
    <tr>
      <th width="80" height="30" scope="col">Quantity</th>
      <th width="95" scope="col">1 Color </th>
      <th width="95" scope="col">2 Colors</th>
      <th width="95" scope="col">4 Colors</th>
      <th width="95" scope="col"> </th>
    </tr>
    <tr>
      <td><div align="center">250</div></td>
      <td><div align="center">$1</div></td>
      <td><div align="center">$2</div></td>
      <td><div align="center">$4</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">500</div></td>
      <td><div align="center">$2</div></td>
      <td><div align="center">$2</div></td>
      <td><div align="center">$4</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">1000</div></td>
      <td><div align="center">$238.92</div></td>
      <td><div align="center">$262.30</div></td>
      <td><div align="center">$446.18</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">2000</div></td>
      <td><div align="center">$298.84</div></td>
      <td><div align="center">$316.78</div></td>
      <td><div align="center">$481.68</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">2500</div></td>
      <td><div align="center">$328.26</div></td>
      <td><div align="center">$345.55</div></td>
      <td><div align="center">$499.10</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">3000</div></td>
      <td><div align="center">$358.50</div></td>
      <td><div align="center">$373.05</div></td>
      <td><div align="center">$513.08</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">4000</div></td>
      <td><div align="center">$416.68</div></td>
      <td><div align="center">$430.29</div></td>
      <td><div align="center">$548.58</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">5000</div></td>
      <td><div align="center">$476.63</div></td>
      <td><div align="center">$485.45</div></td>
      <td><div align="center">$585.15</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">10000</div></td>
      <td><div align="center">$713.26</div></td>
      <td><div align="center">$758.94</div></td>
      <td><div align="center">$751.91</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">15000</div></td>
      <td><div align="center">$879.51</div></td>
      <td><div align="center">$925.01</div></td>
      <td><div align="center">$919.47</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
    <tr>
      <td><div align="center">20000</div></td>
      <td><div align="center">$1041.92</div></td>
      <td><div align="center">$1092.30</div></td>
      <td><div align="center">$1085.25</div></td>
      <td><div align="center"><a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Place_An_Order/form.mdl&FORM_Form_ID=15221">buy now</a></div></td>
    </tr>
  </table>
</div>
<p align="center"> </p>
<p align="center"><strong>Can't find what you are looking for - <a href="https://www.secured-site6.com/printcenter/index.iml?mdl=Request_Estimate/form.mdl&FORM_Form_ID=42195">click here</a> to request a custom quote. </strong></p>
</body>



</html>









			</div>
			<div ID="Sample Pricing _instr" class="detail" style="display:none">
				(Click the triangle above to expand this panel.)
			</div>
		</td>
		<td class="end"></td>
	</tr>
	<tr class="footerrow">
        <td class="main"></td>
        <td class="end"></td>
	</tr>
	</table>
	<br>
<style>
#pricing_table_tabs{
	border-collapse: collapse;
}
#pricing_table_tabs td{
	border: 2px solid #ccc;
	padding: 5px;
	font-size:1.2em;
	font-weight:bold;
}
#pricing_table_tabs td:hover{
	cursor: pointer;
}
.active_pricing_table_tab{
	background-color: black;
	border-style: inset;
	color:white;
}
.active_table{display:block;}
.inactive_table{display:none;}
</style>
<script language="javascript" type="text/javascript">
var activeTab = document.getElementById("option1");
var activePricingTable = document.getElementById("pricing_table1");

function activateTab()
{
	if(activeTab)
	{
		activeTab.className = "";
		activeTab = document.getElementById(this.id);
		activeTab.className = "active_pricing_table_tab";
		activatePricingTable(activeTab.id);
	}
	else
	{
		activeTab = document.getElementById(this.id);
		activeTab.className = "active_pricing_table_tab";
		activatePricingTable(activeTab.id);
	}
}
function activatePricingTable(activeTabId)
{
	if(activePricingTable)
	{
		activePricingTable.className = "inactive_table";
		activePricingTable = document.getElementById("pricing_table" + activeTabId.charAt(activeTabId.length - 1));
		activePricingTable.className = "active_table";
	}
	else
	{
		activePricingTable = document.getElementById("pricing_table" + activeTabId.charAt(activeTabId.length - 1));
		activePricingTable.className = "active_table";
	}
}

for(i=1; i<=2; i++){
	if (window.addEventListener){
		document.getElementById("option" + i).addEventListener("click", activateTab, false);
	}
	else{
		document.getElementById("option" + i).attachEvent("onclick", activateTab);
	}
  
}

</script>

Code Works In Chrome, But Not Ie :(

Similar Tutorials

View Content

I'm just starting JavaScript and wrote a quick script for Next/Back buttons for a page showing a family outing on our boat. I proudly uploaded the webpage and emailed it out, but people running IE are unable to use the buttons, they simply do nothing.

Here is the .js file, I don't think anything in the HTML or CSS is causing the issue but could post those as well if necessary.

Code:

var step = 1;

//preload images
var numImages = 13;
var images = new Array( numImages );
var i = 0;
for ( i = 0; i < numImages; i++ )
{
	images[i] = new Image();
	images[i].src = "images/boat" + ( i + 1 ) + ".jpg";
}

function back()
{
	if( step > 1 )
	{
		step--;
	}
	else
	{
		step = numImages;
	}
	document.images.slide.src = images[step-1].src;
}

function next()
{
	if( step < numImages )
	{
		step++;
	}
	else
	{
		step = 1;
	}
	document.images.slide.src = images[step-1].src;
}

function init()
{
	document.getElementById("back").onclick = back;
	document.getElementById("next").onclick = next;
}

window.onload = init;

I've checked a lot of sites and can't figure this one out.

Also, if I'm practicing any bad coding techniques, I'm open to suggestions on that as well

Ajax With Js Works In Chrome But Not Others

Similar Tutorials

View Content

I built a registration and edit profile form using java to show or hide drop down selectors dependent on parent selection. I'm also using an ajax script to pull the selector values from txt files for the city selector.

This works fine in chrome, but will not work in ie or ff.
I've also found that the ajax script simply doesn't work in ff at all period even with the formmanager scrip removed.

The site is erecoverydev.com.
Click on the join now tab to see the registration form, or you can log in with un test and pw test123, then click on edit my page in the left hand menu to view the edit profile form.

Here is what's in the head to call these scripts:
Code:

<script src="/js/FormManager.js">
/****************************************************
* Form Dependency Manager- By Twey- http://www.twey.co.uk
* Visit Dynamic Drive for this script and mo  http://www.dynamicdrive.com
****************************************************/

</script>

<script type="text/javascript">
window.onload = function() {
    setupDependencies('cbcheckedadminForm', 'weboptions'); //name of form(s). Seperate each with a comma (ie: 'weboptions', 'myotherform' )
  };
</script>
<script src="/js/request.js">
/****************************************************
* Ajax call to fill city values
****************************************************/
</script>
<script>
function handleOnChange(dd1)
{
  var idx = dd1.selectedIndex;
  var val = dd1[idx].text;
  var par = document.forms["adminForm"];
  var parelmts = par.elements;
  var cb_citysel = parelmts["cb_city"];
  var state = val;
  if (cb_state != "Select state")
  {
   var directory = ""+document.location;
   directory = directory.substr(0, directory.lastIndexOf('/'));
   Http.get({
        url: "./regvalues/" +  state + ".txt",
        callback: fillcb_city,
        cache: Http.Cache.Get
    }, [cb_citysel]);
  }
}
function fillcb_city(xmlreply, cb_cityelmt)
{
  if (xmlreply.status == Http.Status.OK)
  {
   var cb_cityresponse = xmlreply.responseText;
   var cb_cityar = cb_cityresponse.split("|");
   cb_cityelmt.length = 1;
   cb_cityelmt.length = cb_cityar.length;
   for (o=1; o < cb_cityar.length; o++)
   {
     cb_cityelmt[o].text = cb_cityar[o];
   }
  }
  else
  {
   alert("Cannot handle the Ajax call.");
  }
}
</script>

Any ideas?

I'll post the rest of the script codes in a reply.

Javascript Function Works In Ie But Not In Ff And Chrome

Similar Tutorials

View Content

hi, i got this javascript function which run perfectly in IE but does not work in Mozilla. Any idea ?
function Changed() {

var theGridView = document.getElementById('MainContent_GridViewRDR1_Hidden');
var sum = 0;
var total = 0;
var totalFinal = 0;

for (var i = 0; i < theGridView.rows.length; i++) {

var csValue = document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + '');
var pcsValue = document.getElementById('MainContent_GridViewRDR1_Hidden_PCSTxt_' + i + '');

if (csValue.value != '') {

if (pcsValue.value != '') {

alert('Pcs already have value')
document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + '').innerText = '';
break;
}

if (isNaN(csValue.value)) {

alert('Please enter number')
document.getElementById('MainContent_GridViewRDR1_Hidden_TotalPriceTxt_' + i + '').innerText = 0;
document.getElementById('MainContent_TextBox1').innerText = 0;
document.getElementById('MainContent_GridViewRDR1_Hidden_CaseTxt_' + i + '').innerText = 0;

break;

}

var unitPriceValue = theGridView.rows(i + 1).cells(7).innerText;

var unitUOM = theGridView.rows(i + 1).cells(5).innerText;

sum = (parseFloat(csValue.value) * parseFloat(unitPriceValue) * parseFloat(unitUOM)).toString();
sum = roundVal(sum);

document.getElementById('MainContent_GridViewRDR1_Hidden_TotalPriceTxt_' + i + '').innerText = sum;

total += sum;
total = roundVal(total);

document.getElementById('MainContent_TextBox1').innerText = total;

}
else {

sum = 0;

}

}

total = roundVal(total);
totalFinal += total
document.getElementById('MainContent_TextBox1').innerText = totalFinal;

}

Works In Chrome And Ff, Not Ie Or Safari (noob:)

Similar Tutorials

View Content

Hey Everyone,

I have a simple Java Script function I setup for a pop up that requests a discount code. Works awesome in Chrome, FF and on smart phones... but IE and Safari don't work at all.

Here is the code..

This is in my header

<script>
function passWord1018() {
var testV = 1;
var pass1 = prompt('Please Enter The Discount Code',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "ultra") {
alert('Code Accepted! Press Ok To Be Redirected To The Discounted Price Page');
window.open('discounted101018.aspx');
break;
}
if (pass1.toLowerCase() == "sexydiscount") {
alert('Code Accepted! Press Ok To Be Redirected To The Discounted Price Page');
window.open('discounted201018.aspx');
break;
}
testV+=1;
var pass1 =
prompt('Code Denied - Code Incorrect, Please Try Again.','Code');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</script>

This is in the body

<center>
<form>
<br />
<input type="button" value="Enter Discount Code" onclick="passWord1018()" />
</form>
</center>

I found on another site where someone mentioned the <center> tags are not used anymore, but i tried removing those and still nothing...

Any insight would be helpful...Thanks

Jason

Works In Ie But Not Firefox Or Safari Or Chrome

Similar Tutorials

View Content

Can anyone tell me why the following works in IE but not the other browsers?

It's the "Select category..." jump menu at this URL: www.savasbeatie.com/books.htm

Code:

<TD>
	                  <form name="whichCat" style="margin-bottom:0" method="get">
                        <select name="catChoice" onChange="sendValue(this);">
                          <option class="news4" value="javascript:location.reload(true)" selected>Select Category...</option>
                          <option class="news4" value="php/IraqWars.php?q=Iraq%20Wars">Iraq Wars/Current Affairs</option>
						  <option class="news4" value="php/AncientHistory.php?q=Ancient%20History">Ancient History</option>
                          <option class="news4" value="php/AmericanRevolution.php?q=American%20Revolution">American Revolution</option>
                          <option class="news4" value="php/NapoleonicWar.php?q=Napoleonic%20War">Napoleonic War</option>
                          <option class="news4" value="php/AmericanCivilWar.php?q=American%20Civil%20War">American Civil War</option>
                          <option class="news4" value="php/IndianWars.php?q=Indian%20Wars">Indian Wars</option>
                          <option class="news4" value="php/WorldWars.php?q=World%20Wars">World Wars</option>
                          <option class="news4" value="php/Naval.php?q=Naval">Naval</option>
                          <option class="news4" value="php/MilitaryScience.php?q=Military%20Science">Military Science</option>
                          <option class="news4" value="php/SportsHistory.php?q=Sports%20History">Sports History</option>
                          <option class="news4" value="php/Other.php?q=Other">Other</option>
                        </select>
                      </form>
                    </TD>

I've been called in to help with this, but did not build the site. There's a frame that's supposed to display the link contents, and it's returning the error:

Error: document.getElementById("SB_Frame") is null
Source File: http://savasbeatie.com/jscripts/SB_util.js
Line: 11

I think it has something to do with the ID of the frame, (from Googling the error and reading some other posts,) but can't figure out where to put the tag.

Thanks for any help. - David

Regex Works In Ie But Not Firefox Or Chrome

Similar Tutorials

View Content

The following script grabs a string (*.abc.org, e.g. from &sid=xyz.abc.org) from the current URL and changes it (to ABC:abc.org). Everything works perfectly in IE, but Firefox and Chrome appear to get themselves into an endless loop. When I check the URL, xyz.abc.org has successfully been changed to ABC:abc.org, but the page just seems to keep refreshing over and over.

Code:

var tomatch = /abc.org/i;
var usrString = document.referrer;
var is_a_match = tomatch.test(usrString);
var newString = document.URL.replace(/[a-z]*\.abc\.org/, "ABC:abc.org"); if (is_a_match) {
    window.location.replace(newString);
}

Any suggestions much appreciated.

Any Idea Why This Freezes In Ie? Works Fine In Chrome

Similar Tutorials

View Content

[CODE]<script type="text/javascript" language="Javascript">

</script> [CODE]

[CODE]<a href="javascript:void(0);" onclick="return toggleMenu('menu3')">Title</a>[CODE]

It freezes in Internet Explorer; but works fine in Chrome.

A Piece Of Code Works Ok On Firefox But Not On Chrome

Similar Tutorials

View Content

Hi, can anyone help me with this? The following html is to upload an image, it works ok on firefox, but while using google chrome, nothing happened when I clicked "upload LOGO" button.
.................................................................................................... ....
<html>
<body>
<form method="post" action="action_start_initial_registration.php" name="initial_registration" id="initial_registration" enctype="multipart/form-data">
<input type="file" style="display:none" onchange="checkLogo()" name="input_logo_file" id="input_logo_file" value="input_logo_file">
<input type="text" name="logo_flag" id="logo_flag" value="0" style="display:none;"/>
<a href="javascript:void(0);" onclick="input_logo_file.click()"><em>upload LOGO</em></a><br />
</form>
<script type="text/javascript">
function checkLogo(){
document.getElementById("logo_flag").value="1";
document.getElementById("initial_registration").submit();
}
</script>
</body>
</html>
.............................................................................................

Variable Undefined In Ie/ff, Works Fine In Chrome

Similar Tutorials

View Content

I am pretty new to Javascript having a bit of a problem with a website with Google Maps integrated. URL is http://beta.5vanmap.com. JS is in /js/map.js.

I have two checkboxes (ccCheck and caccCheck). The basis is when the box is ticked, it overlays a KML onto the map.

This is working fine in Chrome, but in FF and IE it doesn't work, IE returns 'ccCheck is Undefined'. The code I am using is in the JS file, the bit it gets stuck at is as follows:

Code:

document.getElementById('ccCheck').onclick = function() {
	
				  if (ccCheck == 1)
  {
	ccCheck = 0;
   ccOverlay.setMap(null);  
  }

  else

  {
   ccCheck = 1;
	ccOverlay.setMap(map);    
  }


}

If I stick a ccCheck = document.getElementById('ccCheck') within the onclick function (before the if statement), it places the overlay onto the map, but then when I untick the box it just stays there.

It's such a simple thing (I think), and must be down to IE being pedantic about declaring the variable properly, the question is how should I be doing this?

Thanks and regards
Noel

Site Works In Chrome,safari.. But Not In Firefox

Similar Tutorials

View Content

ok so ive nearly finished the animated javascript in my site.
http://calumk.com/

to see the effect launch in chrome or safari, it works fine..
but its not working in Firefox
(and i havent tested IE.. if someone could, i would appreciate it)

i have no-idea why.. .
im using the http://berniecode.com/writing/animator.html library
which works fine in all browsers..

Any help would be apreciated...

I would post the code, but its probably easier if you just view source

Button Not Working In Ie But Works In Chrome And Firefox

Similar Tutorials

View Content

Title explains it really. The button I am using working perfecting in FireFox and Chrome but not in Internet explorer. (Yes I know someone that actually uses IE that pointed this out to me) The rest of the code works fine but just not the reset button I have. Something I have been needing to do is make the code call my images differently by putting them in an array so I don't mess this the sources of my images like I sloppily am here, but I am not sure if that will actually fix the problem I am have.

The checkbox should both uncheck the box(if checked) AND change the picture but it only unchecks the box.
Here is the relevant code let me know if you want me to post the whole thing.

Code:

function reset(){
		cb1.checked=false;
		document.goodAfternoon.src=goodAfternoonFinal.src; 
	}

Code:

"Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" />
 <img src="Good Afternoon.gif" name="goodAfternoon">
 <input type="button" id="cb2" value="RESET" onClick="reset()"/>

Getelementbyid Problem In Ie (works Firefox/chrome)

Similar Tutorials

View Content

Hi,

This code uses the getElementById to change the background of certain <tr>'s.

In a nutshell there are two buttons, the code checks which one has been clicked, then checks the background colour of a relevant <tr> and depending what it finds changes the colours of the cells.

Works fine in Chrome and Firefox but not in IE and I'm now sorely vexed by it.

Can anyone shed light on the solution please?

Code:

<script language="javascript" type="text/javascript">
        function changeBackgroundColor(objDivID)
        {
            var backColor = new String();

		if ( objDivID == "lifesciences" ) 
		
		{
            backColor = document.getElementById('claire').style.backgroundColor;
		}
		
		if ( objDivID == "healthcare" ) 
		
		{
			backColor = document.getElementById('adrienne').style.backgroundColor;
		}

		if(backColor.toLowerCase()=='#ffffff' || backColor.toLowerCase()=='rgb(255, 255, 255)')
            // IE works with hex code of color e.g.: #eeeeee
            // Firefox works with rgb color code e.g.: rgb(238, 238, 238)
            // Thats why both types are used in If-condition below
            
			{
			
			if ( objDivID == "lifesciences" )
					
        	{

                document.getElementById('david').style.backgroundColor = '#c0c0c0';
				document.getElementById('claire').style.backgroundColor = '#c0c0c0';
				document.getElementById('adrienne').style.backgroundColor = '#ffffff';
				document.getElementById('karen').style.backgroundColor = '#c0c0c0';
				document.getElementById('alice').style.backgroundColor = '#c0c0c0';
				document.getElementById('kelly').style.backgroundColor = '#ffffff';
				document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
				document.getElementById('carolyn').style.backgroundColor = '#c0c0c0';
				document.getElementById('paul').style.backgroundColor = '#c0c0c0';
				document.getElementById('kayleigh').style.backgroundColor = '#c0c0c0';
				document.getElementById('tim').style.backgroundColor = '#c0c0c0';
				document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
				document.getElementById('lee').style.backgroundColor = '#c0c0c0';
				document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
				
			}
			
			else
			
			{

                document.getElementById('david').style.backgroundColor = '#c0c0c0';
				document.getElementById('claire').style.backgroundColor = '#ffffff';
				document.getElementById('adrienne').style.backgroundColor = '#c0c0c0';
				document.getElementById('karen').style.backgroundColor = '#c0c0c0';
				document.getElementById('alice').style.backgroundColor = '#c0c0c0';
				document.getElementById('kelly').style.backgroundColor = '#c0c0c0';
				document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
				document.getElementById('carolyn').style.backgroundColor = '#ffffff';
				document.getElementById('paul').style.backgroundColor = '#ffffff';
				document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
				document.getElementById('tim').style.backgroundColor = '#c0c0c0';
				document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
				document.getElementById('lee').style.backgroundColor = '#c0c0c0';
				document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
			}
			
            }
            else
			
			{

                document.getElementById('david').style.backgroundColor = '#ffffff';
				document.getElementById('claire').style.backgroundColor = '#ffffff';
				document.getElementById('adrienne').style.backgroundColor = '#ffffff';
				document.getElementById('karen').style.backgroundColor = '#ffffff';
				document.getElementById('alice').style.backgroundColor = '#ffffff';
				document.getElementById('kelly').style.backgroundColor = '#ffffff';
				document.getElementById('sarah').style.backgroundColor = '#ffffff';
				document.getElementById('carolyn').style.backgroundColor = '#ffffff';
				document.getElementById('paul').style.backgroundColor = '#ffffff';
				document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
				document.getElementById('tim').style.backgroundColor = '#ffffff';
				document.getElementById('chantal').style.backgroundColor = '#ffffff';
				document.getElementById('lee').style.backgroundColor = '#ffffff';
				document.getElementById('lisa').style.backgroundColor = '#ffffff';
				
			}
			
		}
            

    </script>

My Code Works In Google Chrome, But Not Firefox!

Similar Tutorials

View Content

this code works in google chrome, but not in firefox.
Code:

function merge(obj1, obj2) {
 var a ={};
  for (var p in obj1) {
    try {
      // Property in destination object set; update its value.
      if ( obj1[p].constructor==Object ) {
        a[p] = merge(a[p], obj1[p]);

      } else {
        a[p] = obj1[p];

      }

    } catch(e) {
      // Property in destination object not set; create it and set its value.
      a[p] = obj1[p];

    }
  }
    for (var p in obj2) {
    try {
      // Property in destination object set; update its value.
      if ( obj2[p].constructor==Object ) {
        a[p] = merge(a[p], obj2[p]);

      } else {
        a[p] = obj2[p];

      }

    } catch(e) {
      // Property in destination object not set; create it and set its value.
      a[p] = obj2[p];

    }
  }

  return a;
}
var d=function(){'c';}
var a ={a:{b:'c'},b:'c'}
var b ={c:a,d:d};
var c = merge(window,b);

WHY?!?!?!?!?!?!?!?!?!?!?!?!??!?!?!?!

Javascript Stopped Working In Chrome/safari, Still Works In Ie

Similar Tutorials

View Content

I am using javascript to change the buttons on my website so that they load up a different image when hot spots on the buttons are hovered over.

Everything has been working great, but this morning I tried checking out my site and for some reason the javascript wasn't working in Chrome, or on my iphone using Safari.
I tried it in IE and everything still works.

Any ideas on why it would stop working for those two browsers?

Here is the javascript:

Code:

 
function init(){
	
	document.getElementsByTagName('area')[0].onmouseover=function(){
		document.getElementById('crocodileImg').src='Images/crocodileHover.png';	
			this.onmouseout=function() {	
		document.getElementById('crocodileImg').src='Images/crocodile.png';
		}
	}
	
	document.getElementsByTagName('area')[1].onmouseover=function(){		
		document.getElementById('historyImg').src='Images/historyHover.jpg';
			this.onmouseout=function() {
		document.getElementById('historyImg').src='Images/history.jpg';
		}
	}
	
	document.getElementsByTagName('area')[2].onmouseover=function(){
		document.getElementById('applyImg').src='Images/applyHover.jpg';
			this.onmouseout=function() {
		document.getElementById('applyImg').src='Images/apply.jpg';
		}
	}
	
	document.getElementsByTagName('area')[3].onmouseover=function(){		
		document.getElementById('applyImg').src='Images/membersHover.jpg';
			this.onmouseout=function() {
		document.getElementById('applyImg').src='Images/apply.jpg';
		}
	}

	document.getElementsByTagName('area')[4].onmouseover=function(){
		document.getElementById('mediaImg').src='Images/mediaHover.jpg';
			this.onmouseout=function() {
		document.getElementById('mediaImg').src='Images/media.jpg';
		}
	}	
}

if(window.addEventListener){
	window.addEventListener('load',init,false);
}

else { 
	if(window.attachEvent){
	window.attachEvent('onload',init);
	}
}

I'm not sure if seeing the html the js is referencing will help at all, but here it is just in case:

Code:

        <div id="crocodile">
            <img id="crocodileImg" src="Images/crocodile.png" usemap="#crocodileImg" border="0" width="436" height="147" alt="Home" />
            <map id="crocodileImg" name="crocodileImg">
            <area id="crocArea" shape="poly" coords="41,9,23,21,20,58,40,78,72,78,82,86,88,112,117,129,140,126,257,126,274,107,274,79,401,78,420,66,419,26,404,6,369,7,366,0,294,0,291,7," href="index.html" alt="Home" title="Home" /> 	 
            </map>   
        </div>
        
        <div id="history">
            <img id="historyImg" src="Images/history.jpg" usemap="#historyImg" border="0" width="350" height="256" alt="Home" />
            <map id="historyImg" name="historyImg">
            <area id="historyArea" shape="poly" coords="18,77,18,167,48,170,79,208,124,233,174,238,228,218,257,188,266,176,280,184,306,182,338,102,331,93,271,92,254,54,226,27,196,11,169,4,137,7,109,17,82,33,65,51,52,74," href="history2.html" alt="History" title="History" />
            </map>             
        </div>
        
       
        <div id="apply">
            <img id="applyImg" src="Images/apply.jpg" usemap="#applyImg" border="0" width="280" height="223" alt="Apply" />
            <map id="applyImg" name="applyImg">
            <area id="applyArea" shape="poly" coords="17,43,17,57,15,72,20,84,39,83,43,79,56,76,62,62,65,49,77,42,76,36,70,22,65,14,52,14,45,21,38,24,31,32," href="apply.html" alt="Apply" title="Apply" />
            <area id="membersImg" shape="poly" coords="112,49,97,55,77,71,64,89,61,99,47,104,44,123,44,149,46,164,57,168,70,172,82,186,102,197,125,206,146,208,168,201,188,189,201,177,208,166,231,165,254,165,260,150,262,133,262,113,254,97,238,95,221,97,213,97,205,85,197,74,183,63,172,55,159,51,145,48,134,47,"href="members.html" alt="Members" title="Members" />
            </map>           
        </div>
        
        <div id="media">
             <img id="mediaImg" src="Images/media.jpg" usemap="#mediaImg" border="0" width="182" height="149" alt="Media" />
            <map id="mediaImg" name="mediaImg">
            <area id="mediaArea" shape="poly" coords="0,102,16,103,26,117,44,129,67,133,92,128,108,115,118,102,165,102,170,88,173,65,172,52,161,49,141,49,132,42,121,42,110,30,96,22,76,16,60,14,44,18,30,29,19,36,13,48,0,51," href="media.html" alt="Media" title="Media" />
            </map>       
        </div>

Thank you for any replies.

Saving Audio State In Cookie, Only Works Properly In Chrome.

Similar Tutorials

View Content

Hey all,

I have this code, that saves the "play" or "pause" audio-tag state in a cookie for recognizing on different pages.
This code only works properly in Chrome, but not in other browsers.
In IE, it doesn't save/recognize the cookies, apparently.
And in Firefox, I don't even get the audio to play.

Code:

$(document).ready(function(){
			
if ($.cookie("audioState") == "pause") {
	$("p#sound audio").get(0).pause();
	$("p#sound span#sound-icon").css({backgroundPosition: "0 -37px"});
}
else if ($.cookie("audioState") == "play") {
	$("p#sound audio").get(0).play();
	$("p#sound span#sound-icon").css({backgroundPosition: "0 0"});
}

$("p#sound").click(function() {
	var song = $(this).find("audio").get(0);
	var soundIcon = $(this).find("span#sound-icon");
	if (song.paused) {
		song.play();
		soundIcon.css({backgroundPosition: "0 0"}).hide().stop(1, 1).fadeIn(500);
		$.cookie("audioState", "play");
	} else {
		song.pause();
		soundIcon.css({backgroundPosition: "0 -37px"}).hide().stop(1, 1).fadeIn(500);
		$.cookie("audioState", "pause");
	}
});
				
});

Code:

<p id="sound">MUSIC <span id="sound-icon"></span>
	<audio autoplay="autoplay" loop="loop">
		<source src="audio/Breather2000-Afterlife.ogg" type="audio/ogg" />
		<source src="audio/Breather2000-Afterlife.mp3" type="audio/mp3" />
		Your browser does not support the audio tag.
	</audio>
</p>

What am I doing wrong?

Thanks already!

Javascript Fails In Chrome N Safari But Works In Ie, Multiple Dependancy Form Select

Similar Tutorials

View Content

hi everyone, this is my 1st post here in this community forum, just would like to say "HI" to everyone.

i would like to share with you my experience in developing multiple dependency selection form developed in java script, how this script works is that when 1st selection is selected, based on the value the user select, a second level selection will appear and so on.

below is the Java-script code along with my form code too

Javascript:
<script type="text/javascript">

function nextSelect(o) {

if (o.value == '0') {
var next = o.nextSibling;
while (next && next.nodeName != 'SELECT') {
next = next.nextSibling;
}
next.length = 0;

return;
}
var d = document;

var useSelect = d.getElementById(o.name + '_' + o.value);

if (!useSelect) {
alert('Unknown id: ' + o.name + '_' + o.value);
return;
}

var copy = useSelect.cloneNode(true);
copy.style.display = 'inline';

var next = o.nextSibling;
while (next && next.nodeName != 'SELECT') {
next = next.nextSibling;
}
next.parentNode.insertBefore(copy, next);
next.parentNode.removeChild(next);
}
</script>

my form:
<div style="display: none;">



<select name="second" id="first_dp" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_38">2 3/8'</option>
<option value="dp_4">4'</option>
</select>

<select name="second" id="first_hw" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="hw_3_12">3 1/2'</option>
<option value="hw_4">4'</option>
</select>



<select name="third" id="second_dp_2_38" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_38_4.85">4.85 lbs/ft</option>
<option value="dp_2_38_6.65">6.65 lbs/ft</option>
</select>
<select name="third" id="second_dp_2_78" onchange="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp_2_78_6.85">6.85 lbs/ft</option>
<option value="dp_2_78_10.4">10.4 lbs/ft</option>
</select>

>>>>>>and so on till 3rd selection<<<<<<<<<

</div>

<form action="pdfHandle.php" method="post" id="pdfsearch">
<fieldset>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" height="146">
<p>
Type:<br />
Size:<br />
Weight:<br />
</td>
<td width="266"><select name="first" onclick="nextSelect(this);">
<option value="0">Choose</option>
<option value="dp">Drill Pipe</option>
<option value="hw">Heavy Weight</option>
</select><br/>
<select name="select">
</select>
<br/>
<select name="select">
</select>
<br/>
<select name="select">
</select>

</td>
</tr>
</table>
<p>
<input type="submit" name="submit" id="submit" value="Create PDF" />
<input type="reset" value="Reset Selection" />
</p>
</fieldset>
</form>
-----------------------------------------------------------------------

i would like to know what i am missing here and what is making Safari n chrome not to run this page properly, when u execute this code, only the 1st selection will appear while the rest of the selections are Null, i hope someone will guide me through this or direct me to solution or any other way of doing this perhaps

i thank you for viewing this post.