Icon stacking problem

Dashboard
1

Sorry folks,

I've done this before on another "icon" and it works, but now I am trying to do it again, A-N-D, it isn't playing nice.

This is the line in the node:

   msg = { payload: '<span class="fa-stack "><font color = "lime" i class="fa fa-2x fa-bullseye fa-stack-1x"></i><font color = "black" i class="fa fa-ban fa-stack-2x"></i></span>'}
return msg;

It is sort of annoying with that length line.
Reading the Font Awsome web page (font awsome - go down to stacking they show examples but I am missing something.

This is what I get on my screen when I do that code:
(See inside red area)

Screenshot%20from%202018-12-26%2015-49-54
Screenshot from 2018-12-26 15-49-54.png1360×768 61 KB

So, on the other web page, the code can be split onto multiple lines.
I don't know how to do that in a function node.

No big, but that's the limit of what I know at this point.

Thanks.

2

Look at the line you show and look at the ‘i’ and tell me what is wrong with it

3

Yeah, I think I was missing a < in it.

It should read:

   msg = { payload: '<span class="fa-stack "><font color = "lime" <i class="fa fa-bullseye fa-stack-2x"></i><font color = "black" <i class="fa fa-ban fa-stack-1x"></i><font color = "black" <i class="fa fa-ban fa-rotate-90 fa-stack-1x"></i></span>'}

Yes?

Been pulling my hair out on it.

Now I'm stuck with another STUPID problem.

Thanks.

4

use the developer tools in your browser which should list errors in the html.

5

Thanks....

I am really tempted to do that.

But to me that just seems another "can of worms" I shall open.

I get that they are tools and will / SHOULD help me, and I am going to have to go through hard times to get to know them.

It is just as I see it I don't know anything about them either.

Yeah, ok, analogy:
It's better to learn to use a hammer than push nails in with your hand.

But I fear I am going to do a lot of hitting my fingers with the hammer along the way.
Sure it is part of learning, but I would like .....

Honestly: I don't know what I want. Brian is not working too good just now.

6

Go back and review it again you correctly added the '<' but what did you forget before it?

7

Could it be:

msg = { payload: '<span class="fa-stack ">

The space after the af-stack and the closing of the " ?

8

keep looking and remember each < has to have a closing >

9

To cut to the chase... you have some < and > missing. Once they have been added back in it works perfectly.

You mentioned you don't like the long line. As this is a JavaScript String, you can break it up into multiple strings, each on its own line. As its Christmas, I've added in your missing > and closing </font> tags for you. If you compare this with what you had, I hope you'll see what was missing.

 msg = { payload: '<span class="fa-stack ">' +
                  '<font color = "lime"><i class="fa fa-2x fa-bullseye fa-stack-1x"></i></font>' +
                  '<font color = "black"><i class="fa fa-ban fa-stack-2x"></i></font>' +
                  '</span>'}
return msg;
3 Likes
10

Thanks Nick for that.

(And zenofmud.)

A lot of that was (to me) last night.

I have since been to bed, slept and got up.

Ok, I found the missing > in the line.

Please indulge me here because I'm confused with the story I saw happen (and just happen again) with this problem.

Let's start at "square 1":
The original code:

   msg = { payload: '<span class="fa-stack "><font color = "lime" <i class="fa fa-bullseye fa-stack-2x"></i><font color = "black" <i class="fa fa-ban fa-stack-1x"></i><font color = "black" <i class="fa fa-ban fa-rotate-90 fa-stack-1x"></i></span>'}

And I will now drill down to the mentioned part/s:
The missing >

#1:

<i class="fa fa-bullseye

#2:

<i class="fa fa-ban

#3:

<i class="fa fa-ban fa-rotate-90

And to what was said:

Yeah, ok. That DID become an issue while I was looking at the line and adding all the extra stuff.

I won't upload the newer block of code because it is being re-written yet again with a better structre than I could muster last night.

But suffice to say it was working more than it wasn't.

Reading what was said, I added all the extra > after the <i and lone i I found.

Now it doesn't work at all.
Now, when I send an input, rather than getting the icon, I get the text.
But that's doing it how I read it should be:

ie:

    msg = { payload: '<span class="fa-stack "><font color = "lime" <i> class="fa fa-bullseye fa-stack-2x"></i><font color = "black" <i> class="fa fa-ban fa-stack-1x"></i><font color = "black" <i> class="fa fa-ban fa-rotate-90 fa-stack-1x"></i></span>'}

Stupidly I didn't keep the "better working" version, so I am now ....... going to have to look at it all again.

No problem.

As I said, I am re-writing the entire function block/node. Badly done last night with how it did things.

Now, Nick said:

But then I see:

<font color = "lime"><i class="fa fa-2x fa-bullseye

Sorry. I am now REALLY confused.

11

Compare that to the code that Nick posted.

Not the specific classes but the syntax. Look at every character. With computers the devil is in the detail.

12

I have given you the exact answer. If what you have doesn't work, compare it to the working answer I've given you and spot the difference.

13

Nick,

I am doing that.

I was MERELY pointing out my confusion.

Am working on it now.

Now that you have shown me how to split the lines, it is going to be a lot easier.

Thanks.

14

I think, and correct me if I am wrong, that part of the problem may be that you don't understand what, for example,

<i class="fa fa-bullseye fa-stack-2x"></i>

actually means, but are just taking what others have supplied and attempting to tweak it to do what want. If I am right then please find a basic tutorial on html so that you understand the basic syntax. Having done that then if you see something like

<i> class="fa fa-bullseye fa-stack-2x"></i>

the fact that there is an error will immediately leap out and smack you in the face, so you will avoid typos of that and similar types.

Oh, and PLEASE stop dotting your posts with caps, it makes it disturbing to read. Thanks.

15

It wasn't clear if you were still asking a question or not. Glad you got it working and hopefully you can see what was different in the working answer to what you had for the future.

16

Colin.

Thanks.

May I ask what you mean by:
dotting you posts with caps?

You are probably right with your guess of what is confusing me.

I am torn between "not reinventing the wheel" and doing it all myself.

I cut and paste as much as possible because I know that typos are problematic.
So I do that to reduce the possibility of me making a typo.

Seems this is not the best solution.
But I have to get through the learning part.

17

Putting random words in capital letters, though actually in this thread these have not been as prevalent as in some of your posts. There really is no need for words in caps. If you want to emphasise something then italics are just as effective and not so disturbing to read. Though even italics should be used judiciously, otherwise wolves and shouting become relevant. This is all just my opinion of course, perhaps it is just me.

I agree, this technique is not the best. There is nothing wrong with cut and paste to benefit from input from others, but if you don't understand what you are cutting and pasting then there are likely to be problems. As I suggested, a day spent working through an html tutorial might be very beneficial.

18

Colin,

I think (hope) I am getting the "feel" (not in caps) for the forum better.

Though you call them random, I do it to highlight the word.

You say italics is better. I am maybe starting to agree, or use alternative methods.

I was not doing it to be disrespectful or upset anyone. It was merely the only/best way I know to single out the word of interest.

I have just recently joined another forum and fear/feel I am going to have a lot of settling in there to do as well.

Anyway, I shall get back to coding as I want to get this "idea" put to bed.
Alas while doing this, another critter has arisen from the depths and I shall have to spend time tracking, trapping and resolving that problem too.