Jump to content


  • Posts

  • Joined

  • Last visited

About astralaaron

  • Birthday 05/01/1985

Previous Fields

  • Languages
    PHP JavaScript

Contact Methods

  • Website URL
  • ICQ

Recent Profile Visitors

14,932 profile views

astralaaron's Achievements

Dedicated Member

Dedicated Member (4/7)



  1. I have a work project that has become quite large, and I am now required to separate each object of the code into it's own file. The following code example is how it is structured currently, all in one giant file. function Main() { var main = this; this.init = function() { // code main.keyboard.init(); main.game_loop.init(); main.physics.init(); } this.keyboard = { init: function() { }, keys: { UP:38, DOWN:40, LEFT:37, RIGHT:39 } input: function(e) { // functions reference 'main' variable } } this.game_loop = { init: function() { }, on_frame: function() { // functions reference 'main' variable } } this.physics = { init: function() { // functions reference 'main' variable } } } $(document).ready(function(){ var m = new Main(); m.init(); }); I have tried separating the objects into their own file's and changing them, for example from: this.keyboard = { } to Main.prototype.keyboard = { } However I then no longer have access to the 'main' variable. Someone has suggested "arrow functions" to me, but I was just confused on how to apply that to my code. I really appreciate anyone who looks at this.
  2. Thank you so much, this was exactly the problem. I was setting the height of the canvas in CSS and it was scaling the pixels.
  3. I've been trying to draw out some lines X amount of pixels and I just can't get it right. For example here on the following jsFiddle I am trying to draw out lines 50px apart. When I console log the X position it logs 50, 100, 150, 200, etc. but when you measure the lines with a browser extension ruler and also with the X position that I am outputting on the page you can see they are not 50px apart. It will be more like 50, 98, 146, etc. I understand canvas calculates pixels from the center of the pixel and I've tried adding 0.5 to the position and also subtracting but it didn't seem to make any difference. https://jsfiddle.net/4y0q2pdw/33/ Been stuck for days, any suggestions appreciated!
  4. I would look into jquery's closest() function which will search up the dom until it finds what it is looking for. Once you found the tr I think you could use jquery's index() index function closest() https://api.jquery.com/closest/ index() https://api.jquery.com/index/
  5. I think this may be a (hopefully temporary) issue with Firefox and aria-live as I can see there are pages written about aria-live with examples on the Mozilla Developer website: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions The example's don't have role="alert". I recently noticed a popup alert when opening firefox while running JAWS which mentions that "some accessibility features are disabled due to conflicts with new firefox features". So I guess all there is to do at this point is hope they fix this. Chat areas using aria-live as it is right now would be terrible with it announcing "ALERT!" before each new message.
  6. Is there any way to make aria-live="assertive" work on firefox without having to use role="alert"? By the way this is using firefox on windows with JAWS. aria-live with mac on firefox doesn't work. In the jsfiddle example link below, the live element has role="alert" and it works but if you remove the role="alert" it won't work. The reason I want to get this working without the role="alert" is because JAWS announces "Alert" before each message which when the role is set to alert. https://jsfiddle.net/st5vnsd9/16/ Thank you everyone
  7. If anyone else has an issue like this, I seem to have fixed this by adding a small delay with a setTimeout
  8. I am having an issue where when I have a rich text field that has design mode on that is within a sortable LI. The problem is that designMode changes to 'Off' if the LI is dragged to a new position. And even though I am able to target the correct iframe, it seems to ignore when I tell it to turn designMode back on, does anyone know why this is happening? Thank you for reading. i set up a small jfiddle example demonstrating this.. the two iframes have designMode on but when you re-sort them, the one that you clicked to move to a new position gets it's designMode turned off, and my attempt to turn it back on fails https://jsfiddle.net/LcLfaa8j/2/ I am using FireFox currently
  9. Is there a way to do this in jquery?: There are hidden elements on my page, and they show up once a button is pressed. I need for the mouse over / hover to be activated for an element if the mouse is sitting over the top of it when that button is pressed. Before the button is pressed, the element has display:none (must be like that so elements underneath can be accessed by the mouse, and pointer-events is not an option because of browser compatibility requirements). Then the button is pressed, display:none goes away and the element appears. However, hover event doesn't fire off until the mouse moves if the mouse is already sitting on an element. Any suggestions? Thank you
  10. I was able to fix this by creating a function with the jquery inside it, passed the i/x parameters in to that function and it works.
  11. Hello, I'm having a bit of trouble with jquery. I have something similar to the following: function someFunction( i ){ for(var x = 0; x < numOfPosts; x++) { var callbackA = function() { console.log('set i=' + i + ' x=' + x); }; var callbackB = function() { console.log('set i=' + i + ' x=' + x); }; $( element ).hover( callbackA , callbackB ); } } The issue I am having is that x is always equal to the "numOfPosts" for each iteration. Anything obvious that I am doing incorrectly? Thanks everyone for reading.
  12. These tutorials are great, thanks for posting them. Please post two more tutorials: 1) Path Finding. Please show how you would handle controling a game piece with the mouse, where you would need to click the mouse some where for the game piece to move. Then it would need to find the correct path to move around any objects. This would be awesome! 2) How would you handle game states? as in "menu screen, level 1, level 2, end screen" etc. thanks again!
  13. I have a really hard time understanding how to write regular expressions..even when looking at examples. I am trying to match a (word)(3-4 digit number)(anotherword) for example "firstname4343lastname". I need to make sure it is in that format. I've been trying many different things, but here is the most recent: http://jsfiddle.net/6ajj95af/ Any help is appreciated. Also, I will need to extract the number after confirming the format, any advice as to the best / most efficient way to do that would also be a really big help right now. Thank you everyone EDIT: The JSFiddle is sort of a bad example, just to clarify: The "firstname" and "lastname" are actually meant to be fixed words... it is something like worda2738wordb the number is variable.
  14. I am working on giving this example a try right now, but I have a question now about how to structure my script. I didn't realize putting objects inside of functions was really bad for garbage collection. Since I had read that Javascript can be used like an OOP language, I've been writing all of my scripts like that because it helps me organize and work with them. For example: I am always writing scripts like this because they end up getting big and I find that I can stay organized and have scope to everything easily: function SomeScript() { var s = this; this.animate = { 'vars': { 'x' : 0, 'y' : 0, //etc.. }, 'start' : function() { console.log('starting x/y = ' + s.animate.vars.x + '/' + s.animate.vars.y); s.animate.stop(); }, 'stop': function() { console.log('stopping'); } };}var x = new SomeScript();x.animate.start(); Would you recommend I ditch the above style and try to write things like this?: var x = 0;var y = 0;function stop() { console.log('stopping');}function start() { console.log('starting x/y = ' + x + '/' + y); stop();}start();
  15. I had no idea a timestamp was automatically passed in! This does seem to improve the performance slightly..however, now in the start function the frame rate doesn't calculate properly and I am not quite sure what the math needs to be to fix it. I am referring to this line in the 'start' function: e.animate.frame.rate = 1000 / e.animate.frame.fps; Changing that 1000 down to 100 or so makes it pretty smooth..I read that the requestAnimationFrame timestamp is equal to 10 miliseconds. I'm interested to see it when the frame rate is calculated properly, but it does seem to still have an occasional stutter. I do think you are right about the garbage collector, after reading around I am pretty sure on my main script that is having this problem I did a poor job of it. I have a couple questions about that.. first, if I have a function like the following, do I need to set the variables to null after using them?: function a() {var x = 'something';var y = 'something else';var z = x + " " + y;} Also, if I have a function that is a member of another function like the following, and I only use it once, should I be deleting it? (delete b.C) function B() {var b = this;this.C = function() {}} EDIT/question: Another indication (i think) that it is poor garbage collection is that if I add multiple instances of this my canvas/script, they all stutter at the same exact times, and for the same duration. It seems that javascript entirely locks up. Would you say that is an indication that it has nothing to do with my animation loop in the first place?
  • Create New...