Jump to content

bloodaxe

Members
  • Content Count

    16
  • Joined

  • Last visited

Community Reputation

0 Neutral

About bloodaxe

  • Rank
    Newbie
  1. bloodaxe

    oval circles

    Hi whatever was happening doesn't when I use your code so God knows what it was. I haven't got as far as animation yet, I was just sort of seeing how to draw the 'ball' on the canvas with a green background. I am pretty new to this stuff, I did Pong years ago in VB6 and thought it would be an interesting exercise to write it in JS. Thanks for your help. Bloodaxe.
  2. bloodaxe

    oval circles

    Hi; you have a different view from me. All I have learned so far suggests keeping the HTML for laying out the page with any styling done in the css document (beginning HTML, XHTML, CSS and JavaScript by Jon Duckett ) and I have learned my JS from Codecademy and JS in easy steps all of which emphasise separate .js files. It actually makes the code clearer and more re-usable. The actual problem is simply that whether I set the canvas size statically in the .css or do so dynamically in the .js the circle drawn by the above code comes out an oval. If I leave out the background color style element the circle becomes a circle on a white background. Regards bloodaxe.
  3. bloodaxe

    oval circles

    Hi I am trying to recreate the old Pong game using JS. I am getting this code function init(){ var canvas=document.getElementById('play');var ctx=canvas.getContext('2d');ctx.fillStyle='green';ctx.fillRect(0,0,800,400);var c = document.getElementById("play");var ctx = c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.fillStyle = "red";ctx.fill();}document.addEventListener("DOMContentLoaded", init, false); to produce a green rectangle with a red circle on it, except the circle becomes an oval if I define the size of the canvas in either JS or CSS. The present code is just to get the range, but the oval circle is annoying. Does anyone know why it is happening? I have attached the HTML file as well. Also since this is a JavaScript forum why cant I attach the original .js file? index.html
  4. Hi, This will write the date in US and UK format to a div. You could chop off the bits you dont need. This is months.js. function init(){ var panel= document.getElementById("panel"); var days = ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"]; var months = ["Jan", "feb", "Mar", "apr", "May", "Jun", "Jul", "Aug", "Sep", " Oct", "Nov", "Dec"]; var now = new Date(); var yy = now.getFullYear(); var mm = now.getMonth(); var dd = now.getDate(); var dy = now.getDay(); mm = months[mm]; dy = days[dy]; var str = dy + ", " + mm + " " + dd + ", " + yy; panel.innerHTML += "US Date string: " + str; str = dy + ", " + dd + " " + mm + ", " + yy; panel.innerHTML += "<br>UK Date String: " + str;}document.addEventListener("DOMContentLoaded", init, false); You need an HTML doc with a div id="panel".
  5. Hi, Thanks for the help. Foxy Mod's suggestion works fine. TheScientist's idea has got me stumped so far, but I will persevere with addEventListener and try to figure it out. This is all a learning process for me so it is all good! I have discovered that my listener for init also doesn't do anything as without it the images etc load fine! ah well as I say it is a learning curve. Regards B.
  6. Hi, thanks for that. I have tried it all and nothing changes. It doesn't matter where I put the onload event it still loads. And no matter what I do to the imageFunc() it still opens the pic in the original window. The problem seems to be with line 16. This is the error thrown in the debugger. TypeError: 'undefined' is not a function (evaluating 'document.getElementByTagName("a")') (18:47:43:100 | error, javascript) at public_html/weymouth2.js:16 Does this help? I am not too sure about debugging and seem unable to identify what variables hold what values at any given point. Clearly the function is doing something, but is what it does some default action taken by th ebrowser when it doesn't'understand' something/
  7. I have created a web page with a table. in each cell is an <img> inside an <a>. The init function writes the image tags in with the corect src values for each pic. It also writes the href values for the a tags. The idea is that when the pic is clicked it opens in a new window bigger using imageFunc to take the url which is the existing href, and show it in a new window. . I have a previous effort that does this fine but was done longhand by writing all the href's and src's in then adding 20 onclick events. This is my attempt to condense the whole thing into Js functions. Problem is this opens the image full screen in the existing tab. Which is ok but not what is supposed to happen. i have tried various settings for the parameters to no avail. I cant upload the .js so I have copied it in below; sorry. Any ideas will be appreciated. function init(){ for(i=1;i<21;i++) { x=document.getElementById("pic"+i); x.innerHTML="<img src='Weymouth by steam 2012 0"+i+".jpg' />"; document.getElementById("pic"+i).setAttribute("href","Weymouth by steam 2012 0"+i+".jpg");}}document.addEventListener("DOMContentLoaded", init, false); function imageFunc(){ a = document.getElementByTagName("a").getAttribute("href"); window.open(a.href, "_blank",'left=20,top=20,width=500,height=500,toolbar=0,resizable=1, scrollbars=yes');return false; } index.html weymouth2.css
  8. Thanks. I am trying to work through the idea. the photo files are called what they are called. My problem is that each is serially numbered hence the i variable which will append the corect number to each file in the middle of the URL. ie Weymouth by steam 2012 01.jpg, Weymouth by steam 2012 02.jpg and so on! The idea is to populate a table with a pic in each cell then later I will make the pics link to themselves in a new window. I can see what the idea of URIEncode is but with a variable in the middle of the URL it gets a bit tricky.
  9. Thanks. I am trying to work through the idea. the photo files are called what they are called. My problem is that each is serially numbered hence the i variable which will append the corect number to each file in the middle of the URL. ie Weymouth by steam 2012 01.jpg, Weymouth by steam 2012 02.jpg and so on! The idea is to populate a table with a pic in each cell then later I will make the pics link to themselves in a new window. I can see what the idea of URIEncode is but with a variable in the middle of the uRL it gets a bit tricky.
  10. I have modified this JavaScript snippet from another post and when I ran it in the debugger it seems to be producing garbage instead of the required string to load the images. I am trying to populate the table with a series of images named; Weymouth by steam 2012 0x.jpg, where x is a serial number for each successive phot. I have got to the idea I have not got the quotes correct, but can someone show me how to produce the correct tag so the images will load. the previous line seems to work to return the initial correct strings in the id assignment so the ids read data1, data2 etc, but then it all goes wrong.this is a bit of text from the debugger which may help!Failed to load resource: Unexpected end of file from server (18:55:26:130 | error, network) at http://localhost:8383/weymouth2/Weymouth%20by%20steam%202012%200Failed to load resource: Unexpected end of file from server (19:26:57:716 | error, network) at http://localhost:8383/weymouth2/Weymouth%20by%20steam%202012%200
  11. Hi; many thanks for this. I have tried both and they both work so Thank you. Regards Bloodaxe
  12. Hi; This is very basic so sorry for that, but, can I actually draw an image into a canvas from a file in the project folder? I want to have a click button which when clicked puts an image, .jpg in the canvas but my code below does nothing except put the image in the window next to the other controls. It is pretty much the code example in the w3 schools example page but it doesn't draw the image into the canvas when the button is clicked. I want to draw an image from the project folder rather than draw it from an image already on the page. Regards Bloodaxe. index.html testprojectcss.css
  13. Hi; So here's a weird one! I have had a fiddle and eventually tried moving the attributes of the <canvas> into the tag instead of in the css file and the fill is 100%. I will attach the files so you can see. The 820B file is the after one without any css. the 769B file goes with the css file and is the before set up. Regards Bloodaxe. index.html index.html testprojectcss.css
  14. Thanks for that. pretty stupid really, but I see the reason so a small step forward. Regards Bloodaxe Er actually just hit another snag I have already had in another file. I changed the gradient color to green and discovered the gradient stops about 4/5ths across the <canvas> This happened exactly the same previously. So far no amount of fiddling has altered it. Can you see what I am doing? or is it a glitch? I am using Netbeans IDE 7.3.1 to create the files and running them in Firefox 23.0.1
  15. I have run the gradient creation code on its own as the page loads, but now I want to use it in a button click event, so I have tried to enclose it as a function that the button onclick event calls. I get no response at all so I assume I need to pass something in as a parameter, but I cant see what. or does it need an event listener somewhere? index.html testprojectcss.css
×
×
  • Create New...