JavaScript - Html5 / Ie9 Local Storage

is "localStorage" a native variable to javascript?
On lin 36 & 37 is there anything else involved in getting that local storage to store? Those lines are local storage right?
Is it really that easy?
I was just reading this HUGE post and immediately stressed me out. I'm used to working off small examples and diving in bit by bit. It was the first article on google so I trusted it to be the most appropriate for introductions. (which means not reading more than 500 words before I get some sample code)



In addition, can Google Chrome & FireFox extensions change page elements? The reason I think it can do this is because google chrome says this
Which (to me) implies that the extension has access to page data.
If that is the case. How are localStorage variables not mixing? How can I access that page data? I don't care about browser history, I just want to change page elements. Is this possible?


If this is the case. Is there a way I can have the extension close itself or not open at all? Sometimes I just want the "extension" to provide a simple function. That's all. Thanks!


I had Silverbird and the tutorialzine example extension. They were both different size. Odd thing is that I never saw a size specification in the style.css in the tutorialzine example. How can I specify the size of the popup extension?

Please help,



I have built a HTML5 ap with local database using phonegap, I am now testing in xcode...



my ap works fine in Web Kit browser but when I test on my iphone through xcode, I get the error message: There has been an error: no such table: ****

here is my code:

Code:

        <script type="text/javascript">
        
      var html5rocks = {};
      html5rocks.webdb = {};
      html5rocks.webdb.db = null;
      
      html5rocks.webdb.open = function() {
        var dbSize = 10 * 1024 * 1024; // 10MB
        html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
      }
      
      html5rocks.webdb.createTable = function() {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("CREATE TABLE IF NOT EXISTS bmical(ID INTEGER PRIMARY KEY ASC, height1 TEXT, weight1 TEXT, bmires TEXT, added_on DATETIME)", []);
          tx.executeSql("ALTER TABLE bmical ADD bmires INTEGER");
        });
      }
      
      html5rocks.webdb.addTodo = function(todoText) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          var weight1 = document.getElementById("weight1").value;
          
        var height2 = todoText / 100
  		var BMI = weight1  / (height2 * height2)
        
        var BMI = BMI;
		var bmires = BMI.toFixed(3);
          
          
          var addedOn = new Date();
          tx.executeSql("INSERT INTO bmical(height1, weight1, bmires, added_on) VALUES (?,?,?,?)",
              [todoText, weight1, bmires, addedOn],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
         });
      }
      
      html5rocks.webdb.onError = function(tx, e) {
        alert("There has been an error: " + e.message);
      }
      
      html5rocks.webdb.onSuccess = function(tx, r) {
        // re-render the data.
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      
      html5rocks.webdb.getAllTodoItems = function(renderFunc) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("SELECT * FROM bmical ORDER BY added_on ASC", [], renderFunc,
              html5rocks.webdb.onError);
        });
      }
      
      html5rocks.webdb.deleteTodo = function(id) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          tx.executeSql("DELETE FROM bmical WHERE ID=?", [id],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
          });
      }
      
      function loadTodoItems(tx, rs) {
        var rowOutput = "";
        var todoItems = document.getElementById("todoItems");
        for (var i=0; i < rs.rows.length; i++) {
          rowOutput += renderTodo(rs.rows.item(i));
        }
      
        todoItems.innerHTML = rowOutput;
      }
      
      
      
      function renderTodo(row) {
        return "<li>On: <span>" + row.added_on + "</span> Height: <span>" + row.height1 + "cm</span> Weight: <span>" + row.weight1 + "lbs</span> BMI: <b>" + row.bmires + "</b><a class='delete' href='javascript:void(0);'  onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a></li>";
      }
      
      function init() {
        html5rocks.webdb.open();
        html5rocks.webdb.createTable();
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      function addTodo() {
        var height1 = document.getElementById("height1");
        html5rocks.webdb.addTodo(height1.value);
        height1.value = "";
      }
    </script>

Hi,

Not sure how difficult this will be but im working on a javascript/HTML5 game, and thought it would be interesting to allow for people to add their score to a google map at their location.

I can get the google map and allow people to add their own markers but i dont no how i would store them, and then reload them when someone plays the game.

any ideas?

Thanks, Luke

I've been avoiding php and asp trying to do as much client-side as possible, as lightweight as possible, but don't know enough to know if I should go that route.

I want to have several js/jquery games, really simple stuff like flash cards, memory games, matching, etc

Currently when you do something correctly it adds 5 points like: points+=5; and if you get it wrong lose 3 points: points-=3;

At the end of the game it flashes a play again button which resets points and all the cards, and that's it.

So I was trying to think of ways to add a global variable that adds the latest score to it, and maybe gives you a random "prize" which would be another variable randomly selected from an array of "prizes", or better yet, "achievements"....between games....on the same domain. I'd like to eventually make something similar to a "crafting" system, where if you have 3 particular achievements you can convert them into some new achievement...I imagine just a function that checks if you have the 3 objects, then if so it adds some 4th object and removes the first 3.

I was avoiding server side databases because I was avoiding authentication/user accounts for the time being...I would probably eventually like to let people play games, and if they want to save their scores long term, register an account....but if they don't want to register an account, I'd like them to have the same functionality for that session, where they can play a few games from around the site while accumulating a global score and list of achievement variables.

I was messing around with jstorage, but am not sure if it will work for what I'm thinking....it only accepts strings, and I couldn't figure out how to write the variableName.toString() into the jstorage "value" of the key:value pair...it gives me the impression it's more for storing form data as a convenience to the user.

So is there a client side variable storage that's simple, lightweight, and works with mobile? Or a way to write .toString() value of objects into jstorage?

Or should I just break down and start investigating my server side options? Is there some middle ground where stuff can be done client side, then give the option to register to save that information long term?

edit::I'm thinking of my 3 year old nieces ipad games, they're simple drag drop, highlight shapes, pattern association, etc but I want it so each time you play it remembers where you left off...basically a cookie would have been cool if it were bigger and not sent every packet....so kinda a "save-state" and "load-state" functionality..

edit2::sqlite seems like a legitimate option but then reading through it, it gets convoluted how to implement on my bluehost account...

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'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

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 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.

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"> &larr;</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"> &rarr;</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, I worked on this website : http://www.kesslercareers.com/index.html and cannot find out why it does not work in IE while it works in other browsers. The small video does not play while the sound does. As far as I can see it works fine in FF and Chrome. Anybody any idea?

Thanks

Purmar

I have a code that will randomly select a div from a list and inside of that div i want there to be a sound file. How would I use html5 and javascript to make it so that when a user clicks a button it would play whatever sound was associated with that button?


Code:

<div id="randomdiv1" class="article_example_div">
<embed src="Black Hawk Down - Music Video - Riot.mp3" width=25 height=25 autostart=false repeat=true loop=true></embed>
</div>

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 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

Hey everyone

Just throwing this out there, is it possible to have an image displayed within a canvas moves around relative to the mouse's position?

For example, say I had a square canvas in the middle of the screen, and I had a small circle on that, could I have the circle position itself within the square canvas relative to the mouses position on the screen. So if my mouse was in the bottom left of the screen, the circle would be bottom left of the canvas?

Thanks

YD