astralaaron

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.

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.

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!

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/

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.

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

If anyone else has an issue like this, I seem to have fixed this by adding a small delay with a setTimeout

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

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

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.

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.

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!

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.

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();

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?

If you view the jFiddle example in chrome, and view the Javascript console, you will see the frame rate output is constant and smooth. Then if you switch over to Firefox > Firebug console and run the jFiddle again, you will see it goes smooth except for every so often it pauses for a moment. I've literally been unsuccessful for over a year to get a smooth loop going in all browsers. I'm hoping someone can shed some light on whats going on with this small example! I appreciate everyone who reads this and takes a look a the problem..: http://jsfiddle.net/aLv3vsv8/

Ignolme I really appreciate you responding. I'm sorry for such a late response, when I returned home from work, my computer monitor wouldn't turn on. Your example makes sense, I will play around with it soon and let you know how it went!

I was wondering how to write a structure like jquery does for example so that you can select an element like: somescript('some_element').someMethod(); etc...how do you chain together basically??? thank you the first function would just return the element..then whatever function you did after would run on that element

Ignolme, thank you so much my friend.

Hello I've been messing around with a small script i've put together from reading various different turorials about drag and drop. I just cannot get removeEventListener to work.. Basically you can begin dragging but the element is stuck on the mouse and you cannot drop it. I've been able to set a variable to toggle on and off to stop it from dragging but I want to understand how to use removeEventListener incase I need it in the future. I appreciate any help. I've posted all of the code at the following JS Fiddle, however for some reason the dragging won't work at all on JS Fiddle: (sorry I'm new to js fiddle) http://jsfiddle.net/7wpxa4tm/ That exact same code does work for me on all browsers back to IE9. It will begin dragging, and then the remove listener which is in the "ignore" method just will not work. Does anyone see any obvious reason for this? I've been messing with this for two days, I've read around a bunch and thought that I realized my problem when I found that you can't use anonymous functions as callbacks as I was previously doing, but even after setting my callbacks to variables it still won't work. Here is the code posted below if that is prefered: EDIT: Sorry the problem is located in D.drag.release() EDIT 2: JFiddle is now loading, had the onload setting wrong, now you can see the problem with the remove listener http://jsfiddle.net/7wpxa4tm/6/ var DragElement = function() {var D = this;this.elem = null;this.offsetX = 0;this.offsetY = 0; this.init = function() { D.anch = document.getElementById('drag-anchor'); D.elem = document.getElementById('wig'); console.log('D.init()'); var call_back = function(event) { console.log('mousedown'); D.drag.anchor(event); }; D.listen(D.anch, 'mousedown', call_back); } this.listen = function(elem, evt, handler) { if (elem.addEventListener) { elem.addEventListener(evt, handler, false); return true; } else if (elem.attachEvent) { return elem.attachEvent('on' + evt, handler); } else { evt = 'on'+evt; if(typeof elem[evt] === 'function'){ handler = (function(f1, f2){ return function(){ f1.apply(this, arguments); f2.apply(this, arguments); } })(elem[evt], handler); } elem[evt] = handler; return true; } return false; } this.ignore = function(elem, evt, handler) { if (elem.removeEventListener) { elem.removeEventListener (evt, handler, false); } if (elem.detachEvent) elem.detachEvent ('on'+evt, handler); } this.drag = { 'dragging' : false, 'release' : function(event) { //D.drag.dragging = false; I can use this dragging boolean to control if it drags or not..but I want to know how to use the remove listener /******** the following remove event method (ignore) will not work...*****/ var call_back = function(event) { D.drag.move(event); }; D.ignore(D.anch, 'mousemove', call_back); }, 'anchor' : function(event){ D.drag.dragging = (D.drag.dragging) ? false : true; D.offsetY = event.clientY-parseInt(D.elem.offsetTop); D.offsetX = event.clientX-parseInt(D.elem.offsetLeft); var call_back = function(event) { D.drag.move(event); }; D.listen(D.anch, 'mousemove', call_back); }, 'move' : function(event) { if(!D.drag.dragging) return; D.elem.style.position = 'absolute'; var top = (event.clientY-D.offsetY); var left = (event.clientX-D.offsetX); D.elem.style.top = top + 'px'; D.elem.style.left = left + 'px'; var call_back = function(event) { D.drag.release(event); }; D.listen(D.anch, 'mouseup', call_back); } }}var drag = new DragElement();drag.listen(window, 'load', function(event) { drag.init(event);}); EDIT 2: JFiddle is now loading, had the onload setting wrong, now you can see the problem with the remove listener http://jsfiddle.net/7wpxa4tm/6/ Edit 3: I just tried returning the removeEventListener function and outputting it to the console, it is "undefined" I guess the problem is how I am passing the function in, or saving the function, but I don't see a way to do it differently

Here are some of my opinions while looking at the site: soften up the horizontal lines set a soft colored background color for the right column think about some kind of design for the headers on the website "Welcome, Youtube Fav, Twitter Latest, Interesting Links" maybe some kind of icon or container around the text.. go a little lighter than full black #000000 on the text I don't have any examples to show because I'm no good with design, they are just some things that I pick up on with sites that I've seen and like.

thank you for this option

I have some lists set up like the following: <ul id="menu"> <li><a href="#">link a</a> <ul> <li>...</li> <li>...</li> </ul> </li> <li><a href="#">link b</a> <ul> <li>...</li> <li>...</li> </ul> </li> <li><a href="#">link c</a> <ul> <li>...</li> <li>...</li> </ul> </li></ul> I'm trying to pull the text from each of the first anchors (link a, link b, link c)...but having some problems. Most recently i've tried..: var X = document.getElementById("menu"); var Y = X.getElementsByTagName("li"); for (var i=0; i < Y.length; i++) { var Z = Y[i].getElementsByTagName('A'); console.log( Z[0].innerHTML); } but this jumps into the ul's within the li's. Thanks for any help, it's sort of urgent.. EDIT: What I need really is to be able to get the a reference to the top level LI's and also be able to grab the text within the <a> of those LI's...

I am having a weird problem.. my script that I am creating creates a stylesheet dynamically based on some variables, then will assign the classes created to certain elements. This was working fine, when I was only adding padding and font sizes to the classes. The padding and the font sizes change, but for the class that I am changing the margin, the margin will not change... is there some restriction or is this something that must be wrong with my script? Thank you for your time. EDIT ::::::nevermind...I figured it out seconds after posting. Thanks anyway!

thanks for responding. the problem was the content was inside of a fixed div within the div I was trying to get the height of.