Custom Mini-Profile Creator

[Brian]

.append() adds the HTML you specify inside the function to the end of the object you're using it on.

api.jquery.com/append/

You're seeing the line below "Investigator's Group" because you added <div class="add-to-group"></div> in that location inside the HTML component as well as inside your .append() function, so now you have two different instances of that div element in your mini-profile. Using $(this).append() adds the HTML you specify inside of the .append() function to the end of the mini-profile, not to the inside of any elements you specified inside the .append() function itself.

You need to use this JS instead:

$(this).find('.add-to-group').append('<a href="/user/' + pb.data('user').id + '/groups">Text goes here</a>');

[Alan Vende]

Nov 3, 2015 11:39:56 GMT -8 Brian said:

.append() adds the HTML you specify inside the function to the end of the object you're using it on.

api.jquery.com/append/

You're seeing the line below "Investigator's Group" because you added <div class="add-to-group"></div> in that location inside the HTML component as well as inside your .append() function, so now you have two different instances of that div element in your mini-profile. Using $(this).append() adds the HTML you specify inside of the .append() function to the end of the mini-profile, not to the inside of any elements you specified inside the .append() function itself.

You need to use this JS instead:

$(this).find('.add-to-group').append('<a href="/user/' + pb.data('user').id + '/groups">Text goes here</a>');

Thanks so much, Brian, that worked!

[Alan Vende]

Brian: I am trying to make another MP Variant on the board where the 

HTML

<!-- <div class="switch v8">
   $[user]
   <div class="para-glossary-note"><p>Do you not see a term in this glossary that should be here? If so, please send a message to the staff by clicking the button below:</p>
       <div class="para-glossary-button"><a href="/conversation/new/1,25,40?subject=Glossary%20of%20Terms&message=My%20question%20about%20the%20Glossary%20of%20Terms%20is:%20">Glossary of Terms Question</a></div>
   </div>
</div> -->
CSS

/* v8 CSS */
/* .mini-profile.mp-variant.v8 {
   background-color: #000000;
}
.mini-profile.mp-variant.v8 .staff_diamond {
   display: none;
}
.mini-profile.mp-variant.v8 .para-glossary-note {
   color: #FF9933;
   border: 1px solid #FFFFFF;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   box-shadow: 2px 2px 2px #FF9933;
   padding: 5px;
   margin-top: 15px;
   text-align: left;
}
.mini-profile.mp-variant.v8 .para-glossary-button {
   border: 1px solid #FFFFFF;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   background-color: #FFFFFF;
   padding: 3px;
   color: #000000;
   text-align: center;
   width: 100px;
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
}
.mini-profile.mp-variant.v8 .para-glossary-button:hover {
background-color: #FF9933;
   color: #FFFFFF;
   font-weight: bold;
   box-shadow: 2px 2px 2px #FFFFFF;
} */
JS

// v8 JS
// Show v8
// if($(this).parents('#post-2367, #post-2368').length)

// $(this).addClass('switched v8').children('.v8').show();

I have a question about the JS: If I wanted the variant to be on the posts in only one thread, would I use the above for the JS or would I use the JS I used for v6:

if(pb.data('page').thread){
if(pb.data('page').thread.board_id == 232 || pb.data('page').thread.board_id == 115 || pb.data('page').thread.board_id == 240){
$(this).addClass('switched v6').children('.v6').show();
}
}

Thanks so much!

[Brian]

In the if statement where you're comparing against the board IDs compare against the thread ID instead.

if(pb.data('page').thread.id == 123){

[Alan Vende]

So, for this, I would have this:

<!-- <div class="switch v8">
   $[user]
   <div class="para-glossary-note"><p>Do you not see a term in this glossary that should be here? If so, please send a message to the staff by clicking the button below:</p>
       <div class="para-glossary-button"><a href="/conversation/new/1,25,40?subject=Glossary%20of%20Terms&message=My%20question%20about%20the%20Glossary%20of%20Terms%20is:%20">Glossary of Terms Question</a></div>
   </div>
</div> -->

CSS

/* v8 CSS */
/* .mini-profile.mp-variant.v8 {
   background-color: #000000;
}
.mini-profile.mp-variant.v8 .staff_diamond {
   display: none;
}
.mini-profile.mp-variant.v8 .para-glossary-note {
   color: #FF9933;
   border: 1px solid #FFFFFF;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   box-shadow: 2px 2px 2px #FF9933;
   padding: 5px;
   margin-top: 15px;
   text-align: left;
}
.mini-profile.mp-variant.v8 .para-glossary-button {
   border: 1px solid #FFFFFF;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   background-color: #FFFFFF;
   padding: 3px;
   color: #000000;
   text-align: center;
   width: 100px;
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
}
.mini-profile.mp-variant.v8 .para-glossary-button:hover {
background-color: #FF9933;
   color: #FFFFFF;
   font-weight: bold;
   box-shadow: 2px 2px 2px #FFFFFF;
} */

JS

if(pb.data('page').thread){
if(pb.data('page').thread.id == 123){
$(this).addClass('switched v6').children('.v6').show();
}
}

---

EDIT: I put in the code and I got the following on the thread that I wanted to change from the others. I don't know why there are two MP variants on one, though:

[Brian]

Beats me. The Javascript you posted is referencing v6 instead of v8 if that's a factor at all.

I don't have access to my admin tools today to do your work for you so today you're on your own.

[Alan Vende]

Nov 9, 2015 9:51:25 GMT -8 Brian said:

Beats me. The Javascript you posted is referencing v6 instead of v8 if that's a factor at all.

I don't have access to my admin tools today to do your work for you so today you're on your own.

I saw that and fixed it, I thought. I was also on the dinosaur of a computer running the old version of FireFox, so that could have been a factor, too, maybe.

You don't have access to them? Did Patrick put you on time out or something?

Can you do my work for me tomorrow? I'm on back-log, Brian! I depend on you, man!

[Brian]

Nov 9, 2015 11:32:08 GMT -8 Alan Vende said:

Nov 9, 2015 9:51:25 GMT -8 Brian said:

Beats me. The Javascript you posted is referencing v6 instead of v8 if that's a factor at all.

I don't have access to my admin tools today to do your work for you so today you're on your own.

I saw that and fixed it, I thought. I was also on the dinosaur of a computer running the old version of FireFox, so that could have been a factor, too, maybe.

You don't have access to them? Did Patrick put you on time out or something?

Can you do my work for me tomorrow? I'm on back-log, Brian! I depend on you, man!

The internal network stuff that I'm dependent on to access those tools was inaccessible.

Technically you should be doing all of this yourself because every single question apart from initial instruction on how to use the user variable and the $(this) function has been a general jQuery coding question. If I had to help design profiles for every single person that used the plugin I would expire.

[Alan Vende]

Nov 9, 2015 14:39:24 GMT -8 Brian said:

Nov 9, 2015 11:32:08 GMT -8 Alan Vende said:

I saw that and fixed it, I thought. I was also on the dinosaur of a computer running the old version of FireFox, so that could have been a factor, too, maybe.

You don't have access to them? Did Patrick put you on time out or something?

Can you do my work for me tomorrow? I'm on back-log, Brian! I depend on you, man!

The internal network stuff that I'm dependent on to access those tools was inaccessible.

Technically you should be doing all of this yourself because every single question apart from initial instruction on how to use the user variable and the $(this) function has been a general jQuery coding question. If I had to help design profiles for every single person that used the plugin I would expire.

I didn't think the questions that I asked were considered design questions. They were questions on how to do something, although I'll give you that they were general jQuery questions.

I try to look on W3Schools.com, but I don't know how to 'adapt' it to PB, if that makes any sense, that's why I come to you. You're one of the coding gods I look up to!

I never realized how many people actually do use the Plugin, though, that's great that a lot of people do!

EDIT: One thing I don't understand (and this isn't a 'what does this code do' type of question), why, when you paste a code and alter it, it sometimes not work?

A few posts back, I wanted to make it so a mini-profile variant for my mini-profile showed on a board that already had a mini-profile variant assigned to it. I changed around the JS, but it shows both variants, as I showed in the screenshot above.

Why would something like that happen?

[Brian]

Nov 9, 2015 15:03:39 GMT -8 Alan Vende said:

I never realized how many people actually do use the Plugin, though, that's great that a lot of people do!

I actually have no idea how many people use the plugin. But having to debug multiple times every day from even 10 different people would kill me. It's incredibly time-consuming which is why in the Support Board all the threads from people asking how to change their design typically get moved to the Templates board unless they take less than 5 minutes of my time to deduce a solution for.

Nov 9, 2015 15:03:39 GMT -8 Alan Vende said:

EDIT: One thing I don't understand (and this isn't a 'what does this code do' type of question), why, when you paste a code and alter it, it sometimes not work?

A few posts back, I wanted to make it so a mini-profile variant for my mini-profile showed on a board that already had a mini-profile variant assigned to it. I changed around the JS, but it shows both variants, as I showed in the screenshot above.

Why would something like that happen?

Maybe your code is telling both of them to show? And by maybe I mean definitely.

Each of your if statements tells the page to add the .switched class to the mini-profile which automatically hides the default mini-profile. It also tells the mini-profile to make .v1 through .v8 show depending on which if statement it matched. If more than one if statement ended up matching it's going to end up making two different variants show since there's nothing in the code telling it to hide any of the other ones if another if statement resolves as true.

You need to either make your if statements more precise or add another line before the line that makes the variant show that tells it to execute $(this).find('.switch').hide(); so that every other variant is hidden before the one specified in your if statement is shown, after which it'll only show the variant relating to the last.

[Alan Vende]

Nov 9, 2015 15:55:07 GMT -8 Brian said:

Nov 9, 2015 15:03:39 GMT -8 Alan Vende said:

I never realized how many people actually do use the Plugin, though, that's great that a lot of people do!

I actually have no idea how many people use the plugin. But having to debug multiple times every day from even 10 different people would kill me. It's incredibly time-consuming which is why in the Support Board all the threads from people asking how to change their design typically get moved to the Templates board unless they take less than 5 minutes of my time to deduce a solution for.

Oh, I thought you as the Plugin author can see how many people use the Plugin? I thought that Plugin authors in general could see how many people are using the Plugins that they create... man, did I think wrong or what?

Now I know why some are moved and some are answered in the Support Board. I have wondered why some are answered and some are moved. Now I know!

Nov 9, 2015 15:55:07 GMT -8 Brian said:

Nov 9, 2015 15:03:39 GMT -8 Alan Vende said:

EDIT: One thing I don't understand (and this isn't a 'what does this code do' type of question), why, when you paste a code and alter it, it sometimes not work?

A few posts back, I wanted to make it so a mini-profile variant for my mini-profile showed on a board that already had a mini-profile variant assigned to it. I changed around the JS, but it shows both variants, as I showed in the screenshot above.

Why would something like that happen?

Maybe your code is telling both of them to show? And by maybe I mean definitely.

Each of your if statements tells the page to add the .switched class to the mini-profile which automatically hides the default mini-profile. It also tells the mini-profile to make .v1 through .v8 show depending on which if statement it matched. If more than one if statement ended up matching it's going to end up making two different variants show since there's nothing in the code telling it to hide any of the other ones if another if statement resolves as true.

You need to either make your if statements more precise or add another line before the line that makes the variant show that tells it to execute $(this).find('.switch').hide(); so that every other variant is hidden before the one specified in your if statement is shown, after which it'll only show the variant relating to the last.

By making them more precise, you mean like doing what I would do in CSS to make it so the CSS only showed up on one MP (e.g. .mini-profile.admin-mp .online)?

I assume that the latter is easier than the former in this situation?

For the latter, I assume the code would be this:

// Show v8
if(pb.data('page').thread){
if(pb.data('page').thread.id == 787){
$(this).find('.switch').hide();
$(this).addClass('switched v8').children('.v8').show();
}
}
EDIT: That worked! Thanks, Brian!

(The following question will probably shock you, but...) I don't understand, though, why this is the first time that I have had this type of situation. I have 8 variants, why is the eighth variant the one that is giving me this problem?

[Brian]

Nov 9, 2015 16:05:58 GMT -8 Alan Vende said:

Oh, I thought you as the Plugin author can see how many people use the Plugin? I thought that Plugin authors in general could see how many people are using the Plugins that they create... man, did I think wrong or what?

No, you're correct. But it only shows me how many times it's been installed or downloaded. Whether or not they're actively using it or have deleted it is unknown to me.

Nov 9, 2015 16:05:58 GMT -8 Alan Vende said:

(The following question will probably shock you, but...) I don't understand, though, why this is the first time that I have had this type of situation. I have 8 variants, why is the eighth variant the one that is giving me this problem?

Probably the first time two if statements have been true.

I dunno, man. It's your code.

[Alan Vende]

Nov 9, 2015 16:15:03 GMT -8 Brian said:

Nov 9, 2015 16:05:58 GMT -8 Alan Vende said:

Oh, I thought you as the Plugin author can see how many people use the Plugin? I thought that Plugin authors in general could see how many people are using the Plugins that they create... man, did I think wrong or what?

No, you're correct. But it only shows me how many times it's been installed or downloaded. Whether or not they're actively using it or have deleted it is unknown to me.

Good thing to know for when I venture into Plugin making again. Thanks!

Nov 9, 2015 16:15:03 GMT -8 Brian said:

Nov 9, 2015 16:05:58 GMT -8 Alan Vende said:

(The following question will probably shock you, but...) I don't understand, though, why this is the first time that I have had this type of situation. I have 8 variants, why is the eighth variant the one that is giving me this problem?

Probably the first time two if statements have been true.

I dunno, man. It's your code.

You're right, and I never noticed that they were true. I also didn't know that you could make the JS if statements more precise then they already are... I thought they were pretty precise to begin with!

One other thing (and yes, I have looked and looked and done my research and still can't find an answer ): I am attempting to put a hover over the button in .v8, which is the same situation in .v7, .v6 and the rest of the hovers that I have in the CSS: For some reason, and this worked before, but it doesn't work now (even with the !important declaration), don't hover with the color white (I'm using Hex value #FFFFFF). They worked a few weeks ago, but not now. And I didn't make any changes to the CSS that affects them in that regard. I wrote the CSS and then left it alone.

I'm just a mess of bugs! ...Where'd you put my bug spray, Brian!!?!??!?

[Brian]

Nov 9, 2015 16:23:07 GMT -8 Alan Vende said:

I am attempting to put a hover over the button in .v8, which is the same situation in .v7, .v6 and the rest of the hovers that I have in the CSS: For some reason, and this worked before, but it doesn't work now (even with the !important declaration), don't hover with the color white (I'm using Hex value #FFFFFF).

Links don't inherit the text color of their parent elements.

You need to change the text color of the link itself rather than the div element you have surrounding it if you want it to change upon hover.

[Alan Vende]

Nov 10, 2015 10:15:21 GMT -8 Brian said:

Nov 9, 2015 16:23:07 GMT -8 Alan Vende said:

I am attempting to put a hover over the button in .v8, which is the same situation in .v7, .v6 and the rest of the hovers that I have in the CSS: For some reason, and this worked before, but it doesn't work now (even with the !important declaration), don't hover with the color white (I'm using Hex value #FFFFFF).

Links don't inherit the text color of their parent elements.

You need to change the text color of the link itself rather than the div element you have surrounding it if you want it to change upon hover.

In the hover, I have this, which I thought did change the color:

.mini-profile.mp-variant.v8 .para-glossary-button:hover {
background-color: #FF9933;
color: #FFFFFF !important;
font-weight: bold;
box-shadow: 2px 2px 2px #FFFFFF;
}