|
JavaScript - Text On Flip Box
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>
Similar TutorialsHi 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>
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 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. 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>
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?
As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! Hi, I have a form with 9 text fields and a text area. What I want to do is replace the text in the text area depending on how many fields contain text. For example my text boxes are named 1 to 9, if the user enters text in the first five boxes I want the text area to auto fill with 'you have selected boxes 1 to 5' if the user selects all nine it will say 'you have selected 1 to 9', therefore, the user must complete the text boxes in order. I have it working with an onchange event but i have a button on the form to also auto fill the text boxes and it does not work if this is clicked. Any help would be appreciated! Hi all, Thanks for reading. I'm having an issue trying to accomplish the following - I have a text field (field1) already displayed on the HTML page. However, there's a link where you can add additional text fields to the page as well. When the link is clicked, the second text field is added successfully (field2), and when the link is clicked again, the third text field (field3) is added successfully. However, the third field does not add itself to the page, and the text for anything greater than a third field also isn't displayed after. This obviously means that my "fields" variable is not working right, so I'm wondering, would anyone be able to assist me to help me get that variable processing correctly? Code: <script language="javascript">
fields = 1;
function addMore() {
if (fields = 1) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field2' size='25' /> <span>Field 2.</span>";
fields = 2;
} else if (fields = 2) {
document.getElementById('addedMore').innerHTML = "<input type='text' name='field3' size='25' /> <span>Field 3.</span>";
fields = 3;
} else {
document.getElementById('addedMore').innerHTML = "Only 3 fields are allowed.";
document.form.add.disabled=true;
}
}
</script>
Here is the code in my HTML - Code: <input type="text" name="field1" size="25" /> <span>Field 1.</span> <div id="addedMore"></div> <p class="addMore"><form name="add"><a onclick="addMore()">Add another field.</a></form></p> Thank you very much. Hello. I have a textarea where user can select a text then copy to clipboard (using EditArea script for highlighting) I need append additional information to the selected text so it won't be visible in the textarea, but only appear after copied to clipboard. For example: Code: text line one text line two text line three user selected word "two", hit CTRL+C to copy into clipboard (or used browser's context menu), but in clipboard it should be saved as: "selected word 'two'" What would be the approach? Thank you. Hi, I have a form setup so that selecting a radio button opens a specific text field. The problem is if the user starts to enter information, then switches to a different radio button (perhaps they chose the wrong radio to start), the text they already started to enter on the previous textfield doesn't get cleared. This will be a problem later when inserting to sql. Here is a summary of the code: Code: <head>
<script type="text/javascript">
function doClick(objRad){
if (objRad.value=="0"){
document.getElementById("textbox").style.display='block';
}
else{
document.getElementById("textbox").style.display='none';
}
if (objRad.value=="1"){
document.getElementById("textbox1").style.display='block';
}
else{
document.getElementById("textbox1").style.display='none';
}
if (objRad.value=="2"){
document.getElementById("textbox2").style.display='block';
}
else{
document.getElementById("textbox2").style.display='none';
}
}
</script>
</head>
<body>
<form action="insert.php" method="post">
<p>Please choose the business type:
<input type="radio" name="rad" value="0" onclick="doClick(this)">
Sole Proprietorship
<input type="radio" name="rad" value="1" onclick="doClick(this)">
Partnership
<input type="radio" name="rad" value="2" onclick="doClick(this)">
Corporation
<div id="textbox" style="display:none">
<input type="text" name="txt">
This is my sole proprietorship info.</div>
<div id="textbox1" style="display:none">
<input type="text" name="txt">
This is my partnership info.</div>
<div id="textbox2" style="display:none">
<input type="text" name="txt">This is my corporation info.
</div>
</form>
</body>
Any help is appreciated, Thanks in advance! Hi. I have developed a form all working fine but am struggling on the following. I need a checkbox for an item, when the checkbox is true the user can enter text in a text box, only if the checkbox is ticked. I have numerous items I need for this. Hope someone can help. Thanks Hi, Here's a sample form: Code: <form action="#" method="post"> Name:<br /> <input type="text" name="name" value="your name" /><br /> E-mail:<br /> <input type="text" name="mail" value="your email" /><br /> <input type="submit" value="Send"> </form> When you tab to a text input, the value gets highlighted. How can it be disabled? Any help is appreciated! Mike Hi, I'm hoping this will be an easy one for you experts out there. I am working on a convention registration form. What I'm trying to do is have the text "50.00" pop into the COST field when any text (even if it's only one character) is entered into the NAME field. If the text in the NAME field is deleted, the "50.00" should also be deleted. Does anyone have a script that does this? Thanks! Hello there, this is my first post on this forum. I have learned a good bit of PHP and have implemented it for use in my work as a math tutor. My kids are telling me, however, that it is too inconvenient to hit tab or click on the next text box and would prefer to use the old style pencil and paper. I thought of a good idea: Javascript would be able to automatically focus the curser on the next text box if some condition was met. For example: 6+7. If the textbox reads 13, it will focus on the next text box. Otherwise, nothing happens. This kills three birds with one stone; the user will know if they got the question right or wrong and it will move automatically if they got it correct. The problem is I lack any real JavaScript wisdom. I would guess this would be quite simple. The closest thing I have found upon searching was this from the user requestcode, but this has to do with once the user has typed in 4 characters it moves automatically. Code: <SCRIPT LANGUAGE="JavaScript">
function nextbox(fldobj,nbox)
{
if(fldobj.value.length>3)
{document.forms[0].elements[nbox].focus()}
}
</SCRIPT>
</head>
<body onLoad="document.myform.txt1.focus()">
<CENTER>
<FORM NAME="myform">
<INPUT TYPE="text" NAME="txt1" SIZE="4" MAXLENGTH="4" onKeyUp="nextbox(this,1)">
Thank you for the help. im clueless when it comes to javascript, but this is what im trying to find: i have a page that has multiple text areas, i also have 4 links that when clicked i want to add some predefined text into the active text area the one with the text cursor in? The Hyperlinks: Code: <a href="#sc">Shift Changed</a> | <a href="#ol">On Leave</a> | <a href="#ot">OverTime</a> | <a href="#ss">ShiftSwap</a> The textareas: PHP Code: <td><textarea name=details$i rows=4 align=absmiddle cols=16 value="$details[$i]\">$details[$i]</textarea></td> as you can see the textareas are created on the fly based on a php array. would anyone be willing to put some code together for this? or even give me the basics on how i can get the active textarea's name so i can pass that to a script that inserts into a given field? I have a form with two text input boxes. I want to limit the text typed into the boxes as follows: 1. Either box can have the number 2 typed in, but the other box must remain empty OR 2. Each box can have the number 1 typed into Is this possible with JS and, if so, how do I do it?? hey im new to javascript and im working in this function , i can't get it work here is my code PHP Code: <SCRIPT LANGUAGE="JavaScript"> function text(form1) { var j = document.form1.diary.value; j = j.italics(); document.form1.diary.value = j ; } </SCRIPT> whats the problem ? Hello everyone. I was wondering if anyone could help me come up with a script for fading text in and out then changing the text to something different when it fades back in again. I want to overlay a series of quotes on my website across the top and have them display for about 15 seconds then fade out to a new quote and have it cycle through them all indefinitely. I am pretty new to javascript and not much more experienced in html in general, so please be as thorough as possible. I'm a true noob Thanks!
I need to replace the captions with simple text for download speed purposes. This is controlled by a piece of Javascript written for me. I need to change the caption image for a text one. The site is here Frank alias effpeetee. Hi again For instance I want to display some announcements from an external text file on a predefined box, like lets say 140 wide and height scalable according to text. The texts would be some announcements from me, a few words. I want the text justified and with previous / next link, if possible. And when they navigate to another page, they will get a random message in that box. There are news tickers on the net, but I just want something simple like this, no scrolling, fading, etc.. Has anyone a clue how I can accomplish that? Thanks. |
|||||||