Learn VBA & Macros in 1 Week!

JavaScript - Flip Boxes

Full Excel VBA Course - Beginner to Expert

Flip Boxes	View Content

Hi
Can anyone help with this....

I'm trying to create and object that has text on either side of the flip boxes and when the correct answers are showing (some will need to be flipped and some not). The boxes are disapled and a message appears to say this is correct.
I need to work out how to write different text on the other side of each flip box
How to differentiate between when the box is flipped and when it isnt (to assign a value)
How to disable boxes when all are correct or how to add a subit button so that when users think the boxes are correct they click to check answers

So far I have this and now im stuck, its not doing exactly what i want. I'm new to all this and just need a bit of guidance...

Code:

<style>
	.content {
		width: 880px;
		height:180px;
	}
	
	.test {
		width:800
		height:100
		
	}
	.answers{
		position:absolute;
		width:25px;
		height:20px;
		left: 200px;
	    top: 4px;
	}
	
	.correct{
		background-repeat:no-repeat;
		background-image:url(assets/correct-small.png);
		z-index:1;
	}
	
	.incorrect{
		background-repeat:no-repeat;
		background-image:url(assets/incorrect-small.png);
		z-index:1;
	}

	.flip {
		position:relative;
		float:left;
		margin-left:3px;
		margin-right:3px;
		width: 500px;
		height: 22px;
		padding: 3px;
		margin-bottom: 2px;
		border: 1px #CCC solid;
		background-color: #EFEFEF;
		text-align: center;
		}
	
	.flip:hover{
		cursor: pointer;
		background-color: #FFF;
	}
</style>

<script language="javascript">
	trueCount = 0;
	falseCount = 0;
	
	for(i=1;i<=15;i++) {
		$("#flipbox" + i).click(function(){
			$(this).flip({
				direction:'tb',
				color: '#EFEFEF',
				
			});
		});
	}
	
	function addAnswer(div, answer){
		
		if($("#"+div).hasClass("correct")) {
			trueCount--;
			$("#"+div).removeClass("correct");
		}
		else {
			$("#"+div).addClass("correct");
			answersArray[trueCount] = $("#"+div).parent().html().substr(0, $("#"+div).parent().html().indexOf('<'));
			trueCount++;
			if(trueCount == 2) {
				$(".test").fadeOut(1000, function(){
					$(this).html("<h3>Correct - </h3>" 
				    ).fadeIn(1000);	
				})
			}
		}
	}
	updateBookmark();
</script>

<br /><br />
<div class="content">
    <div class="flip" onclick="addAnswer('answer1','c')" id="flipbox1">Reading a book<div class="answers" id="answer1"></div></div>
    <div class="flip" onclick="addAnswer('answer2','t')" id="flipbox2">Position their body so that they are facing you <div class="answers" id="answer2"></div></div>
    <div class="flip" onclick="addAnswer('answer3','c')" id="flipbox3">Talk<div class="answers" id="answer3"></div></div>
    <div class="flip" onclick="addAnswer('answer4','t')" id="flipbox4">Make eye contact<div class="answers" id="answer4"></div></div>
    <div class="flip" onclick="addAnswer('answer5','c')" id="flipbox5">Ask questions<div class="answers" id="answer5"></div></div>
</div>
<div class="test"></div>

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

Text On Flip Box

Similar Tutorials

View Content

Hi
Does anyone know how to make the flip box code below so it reverts back to the original text when you click it again. I have 5 flip boxes with a message on each side but currently once you click it you can't click again to see the original text.

Code:

<script language="javascript">
	trueCount = 0;
	falseCount = 0;
	
	for(i=1;i<=15;i++) {
		$("#flipbox" + i).click(function(){
			var $this = $(this);
			$(this).flip({
				direction:'tb',
				color: '#EFEFEF',
				content: $this.attr("title"),
				onBefo  function(){$(".revert").show()}
				
					})
					return false;
				});
		
						$("#revert").bind("click",function(){
					$("#flipbox").revertFlip();
					return false;
				});
	}
	
	function addAnswer(div, answer){
		
		if($("#"+div).hasClass("correct")) {
			trueCount--;
			$("#"+div).removeClass("correct");
		}
		else {
			$("#"+div).addClass("correct");
			answersArray[trueCount] = $("#"+div).parent().html().substr(0, $("#"+div).parent().html().indexOf('<'));
			trueCount++;
			if(trueCount == 2) {
				$(".test").fadeOut(1000, function(){
					$(this).html("<h3>Correct - </h3>" 
				    ).fadeIn(1000);	
				})
			}
		}
	}
	updateBookmark();
</script>



<h1>Communications Skills</h1>
<div id="greenbg"><div id="greenbgcontent"><h4>Listening</h4>
<p>How can you show that you are listening actively?</p>
<p>Click on the boxes below until they show behaviours you feel demonstrate that someone is listening to you</p>
<div class="content">
    <div class="flip" onClick="addAnswer('answer1','c')" id="flipbox1" title="Put down the book">Reading a book<div class="answers" id="answer1"></div></div>
    <div class="flip" onClick="addAnswer('answer2','t')" id="flipbox2" title="Position their body so that they are not facing you">Position their body so that they are facing you <div class="answers" id="answer2"></div></div>
    <div class="flip" onClick="addAnswer('answer3','c')" id="flipbox3" title="Be Quiet">Talk<div class="answers" id="answer3"></div></div>
    <div class="flip" onClick="addAnswer('answer4','t')" id="flipbox4" title="Watch the wall">Make eye contact<div class="answers" id="answer4"></div></div>
    <div class="flip" onClick="addAnswer('answer5','c')" id="flipbox5" title="Be Quiet">Ask questions<div class="answers" id="answer5"></div></div>
</div>
<div class="test"></div>

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.

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>

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

Similar Tutorials

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?

Several Drop Down Boxes

Similar Tutorials

View Content

Hello, I have a drop down box, which display an images. It is also saved through a cookie on what option you leave it on. Is there a way you can make it so there are several drop downs on the same page that will also display images corresponding to the option chosen?

Here's a live example: www.cirula.com/options

here is my coding
Code:

<script language="javascript">

function linkrotate(which){
var mylinks=new Array()
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0]="http://www.google.com"
mylinks[1]="http://www.ebay.com"
mylinks[2]="http://www.yahoo.com"

window.location=mylinks[which]
}


function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
</script>


</head>
<body  onLoad="setDefaultValues()">
<div align="center"> 

<form name="mygallery">
<p><select name="picture" onChange="showimage(); setCookie(this.name,this.selectedIndex)" size="1"> 
<option value="http://www.cirula.com/images/google.png">Google</option>
<option value="http://www.cirula.com/images/ebay.png">Ebay</option>
<option value="http://www.cirula.com/images/yahoo.png">Yahoo</option>
</select></p>
</form>
<p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="http://www.cirula.com/images/google.png" name="pictures" width="150"
height="150" border=0></a>

Confirmation Boxes

Similar Tutorials

View Content

Ok I know there are a few other posts about this but I can't find one similar to my problem. The confirmation box pops up, but cancel does nothing. it is for deletion of a movie off a server for class, but if you hit cancel it deletes the entry anyway. here is my code:

Code:

<script type="text/javascript">
function show_confirm()
{
	var r=confirm("Are you sure you want to delete?");
	if (r==true)
  {
	  window.location="movie_delete.cfm?FilmID=#FilmID#";
  }
}
</script>

[<a href="movie_delete.cfm?FilmID=#FilmID#" onclick="show_confirm()">Delete</a>]

notice anything wrong?

Modal Boxes

Similar Tutorials

View Content

Hi,

I've been searching for a good tut on modal boxs for a while where they open in middle of screen like facebook boxs & i want to have one where you use onClick function from href link.

example:
<a href="#" onclick="'files/delete.php?postId=$post['id']','modal_box'">Delete</a>

and so on with other things.

Can anyone help.

Thanks.

I Need A Help With Dropdown Boxes

Similar Tutorials

View Content

Selection Boxes

Similar Tutorials

View Content

ok i have to selection boxes and they need to read each other and input either a yes or a no into a text form i would really appreciate some help thanks

heres what i have if it helps

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Galvanic Corrosion Chart</title>
</head>
<body>
<br />
<form name="gcc">
<div align="center"><a href="website.html"><img
style="border: 0px solid ; width: 278px; height: 50px;" alt=""
src="pics/LOGO.png" border="0" height="50" width="278" /></a><br />
</div>
<p style="text-align: center;" align="center"><font size="+2"><span
style="font-family: Century Gothic;"><font
style="text-decoration: underline;" size="+3">
<font face="Futura Bk BT">Galvanic Corrosion Chart<span
style="text-decoration: underline;"><span
style="text-decoration: underline;"><span
style="text-decoration: underline;"><span
style="text-decoration: underline;"><span
style="text-decoration: underline;" /></span></span></span></span></font></font></span></font><font
face="Futura Bk BT"><br />
</font>
</p>
<br />
<table
style="text-align: left; margin-left: auto; margin-right: auto;"
height="119" width="610">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"
align="center" valign="middle"><font face="Futura Bk BT"><font
size="+1">&nbsp;<font size="+1"> Material 1</font></font><br />
<select name="mat1">
<option>Zinc Plating</option>
<option>Zinc Die Casting</option>
<option>Galvanize</option>
<option>Tin-Zinc</option>
<option>Cadmium-Zinc Solder</option>
<option>Aluminum(Clad.1100.3003.5052.6160)</option>
<option>Cadmium Plate</option>
<option>Aluminum Castings</option>
<option>Carbon &amp; Alloy Steel, Cast Iron</option>
<option>Aluminum(2024.2017.7075)</option>
<option>Lead</option>
<option>Lead-Silver Solder</option>
<option>Tin-Lead Solder</option>
<option>Tin Plating</option>
<option>Chromium Plate</option>
<option>Stainless 18/2</option>
<option>Copper &amp; Alloys</option>
<option>Stainless 18/8</option>
<option>Silver Solder</option>
<option>Monel</option>
<option>Nickel Plate</option>
<option>Titanium</option>
<option>Silver Plate</option>
</select>
<br />
</font></td>
<td colspan="1" rowspan="1"
style="vertical-align: top; text-align: center;" valign="middle"><font
face="Futura Bk BT"><font size="+1"> Material 2</font><br />
</font>
<select name="mat2">
<option>Zinc Plating</option>
<option>Zinc Die Casting</option>
<option>Galvanize</option>
<option>Tin-Zinc</option>
<option>Cadmium-Zinc Solder</option>
<option>Aluminum(Clad.1100.3003.5052.6160)</option>
<option>Cadmium Plate</option>
<option>Aluminum Castings</option>
<option>Carbon &amp; Alloy Steel, Cast Iron</option>
<option>Aluminum(2024.2017.7075)</option>
<option>Lead</option>
<option>Lead-Silver Solder</option>
<option>Tin-Lead Solder</option>
<option>Tin Plating</option>
<option>Chromium Plate</option>
<option>Stainless 18/2</option>
<option>Copper &amp; Alloys</option>
<option>Stainless 18/8</option>
<option>Silver Solder</option>
<option>Monel</option>
<option>Nickel Plate</option>
<option>Titanium</option>
<option>Silver Plate</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" rowspan="1" align="center" valign="top"><font
face="Futura Bk BT" size="+1">Acceptable</font><br />
<font face="Futura Bk BT"><input name="AR" readonly="readonly" /></font></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Alert Boxes

Similar Tutorials

View Content

Ok, this HAS to be some stupid typo I can't find somewhere or something but I don't see where. Basically the alertbox works just fine when only the show_alert() function and the button calling it are in the code. But neither work if only the alert() function and the button calling that are in the code, nor does it work by itself. However I see no differences in how they are coded unless I am missing something very very simple.

Code:

<html>
<head>
<script type="text/javascript">
	function show_alert()
	{
		alert("I am an alert box!");
	}
	function alert()
	{
		alert("again");
	}
</script>
</head>
<body>

<input type="button" onClick="show_alert()" value="Show alert box" />
<input type="button" onClick="alert()"      value="CLICK me" />

</body>
</html>

Prompt Boxes With Javascript

Similar Tutorials

View Content

I am trying to get these prompt boxes to display for age and resting heart rate. I cannot get this to work...This is what I have...any suggestions?

<html>
<head>

<h1>Calculate Your Target Heart Rate</h1>

<p>You can calculate your heart rate so that you can get the maximun results from your cardiovascular workout.
Just follow these simple steps:</p>

<script type="text/javascript">
function show_prompt()
{
var number = prompt ("Please enter your Resting heart rate:","Enter Rest Heart Rate Here!");
if (number! null && number! = "")
var age = prompt ("Please enter your Age", "Enter Your Age Here!");

{
document.write ("Your Resting Heart Rate is" + number);
document.write ("Your Age is" + Age);
}
}

</script>
</head>
<body>

<input type ="button" onclick = "show_prompt ()" value = "Start Calculating Here!"/>

</body>
</html>

Javascript Select Boxes

Similar Tutorials

View Content

Calculating quiz answers?

Code:

var correctAnswers = new Array();

correctAnswers[1] = "Extensible Hypertext Markup Language";

correctAnswers[2] = "<p></p>";

correctAnswers[3] = "<br />";



function checkAnswers(){

    var score = 0;

    for (i=1; i<4; i++){

        correctAnswers = getSelectValue("quiz","q" + i);

        if (correctAnswers == correctAnswers[i]){

            score++;

        }

    }

If Else Not Working, Alert Boxes

Similar Tutorials

View Content

Working on a project and I am trying to get error messages to pop up when either a number wasn't entered or another error message if nothing was entered. otherwise if a number was probably entered it would perform the proper function, heres where I am at, does anyone know what is wrong with it? it wont calculate or even throw up a pop up box.

Code:

<script language="JavaScript" type="text/javascript">

function check_numbers(){

var sal = document.temp_form.num3.value;
var error_message = "";

if (sal == "")
	{
error_message += "You must enter a value gross annual salary \n";
	}
else if (isNaN(sal))
error_message += "Value entered is not a number, please try again. \n";
	}
if (error_message != "")
	{
alert ("Please correct the following errors: \n_________________________________\n\n" + error_message);
	}
else{
Calculate( parseInt(sal))
	}
}
function calculate()
		{
                var sal = Number(document.getElementById('num3').value);
		var fName = document.getElementById('num1').value;
		var lname = document.getElementById('num2').value;
		alert('Hello '+ fName + ' '+ lname + ', you would pay $'+ sal * .2 + ' in Federal taxes and $'+ sal * .1 + ' in State taxes, leaving you $'+ sal * .7 + ' to take home annually!');
            	}

And then here is the HTML part of it.

Code:

<b>
Here is a pay slip generator that will determine your net annual salary.
<br>
Simply type in your first and last name along with gross salary and hit calculate.
<br>
Doing this will let you know how much you will end up paying in both Federal and State taxes.
</b>
<form action="" method="post" name="temp_form">
<p> Enter your First Name:
<input name="num1" type="text" id="num1" size="10" maxlength="10">
</p>
<p> Enter your Last Name:
<input name="num2" type="text" id="num2" size="10" maxlength="10">
</p>
<p> Enter your gross salary:
<input name="num3" type="text" id="num3" size="10" maxlength="10">
</p>

Click this button to calulate your annual net pay!
<input type="submit" onclick="check_numbers()" value="Generate Pay Slip" />
<input type="button" value="Reset Form" onClick="this.form.reset()" />
</FORM>
</body>
</html>

Dependend Autocomplete Boxes

Similar Tutorials

View Content

Hi all,

I am trying to create a dependend autocomplete (based on JQuery) box for example:

Field 1 has a autocomplete value of America.
Field 2 has to fetch based on the value America the availible states like Kansas

However if field 1 has the value England i want field 2 to reflect this by offering for example Schotland.

I have the following code in place:

Code:

$(

document).ready(


function() {


var ac_config = {


source: "getcountry.php",


select: function(event, ui){

$("#

field1").val(ui.item.name),

$("#

field1hidden").val(ui.item.id);


},


minLength:3


};




$("#

field1").autocomplete(ac_config);


}

);

The code above will autocomplete the field1 (country's) input field and an hidden id field. Now i want to base the selection of field2 (the states) on the returned value in field1. i have the following code to try and do this (placed inside document.ready function()):

Code:

var stateinput = document.getElementById('field1').value

var ac_config2 = {


source: "getstate.php?country=" + stateinput,


select: function(event, ui){

$("#

field2").val(ui.item.name),

$("#

field2hidden").val(ui.item.id);


},


minLength:3


};




$("#

field2").autocomplete(ac_config);

However the selection is not restricted based on the given input. Can anybody tell me what i am doing wrong?

Thanx in advance.....

Question About Chat-boxes

Similar Tutorials

View Content

I want to make a chat-box so people can log in under a nickname and talk to eachother, anyone have any idea how i can go about doing this?

Three Level Connected Boxes

Similar Tutorials

View Content

Is there a way add another dropdown form to this script?

http://javascript.internet.com/navig...-comboxes.html

Or do you happen to have another script that does the same job? I need three level connected dropdown boxes. Each one should be filtered according to previous selection and should be empty before that selection is made...

Thanks in advance...

Creating Collapsing Boxes

Similar Tutorials

View Content

I would like to create collapsing boxes.

I would like for them to have different colors.

Box1 Box 3
Link 1 Link 1
Link 2 link 2
Link 3 Link 3

Box2 Box 4
Link 1 Link 1
Link 2 link 2
Link 3 Link 3

I got the code to do the first column (box 1 and 2). But I don't know how to add a second column (box 3 and 4). Any help would be appreciated.

Thanks

I Want To Add Values From 5 Drop Down Boxes

Similar Tutorials

View Content

Hi guys, i'm trying to develop a code for my sister, i would like to use javascript
to finish off the following task:

1. I want to be able to select marks from 0 to 30, from 5 drop down boxes.
2. and as marks are selected, it should upgrade the total.
3. and then show me the total marks when finished.

i've got up to creating the drop down boxes, now it's just adding the values once selected.

Thanks! anyhelp would be welcome

Please Help. Text Boxes Do Not Link Up.

Similar Tutorials

View Content

Hi,
I'm a javascript noob, and I am doing a project for CS. I got the page to look how it is supposed to, but it does not work correctly. The input boxes should display a number between 1-4 in the output boxes, but the box displays [object HTMLInputElement] instead. And the buttons all perform their task to one output box, not their own output box. Sorry if that was confusing. Please take a look.

<html>




<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

number = RandomInt(1, 4);

document.getElementById('messageBox').value=
"You guessed " + guessOne + " My number was " + number + ".";
}

</script>
</head>

</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessOne" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 1"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBox" size="90" />
</p>
</body>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBoxTwo
{
var number;

numberTwo = RandomInt(1, 4);

document.getElementById('messageBoxTwo').value=
"You guessed " + guessTwo + " My number was " + numberTwo + ".";
}

</script>
</head>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

numberThree = RandomInt(1, 4);

document.getElementById('messageBox').value=
"You guessed " + guess + " My number was " + numberThree + ".";
}

</script>
</head>

</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessTwo" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 2"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxTwo" size="90" />
</p>
</body>

</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessThree" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 3"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxThree" size="90" />
</p>
</body>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

numberFour = RandomInt(1, 4);

document.getElementById('messageBoxFour').value=
"You guessed " + guessFour + " My number was " + numberFour + ".";
}

</script>
</head>

</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessFour" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 4"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxFour" size="90" />
</p>
</body>
</html>