Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

I've worked on pdf.js. It's a thing that displays PDFs inside a web browser. It's not a thing that displays web pages inside a PDF viewer.

# ? Nov 15, 2013 14:22

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 14:56

fletcher: Jun 27, 2003; ken park is my favorite movie; Cybernetic Crumb

Mr. Wynand posted:

Oh yeah? You better tell Firefox that.

e: i'm not sure you can actually save TO pdf... it might only go the other way around :/

That was the first thing I thought of too. I mean if we can render them with js now, probably not too far off from authoring them in js.

# ? Nov 15, 2013 20:46

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

fletcher posted:

That was the first thing I thought of too. I mean if we can render them with js now, probably not too far off from authoring them in js.

You can author PDFs in js with jsPDF (https://github.com/MrRio/jsPDF), but it's not as simple as selecting a DOM element and telling it to go.

Chenghiz fucked around with this message at 20:13 on Nov 16, 2013

# ? Nov 16, 2013 17:05

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

Newbie javascript here.

I'm wrapping <a href="java script:void(0)" class="randomclass1"></a> in a div tag. Upon clicking the link, the class changes. Is java script:void(0) in this instance an event handler, or is it likely that the undefined value is just passed to a boolean that leads to the class change?

I'm trying to ape what happens to the Male/Female cutouts on http://slaveryfootprint.org/survey/#gender_and_age

# ? Nov 16, 2013 19:46

karms: Jan 22, 2006; by Nyc_Tattoo; Yam Slacker

Raskolnikov2089 posted:

Newbie javascript here.

I'm wrapping <a href="java script:void(0)" class="randomclass1"></a> in a div tag. Upon clicking the link, the class changes. Is java script:void(0) in this instance an event handler, or is it likely that the undefined value is just passed to a boolean that leads to the class change?

I'm trying to ape what happens to the Male/Female cutouts on http://slaveryfootprint.org/survey/#gender_and_age

java script:void(0) does literally zilch. What you're after is clickWoman in /static/js/views.js that gets attached to the actual dom object when a new instance of GenderView is instantiated. That page is made with a javascript framework and I highly suggest you step very far away from that particular train wreck (ed note: the negative view on js frameworks is the sole personal opinion of the author and does not reflect the professional opinion of this publication).

If you still want that behavior, it's far easier to get some jquery and a tiny little smidgen of js to do what you want. An example:

code:

.red {background-color:red;}
.blue {background-color:blue;}

#target {
display:block;
width: 100px;
height: 100px;
background-color:gray;
margin-top:50px;
}

.button {
display:block;
width: 50px;
height: 50px;
margin: 25px;
padding: 5px;
border: 3px solid black;
}

JavaScript code:

jQuery( document ).ready(function($){
  
  $('#blue_button').click(function(){
    $('#target').removeClass('red').addclass('blue');
    return false;
  });

  $('#red_button').click(function(){
    $('#target').removeClass('blue').addclass('red');
    return false;
  });


});

HTML code:

<a href="" class="button" id="red_button">MAKE IT RED</a>
<a href="" class="button" id="blue_button">MAKE IT BLUE</a>
<div id="target">What color am I?</div>

I wrote it here, untested, see how far you come with making this work for you!

# ? Nov 16, 2013 21:24

Raskolnikov2089: Nov 3, 2006; Schizzy to the matic

Thanks!

I'm finally getting to the point where things are starting to click, so this is very helpful.

# ? Nov 17, 2013 01:15

IcedPee: Jan 11, 2008; Yarrrr! I be here to plunder the fun outta me workplace! Avast!

FREE DECAHEDRON!

This is a long shot, but does anyone have any experience with the Simile timeline control? I've been trying to get it working based on the tutorials, but it doesn't work at all for me, and I'm copy-pasting the drat code. There's a download for the standalone, but it doesn't work either.

One on their website works perfectly. I'm kind of having a huge :wtc:

moment over it.

# ? Nov 19, 2013 03:30

Maha: Dec 29, 2006; sapere aude

I know a little C++ and no Javascript, and I'm trying to improvise up a Greasemonkey userscript for a browser game. I need it to grab a string that changes daily from one domain and output it to a text field in another domain. I wanted to use document.getElementsByName to grab the string, but as far as I can tell it's not actually a named element. Is there any way to search for "Bonus Code: XXXXX" and store the XXXXX in a variable? Maybe something with regular expressions?

# ? Nov 20, 2013 08:35

The Insect Court: Nov 22, 2012; by FactsAreUseless

Maha posted:

I know a little C++ and no Javascript, and I'm trying to improvise up a Greasemonkey userscript for a browser game. I need it to grab a string that changes daily from one domain and output it to a text field in another domain. I wanted to use document.getElementsByName to grab the string, but as far as I can tell it's not actually a named element. Is there any way to search for "Bonus Code: XXXXX" and store the XXXXX in a variable? Maybe something with regular expressions?

element.innerHTML will contain all the HTML of the element and its descendants, you can run that through a regex. Less elegant than grabbing a single node in the document maybe, but it's less likely to break if ids get changed.

# ? Nov 20, 2013 14:07

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

I'm running into a weird problem. I have a text box and accompanying button. The user will type in a name and click the button to add it to multiple select below it.

I want to add the name to the select as selected so that every name in the select is always selected. I'm using select2 so that the selected options appear as little boxes and can be clicked on to remove (see the 2nd select on this page: http://fk.github.io/select2-bootstrap-css/)

I have it working for the first name you type in, but I can't get it to select any subsequent names in addition to the first.

JavaScript code:

 $('#Visitors').append("<option value='" + visitorLogin.toUpperCase() + "'>" + visitorLogin.toUpperCase() + "</option>");
                    $('#Visitors option').prop('selected', 'selected');
                    var allusers = $('#Visitors option').val();
                    console.log(allusers);
                    $('#Visitors').val(allusers).trigger("change");

EDIT: I was close! Solution below:

JavaScript code:

$('#Visitors').append("<option value='" + visitorLogin.toUpperCase() + "'>" + visitorLogin.toUpperCase() + "</option>");
                    var allOptions = $("#Visitors").children().map(function () { return $(this).val(); }).get();
                    $('#Visitors').val(allOptions).trigger("change");

Uziel fucked around with this message at 20:13 on Nov 20, 2013

# ? Nov 20, 2013 19:44

pliable: Sep 26, 2003; this is what u get for "180 x 180 avatars"

this is what u fucking get u bithc; Fun Shoe

I'm going to preface this by saying that I am a complete JS newbie...my forte are languages like Java, C, and Python.

With that being said, I cannot figure out for the life of me of how to get an image to animate according to a given interval (or more specifically, just loop and display a series of images according to a given time).

JavaScript code:

<img src="dancing_snoop/tmp-0.gif" id="SnoopCommander">

//relevant HTML above

var which=25;
function aniSnoop(){
   while(true){
      document.getElementById("SnoopCommander").src="dancing_snoop/tmp-" + which + ".gif";
      which=which+1;
      if(which > 57) {
         which=0;
      }
      setTimeout("aniSnoop", 1);
   }
}

I discovered that if I leave the while loop in there, the webpage will load forever due to JS's event driven nature :argh:

. Then again, the setTimeout/setInterval functions do not want to seem to work at all and call the aniSnoop function.

I'm absolutely baffled, this should be trivial but I spent 3 hours trying to figure out different functions, and even adding different event actions like onmouserollover or onclick to get the loving thing to cycle through, but it just won't happen

Any advice would be great, thanks!

# ? Nov 22, 2013 02:05

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

pliable posted:

I'm going to preface this by saying that I am a complete JS newbie...my forte are languages like Java, C, and Python.

With that being said, I cannot figure out for the life of me of how to get an image to animate according to a given interval (or more specifically, just loop and display a series of images according to a given time).
JavaScript code:
<img src="dancing_snoop/tmp-0.gif" id="SnoopCommander">

//relevant HTML above

var which=25;
function aniSnoop(){
   while(true){
      document.getElementById("SnoopCommander").src="dancing_snoop/tmp-" + which + ".gif";
      which=which+1;
      if(which > 57) {
         which=0;
      }
      setTimeout("aniSnoop", 1);
   }
}
I discovered that if I leave the while loop in there, the webpage will load forever due to JS's event driven nature . Then again, the setTimeout/setInterval functions do not want to seem to work at all and call the aniSnoop function.

I'm absolutely baffled, this should be trivial but I spent 3 hours trying to figure out different functions, and even adding different event actions like onmouserollover or onclick to get the loving thing to cycle through, but it just won't happen

Any advice would be great, thanks!

what's calling aniSnoop the first time? also, shouldn't the call be setTimeout('aniSnoop()'...

# ? Nov 22, 2013 02:39

pliable: Sep 26, 2003; this is what u get for "180 x 180 avatars"

this is what u fucking get u bithc; Fun Shoe

Bruegels Fuckbooks posted:

what's calling aniSnoop the first time?

Can you call it directly? Or do you have to surround it with <script> tags?

Also it seemed like it was called at least once anyway, because putting a console.log() statement within the function would print to the console....

Bruegels Fuckbooks posted:

also, shouldn't the call be setTimeout('aniSnoop()'...

I have no idea :iiam:

. Again, I know JS at a very, very basic level...

pliable fucked around with this message at 02:44 on Nov 22, 2013

# ? Nov 22, 2013 02:41

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

pliable posted:

Can you call it directly? Or do you have to surround it with <script> tags?

I would recommend putting it in an onload handler of your body element, just to simplify things.

# ? Nov 22, 2013 02:43

pliable: Sep 26, 2003; this is what u get for "180 x 180 avatars"

this is what u fucking get u bithc; Fun Shoe

Bruegels Fuckbooks posted:

I would recommend putting it in an onload handler of your body element, just to simplify things.

What's the proper syntax for that?

code:

<body onload='aniSnoop()'>

?

I'll try making these specific modifications, and see if it does anything...

# ? Nov 22, 2013 02:46

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

pliable posted:

What's the proper syntax for that?
code:
<body onload='aniSnoop()'>
?

I'll try making these specific modifications, and see if it does anything...

Here's a hint http://jsfiddle.net/BC8Yx/
(That url is to an image that changes every single time you access it.)

# ? Nov 22, 2013 03:06

pliable: Sep 26, 2003; this is what u get for "180 x 180 avatars"

this is what u fucking get u bithc; Fun Shoe

Bruegels Fuckbooks posted:

Here's a hint http://jsfiddle.net/BC8Yx/
(That url is to an image that changes every single time you access it.)

Sorry, I googled and forgot to respond, but looks like it's working now...thank you much for your help, looks like the problem was that while loop, not using setInterval, and the way it was being called in setInterval

# ? Nov 22, 2013 03:14

pliable: Sep 26, 2003; this is what u get for "180 x 180 avatars"

this is what u fucking get u bithc; Fun Shoe

Welp I'm confused all over again:

JavaScript code:

<script>
function aniSnoop(which, element){
   console.log(element);
   document.getElementById(element).src="dancing_snoop/tmp-" + which + ".gif";
   which=which+1;
   if(which > 57) { which=0; }
}
</script>
//various HTML poo poo here...also assume a table exists for the next line
<td><img src="dancing_snoop/tmp-0.gif" id="SnoopCommander"></td></tr>

<script>
var which_cmd=0;
var cmd=setInterval(function(){aniSnoop(which_cmd, 'SnoopCommander')},50);
</script>

I define my function at the top there, and I'm baffled because the function is executing perfectly (it's writing to the log with that console.log line multiple times), but now for some reason, the image isn't being updated on the webpage. What did I gently caress up?

EDIT: Bah god dammit nevermind, figured it out, that "which" variable isn't being updated...I was hoping JS would treat it like a pointer and update that var directly

pliable fucked around with this message at 05:15 on Nov 22, 2013

# ? Nov 22, 2013 05:12

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

pliable posted:

Welp I'm confused all over again:
JavaScript code:
<script>
function aniSnoop(which, element){
   console.log(element);
   document.getElementById(element).src="dancing_snoop/tmp-" + which + ".gif";
   which=which+1;
   if(which > 57) { which=0; }
}
</script>
//various HTML poo poo here...also assume a table exists for the next line
<td><img src="dancing_snoop/tmp-0.gif" id="SnoopCommander"></td></tr>

<script>
var which_cmd=0;
var cmd=setInterval(function(){aniSnoop(which_cmd, 'SnoopCommander')},50);
</script>
I define my function at the top there, and I'm baffled because the function is executing perfectly (it's writing to the log with that console.log line multiple times), but now for some reason, the image isn't being updated on the webpage. What did I gently caress up?

EDIT: Bah god dammit nevermind, figured it out, that "which" variable isn't being updated...I was hoping JS would treat it like a pointer and update that var directly

Yep, that's the fun of javascript Passing parameters doesn't work like that. In browsers that aren't IE, your parameter can be your third/fourth argument, etc. I'd recommend just declaring a variable outside the scope of the settimeout and incrementing it.

The way settimeout works in javascript is totally weird. Wait until you get to the part where you realize the parameter for milliseconds is only the minimum time it'll take a timeout to execute, not a guarantee.

# ? Nov 22, 2013 06:03

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

That's true for all timers, even sleep().

# ? Nov 22, 2013 06:21

pliable: Sep 26, 2003; this is what u get for "180 x 180 avatars"

this is what u fucking get u bithc; Fun Shoe

Bruegels Fuckbooks posted:

Yep, that's the fun of javascript Passing parameters doesn't work like that. In browsers that aren't IE, your parameter can be your third/fourth argument, etc. I'd recommend just declaring a variable outside the scope of the settimeout and incrementing it.

The way settimeout works in javascript is totally weird. Wait until you get to the part where you realize the parameter for milliseconds is only the minimum time it'll take a timeout to execute, not a guarantee.

That's pretty much what I ended up doing, and now I've finally got some sweet sweet Snoop Dogg dancing to my systems monitor :c00lbert:

. This project was even more fun because I'm coding in C to write out an html page, and the JS code lives within the arguments of fprintf's. So, coding in JS by modifying fprintf's, basically. It hurt my head a little

Thanks a ton for the help, I appreciate it

# ? Nov 22, 2013 06:58

spiritual bypass: Feb 19, 2008; Grimey Drawer

When it comes to animation, setTimeout is a bad habit. If you're targeting modern browsers, requestAnimationFrame is a much better option https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

What you're already doing probably works fine, but this is worth investigating when you want to take your animations to the next level.

# ? Nov 22, 2013 14:26

pliable: Sep 26, 2003; this is what u get for "180 x 180 avatars"

this is what u fucking get u bithc; Fun Shoe

rt4 posted:

When it comes to animation, setTimeout is a bad habit. If you're targeting modern browsers, requestAnimationFrame is a much better option https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

What you're already doing probably works fine, but this is worth investigating when you want to take your animations to the next level.

If/when I start doing animation in the future, I'll keep that in mind

. Thanks!

This was a very, very simple animation though, which needed to be synced to a local thread that's monitoring a process. I wouldn't even know where to begin with that while using requestAnimationFrame()...

# ? Nov 22, 2013 23:02

Diabolik900: Mar 28, 2007

Weird question here. I'm assuming I'm just missing some very basic programming or mathematical concept. I can go into more detail about what I'm trying to do if you guys need, but basically I'm wondering why this:

JavaScript code:

42212.27 + 2605.67 - 42212.27 - 2605.67

returns this:

JavaScript code:

-1.8189894035458565e-12

instead of 0? I have no idea what that e-12 even means.

# ? Nov 26, 2013 17:10

spiritual bypass: Feb 19, 2008; Grimey Drawer

"e-12" is scientific notation. It means "x10^-12"

What you'd expect from real arithmetic is zero, but what you're getting back instead is an extremely small number due to floating point arithmetic. Computers only represent integers as exact values; other numbers are stored as approximations that are close enough for most purposes.

http://en.wikipedia.org/wiki/IEEE_floating_point

# ? Nov 26, 2013 17:19

Diabolik900: Mar 28, 2007

Makes sense now. I had a feeling it was something along those lines, but I wasn't really sure exactly what was going on.

# ? Nov 26, 2013 17:25

Mrs. Wynand: Nov 23, 2002; DLT 4EVA

I have a weird question about DOM rendering: http://stackoverflow.com/questions/20251332/is-dom-rendering-guaranteed-to-block-during-a-single-synchronous-functions-ex

quote:

Is DOM rendering GUARANTEED to block during a single (synchronous) function's execution?

DOM blocking is something many people not familiar with JavaScript's strictly single-threaded synchronous execution model find out about the hard way, and it's usually just something we want to work around somehow (using timeouts, web-workers, etc). All well and good.

However, I would like to know if blocking of the actual user-visible rendering is something you can actually rely on. I'm 90% sure it is de facto the case in most browsers but I am hoping this isn't just a happily consistent accident. I can't seem to find any definitive statements from DOM specifications or even vendor documentation like MDM.

What worries me slightly is that while changes to the DOM are indeed not visible looking at the page, the internal DOM geometry (including CSS transforms and filters) does actually update during synchronous execution. For example:
JavaScript code:
console.log(element.getBoundingRect().width);
element.classList.add("scale-and-rotate");
console.log(element.getBoundingRect().width);
element.classList.remove("scale-and-rotate");
... will indeed report two different width values, though the page does not appear to flash. Synchronously waiting after the class is added (using a while loop) doesn't make the temporary changes visible either. Doing a Timeline trace in Chrome reveals that internally paint and re-paint is taking place just the same, which makes sense...

My concern is that, lacking a specific reason not, some browsers, like say, those dealing with underpowered mobile CPUs, may choose to actually reflect those internal calculations in the actual rendering, and thus will result in an ugly "flash" during such temporary operations. So, more concretely, what I'm asking is: Do they have a specific reason not to?

(If you are wondering why I care about this at all, I sometimes need to measure calculated dimensions using getBoundingRect for elements in a certain state to plan out spacing or animations or other such things, without actually putting them in that state or animating them first...)

# ? Nov 27, 2013 20:31

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

It's possible to do reflow, layout and calculation like that without doing an actual paint that touches pixels. That's what's going on: a reflow will happen, but pixels for the temporary state are not getting touched anywhere.

# ? Nov 27, 2013 21:01

Mrs. Wynand: Nov 23, 2002; DLT 4EVA

Right, I'm aware of that, but I'm asking how reliable that behaviour actually is. Someone managed to point out an exception in IE10 with scrollTo for example... (though I'm not sure if it does what he thinks it's doing - i'll have to fiddle with it later)

At this point the most likely answer to this is that it really is undefined behaviour - it happens to mostly work like that but may burn you one day.

# ? Nov 27, 2013 21:16

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

It's specified. Whether it's actually implemented properly in browsers is another question.

# ? Nov 27, 2013 21:29

Mrs. Wynand: Nov 23, 2002; DLT 4EVA

Completely different topic for you AngularJS wizards and architecture astronauts out there... It's the hot poo poo it promises to be and all but I'm still wrapping my way around doing things "properly". I would love some feedback on my design for this component. I sadly can't post code because the company is still touchy about things, hopefuly this won't be too abstract.

So the goal is to make a coverflow-esque listing browser (sufficiently different that off-the-shelf angular-coverflow is off the table ). I got it working doing horrible DOM poo poo inside the controller and a gazillion directives, but obviously that is the opposite of "proper". Tore it out and split it into its own generic, isolated, reusable module to set things right.

After adding the module as a dependency to your app module, you can use it as a directive like so:

HTML code:

<ul>
	<li ng-repeat="butt in butts" my-coverflow-browser="buttBrowser">{{butt.stuff}}</li>
</ul>

buttBrowser should point to an object that represents this browser instance. It can just be an empty Object or you can set some initial configuration details there. Each invocation of the myCoverflowBrowser directive will add the element it's applied to to that browser instance meaning you don't have to use it with ngRepeat (it will work just fine with a hard-coded list) and you can have multiple browsers on the page simply by pointing them to different browser instances in the scope. The browser instance will also be bound bi-directionally to the widget state - e.g. you can flip through a specific item in the browser by setting $scope.buttBrowser.currentIndex, and vice-versa you can get current item (that the use browsed to manually) using the same expression. It also provides some additional properties/methods you can use for styling or additional UI bits or whatever - for example:

HTML code:

You've looked at {{buttBrowser.prevCount()}} butts so far!

So even by this point I'm feeling weird about this because it's not really how thing are done in most AngularJS examples... usually you store this sort of state in a Service or in the directive controller shared by all directives, but I definitely need more than one "grouping" of browser items per page (so a single shared state either as a service or directive controller won't do). I could have made the directive apply to the containing element instead (the <ul>), but that would require some very tight integration with ngRepeat which seems... complicated (ngRepeat is one of the gnarlier directives on the inside). Maybe I was totally wrong here, I dunno, it just struck me as wrong. I'd also have to inject additional data (like prevCount) as magic variables into the scope (like ngRepeat's $index) which definitely strikes me as bad practice.

So that's the first weird thing. The next weird thing is that I really want an honest-to-god class that can keeps track of DOM elements and encapsulates each item in its own class that knows how to do the (rather hairy) math required for positioning and transforms and animations and all that.

My initial approach for this was to just stick DOM-related methods into the browser instance (the one coming from the scope) as "private" methods. So there exists a buttBrowser._currentElementRightEdge() and buttBrowser._offsetContainer which is used by the link function to do actual DOM things, but you (the consumer of the directive) should pretend they don't exist. This sort of made sense because those DOM-specific methods need access to the browser state anyway. There is also a buttBrowser.items which is an array of per-item metadata that also have public properties you may use in your templates, like maybe:

HTML code:

<ul>
	<li
		ng-repeat="butt in butts"
		my-coverflow-browser="buttBrowser"
		ng-class="buttBrowser.items[$index].position()">
		{{butt.stuff}}
	</li>
</ul>

position() would return a class name like "previous", "next" or "current". It's slightly awkward to use and possibly an argument for applying the directive to the container and injecting a magic $item variable into the scope, but I also don't think it will be used too often anyway, and if it really is a problem you could always inject it in each butt item in your controller or something.

Anyway, so the thing is both the browser and per-item metdata objects are growing a whole fuckload of "private" DOM specific methods because it turns out it makes far more sense to put basically all DOM wiring in them, including scope $watches because the logical grouping of the widget itself isn't really the elements we apply the directive to, but the browser instance. Which is fine, it just makes those scope-public meteadata objects kind of ridiculous.

Sooooo I was thinking, keep the scope-public/metadata objects pure (I really could use a better term for them - they seem very controller-esque to me so maybe like, "component controllers"?), and have a completely separate BrowserDOMManger class which will have an instance (per-browser) kept completely private to the directive. The instance would have a reference to the browser-controller but not the other way around, keeping everything nice and tidy and having better separation of concerns. (edit: turns out I still need to attach the manager as a "private" property of the controller of sorts - I was hoping to use the same $$hashKey mechanism angular itself uses to track object identities in a private registry, but that functionality is not public so I won't gently caress around with it).

This all looks like a sensible arrangement to me, but I worry about having needed to introduce somewhat unusual new "patterns" (component controllers and DOM managers) just to get things done. Actually I have seen a few mentions on StackOverflow from people coming up with something like component controllers, but nobody seems to have needed anything like DOM managers... IMO this is simpler than integrating with ngRepeat, it really is just the unusual-ness I'm worried about. Is there actually a reasonably simple and less alien way of doing the same thing that I missed, or is it just my widget being weird enough in needing so much positioning math closely tied to a complex state that it warrants a weird solution?

Excuse the walls of text. One day I will figure out a way to discuss architecture question in a more concise and less navel-gazing manner, but that day has not yet come.

Mrs. Wynand fucked around with this message at 00:20 on Nov 28, 2013

# ? Nov 27, 2013 22:41

Mrs. Wynand: Nov 23, 2002; DLT 4EVA

Suspicious Dish posted:

It's specified. Whether it's actually implemented properly in browsers is another question.

Yeah? Where? That's basically the thing I looked for but couldn't find.

I mean JS is fundamentally locking, sure, but you could hold to that simply by blocking off input or any other interaction during execution while still updating the visible layout. It really depends on the exact wording of the spec.

# ? Nov 27, 2013 22:45

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Mr. Wynand posted:

Yeah? Where? That's basically the thing I looked for but couldn't find.

I mean JS is fundamentally locking, sure, but you could hold to that simply by blocking off input or any other interaction during execution while still updating the visible layout. It really depends on the exact wording of the spec.

It's a complicated interaction of four different specs, as is the case with the web.

Basically, when the classList is mutated, that means that the element's selector set (the set of CSS selectors that match the element) change. The CSSOM/CSSOM-View spec mandates that methods that would return a computed value need to apply to the current selector set. That implies that the engine would need to relayout while getBoundingClientRect is going on..

# ? Nov 27, 2013 23:49

Mrs. Wynand: Nov 23, 2002; DLT 4EVA

Suspicious Dish posted:

It's a complicated interaction of four different specs, as is the case with the web.

Basically, when the classList is mutated, that means that the element's selector set (the set of CSS selectors that match the element) change. The CSSOM/CSSOM-View spec mandates that methods that would return a computed value need to apply to the current selector set. That implies that the engine would need to relayout while getBoundingClientRect is going on..

... buuut that say anything about not actually showing said layout. This is however the spec where this might live, if it exists at all though, so thanks for pointing me the right way.

# ? Nov 28, 2013 00:22

Suspicious Dish: Sep 24, 2011; 2020 is the year of linux on the desktop, bro; Fun Shoe

Oh, from that aspect, scripts are synchronous, and repaints will never preempt them (for instance, try making a for loop that does a lot of computation and you'll find the browser locks up — it can't repaint, no matter how much it wants to, and that's standard).

As long as you put it back before the script returns back to the main loop so it can repaint, the user will never ever see it.

# ? Nov 28, 2013 01:24

SelfOM: Jun 15, 2010

Does anyone have any experience with Marionette.js? I'm using CollectionView and am having trouble with _ensureElement, a function inherited from Backbone.View. ItemView calls it, but I'm not seeing where it is getting overwritten in CollectionView.

edit: whoops it doesn't at all.

SelfOM fucked around with this message at 19:00 on Dec 2, 2013

# ? Nov 28, 2013 01:37

peepsalot: Apr 24, 2007; ��PEEP THIS...
��BITCH!

Would anyone recommend any specific tutorials or ebook or whatever for starting to learn three.js?

# ? Nov 30, 2013 20:49

Tres Burritos: Sep 3, 2009

peepsalot posted:

Would anyone recommend any specific tutorials or ebook or whatever for starting to learn three.js?

The three.js community seems to be pretty big on "learning by example" and less on writing up tutorials. If you're the kind of person who learns new stuff through reading tutorial and books you may be out of luck. As far as "hello world" examples the ones linked on the main website are ... okay. (here and here)

However, where three.js really shines is in the examples included with the source. just take a looksee at the "examples" folder and pick something you're interested in. Most of the code isn't commented super well, but it is still very readable. A good starting point may be "webgl_geometries.html". Also check out the "controls" subfolder for camera usage help.

edit: also the github wiki has some good stuff on it

Tres Burritos fucked around with this message at 23:50 on Nov 30, 2013

# ? Nov 30, 2013 23:47

Pollyanna: Mar 5, 2005; Milk's on them.

Is there a simpler way to choose a random entry out of a list than going Math.floor(Math.random * len(list) ) or whatever?

# ? Dec 7, 2013 23:21

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 14:56

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

Pollyanna posted:

Is there a simpler way to choose a random entry out of a list than going Math.floor(Math.random * len(list) ) or whatever?

Not be default, though many JS frameworks have a convenience function that gives you a random integer in a given range, just because it's so helpful.

If you're not using a framework, writing a small utility function so you can just write randomInt(len(list)) instead of writing the whole Math.floor(... thing every time is probably a good idea.

# ? Dec 7, 2013 23:46

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »