Learn VBA & Macros in 1 Week!

JavaScript - Please Help With Js On Page Flip

Full Excel VBA Course - Beginner to Expert

Please Help With Js On Page Flip	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

Full Excel VBA Course - Beginner to Expert

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?

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>

Flip Boxes

Similar Tutorials

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>

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>

Loading External Js Before Page Page Load (specific Span Element)

Similar Tutorials

View Content

Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he

The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script>

About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to.

When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00.

I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top.

I appreciate your help.

Spry Collapsible Panel To Trigger Page Simultaneous Page Down Function

Similar Tutorials

View Content

I just wrote an essay to discover it had logged me out and I lost everything.

Grrrrrrr.

Here goes again, simplified this time.

I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over.

The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic.

My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it?

I've tried all morning with no success so far!

Thanks,

Nick,

I'm copy pasting this post this time round, I don't trust this website now

Help!! Click A Submit Button In Parent Page Upon Closing A Pop Up Child Page

Similar Tutorials

View Content

I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help.

I have the following jscript code but it is now working.

Code:

window.onunload = submitParent;
function submitParent() 
{
  var doc = window.opener.document,
      theForm = doc.getElementById("finalForm");
      theField = doc.getElementById("finalSelected");
  theForm.submit();
  theField.trigger('click');
}

My form from the parent page is as follow. I want my jscript to just click on the submit button once.
Code:

<form id = "finalForm "name= "finalForm" method="POST" action="">
<input type="Submit" id = "finalSelected" name="finalSelected"/>

How To Edit A Web Page Using A Javascript Editor And Display New Content In Same Page

Similar Tutorials

View Content

Hi,

I am Aditya. I am explaining below the exact scenario where I need the help:

I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text.
Now, I need help for the below issues:
1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages.
2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page.

I am new to web development, so may be that these questions are too simple.
But, I need some help from you.

Waiting for your reply,

Thanks,
Aditya

Light Box Will Not Display Center Page, When Page Is Scrolled All The Way Up!

Similar Tutorials

View Content

Hi there!
I am using GlassBox "http://www.glassbox-js.com/" As a light box on a website. Basically, You click an thumbnail image, and a window pops up with a larger version of that image.

Now originally, the window opened X number of pixels from the top of the page. However, My thumbnail images were located mid page, so when you clicked on one, the window would open at the top of the page and the user would not see it unless they scrolled up.

So I attempted to modify the script so that it would get the users page width/height and display it directly in the center no matter the position.

Now my problem is that the script only works when the user has already scrolled down. So if the page is scrolled all the way to the top, and you click on a thumbnail, the window will not open center screen.

Here is an example: http://synaxis.pcriot.com/

When the page loads, DO NOT scroll it, and click on the image. You will see the window pop up, and not centered, like it should be. However, now if you scroll down, and click the image again, you see that it is now centered. I also noticed that when the page is scrolled up, and the image does not center, it always is placed below the thumbnail image, or otherwise where ever the DIV is located. It normally located under the image, but if i place the DIV at the top of the page then the window will pop up there.
And this does happen on every browser that I have tested, Firefox, IE, and Chrome.

So, I am pretty much stumped as to why this is happening. If anyone can shed some light I would be very grateful.

Thank You

Here is a link to the original code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

And modified code:
http://synaxis.pcriot.com/javascript...ox/glassbox.js

The modified code is at the very bottom of the script.

Original Code:
Code:

/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Modified Code

Code:

/** 
* @private 
*/
var removeElement = function(id) {
	var Node = document.getElementById(id);
	Node.parentNode.removeChild(Node);
}

/** 
* @private 
*/
var getDocHeight = function() {
	var db = document.body;
	var ddE = document.documentElement;
    return Math.max(
        db.scrollHeight, db.offsetHeight, db.clientHeight, 
        ddE.scrollHeight, ddE.offsetHeight, ddE.clientHeight
    );
}
/** 
* @public 
*/
if ( typeof($) == 'undefined' ) {
  $ = function (id) {
    return document.getElementById(id);
  }
}

Add Timer To Display Panel On Page First Page Load Only

Similar Tutorials

View Content

Hi All,
Im new to this forum...need some of your help and advice.

I have a js code like this :

<script type="text/javascript">

</script>

what it does is that it hide and show a panel by slidint it to the left.

But my client want that on page load the panel opens automatically for about 2-3 seconds just to let users know that its here. So ive written this :

<script type="text/javascript">

</script>

But when the panel finished showing the button to open it again doesn't work...any help please..really urgent.
thks

//Sam

Load New Page Content At Bottom Of Page

Similar Tutorials

View Content

Hello

Basically I have found and adapted the code:

Code:

alreadyloading = false;
nextpage = 2;
 
$(window).scroll(function() {
    if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
        if (alreadyloading == false) {
            var url = "page"+nextpage+".html";
            alreadyloading = true;
            $.post(url, function(data) {
                $('#projectscontainer').children().last().after(data);
                alreadyloading = false;
                nextpage++;
            });
        }
    }
});

I want when the user scrolls to the bottom of the page for content in a new page to load under the div "#projectscontainer". So in the new page 'Page2.html" I have put 5 divs going down with content in...

I want the new content to appear below "#projectscontainer'"

Why won't this work? Anyone know?

Thanks

Find In Page Searching Another Html Page?

Similar Tutorials

View Content

Hi there,

Im a total newbie and learning html and javascript as I go along, so any help you can give is greatly appreciated!

It is possible to perform a find in page search that looks at a specific link, opens the page in a new window and finds the text within that document??

Basically I regularly use an html page in work that has a list of people and their telephone numbers.

I want to be able to type in a searchbox on my main page and it open the target page and find the name I am looking for?

Is this possible or can you only Find In Page on the same page or another frame?

Tearing my hair out........

Thanks
Glen

Open Page To A Specific Slide From Another Page

Similar Tutorials

View Content

I have a slideshow on the "Projects" page. The javascript is external.
There's a link on the homepage that when clicked needs to open the Projects page with the appropriate slide loaded. How do I do that?

Here's the code I have for the slideshow:

Code:

var prev = document.getElementById('prev');
var next = document.getElementById('next');
var current = 0;

function prevPic() {
	clearInterval(interval);

	if(current > 0) {
		current--;
		
		if(current == 0) {
			document.getElementById('next').src = "images/right_arrow.jpg";
			document.getElementById('prev').src = "images/left_arrow_off.jpg";
		} else {
			document.getElementById('next').src = "images/right_arrow.jpg";
			document.getElementById('prev').src = "images/left_arrow.jpg";			
		}
		update();
	}		
}

function nextPic() {
	clearInterval(interval);

	if(current <  slides.length - 1) {
		current++;
		
		if(current == slides.length - 1) {
			document.getElementById('next').src = "images/right_arrow_off.jpg";
			document.getElementById('prev').src = "images/left_arrow.jpg";
		} else {
			document.getElementById('next').src = "images/right_arrow.jpg";
			document.getElementById('prev').src = "images/left_arrow.jpg";			
		}
		update();
	}
}

function update() {
	var pic = slides[current];
	document.getElementById('project_title').innerHTML = pic.title;
	document.getElementById('project_image').src = "images/slides/" + pic.image;
	document.getElementById('project_location').innerHTML = "<span>Location:</span> " + pic.location;
	document.getElementById('project_operation').innerHTML = "<span>Commercial Operation:</span> " + pic.commercial_operation;
	document.getElementById('counter').innerHTML = (current + 1) + " of " + slides.length;
	
	if(pic.link) {
		document.getElementById('project_link').style.display = "block";
		document.getElementById('project_href').href = pic.link;
	} else {
		document.getElementById('project_link').style.display = "none";		
	}
}

//preload slides
var images = [];

for(i in slides) {
	var img = new Image();
	img.src = "images/slides/" + slides[i].image;
	images.push(img);
}

How To Make A Page Load Inside Another Page?

Similar Tutorials

View Content

On this website... http://livedemo00.template-help.com/...21/index.html# When you click on the Navigation Bar the website pages load inside that page?

How exactly would i go around doing this?

Thankyou

Post An Anchor Within A Page To Move Down The Page?

Similar Tutorials

View Content

hi,

I have a large list of UK towns, see he http://www.mypubspace.com/mobile/index.php#towns

I would like to add an a-z link so that when a user clicks on say 'W'
they are then presented with the towns that begin with 'W'

the problem is, is that I have to keep #towns in the URL as it's a web application
Can anyone help?

thanks

Redirect Page If Page Inside Iframe

Similar Tutorials

View Content

Hi guys,

I need to redirect a page to another url when it detects that the page is opened inside an iframe.

I need help with this
<script >
if(location.href != top.location.href){ window.location = 'http://myurl.com' }
</script>

- check my attachment index.zip

Thx.

Auto Load Javascript File In A Php Page & If Poss Auto Click Botton On External Page.

Similar Tutorials

View Content

Hello,

I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible.

I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading:

Code:

<td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td>

The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script.

The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue..

http://watch-movies-online.anyfilman...-Movie-17.html

To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com.

If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required.

Please feel free to ask any questions, i'll be happy to answer.

Thanks in advance.

Best Regards,
Jonathan.

Passing Javascript Value From Page To Page

Similar Tutorials

View Content

hello guys
the idea is to make "offline" bill of lading

i used to do php thing and well this time i only need to kinda make bill of lading generator

so i want to pass value from page 1 to page 2 and to page . all offline without web server interaction

i was never fluent in javascript and i wanted to get a quick start from you guys how do i pass the form ( javascript variable from 1 page to another page )

i am googling this as well right now and hoping answer from codingforums

thanks

Form On Page A Changes Iframe Src On Page B

Similar Tutorials

View Content

Hi All,
I am not sure if this is the right place for this question. I'm fairly certain that my problem can be resolved with some JS, but I'm not 100% so please forgive me if this thread does not belong here. Anyhoo, here goes....

I have a site i'm building in Joomla! 1.5. I've got a form on page A and an iframe on page B. The iframe src is an asp page that returns real estate listing details based on values passed to the asp page in the URL. for example:

http://www.hostOfAspPage.com/aspPage...&minprice=500k

I figured out how to create a form on page B that changes the src of the iframe by setting the target to the name of the iframe. so that works fine. but now, i want to put a similar form on the home page.

Please see the following diagram...hopefully it explains what i'm trying to do.

http://webwraps.com/changeiframesrc.jpg

so here is my question... Is it possible to use JS (or maybe php?) to create a URL based on the values in the form on page A and then take the visitor to page B while changing the src of the iframe on page B to be the newly created URL? if so, how?

existing iframe code:
<iframe name="resultsiframe" src="URL-ONE"></iframe>

desired new iframe code (after form on page A is submitted):
<iframe name="resultsiframe" src="URL-TWO"></iframe>

Thank you very much for your time.