Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Very strange behavior

    OK, so I'm a beginner. I've read through Zakas' book, tried to grasp Crockford's book, and raced through the Head First book. I've been building stuff for a few weeks now, and I've made great progress working on a Mac running Safari. Then I tried to run it on Internet Explorer on Windows 7. The pages I'm working with are pure graphics in an HTML5 'canvas'. There's nothing else in the page.

    Crunch! That's the sound of me hitting a brick wall. I have managed to get my stuff running, but there's one thing that absolutely mystifies me. I've got about 160 lines of Javascript embedded in an HTML document. At the end of the Javascript in the <head> section, I've got the following stuff:

    Code:
    <body>
    	<p>Internet Explorer Version</p>
       <canvas onmousedown="handleMouseDown(event)" onmouseup="handleMouseUp(event)" id="theCanvas" width="1000" height="700"></canvas>
    </body>
    This works. But THIS doesn't work:

    Code:
    <body>
    	<p>12345678901234567890</p>
       <canvas onmousedown="handleMouseDown(event)" onmouseup="handleMouseUp(event)" id="theCanvas" width="1000" height="700"></canvas>
    </body>
    I have tried all sorts of variations on this (using the 'million monkeys with a million typewriters' debugging strategy) and found that it has something to do with the length of the text: long text works, short text doesn't. Of course, if there is no text line, the Javascript code never works. I could try a lot more variations on this theme, but I thought that at this point it would be good to get some input from experienced people, something along the lines of "Did you remember to turn on the mouse?" or some such.

    Here's the initial HTML5 code:

    Code:
    <!doctype html>
    <html lang="en">
    <head>
       <title>Graphics Stuff</title>
       <meta charset="utf-8">
       <img id="beginButton" src="BeginButton.png" alt="number" height="0" width="0">
       <img id="pauseButton" src="PauseButton.png" alt="number" height="0" width="0">
       <img id="resumeButton" src="ResumeButton.png" alt="number" height="0" width="0">
       <img id="replayButton" src="ReplayButton.png" alt="number" height="0" width="0">
        <style>
          body { font-family: Verdana, Helvetica, sans-serif; }
          canvas { border: 1px solid black; }
       </style>
       <script>
    One last thing: I am blissfully ignorant of Windows. I've been programming on Macs for 30 years now (I kid you not) and whenever I go near a Windows machine I get hives.

    Perhaps it would be best if some merciful soul simply directed me to a good book on getting Javascript to run on IE11+?

    Thanks for any help!

  • #2
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    A new datum

    I have done some further research and learned something new about this oddity. If I remove the text line mentioned above ('<p>Internet Explorer Version</p>'), then this is true:

    Code:
    // This does NOT work:
    <body style="background-color:#FFB79E">
    
    // This DOES work:
    <body font-family: Verdana, Helvetica, sans-serif; style="background-color:#FFB79E">
    I shall resume my 'million monkey' strategy of trying to figure out what underlies this issue. In the meantime, and comments would be appreciated.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    There's a few things here...

    1. If your question is about javascript, it would make sense for you to actually show us your javascript. Incredibly hard to know what's going on otherwise. Which segues nicely into...
    2. From 30 years of programming, you will probably know how useful comments like "it's not working" are. Minimum we need to know is what you expect to happen and what is happening instead. Speculation about why it is happening is sometimes but rarely useful, especially if you have ignored the most important part of debugging, which is...
    3. What does the error console say? If you are not using your error console you are wasting everybody's time. If you plan to continue to work with javascript, learn to use it - it will save you many hours of asking questions that you don't really understand on forums like this.
    4. Afaik, IE11 is getting close to being standards compliant. Have you tried your code in other browsers on windows and found the same problem? Generally speaking, the same version of the same browser will perform the same on different OS. The exceptions to this are so niche that I can't think of one of the top of my head.
    5. Your markup looks weird to me. The statement that you have your body section at the end of your head section is particularly worrying. Bad html can and will screw with your js. You can validate your html here. An empty template for an html5 page would look something like this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <style>
    // put all styling here, or in an attached css file, not as inline styles unless really necessary 
    </style>
    </head>
    
    <body>
    // this is where your html elements like img tags would normally go
    
    <script>
    // put your javascript before the closing body tag, to speed up page loading and make sure that all elements are loaded before the js starts to interact with them
    </script>
    </body>
    
    </html>
    6. Don't do the million monkeys thing. You know how wrong that is. At the very least, strip your code right back to basics, get the first thing working, then add the second thing, get that working and so on. Keep an eye on your error console. Google (it's almost certain that somebody has had the same problem you have, all you need to know are the keywords associated with it). Post here with specific questions if you're really stuck. This is an exercise in logic, not luck.

  • Users who have thanked xelawho for this post:

    Erasmus (04-14-2014)

  • #4
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for the reply. I'm sorry for the skeletal statement of the problem: I had thought of it as a differential problem: a long line of text yielded a good page; a shorter line caused the page to hang.

    I did not realize that the script element must go inside the body element; all my pages put it in the header. Curious as to where I picked up that mistake, I rummaged around and found the source: the Head First HTM5 programming book. I read it around 6 months ago when I was just toying with Javascript. In its early examples, it puts the script element in the head, not the body. It worked just fine on Safari for Mac.

    Although this corrected some of the problem, a weird problem remains. Herewith an entire webpage:

    Code:
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    	<title>Rocket Science</title>
    	<meta charset="utf-8" />
    	<img id="bigMoon" src="SplashScreenImages/BigMoon.png" alt="the moon!" height="0" width="0">
    	<img id="stars" src="SplashScreenImages/StarBackground.png" alt="and the stars!" height="0" width="0">
    </head>
    <body style="background-color:#000000">
    	<canvas id="splashScreen" width="1000" height="720"></canvas>
    	<script>
    		"use strict";
    		var myCanvas, context, window, document; // standard stuff
    		var starBackground; // Image
    		var bigMoon;		// Image
    		
    		function handleMouseClick() {
    			window.location.href = 'RocketDesign.html';
    		}
    		window.onload = function() {
    			myCanvas = document.getElementById("splashScreen");
    			context = myCanvas.getContext("2d");
    			starBackground=document.getElementById("stars");
    			context.drawImage(starBackground,0,0);
    			bigMoon=document.getElementById("bigMoon");
    			context.drawImage(bigMoon,190,70);
    			context.textAlign = "center";
    			context.fillStyle = 'white';
    			context.font = "36px Georgia";
    			context.fillText("Rocket Science", 500,50);
    			context.font = "18px Helvetica";
    			context.fillText("click anywhere to begin", 500,690);
    			myCanvas.onclick = handleMouseClick;			
    		};
    	</script>
    </body>
    </html>
    This displays everything properly right up to the statement "context.fillText("Rocket Science", 500,50);" It draws neither line of text. Nor does it execute the last line in the script referencing handleMouseClick.

    When I raise the debugger (SHIFT-F12) I get interesting results. Here's the sequence:

    COMMAND: reload the page; RESULT: page appears properly except no text
    COMMAND open the debugger; RESULT: debugger shows no problems in the code
    COMMAND reload the page; RESULT: page does not execute and debugger shows error message: 'co?text' is undefined. It shows a rectangular non-character where I have placed the question mark. The javascript it displays simply shows the word 'cotext'.

    So apparently I have a buggy debugger -- ironic, no? But let's press on. Herewith the exact same code except that the javascript is in the <head>, not the <body>:

    Code:
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    	<title>Rocket Science</title>
    	<meta charset="utf-8" />
    	<img id="bigMoon" src="SplashScreenImages/BigMoon.png" alt="the moon!" height="0" width="0">
    	<img id="stars" src="SplashScreenImages/StarBackground.png" alt="and the stars!" height="0" width="0">
    	<script>
    		"use strict";
    		var myCanvas, context, window, document; // standard stuff
    		var starBackground; // Image
    		var bigMoon;		// Image
    		
    		function handleMouseClick() {
    			window.location.href = 'RocketDesign.html';
    		}
    		window.onload = function() {
    			myCanvas = document.getElementById("splashScreen");
    			context = myCanvas.getContext("2d");
    			starBackground=document.getElementById("stars");
    			context.drawImage(starBackground,0,0);
    			bigMoon=document.getElementById("bigMoon");
    			context.drawImage(bigMoon,190,70);
    			context.textAlign = "center";
    			context.fillStyle = 'white';
    			context.font = "36px Georgia";
    			context.fillText("Rocket Science", 500,50);
    			context.font = "18px Helvetica";
    			context.fillText("click anywhere to begin", 500,690);
    			myCanvas.onclick = handleMouseClick;			
    		};
    	</script>
    </head>
    <body style="background-color:#000000">
    	<canvas id="splashScreen" width="1000" height="720"></canvas>
    </body>
    </html>
    This works perfectly (with one tiny exception that I'll mention later). I have run this through a difference checker and it verifies that the only difference between the two versions is the <script> element being inside the <head> in one case and inside the <body> in the other case. I have double-checked all this with extra uploads and reloads.

    The tiny exception is this: the text line "click anywhere to begin" is rendered as "click anywhe?e to begin", where the question mark is a rectangle 'non-character. When I replace 'anywhere' with 'somewhere', the 'r' is again rejected. When I replace it with the string 'never ever', it renders it as 'never ev?r'. When I replace the entire text with '123456789012345678901234567890', I get '1234567890123456789?1234567890'. Hence, it is not replacing the same position in the string.

    Meanwhile, every variation works perfectly on Mac Safari.

    Any ideas?

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    again, I would point you to the html validator: The W3C Markup Validation Service

    I'm not much of a fan of strict mode, but I would also question the wisdom of defining document and window as user variables.

    You don't have to put the script at the end of the body, it's just a good idea. It will, for example, eliminate the need for a window.onload function There are many badly written books on the subject of javascript.

    I don't have IE11, so I can't help you on the specifics of what may be causing your other problems. DO they appear in other browsers?

  • Users who have thanked xelawho for this post:

    Erasmus (04-14-2014)

  • #6
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Now I'm confused. I've been running my Javascript through Doug Crockford's JSLint, and have slowly knocked it into conformance with his requirements. I just checked it again and its only complaint is that I use the direct form of the "use strict" pragma. I had used that pragma because several sources suggested that this was the best way to insure uniform cross-platform performance. In any case, I removed it from the code and there was no change in performance.

    I ran the code through the W3C validator and got some truly confusing results. Here's the code I put into the validator:

    Code:
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    	<title>Rocket Science</title>
    	<meta charset="utf-8" />
    	<img id="bigMoon" src="SplashScreenImages/BigMoon.png" alt="the moon!" height="0" width="0">
    	<img id="stars" src="SplashScreenImages/StarBackground.png" alt="and the stars!" height="0" width="0">
    </head>
    <body>
    	<canvas id="splashScreen" width="1000" height="720"></canvas>
    	<script>
    		var myCanvas, context, window, document; // standard stuff
    		var starBackground; // Image
    		var bigMoon;		// Image
    		
    		function handleMouseClick() {
    			window.location.href = 'RocketDesign.html';
    		}
    		window.onload = function() {
    			myCanvas = document.getElementById("splashScreen");
    			context = myCanvas.getContext("2d");
    			starBackground=document.getElementById("stars");
    			context.drawImage(starBackground,0,0);
    			bigMoon=document.getElementById("bigMoon");
    			context.drawImage(bigMoon,190,70);
    			context.textAlign = "center";
    			context.fillStyle = 'white';
    			context.font = "36px Georgia";
    			context.fillText("Rocket Science", 500,50);
    			context.font = "18px Helvetica";
    			context.fillText("click anywhere to begin", 500,690);
    			myCanvas.onclick = handleMouseClick;			
    		};
    	</script>
    </body>
    </html>
    The W3C validator reported two errors:

    Line 8, Column 7: Stray end tag head.
    </head>

    Error Line 9, Column 6: An body start tag seen but an element of the same type was already open.
    <body>


    I don't understand either one of these. The first one seems to be saying that a <head> tag should never be accompanied by a </head>. I just double-checked and that's not true. So, what is W3C validator complaining about? The same thing applies to the second error reported. I carefully combed through the code looking for an unclosed pairing, of quote marks or other paired characters, and found no errors.

    Next, I tried to use their built-in "HTML tidy" option. Here's what it produced:

    Code:
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
    <title>Rocket Science</title>
    <meta>
    </head>
    <body>
    <img id="bigMoon" src="SplashScreenImages/BigMoon.png" alt="the moon!" height="0" width="0"> <img id="stars" src="SplashScreenImages/StarBackground.png" alt="and the stars!" height="0" width="0"> <script type="text/javascript">
                    var myCanvas, context, window, document; // standard stuff
                    var starBackground; // Image
                    var bigMoon;            // Image
                    
                    function handleMouseClick() {
                            window.location.href = 'RocketDesign.html';
                    }
                    window.onload = function() {
                            myCanvas = document.getElementById("splashScreen");
                            context = myCanvas.getContext("2d");
                            starBackground=document.getElementById("stars");
                            context.drawImage(starBackground,0,0);
                            bigMoon=document.getElementById("bigMoon");
                            context.drawImage(bigMoon,190,70);
                            context.textAlign = "center";
                            context.fillStyle = 'white';
                            context.font = "36px Georgia";
                            context.fillText("Rocket Science", 500,50);
                            context.font = "18px Helvetica";
                            context.fillText("click anywhere to begin", 500,690);
                            myCanvas.onclick = handleMouseClick;                    
                    };
    </script>
    </body>
    </html>
    This code does NOT work even on Mac Safari! Nothing happens at all; I just get a white screen. So now I am REALLY confused. I'll continue experimenting to see what I can figure out and will report back if I make any meaningful discoveries.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    hmm. interesting. HTML-Tidy seems to discard your canvas element completely. Maybe it doesn't like HTML5. I would put it back in (in the body section where it belongs) and try again.

  • Users who have thanked xelawho for this post:

    Erasmus (04-14-2014)

  • #8
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I tried putting the <canvas id... line back into the HTML, inside the <body> section as you suggested, and it didn't help. I'll keep plugging along.

    By the way, what's your connection with Atari?

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    this code:
    Code:
    <!DOCTYPE html>
    <html lang="en-US">
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
    <title>Rocket Science</title>
    <meta>
    </head>
    <body>
    <img id="bigMoon" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/280px-FullMoon2010.jpg" alt="the moon!" height="0" width="0"> 
    <img id="stars" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/012/cache/stars_1230_600x450.jpg" alt="and the stars!" height="0" width="0"> 
    <canvas id="splashScreen" width="1000" height="720" style="background-color:black"></canvas>
    <script type="text/javascript">
                    var myCanvas, context, window, document; // standard stuff
                    var starBackground; // Image
                    var bigMoon;            // Image
                    
                    function handleMouseClick() {
                            window.location.href = 'RocketDesign.html';
                    }
                    window.onload = function() {
                            myCanvas = document.getElementById("splashScreen");
                            context = myCanvas.getContext("2d");
                            starBackground=document.getElementById("stars");
                            context.drawImage(starBackground,0,0);
                            bigMoon=document.getElementById("bigMoon");
                            context.drawImage(bigMoon,190,70);
                            context.textAlign = "center";
                            context.fillStyle = 'white';
                            context.font = "36px Georgia";
                            context.fillText("Rocket Science", 500,50);
                            context.font = "18px Helvetica";
                            context.fillText("click anywhere to begin", 500,690);
                            myCanvas.onclick = handleMouseClick;                    
                    };
    </script>
    </body>
    </html>
    works fine for me in the browsers that I have that support canvas (including safari for windows). I made the canvas background black so you could see the text at the bottom.

    What is it that is not working for you?

    I used to play atari when I was a kid. That's pretty much the connection. My old avatar was commodore 64, but I decided to mix things up a bit

  • Users who have thanked xelawho for this post:

    Erasmus (04-15-2014)

  • #10
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Your version worked just fine with both Safari and Firefox on the Mac; on the Windows machine it had these results:

    Internet Explorer and Google Chrome: everything showed up except the lower text ("click anywhere to begin")
    Firefox: everything worked just fine.

    I also discovered that my Windows machine sometimes drops bits; there are odd errors showing up in spam-code that Internet Explorer was inserting into my pages. I think some of the errors I mentioned earlier, in which some text characters were turned into non-characters. So I'm apparently dealing with a faulty machine. Or maybe just general, all-purpose faultiness.

    Did you ever play Eastern Front (1941) on the Atari computer?

  • #11
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I think you'll find this funny: I took the output of the Tidy program and put it into the input of the validator. Guess what? The validator returned an error! Here's the code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="en-US">
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
    <title>Rocket Science</title>
    <meta>
    </head>
    <body>
    <img id="bigMoon" src="SplashScreenImages/BigMoon.png" alt="the moon!" height="0" width="0" name="bigMoon"> <img id="stars" src="SplashScreenImages/StarBackground.png" alt="and the stars!" height="0" width="0" name="stars"> <script type="text/javascript">
                    var myCanvas, context, window, document; // standard stuff
                    var starBackground; // Image
                    var bigMoon;            // Image
                    
                    function handleMouseClick() {
                            window.location.href = 'RocketDesign.html';
                    }
                    window.onload = function() {
                            myCanvas = document.getElementById("splashScreen");
                            context = myCanvas.getContext("2d");
                            starBackground=document.getElementById("stars");
                            context.drawImage(starBackground,0,0);
                            bigMoon=document.getElementById("bigMoon");
                            context.drawImage(bigMoon,190,70);
                            context.textAlign = "center";
                            context.fillStyle = 'white';
                            context.font = "36px Georgia";
                            context.fillText("Rocket Science", 500,50);
                            context.font = "18px Helvetica";
                            context.fillText("click anywhere to begin", 500,690);
                            myCanvas.onclick = handleMouseClick;                    
                    };
    </script>
    </body>
    </html>
    I suppose that what this really means is that the code is so utterly screwed up that even the tidy program can't fix it.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •