|
JavaScript - Html5 Progress Bar Update Function
I want to update the variables in the progress bar HTML5 has to offer.
Here is the function I have so far (It has been modified and shortened for the means of this post): Code: function calcProgress()
{
var num1 = Number(document.form.num1.value);
var num2 = Number(document.form.num2.value);
Number(document.form.progress.value) = num1
Number(document.form.progress.max) = num2;
}
This is the form: Code: <form name="form"> <input name="num1" onChange="calcProgress()" type="text" value="0" /> / <input name="num2" type="text" value="0" onChange="calcProgress()" size="1"> <br> <progress name="progress" id="progress" min="0" value="0" max=""></progress> </form> Similar TutorialsHi Guys, What i'm attempting to do is update a mysql database through a javascript function, so when i click on <a href='onclick="return myfunction();"'></a> PHP Code: function myfunction(affURL) { if (confirm('You will now be redirected to the purchase page, continue?')) { // Need a way to log things, update mysql with vars passed through var l = screen.availWidth / 2 - 450; var t = screen.availHeight / 2 - 320; var win = window.open(affURL, 'payPopupMain', 'width=900,height=650,left='+l+',top='+t+',scrollbars=1'); } else { // Send them back to the payment.php page window.location('payment.php'); } } The code above opens up a browser for the user, but i also want to update mysql without the user seeing any of it, so all they see if the browser popup, and behind the scenes the script updates mysql with a few variables any help on what i would need to do would be appeciated. thanks guys Graham Hi everyone. I've managed to create everything to work correctly using javascript on my site, except I'm trying to find a way so that a certain function is called on non-stop. Or at least every time the mouse moves. The site is http://www.goformat.com/ What I'm trying to do is make it so that the words, characters, and lines counter at the top of the text area updates on its own. Right now, it updates onkeyup. However, when you click a button, to say, delete all the letters, they don't update unless you do another onkeyup action. The function that updates the words, characters, and lines is "countall()". so i tried putting a onfocus="countall()" and also a onmouseout="countall()" with one of the buttons, But none of it is working. Is there some kind of javascript code that sets the page to keep performing a function after a set amount of time? Or at least one that will work with the buttons so that the "countall()" function is called on after pushing a button? Thanks you very much everyone for the help, any suggestions are very much appreciated. Hello. This is very long and I think if you look at code it might be quicker. If not, then please read along. Here is the code and the problem: Code: function addtwoboxes
{
get values from two text boxes, one about width, the other one about height,
and store each in a variable; a=width; b=height
checkifwidthproblem(); //to see if the boxes are empty and with numbers
checkifheightproblem(); //to see if the boxes are empty and with numbers
if (width_not_ok==false && height_not_ok==false)
{
Go Ahead and do calculations and other things
}
function checkifwidthproblem()
{
width_not_ok=false;
if problems with the data in the textbox (the a variable is being checked).
{
bring up an alert box
width_not_ok=true;
}
} //end of checkifwidthproblem function
function checkifheightproblem()
{
height_not_ok=false;
if problems with the data in the textbox (the b variable is being checked)
{
bring up an alert box
height_not_ok=true;
}
} //end of checkifheightproblem function
I would like this function to be setup the same way as the addtwoboxes function, but right
now I am only calling up the checkifwidthproblem function, and it doesn't execute and the
form gets submitted. The fillInvoiceNumber function can be called because if I place only
an alert of Hello in it, it comes up, and then the form gets submitted. If it do get this
working, I would also need to be sure that it is seeing the results of the variables
width_not_ok and height_not_ok, just as they are for the addtwoboxes function.
function fillInvoiceNumber()
checkifwidthproblem(); //to see if the boxes are empty and with numbers
checkifheightproblem(); //to see if the boxes are empty and with numbers
if (width_not_ok==false && height_not_ok==false)
{
Go Ahead and do calculations and other things
]
This is going to be a bit long, but it's the only way I can be sure of that I have covered everything, so please bear with me and help me out. Thanks. Please Provide Solution Using my way First, Then suggest Better Ways: O.k. Before I post the problem, I know, since I took program classes years ago and since I have done a little research here and here, that there are better, more efficient, and tidier ways to do what I am doing, but I have started already this way and would like to continue this way. I will ask what's the better way to do this in another thread, unless 1) you feel like explaining the bettery way and 2) it's not too long or complicated, but AFTER you have provided me with a solution to doing it my way. The Setup / What My Form is Supposed to Do: I have a form with two buttons. The user has to enter some information into the form and then click the button to have some calculations done and for other text fields to automatically filled in. After that, the user has to click submit. A note about the submit button: The type is image and the name says submit. The form line has the following: <form target="abcco" action="https://www.domainname.com" method="post" id="Form" onsubmit="fillInvoiceNumber()"> I will explain what the fillInvoiceNumber() is doing later on. Data Validation / Verification: 1) I want to ensure that when the user clicks the first button, let's call it GetPrices to make things easier, that it checks to see if data is enterted into the textboxes and that it is the right kind of data. 2) After the GetPrices button is clicked, the user can then enter nonsense into the textboxes and click submit or, never click the GetPrices button, the first button to begin with, and so junk will be submitted. This is what I have going on: For the GetPrices button, I have the following: onclick="addtwoboxes() (the names I have aren't fully descriptive of all that's going on, as I do have more things happening, but for now I have left them like that). in the addtwoboxes function I have it calling up two functions, each for a textbox in which the user has to enter width in one and height in another, and if the textboxes are not empty and have the correct data in them, then the calcuations for the addtwoboxes take place; if not, nothing happens (regarding the calculations; an alert box comes up for either or both of the functions in the addtwoboxes function if something is wrong). So, the two functions that are called in the addtwoboxes() function are checkifwidthproblem() checkifheighthproblem() which I am calling just like that but with a semicolon to the end of each one. This next now is one of the areas where I do believe this can be combined, since only one value is changing, but I will leave it like this for now. The checkifwidthproblem() function starts of with a variable:width_not_ok=false; (after doing some research, I see that this is often set the opposite way or not set at all) if something is wrong with the data entered into the width textbox, an alert box with a message comes up, and I then have the following variable: width_not_ok=false; For the checkifheighthproblem(), it's basically the same as the width problem, except, with it's own set of variables. I had the same ones as the width one, but if things were not ok with the width textbox, but o.k. with the height textbox, the calculations were taking place. So, because of this I used new variables in the height function and had an if statement check both variables for false. So, the checkifheighthproblem() starts of with the variable: height_not_ok=false and if there is a problem with the data entered into the height textbox, an alert box comes up and the variable height_not_ok=true is set. When the user presses the GetPrices button, this function works excellently. Everything goes as it should. The problem is when the form is being submitted. I would like the textboxes to be rechecked. So, right now I have a function called fillInvoiceNumber() in which it is joining two strings together after getting their values from a drop down menu. This has to be done at the time of submission only for the page that's processing the results to have them interpreted the way I want it to. Prior to joining those strings, I would like it check and see if everything is o.k. with the two textboxes by calling the two functions of that check height and width and if they are not, for the alert boxes to come up, for the joining of the strings to not take place, and for the form to not be submitted. However, the fillInvoiceNumber() function is not executing either function at all. If it does work, I would also need to be sure that it is seeing the results of the variables width_not_ok and height_not_ok. Hello, can this upload progress windowsbar be made to close or stop at 100%? In the upload page the javascript code: Code: <script language="JavaScript">
function input(ok)
{
var M1=ok.upload_author.value;
if (M1=="") {
alert("Author is empty!");
return false;
}
M1=ok.upload_title.value;
if (M1=="") {
//alert("File Description is empty!");
//return false;
}
if (ok.UploadedFile.value=="") {
alert("File is empty!");
return false;
}
var sCheckType="%checktype";
if(sCheckType=="1")
{
M1=ok.UploadedFile.value.toLowerCase();
var pos=M1.lastIndexOf('.',M1.length);
var sExt;
if(pos>-1)
sExt=M1.substr(pos+1);
var sType="%filetype";
pos=sType.indexOf(sExt);
if(pos>-1)
{
alert("This type of file cannot be uploaded!");
return false;
}
}
ok.uploadid.value=Math.round(Math.random()*100000000);
return true;
}
function onstopupload() {
if(document.post.uploadid.value=="") return;
window.("uploadstop.ghp?uploadid="+document.post.uploadid.value+"&vfolder="+document.tempform.vfoldername.value) ;
}
function onshowprogress() {
if(document.post.uploadid.value=="") return;
window("showprogress.ghp?uploadid="+document.post.uploadid.value+"&vfolder="+document.tempform.vfoldername.value) ;
}
</script>
Then the "Show progress" button which on clik opens in a new window. Code: <input name="Upload" type="submit" class=button value="Upload">
</font>
<input name="stopupload" type="button" class=button id="stopupload" value="Stop" onClick="onstopupload()">
<input name="showprogress" type="button" class=button id="showprogress" value="Show upload progress" onClick="onshowprogress()">
And here;s the code from the Progress window. Code: <strong>Incarcare %filename...
<br>
%progress%
<br>
<table width="50%" border=1 align="center" cellpadding=0 cellspacing=0>
<tr>
<td bgcolor="#FF0000" width="%used%" height=15 style="border:0"> </td>
<td bgcolor=white width="%left%" height=15 style="border:0"> </td>
</tr>
</table>
<br>
<a href="showprogress.ghp?uploadid=%uploadid&vfolder=%vfolder">Actualizeaza</a>
<a href="uploadstop.ghp?uploadid=%uploadid&vfolder=%vfolder">Stop</a>
Plese if anyone knows how to resolve this to pop-up in a window and when it reachis 100% to stop redirecting, or to close it self or by user. Thanks in advance. Cira Marius Hey guys! I have a progress bar written in javascript. Its pretty simple, consisting of a couple divs, where the inside one grows with the given percentage. Anyways, the problem we are having is that sometimes the percentage that is dynamically calculated is over 100% (we are using it as an job completion progress bar, so if more hours are spent than estimated the bar will be over 100%. I guess thats fine, except the inside div goes right off the container and keeps growing. Can we make the inside div max out at 100% somehow? Hoping someone can help me out with this, im not sure how this can be done! I should add that the original script with example I found he alpinemeadow.com/stitchery/weblog/HTML-morsels.html Here is the original code: Code: <script language="javascript">
function drawPercentBar(width, percent, color, background)
{var pixels = width * (percent / 100);
if (!background) { background = "none"; }
document.write("<div style=\"position: relative; line-height: 1em; background-color: "
+ background + "; border: 1px solid #979797; width: "
+ width + "px\">");
document.write("<div style=\"height: 1.5em; width: " + pixels + "px; background-color: "
+ color + ";\"></div>");
document.write("<div style=\"position: absolute; text-align: center; padding-top: .25em; width: "
+ width + "px; top: 0; left: 0\">" + percent + "%</div>");
document.write("</div>"); }
</script>
Called for he Code: <script language="javascript">drawPercentBar(171, <%=totaltotal/EstHours*100%>, '#aadba2', '#F2F2F2'); </script> All, Say I have a four part process to add something to my website. I'd like to have a bar at the top of my page (if you need an example, something simliar to FedEx to show where you package is along the way) that will get updated upon each page move so the user knows how far along they are in the process and how much farther they have to go? Any type of tutorials or ideas (whether it's PHP and jQuery or any other combination) I'd greatly appreciate them. Thanks in advance for any guidance. Thanks. Hi! I use the :: Form field Progress Bar from DynamicDrive: Form field Progress Bar Now I trided to change the text when the textarea is full "Limit:100%" to "Your max. characters is reached" I trided it but with no luck. This is the main code.. Code: <script type="text/JavaScript">
function textCounter1(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = 137;
var charcnt = field.value.length;
// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}
else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Limiet: "+percentage+"%"
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}
function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
This is the place where the text is set. Code: ((fieldWidth*percentage)/100)+"px"; document.getElementById(counter).innerHTML="Limiet: "+percentage+"%" Help would be highly appreciated ! greetings Jardin Hi, I have searched the web for many tools to upload a file and shows it progress, but they all seem to use, flash, codebehindfiles, php etc. I was looking for one that used pure Javascript was wondering if anyone could help? Thanks Marcel. I'm in the process of building a blog that will be using some pretty neat jQuery effects to spotlight its content. One thing I've been looking at doing is trying to lessen the amount of different pages the visitor has to load by using things like sliders and accordions to hide and display content. Overall I'm not concerned that the pages will take more than 3-4 seconds on any decent connection to load, however I was thinking about visitors who are potentially running slower connections. To avoid losing those slower-connected users I've been looking for a way to display a page loader, much like what you see on flash websites, except completely without flash. I was hoping there might be some AJAX algorithm or jQuery function I wasn't aware of that might help me accomplish this. If anyone could point me in the direction of a tutorial, I'd really appreciate it! Thanks in advance. Hello, I have a tool in my app where a user can perform a search, and it will use AJAX to deliver the results into a small box, in JSON format. When a user submits a search, a spinning gif will appear as the query is running. A javascript function is then meant to remove the gif and display the results once ready. In IE, however, this fails to happen, and the gif is locked in place, preventing the results from being displayed. I have no experience with javascript and am a bit unsure what to do. Tried to use IE's script debugger, but got totally confused. The script is much longer than this, but I think this is the problematic area: Code: 'beforeSend': function(r) {
ul.find('li').remove();
ul.html('<li class="center"><img src="/images/ajax-loader.gif" /></li>');
},
'success': function(r) {
ul.find('li').remove();
h = ''
$(r).each(function(k,r0){
h = h + '<li data-id="'+r0.value+'" data-icon_url="'+r0.icon_url+'">'+r0.label+'</li>';
});
For some reason, in IE only, it will clear the contents and display the gif upon submitting a search. But then it won't clear the gif and display the results. Any ideas? I would be so appreciative. Thank you. Greg I want to know how to move a character on the path when you click the left or right arrow, but also when the left arrow is clicked it will switch between 4 images, making it look as though the characters is actually walking left arrow = moves character to left on the path(walks to the left) right arrow = moves character to right on the path(walks to the right) up arrow = character jumps This is my original code, it draws a path something like this \____ ........................................................................................\ Code: function drawMap(){
// get the canvas element using the DOM
var canvas = document.getElementById('map');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Stroked Path
ctx.beginPath();
ctx.moveTo(0,70);
ctx.lineTo(45,115);
ctx.lineTo(250,115);
ctx.lineTo(300,135);
ctx.stroke();
ctx.closePath();
} else {
alert('Your broswer does not support Canvas, We recommend getting the latest version of google chrome for the best quality');
}
}
Can anyone point me in the right direction? I want to have an example on web storage. I have an index.html page. On this page, there is a button which will go to another page, that is page1.html. On this page now, there is another button which will go to page2.html if clicked. Index.html > page1.html > page2.html Suppose if a user has already visited page2.html on the first time, how to make him/her goes directly on page2.html after clicking the button on index.html? The user must not again go to page1.html to get page2.html because he/she has already done that. I want to know how to store page sessions with HTML5 so that the user gets on his/her last visited page when he/she clicks the button. Thank. I'm keen to know what you guys think of this. In order to have HTML5 semantics and support for older browsers without Javascript enable I've written a little script that changes classes into node. For example <div class="nav"> would become <nav class="nav"> Code: //Adapt page to HTML5
function changeNodeName(element, newNodeName) {
var oldNode = element,
newNode = document.createElement(newNodeName),
node,
nextNode;
node = oldNode.firstChild;
while (node) {
nextNode = node.nextSibling;
newNode.appendChild(node);
node = nextNode;
}
for (var i = 0; i < oldNode.attributes.length; i++) {
newNode.setAttribute(oldNode.attributes[i].name, oldNode.attributes[i].value);
}
oldNode.parentNode.replaceChild(newNode, oldNode);
}
try {
var theBody = document.getElementsByTagName("body")[0];
var classNames = ["article", "aside", "command", "details", "summary", "figure", "figcaption", "footer", "header", "mark", "meter", "nav", "progress", "ruby", "rt", "rp", "section", "time", "wbr"];
for (var i = 0; i < classNames.length; i++) {
htmlFourElements = document.getElementsByClassName(classNames[i], theBody);
for (var ii = 0; ii < htmlFourElements.length; ii++) {
changeNodeName(htmlFourElements[ii], classNames[i]);
}
}
} catch(e) {
console.error(e.message);
}
Let me know what you think I am new to javascript (I started learning it today) so please explain it for newbies. I am trying to get the amount of video (in seconds) buffered already by the client and the whole duration of the video. Then, I divide them to get the precentage which was buffered so far. I have no problem storing the durating using: Code: var duration = document.getElementById('vid').duration
- returns "12.6" (seconds) I am struggling with getting the buffered time. I tried: Code: var buffered = document.getElementById('vid').buffered
This one returns "[object TimeRanges]". From what I understood this is some kind of an object (Like an array?). I tried returning "buffered.length" and I get "1" back. Please explain how I can do this. thanks I run Windows 7 and IE9, and I believe IE9 supports HTML5 Local Storage. But when I run this offline (locally) in IE9 Code: <script type="text/javascript">
function testSupport() {
if (localStorage) {return "Local Storage: Supported"}
else {
return "Local Storage: NOT supported";
}
}
alert ( testSupport() );
</script>
I get "LocalStorage: NOT supported". Chrome returns "Local Storage: Supported" My DOCTYPE is <!DOCTYPE html> Other tests also fail in IE. Example: Code: localStorage.setItem("name", "Hello World!");
alert(localStorage.getItem("name"));
Above works in Chrome. Any advice, please? Have I not configured IE9 properly? Hello, I am coding a slider for my portfolio which has divs that slide when you click either the arrow keys or the numbers below the slider's frame. I just can't figure out how to change the javascript/css file so that the current slide number, (the little numbers below the image), becomes a different color when you actively view it, so that it indicates to users number they're currently on. Thanks for help! Here's a draft of what it looks like so far in the front end with my grids still in place: HTML file: Code: <div id="slider" class="span-24 last">
<div id="slide2Left"> ←</div>
<div id="slideFrame">
<div id="slideBoard">
<!-- the slides -->
<div class="slidePoint">
Slide 1 Goes Here
</div>
<div class="slidePoint">
Slide 2 Goes Here
</div>
<div class="slidePoint">
Slide 3 Goes Here
</div>
<!-- end slideBoard -->
</div>
<div id="slideReference"></div>
<!-- end slideFrame -->
</div>
<div id="slide2Right" class="last"> →</div>
<!-- end slider section -->
</div>
Javascript code Code: // JavaScript Document
$(document).ready(function(){
var slideTime = 700;
var currentSlide = 1;
var totalSlides = $("#slideBoard > div").size();
var slideWidth = $('#slideFrame').css('width');
var slideAmount = parseInt(slideWidth);
function slideLeft(){
if(currentSlide > 1){
$("#slideBoard").animate({
left: ['+='+slideAmount, 'swing']
}, slideTime );
currentSlide += -1;
}
}
function slideRight(){
if(currentSlide < totalSlides){
$("#slideBoard").animate({
left: ['+=-'+slideAmount, 'swing']
}, slideTime );
currentSlide += 1;
}
}
function slideTo(slideNumber){
///*
slideNumber = parseInt(slideNumber);
slidePos = slideNumber -1;
var p1 = $('#slideBoard');
var position1 = p1.position();
var p2 = $('#slideBoard div:nth-child(' + slideNumber + ')');
//alert(p2.html());
var position2 = p2.position();
var slideFor = (-position1.left) - position2.left;
//alert('p1: '+ position1.left + ' p2: '+ position2.left + ' Sliding: '+slideFor);
$("#slideBoard").animate({
left: ['+='+slideFor, 'swing']
}, slideTime );
currentSlide = slideNumber;
//*/
}
$('#slide2Left').click(function(){
slideLeft();
});
$('#slide2Right').click(function(){
slideRight();
});
$(document).keydown(function(e){
if(e.keyCode == 37){
//alert( "left pressed" );
slideLeft();
return false;
}
if(e.keyCode == 39){
//alert( "rigt pressed" );
slideRight();
return false;
}
});
//# Slide Reference Tool
for(i = 1; i < (totalSlides+1); i++){
$('#slideReference').append('<div class="slideNumber">'+i+'</div>');
}
$('.slideNumber').click(function(){
slideTo($(this).html());
});
$(".slidePoint").touchwipe({
wipeLeft: function() { slideRight(); },
wipeRight: function() { slideLeft(); },
min_move_x: 20,
preventDefaultEvents: true
});
});
CSS Code Code: /* CSS Document */
#slider {
position: relative;
margin: 79px 0 50px 0;
height: 500px;
padding-bottom: 50px;
border-bottom: 1px solid #9B9B9B;
}
#slideFrame {
width:870px;
left: 40px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#test {
width:30px;
min-height:460px;
height:460px;
overflow:hidden;
position:relative;
border:#CCC solid 0px;
}
#slideBoard {
position:absolute;
top:0px;
left:0px;
width:3000px;
min-height:400px;
margin:0px;
padding:0px;
background: #ccc;
opacity: .3;
}
.slidePoint {
width:870px;
min-height:400px;
height:410px;
display:inline-block;
margin:0px;
padding:0xp;
float:left;
}
.slidePoint p {
padding:5px;
}
#slide2Left, #slide2Right{
position:absolute;
top: 200px;
bottom: 5px;
cursor:pointer;
width:20px;
height:20px;
color:#9B9B9B;
border:#9B9B9B solid 1px;
border-radius: 5px;
padding:3px;
text-align:center;
display: inline-block;
}
#slide2Right{
left: 920px;
}
#slideReference {
position:absolute;
width: 770px;
min-height:10px;
bottom:5px;
left:50px;
text-align:center;
}
.slideNumber {
border-radius: 2px;
background:#929292;
color:#ffffff;
cursor:pointer;
display:inline-block;
padding:3px;
margin:3px;
text-align:center;
min-height:15px;
min-width:15px;
}
Hi there! I found this code, in reply to someone's problem, on this forum. I have altered it to my own needs, as it's an excellent piece of code. However, I would like it to run under HTML5. I believe I need to add "canvas" code to do the same?? I have already changed the doctype! HTML heading etc., Can anyone help? Many, many thanks!! Code: <!doctype html>
<head>
<meta charset=UTF-8" />
<title>Crazy Rally - France</title>
<script type="text/javascript">
var frames = new Array();
//load frames into array
for(var i = 1; i < 417; i++){
frames[i] = new Image(480,320);
frames[i].src = "track" + i + ".png";
}
//playback
var currentFrameNumber = 1;
var fps = 30; // frames / second
const speed = 1000 / fps; // milliseconds
//var speed = 33;
function nextFrame( )
{
document.getElementById("display").src = frames[currentFrameNumber].src;
currentFrameNumber = ( currentFrameNumber + 1 ) % frames.length;
setTimeout( nextFrame, speed );
}
window.onload = nextFrame;
</script>
</head>
<body>
<img id="display" src="track1.png" width="480" height="320">
</body>
</html>
I followed a tutorial on Lynda for a simple HTML5 slideshow and altered it so that it doesn't auto play and has next and previous button controls. I can't quite figure out the previous button. Code: </script>
<script type="text/javascript">
var imagePaths = [
"images/Test-1.jpg",
"images/Test-2.jpg",
"images/Test-3.jpg",
"images/Test-4.jpg"
];
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 1;
window.onload = function () {
showCanvas = document.getElementById('showCanvas');
showCanvasCtx = showCanvas.getContext('2d');
img.setAttribute('width','480');
img.setAttribute('height','360');
}
function nextImage() {
img.setAttribute('src',imagePaths[currentImage++]);
img.onload = function() {
if (currentImage >= imagePaths.length)
currentImage = 0;
showCanvasCtx.drawImage(img,0,0,480,360);
}
}
function prevImage() {
img.setAttribute('src',imagePaths[currentImage--]);
img.onload = function() {
if (currentImage > imagePaths.length)
currentImage = 0;
showCanvasCtx.drawImage(img,0,0,480,360);
}
}
</script>
</head>
<body >
<br />
<div id="slideArea">
<div id="right"><input id="nxtBtn" value="Next" type="button" onclick="nextImage()"></div>
<div id="left"> <input id="bkBtn"value="Back" type="button" onclick="prevImage()"></div>
<div id="center">
<center>
<canvas id="showCanvas" width="480" height="360" >
Your browser does not support the canvas tag.
<br />
Please upgrade your browser
<br /><br />
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Firefox','','../../_images/Logo-FirefoxB.png',1)"><img src="../../_images/Logo-Firefox.png" name="Firefox" width="50" height="50" border="0"></a>
<a href="https://www.google.com/chrome" target="_blank" onmouseover="MM_swapImage('Chrome','','../../_images/Logo-ChromeB.png',1)" onmouseout="MM_swapImgRestore()"><img src="../../_images/Logo-Chrome.png" name="Chrome" width="50" height="50" border="0" id="Chrome" /></a>
<a href="http://www.apple.com/safari/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Safari','','../../_images/Logo-SafariB.png',1)"><img src="../../_images/Logo-Safari.png" name="Safari" width="50" height="50" border="0" id="Safari" /></a>
<a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('IE','','../../_images/Logo-IEB.png',1)"><img src="../../_images/Logo-IE.png" name="IE" width="50" height="50" border="0" id="IE" /></a>
<a href="http://www.opera.com/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Opera','','../../_images/Logo-OperaB.png',1)"><img src="../../_images/Logo-Opera.png" name="Opera" width="50" height="50" border="0" id="Opera" /></a>
</canvas>
</center>
This doesn't quite work. If you click on the back button it goes forward one slide then back Then when you click the next button you have to click it several times before it will go forward again. Any help would be greatly appreciated I found a tutorial to create the HTML5 flip book. I combined three Edge "projects" with the HTML5 flip book. http://www.schrene.web44.net/Easter-2012/Book-A.html I tried to adjust the z-index so that the butterfly would fly out of the book but nothing I tried worked.. Also I wanted the animations to start with each flip of the page... I tried but I don't know enough javaScript to figure it out.... So I created a "cheesy" work around... A very large div on the right side of the page that has the animations in a mouse out event. Here is the page flip js: Code:
(function() {
// Dimensions of the whole book
var BOOK_WIDTH = 880;
var BOOK_HEIGHT = 460;
// Dimensions of one page in the book
var PAGE_WIDTH = 428;
var PAGE_HEIGHT = 450;
// 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 = 30;
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, true );
document.addEventListener( "mousedown", mouseDownHandler, true );
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 ) {
// Make sure the mouse pointer is inside of the book
if (Math.abs(mouse.x) < PAGE_WIDTH) {
if (mouse.x < 0 && (page - 1) >= 0) {
// We are on the left side, drag the previous page
flips[page - 1].dragging = true;
selPage=page-1;
}
else if (mouse.x > 0 && (page + 1) < flips.length) {
// We are on the right side, drag the current page
flips[page].dragging = true;
selPage=page;
}
}
// Prevents the text selection
event.preventDefault();
}
function mouseUpHandler( event ) {
for( var i = 0; i < flips.length; i++ ) {
// If this flip was being dragged, animate to its destination
if( flips[i].dragging ) {
// Figure out which page we should navigate to
if( mouse.x < 0 ) {
flips[i].target = -1;
if (selPage == page) page = Math.min( page + 1, flips.length );
}
else {
flips[i].target = 1;
if (selPage != page ) page = Math.max( page - 1, 0 );
}
}
flips[i].dragging = false;
}
}
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 );
if (strength < 0.01) strength=0.01;
// 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 ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
var rightShadowWidth = ( PAGE_WIDTH ) * Math.max( Math.min( strength, 0.5 ), 0 );
var leftShadowWidth = ( PAGE_WIDTH ) * 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 = 30 * 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();
}
})();
Here is the js for activating the Edge animations: Code: <script>
function playAnim1(){
var comp = $.Edge.getComposition("page1");
var stage = comp.getStage();
stage.play("play1");
}
$(document).ready(function(){
setTimeout(playAnim1, 1000);
});
function playAnim2(){
var comp = $.Edge.getComposition("page2");
var stage = comp.getStage();
stage.play("play2");
}
$(document).ready(function(){
setTimeout(playAnim2, 1000);
});
function playAnim3(){
var comp = $.Edge.getComposition("page3");
var stage = comp.getStage();
stage.play("play3");
}
$(document).ready(function(){
setTimeout(playAnim3, 1000);
});
</script>
Not sure if the things I want to accomplish with this are even possible??? If anybody has any help or advice I would greatly appreciate it. |
|||||||