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.

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

I guess this is the most relevant thread.
I'm making something in <canvas> and I have two images. I want one to rotate and the other to stay still. Trouble is I can either make it where they both rotate or neither do.

# ¿ Mar 16, 2011 15:53

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 13:35

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Lumpy posted:

Rotate the "still" image opposite the direction of the canvas context rotation

That's what I can't figure out how to do. Rotate seems to affect ALL or NONE, I can't rotate on a per object basis.

I found a different tutorial and recoded my wheel, but now that one won't work in IE with excanvas

# ¿ Mar 17, 2011 14:26

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Lumpy posted:

I'm on my phone all week, so no code, but what you do in essence:

Save context
Rotate and draw "rotated" image
Restore context
Draw "static" image
Refresh context

Here is an article that has some code and I found helpful http://visitmix.com/Articles/Translating-CANVAS-with-HTML5

Yeah I did that and it wouldn't work for some reason.
Coworker found a different demo using it and it works now. Maybe that article you posted will shed some light onto why what I did earlier didn't work.

# ¿ Mar 18, 2011 03:17

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Wheany posted:

This isn't strictly a Javascript question, but is there a way to find the margin of an element if it has not been assigned from javascript?

Example document and java script:
code:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Table</title>
    <style>
div
{
	margin:2px;
	background:pink;
}
    </style>
  </head>
  <body>
	<div id="fff">a</div>
  </body>
</html>
code:
document.getElementById("fff").style.margin
That Javascript snippet is an empty string.

You can find the height and border widths by using offsetHeight and clientHeight, but is there any such trick for margin? This is something that would need to work (only) in FF 3.6, if at all. (maintaining poo poo code)

You should be able to do that in jQuery with.css()

# ¿ Sep 28, 2011 16:43

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

How do I get a textarea to have a limit of 500 words? Anything I've found in my searching either counts characters, not words; or doesn't actually work when I copy/paste the code.

EDIT: Got IT

Found a code that counted 500 words (well spaces really, I don't care about a double space bug). But it then erased to 500 characters for some reason. So I took that code and fixed it.

The Merkinman fucked around with this message at 16:43 on Dec 15, 2011

# ¿ Dec 15, 2011 14:56

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

I've found Safari difficult to detect as it seems any Webkit browser also has "Safari" in its user agent.

If you're going to do this, I'd suggest a "not your browser?" link which then shows all the different browsers and their instructions.

User Agents really need to be cleaned up...

# ¿ Jun 14, 2012 14:43

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Gazpacho posted:

Well, keep in mind they got into this situation because of code that explicitly checked the browser ID, leading browser devs to spoof the browser ID for the sake of that short-sighted (or downright hostile) code. This is why the jQuery folks are working to eliminate the browser property.

I know, but nowadays I think (hope) that web developers would only use it for things like what Wheany wants, or metrics (X% use Y browser). No more "best viewed in IE with 800x600 or higher resolution.

If user agents are just going to include the same strings and spoof each other, then what's the point of having them at all?

# ¿ Jun 15, 2012 15:08

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

But with HTTP2 you don't need to concatenate so Webpack is useless now.

# ¿ Jul 12, 2017 04:26

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

LifeLynx posted:

I want to do something incredibly simple and commonplace, but I can't find an answer for it. I want to animate (fade-in and up) when an element would scroll into view. I can't find a vanilla JS or even jQuery answer for this, but maybe I'm trying to reinvent the wheel here? Is there a script anyone can recommend to do this fancy animate when scroll into view stuff with minimal bloat?

I'd really just use JavaScript (here is a jquery version, or a javascript version) to add a CSS class. Then use CSS transistions to fade-in up.
Something like

code:

.animatingElement{
opacity:0;
transform:translateY(3rem);
transition:opacity .5s, transform .5s;
}
.animatingElement.show{
opacity:1;
transform:translateY(0);
}

# ¿ Jun 6, 2018 14:58

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Saoshyant posted:

Anyone familiar with Angular? I was trying to help a student working with it and, boy howdy, am I not experienced with this framework enough to figure out what we are doing wrong here.

So, we get all content dynamically from a backend API. This works great up to a point. The main menu, for instance, is getting everything generated fine, but when we access the routerLink for a topic from this menu, on the first time it activates what's on ngOnInit and loads the data correctly (there's an Angular service call here, which gets the data from an Observable, which I gather is the correct way to do this), but after that, every other click on the menu does nothing even though the URL parameters change in the browser. ngOnInit is only called once and never again after the first click in the menu, even though we are accessing different pages in this route.

My assumption is that ngOnInit is not supposed to be used in this way, then. The Angular tutorials I found don't seem to point out what we should be doing instead though, and what few StackOverflow answers I found were people hacking and hammering things around this limitation.

You might have better luck in the Modern Front-end Development thread, but I'll put in my two cents.

If the URL parameters are changing, you need to subscribe to said changes. ngOnIt only fires once, so that's why no future clicks are doing anything. this should be a quick enough explanation. Whatever you want to happen when the menu is clicked, would go in place of the console.log(param)

# ¿ Aug 3, 2021 15:30

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Saoshyant posted:

The desired behavior is exactly what you described: responding to the routing data changing. There's a main menu being loaded in the app.component. That main menu routes to different components depending on what kind of subsection is listed, and every one of those components makes a call to a service (which calls a backend API to collect the data). Clicking once on a link like /dongs/Dong-1 works the first time, but if the user clicks on /dongs/Dong-2 nothing happens because the service call is in ngOnInit and it only fires once (and our unfamiliarity with the framework just got us as far as, "this is probably not the right way to do this").

I'll review the onchanges hooks stuff you linked and see if I can take it from here.

Edit: actually, this may be right answer. That pipe/subscribe over the queryParamMap may be the missing piece of the puzzle on how this stuff should work. Gonna test it out.

What I posted was for query parameters /?dong=1, /?dong=2. What you are showing, /dongs/Dong-1, /dongs/Dong-2 are route changes, which are different but similar

The Merkinman fucked around with this message at 18:03 on Aug 3, 2021

# ¿ Aug 3, 2021 15:56

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Video Nasty posted:

Typescript is way more fun but I'm stuck in Angular 1.5 land at my job and I make do.

I'm sure you know this, but AngularJS is EOL

# ¿ Feb 19, 2022 13:55

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Sab669 posted:

I'm not even sure how to articulate this, but basically I'm wondering if it's possible to "instantiate" an Angular component from a string? Like if I have a component:
code:
@Component({
  selector: 'app-title-page',
  templateUrl: './title-page.component.html',
  styleUrls: ['./title-page.component.css']
})
Then in my main app.component.ts I declare this variable:
code:
public titleComponent: string = "<app-title-page>";
And in app.component.html I have:
code:
<div>
	{{titleComponent}}
</div>
But that just prints out the literal string.

I've also tried:
code:
<div [innerHTML]="titleComponent"></div>
But this just gives me a blank page

I feel like this has to be possible but my GoogleFu is failing me

Do you mean you want to have more control over dynamically loading a component?
If so, look at this example, using createComponent

# ¿ May 12, 2022 19:18

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Tea Bone posted:

I've created a PWA with react.

I've installed the app to my phone (android) but as soon as the splash screen clears it launches the app in chrome rather than stand-alone. I've tried it in an android emulator and everything works great there. I also have other PWAs on my phone and they work as expected so I suspect it's some kind of configuration I've missed?

I'm not familiar with React, but what does the manifest.json look like?

# ¿ May 17, 2022 12:44

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Tea Bone posted:

Thanks, it's just the standard manifest that's generated by create-react-app:

code:

{
  "short_name": "MyPwa",
  "name": "MyPwa",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

It's hosted somewhere via https right? Can you run it through Google Lighthouse, specifically the PWA section, to see if something is missing there?

# ¿ May 17, 2022 13:19

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

I was playing around with making a calendar, and I'm very confused about getDay(). I know 0 = Sun, it's not that.
Why is it putting in an ISO string makes the value 1 less than it should be?

JavaScript code:

const never = new Date('September 11, 2001').getDay();
// returns 2, which is Tuesday, which is correct
const forget = new Date('2001-09-11').getDay();
// returns 1 ???

# ¿ Mar 19, 2024 18:24

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

MrMoo posted:

lol, use Luxon DateTime for anything more than fetching the current time.

REF: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

The long form date is in the local timezone, the short form date is in UTC. NodeJS CLI is good for debugging this.
code:
> new Date('September 11, 2001')
2001-09-11T04:00:00.000Z
> new Date('2001-09-11')
2001-09-11T00:00:00.000Z

So because a time zone isn't defined, it's using a time zone where September 11, 2001 was a Monday? OK :confused:

# ¿ Mar 19, 2024 19:38

Adbot: ADBOT LOVES YOU

# ¿ Apr 29, 2024 13:35

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Sab669 posted:

Dumb Angular Question - and I'm phone posting so the code will be minimal, sorry.

Essentially what I'm trying to do is dynamically loop over a collection of data and print out an HTML table with different types of user input controls.

That all works well and good, but now a new requirement came in to also optionally show some checkbox next to the input control.
code:
<td *ngFor="let cell of row.td">
  <div [ngSwitch]="cell.inputType"
    [style.width.%]="cell.canBeNA ?? 80">

    <span *ngSwitchCase="'Currency'">
      
    </span>

    
  </div>

  <div *ngIf="cell.canBeNA" style="width: 20%">
    
  </div>
</td>
I have that dynamically being added in easily enough, but the problem is my first div takes the full width of the TD and then the checkbox appears on a new line beneath it. We'd like to instead shrink the input so the textbox and the checkbox are on the same line.

When I inspect the HTML while running my app, that first div inside the TD doesn't have a "style: width" attached at all. And I have no idea why, because "cell.canBeNA" evaluates just fine when deciding to show my checkbox Any idea what stupid thing I must be overlooking?

Can I have a type for row.td?
What is canBeNA? a boolean? is it an optional boolean?
right now cell.canBeNA ?? 80 will return either the value of cell.canBeNA or 80, which I don't think is what you want.

Also if you're using Angular 17, you should use the Control Flow syntax, not that it's required to solve your issue.

EDIT: I'm going to assume you should replace [style.width.%]="cell.canBeNA ?? 80" with something more like [ngStyle]="{'width' : cell.canBeNA ? '80%' : null}"

The Merkinman fucked around with this message at 16:04 on Apr 9, 2024

# ¿ Apr 9, 2024 16:01

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