JavaScript - Html5&js-game-1 Large Js Into Separate Js Files?

Hey all,

So basically, what I effectively want is a dropdown menu, but without it dropping down.

Let me put it a different way, I have my top links, and a space underneath them. What I want is for if you move your mouse over one of the links a new set of links relative to that one will appear in the box below and will remain there until the mouse is moved over another main link.

Is this possible?

Thanks

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?

Hello. I am opening a new small window through javascript. Here is the code:
Code:

<script type="text/javascript"> 
function openwindow(id) {
var left = (screen.width/2)-350;
var top  = (screen.height/2)-240;
var mywindow = window.open(" map.asp ?location="+id,"mywindow","menubar=0,resizable=0,width=700,height=400,left="+left+",top="+top+"");}
</script>

But on the same page I have another link for a new window which is essentially the same code:
Code:

<script type="text/javascript"> 
function openwindow(id) {
var left = (screen.width/2)-350;
var top  = (screen.height/2)-240;
var mywindow = window.open(" pofull.asp ?poid="+id,"mywindow","menubar=0,resizable=0,width=700,height=400,left="+left+",top="+top+"");}
</script>

As you can see in the red text, one link should open map.asp and the other should open pofull.asp... but they BOTH open in pofull. So I have tried to change the function name for one of them but then it doesnt work at all.

I am quite confused here. I have tried everything to separate the two scripts but nothing has worked. Can someone help?

Hi, I'm fairly new to javascript & am trying to learn it using best methods. I have been using various books & some video tutorials, such as lynda.com. I've noticed when I do google searches for example tutorials, 9 times out 10, the javascript has been coded into the html file. As a newbie I find it takes a very long time to redo the coding into the separate .js file. And if the coding is relatively complex (and most of it appears that way to someone new to this) I can't get it too work using a separate file for the javascript. I wanted to ask anyone very familiar with this, their suggestions regarding good places for tutorials where the .js file is separated. Apparently there are advantages to having it separate and it's considered best practices from what I've come to understand. Also most of the results from google searches pulls up out-dated coding and/or tutorials that suggest you should already understand what is being referred too. I'm trying to avoid learning it the wrong way. I'm willing to put in the effort, however I don't want to pick up bad habits. Any help is very appreciated. If this was not as clear as I intended it to be, please ask any specifics and I'll try my best to answer.
-Todd

Hi

On my web page I have 3 seperate catorgories with 2 drop down lists in each, the first dropdown list in each catergory is for "county" here is a snippet of the code
Code:

function fillCategory(){ 

addOption(document.drop_list.Category, "bedfordshire", "Bedfordshire", "");
addOption(document.drop_list.Category, "berkshire", "Berkshire", "");
addOption(document.drop_list.Category, "buckinghamshire", "Buckinghamshire", "");
addOption(document.drop_list.Category, "cambridgeshire", "Cambridgeshire", "");

I wanted to know if it is possible to use "list.js" to populate all 3 county dropdown lists or would I need "list.js" "list1.js" etc etc

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

so, I can pass a value from a select list to another function which then decides which function to call, but I want to cut out the middleman, and make the values the function calls, and call them directly on the onchange... I imagine something like this:

Code:

<select id="select" onchange="this.value">
	<option selected value="function1()">Funtion 1</option>
        <option value="function2()">Function 2</option>            
	<option value="function3()">Function 3</option>
	</select>

is it possible?

Hi, I'm writing a page scraper in javascript which involves loading a page to scrape, detecting when the page has loaded successfully and then scraping the data. I can get the 'page loading detection' to work if I load the page in a sub-frame. But this is no good as some sites include frame-buster code which breaks my scraper and I cant get any of the framebuster-buster solutions to work. So instead I decided to look at loading the page in a separate tab. Does anyone know how to reliably detect when a page has finished loading in a tab please?
I am using Firefox only and I dont mind if the solution requires some extension or greasemonkey script (I have already added the configuration/commands to allow access to pages from different domains).

The code below shows an attempt. It sometimes detects when the initial page has loaded but when I press 'submit' it doesnt detect the second loading.
Thanks.
Code:

<html>
<head>
<script type="text/javascript">

    currentPageObj = window.open("http://www.bbc.co.uk", "currentPage");

    currentPageObj.addEventListener("load", function(){alert("loaded")}, false);

</script>
</head>
<body>

    <form action="http://www.example.com" rel="nofollow" target="currentPage">
         <input type="submit">
    </form>

</body>
</html>

Hello,

I am currently trying to create a simple form based web-page (uploaded here) that creates a query for a WMS (Web Map Service). Seeing as how I am still new to programming, I was hoping that you could help me .

The page consists of about 10 different forms, which are all put together in a (string) variable named "compiledQuery" in a function named "compileRequest" which is activated via a button. I would like to print out this variable on the page so that the users can see the query for themselves. After doing some research I came to the conclusion that the best way to do this would be via an iframe (I do not want to use a pop-up). The function I use to do this is:
Code:

function printRequest()
	{
		var query_frame = document.getElementById('frame_compiled');
		query_frame.document.write(compiledQuery);
	}

"frame_compiled" is the name of my iframe:
Code:

<iframe name="frame_compiled" width="400" height="125"> 
	</iframe>

I know that "compiledQuery" has been assigned a value (I used an alert with the value). Hence, I also know that the "prinRequest"-function works on principle... However, it seems as if I am having problem with retrieving the name of the iframe to the function (I tried doing an alert with the value, it was returned as null).

So, I suppose my question is this: How do I properly retrieve the value of the iframe, and am I on the right way using document.write to show the value of "compiledQuery" to the users? Or should I use another way of doing this completely?

I think I have looked through a hundred different tutorials and guides online, I just can't seem to find any hints to this problem... Any help would be greatly appreciated

Hi, I was working on this problem that asks me to return an array of scores for each string (only for its content part, not URL) in the global variable, which is an array. For example, alert a score of 0 if the string z is not found, 1 if found once, and 2 for twice. My problem is that I can get the code to alert if it has found the word (ex. "the"), but I cannot manage to :

a) Assign separate scores for each string.
b) Make the search case insensitive i.e. "the" will appear in 0,1, but not in 2, where it is capitalized

I would appreciate any help!

[CODE]
var c = ["[www.facebook.com] Facebook is the best social networking site to coccent with your friends. ", "[www.google.co.uk] Google is the worldwide search engine. ", "[www.bbc.co.uk] The best news source for starting your day. "];
function findScore(z) {
for (var i=0; i<c.length; i++) {
var a = c[i].toString();
var b = a.search(z);
if(b>-1) {
alert (z + " found in array " + i);
}
}
}
findScore("the");
[CODE]

Sorry for not being able to wrap the code!

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

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>