Code to Output a Number

[Alan Vende]

Hello!

I've searched W3Schools' JS and JQuery and such for this to no avail. I'm guessing it would be a string, but I didn't want to do it and somehow break something (god forbid if I break my plugin... lol...)

I was wondering if it was possible to code something that would then output a number... such as:

1+1+1+1+1+1+1+1+1+1+1 = 11 --- and the 11 is what is output wherever the code is placed.

So, it potentially does the Excel formula of =SUM(Number₁,Number₂). I wanted to be able to put the sum of the number of affiliates into my plugin, but I was wondering if this was also able to be used for other purposes as well, which is another reason why I'm putting it here, as I don't want it strictly for plugins.

Thanks so much for your help!

[Bennett 🚀]

Are you wanting to have someone input the string "1+1+1+1.."? If so you could split the string by the pluses (str.split("+"))) and loop through and add them together yourself.
var nums= "1+1+1+1+1+1+1+1";
function string_sum(str){
var pieces = str.split("+");
var sum =0;
for(var num=0;num<pieces.length;num++){
   sum+= parseInt(pieces[num]);
}
return sum;
}
console.log(string_sum(nums));

[Alan Vende]

I wasn't really sure how to word it, so I worded it like that. I have a plugin that I'm working on for my forum (a custom affiliate bar, if you will,) and I wanted to have the total number of affiliates displayed on the bar.

In hindsight, I guess that that was a bad example for the purpose I intended. I just wasn't sure how else to say it and be able to get my point across.

My apologies, Bennett 🚀.

[Peter]

Alan Vende,

If the affiliates are stored in array (e.g. autoform), then just get the length of the array and add that to the title.

[Alan Vende]

Thanks, Peter . The affiliates are not in an autoform. I coded them into the Plugin's Footer. I guess that that's more complicated than putting them into an autoform. I didn't want to have a UI, but I guess that that would be easier in the long run, wouldn't it?

Would this be an example of it, with the Aff1 - 4 being the codes of the affiliates themselves? Or would I put the ID of the autoform into the [""]?

An example of what I mean:

var affiliates = ["Aff1", "Aff2", "Aff3", "Aff4"];
fruits.length;

Sorry, I just want to make sure that I'm fully understanding/comprehending what you're saying. I don't mean to sound dumb. Although, when it comes to JS, I kind of am...

[Bennett 🚀]

iAffiliate.pbp (1.94 KB)

Alan Vende, you may want to check out my affiliate plugin; it uses the auto-form and might be helpful in answering some questions on how to do some things.

[Peter]

Feb 21, 2017 10:43:16 GMT -8 Alan Vende said:

Thanks, Peter . The affiliates are not in an autoform. I coded them into the Plugin's Footer. I guess that that's more complicated than putting them into an autoform. I didn't want to have a UI, but I guess that that would be easier in the long run, wouldn't it?

Would this be an example of it, with the Aff1 - 4 being the codes of the affiliates themselves? Or would I put the ID of the autoform into the [""]?

An example of what I mean:

var affiliates = ["Aff1", "Aff2", "Aff3", "Aff4"];
fruits.length;

Sorry, I just want to make sure that I'm fully understanding/comprehending what you're saying. I don't mean to sound dumb. Although, when it comes to JS, I kind of am...

Both ways can be considered easy depending on how you look it.  Chances are, it's something you won't really be updating that often right?  If so, then maybe hard code the total into the title for now.

I think if you showed us what you have currently, we can give you a better explanation of how you could achieve it.  I am assuming it is something you want to do yourself so you can learn?

Don't ever be sorry for not knowing something / or understanding.  Chances are, I didn't do a very good job explaining

But yes, provide us with something you have so far, then we can give you some better advice on how to achieve it.

[Alan Vende]

Feb 21, 2017 11:24:36 GMT -8 Bennett 🚀 said:

Alan Vende , you may want to check out my affiliate plugin; it uses the auto-form and might be helpful in answering some questions on how to do some things.

Thanks for allowing me to look at your plugin, Bennett 🚀 . I'm so new to Javascript that it kind of overwhelmed me. I saw the autoform, but I wasn't sure which piece of JS was targeting it and such. I found an ID that said paid_aff_count. Is that the piece that outputs a number in your plugin? I cannot find the JS that corresponds with it -- unless I'm completely missing something.

Feb 21, 2017 12:44:21 GMT -8 Peter said:

Feb 21, 2017 10:43:16 GMT -8 Alan Vende said:

Thanks, Peter . The affiliates are not in an autoform. I coded them into the Plugin's Footer. I guess that that's more complicated than putting them into an autoform. I didn't want to have a UI, but I guess that that would be easier in the long run, wouldn't it?

Would this be an example of it, with the Aff1 - 4 being the codes of the affiliates themselves? Or would I put the ID of the autoform into the [""]?

An example of what I mean:

var affiliates = ["Aff1", "Aff2", "Aff3", "Aff4"];
fruits.length;

Sorry, I just want to make sure that I'm fully understanding/comprehending what you're saying. I don't mean to sound dumb. Although, when it comes to JS, I kind of am...

Both ways can be considered easy depending on how you look it.  Chances are, it's something you won't really be updating that often right?  If so, then maybe hard code the total into the title for now.

I think if you showed us what you have currently, we can give you a better explanation of how you could achieve it.  I am assuming it is something you want to do yourself so you can learn?

Don't ever be sorry for not knowing something / or understanding.  Chances are, I didn't do a very good job explaining

But yes, provide us with something you have so far, then we can give you some better advice on how to achieve it.

The way that I have the plugin coded, I have to go into the Build every time we get a new affiliate so I can put it into the affiliate bar. I won't be updating it in the sense of bugs or anything because, at the moment, there are none - and when I get it working the way that I want it to, I most likely won't be adding anymore features to it (or is updating it in terms of features what you meant?)

It is something I want to learn. I know HTML and CSS like the back of my hand, but JS is still new to me. I've never been able to learn it, no matter how hard I try -- it's just something that doesn't click in my brain for some reason. I don't understand why... I want to do it myself, but if I saw code and you asked me, "What does this do?" or "Which piece does what?" I wouldn't be able to tell you -- that's how new I am to it...

My biggest problem is I know what I want to say, but when I put it down on paper, in a post in a thread, or in a PM, people sometimes have no idea what I'm talking about.

I"m attempting to move some CSS around so there's some form of "organization," if you could call it that, within the plugin. I'm attempting to make it so line one is part of the title, and the final line is the bottom of the plugin, if that makes sense, so please bare with me if it looks like it's disorganized -- I'm working on it.

The following is the code for the hover where I'm wanting the affiliate number to go:

<div class="title-bar pp-affiliate-title"><div class="aff-dropdown">
 <span><h2>Psychic Psyghtings' Affiliates &amp; Friends</h2></span>
 <div class="aff-dropdown-content">
     <p><strong>Number of Affiliates:</strong> 11</p>
 </div>
</div>
   </div>
(The number 11 is just a placeholder for the actual number of affiliates. I put it there for testing purposes to see what it would look like with the number there.)

The CSS that I use to beautify it is as follows:

.aff-dropdown {
   position: relative;
   display: inline-block;
}

.aff-dropdown-content {
   display: none;
   position: relative;
   left: -25px;
   background-color: #f9f9f9;
   border: 1px solid #000000;
   border-radius: 0px 0px 10px 10px;
   width: 300px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   padding: 12px 16px;
   z-index: 1;
}

.aff-dropdown:hover .aff-dropdown-content {
   display: block;
}
Could you please explain to me how to hard code something into the plugin? I've heard people say that they can hard code things such as <br /> into a plugin so that it will separate text and such.

I know that I should probably read about this, but I've noticed that reading really doesn't "do it" for me. I learn better by talking to people and doing. I learn better by actually making mistakes and such on, by learning with someone who knows what they're doing. Does that make sense?

[Peter]

Alan Vende ,

Ok, so what I understand so far is that you are manually editing the plugin (e.g. adding a new affiliate to the HTML), and then you are manually updating the number of affiliates (which is 11 at the moment).

So hard coding basically means it's fixed. In that you can't update the affiliate total without modifying the actual code. So to me, it doesn't make too much sense changing this unless you switch over to using an auto form (each entry would be an affiliate).

However, if you really do want it to auto update the title, then we could use a little JavaScript below the HTML that will basically count all the affiliate links and then add that number into the title.

Here is an example of one way to do it.


<div id="affiliate-wrapper">
<div><strong>Total Affiliates:</strong> <span id="total-affiliates">0</span></div>
<span><a href="http://proboards.com">Affiliate #1</a></span> |
<span><a href="http://proboards.com">Affiliate #2</a></span> |
<span><a href="http://proboards.com">Affiliate #3</a></span> |
<span><a href="http://proboards.com">Affiliate #4</a></span>
</div>

<script>

var wrapper = document.getElementById("affiliate-wrapper");
var total_affiliates = wrapper.getElementsByTagName("a").length;

document.getElementById("total-affiliates").textContent = total_affiliates;
</script>



So this isn't meant to be copy and pasted, it is for you too look at and get an idea of how you can modify your HTML and write the JavaScript.

You will need to change the number 11 to an element with an ID so that the JavaScript knows where to place the total affiliates number. 

All the script is doing, is looking for all anchor (aka "a") elements inside the affiliate wrapper, and then updating the element that will hold the total. 

jQuery can condense all that into 1 line

$("#total-affiliates").text($("#affiliate-wrapper a").length);

I purposely did not use jQuery for this so that you could search the MDN for the methods I used, as jQuery wraps around them.

[Alan Vende]

Peter ,

Yes, that is correct -- I'm manually editing the number of affiliates every time I add an affiliate into the bar.

I hope you don't mind that I borrowed your span ID. I was going to use it anyway as the ID. I realized after I typed it into the plugin that it was the same as the one you used in the example. I'm like an accountant and the accounting equation -- I have no imagination for what I name things... -- my finance professor was an accountant and he said that as a joke one day in class that accountants have no imagination with their naming structure and formulas and such. Another example is the Break Even Quantity equation. What do you think that does? If you thought that it tells a company how many units they have to sell in order to not make or lose a profit or, break even, you would be right! See, no imagination!

I don't know what I was thinking when I coded the plugin to where it was all in the Components side of things and not having a UI. I guess I thought it would be easier to code it into the plugin instead of having a UI, especially since I already had the code for the affiliates lying around from a previous plugin I was using and I thought it would be easier to code the whole plugin instead of reinventing the wheel and basically recoding the plugin so it had an autoform in it. (Making more work for myself in the long run by doing it this way than just recoding it, I guess -- although I've never really used an autoform before and don't know how to make the plugin check every affiliate to have it do the total number...

You said that the JavaScript goes under the HTML code. You can put JS into a plugin's HTML element? I didn't think that that was possible, but I do see that you have the JS between <script></script> tags, so that's how you can put it into the HTML element? Also, I'm just guessing because of my prior HTML and CSS knowledge, but since the affiliate codes have images and such, those will still show even if there is JS under them to take their total? I ask because I noticed that your example is just links with no images or anything.

Also, this is probably a noob question, but would it be okay to use a class? Or should an ID be used here? I'm guessing it should be an ID because of the document.getElementById("affiliate-wrapper"); line in the JS, I just wanted to make sure.

Could you also show me an example of how to code an autoform in case I do decide to go that route -- if I cannot get this to wrk and all? I just never used one of those before, partly because I was afraid of writing the JavaScript in the backend and inadvertently breaking the plugin or doing something that would affect ProBoards as a whole/inadvertently go against the Developer Guidelines. Yes, my brain things of the impossible like that sometimes -- it's very much a pain in the neck...

Also, I have other elements in the plugin that have an a tag -- such as the link that goes with the "
Did your affiliate code change?" button in the bottom right -- which is why I asked in a previous thread about how to make it so the button would have an on-click alert, kind of like the pieces in your Kitchen Sink plugin. I attempted to search around for an alert box code to see how it worked and whatnot, but every time I attempted to use/write one, it would show up as a box that comes up on a Mac, it wouldn't show the PB-oriented alert box with the title and content like the ones that you have in the plugin. Since I don't think I can put a class on the a tags and make this work the way I want it to, I think I will have to change the other tag first to be an alert box, wouldn't I?

Another also: I have the span id away from the spans, I'm guessing that it would still work, but I just wanted to ask first. The following is how I have the code so far:

<div id="affiliate-wrapper" class="affiliatecodes">
<marquee scrollamount="3" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 2, 0);">
<ul class="affiliateaffcodes">
<li><a href="http://support.proboards.com" target="_blank" title="Proboards Support"><img src="http://images.proboards.com/hotlink/forum_blue_88x31.png" alt="Proboards Support"></a></li>&nbsp;

<li><a href="http://maisonduviolette.proboards.com/" target="_blank" title="Maison du Violette"><img src="http://storage.proboards.com/2837905/i/YvLNTzdUKr_Amhw79v0A.jpg" alt="Maison du Violette" /></a></li>&nbsp;

<li><a href="http://army83.forums.net/" target="_blank" title="aRMY83 and Staff™"><img src="http://i1043./b436/army83_2010/aRMY83Staff3.gif" width="88" height="31" border="0" alt="aRMY83 and Staff™" /></a></li>&nbsp;

<li><a href="http://allkindsofeverything.boards.net/" target="_blank" title="All Kinds of Everything"><img src="http://i87./k156/Shaliza_2006/AKOE%20Forum%20Icons/144393513487842-1.jpeg" alt="All Kinds of Everything" border="0" width="88px" height="31px" /></a></li>&nbsp;

<li><a href="http://redhorizon.freeforums.net/" target="_blank" title="Alraënia"><img src="http://i.imgur.com/lKrhxpW.png" alt="Alraënia" border="0" width="88px" height="31px" /></a></li>&nbsp;

<li><a href="http://avatarascent.boards.net/" target="_blank" title="Avatar Ascent"><img src="http://i.imgur.com/NaDdixQ.png" alt="Avatar Ascent" border="0" width="88px" height="31px" /></a></li>&nbsp;

<li><a href="http://reflection38.proboards.com/" target="_blank" title="Reflection - Anime and Game "><img src="http://i1359./q800/Haruko_818/Image9_zpsyaegfbmm.png" alt="Reflection - Anime and Game " border="0" width="88px" height="31px" /></a></li>&nbsp;

<li><a href="http://promoforum.boards.net" title="PromoForum" target="_blank"><img src="http://storage.proboards.com/6344232/i/kg_QQFuiLZq3pAmHLY_e.png" alt="PromoForum.net" width="88px" height="31px" border="0"></a></li>&nbsp;

<li><a href="http://promisedisland.freeforums.net/"><img src="http://i68.servimg.com/u/f68/15/04/21/44/images10.jpg" border="0" alt="Promise Island"></a></li>&nbsp;

<li><a href="http://www.allthatremains.freeforums.net/index.cgi" target="_blank" /><img src="http://i.imgur.com/cCAqoqh.gif" border="0" alt="TWD: All That Remains" /></a></li>&nbsp;

<li><a href="http://occultknowledge.boards.net/" target="_blank" title="Occult Knowledge"><img src="http://i166./u110/brandonstallard1/OccultKnowledge1button_zpsti7anfft.gif" alt="" border="0" width="88px" height="31px" /></a></li>
</ul>
The above reason is why I asked about having an ID and a class, but it doesn't look like I've broken the plugin or ProBoards as a whole, so I'm guessing that you can have both at the same time!

The above is also another example of me having no imagination ... I thought to myself, "alright, what do I want the ID to be? It's supposed to be around the pieces that I want to target and what do you call something that's supposed to be around something else? Oh, I know! A wrapper!"

I totally have no imagination...

A third also: I put in the <span> tags and the total affiliate ID and such, and I'm finding that after those changes, the behavior of the affiliate title changed. Now I'm seeing the following when I hover over my title:



Before I made the changes to initiate this, the above didn't do that -- it just hovered and had the title bar stay as a title bar and the whole just show on top of it. Kind of like it's doing now, but the title bar didn't expand when hovered like it's doing there. I wish I had a before picture, but I cannot get it back to the way it was before to show you how it hovered without doing that ... I would if I could...

To remedy this, I attempted removing the <span> tags, commented out the JS <script> tag with an HTML comment and removed the <div id="total-affiliates"></div> and <span id="total-affiliates">0</span>, but it's still behaving like the above screenshot for some reason...

Grr... this looks like it is much more complicated than I thought and I probably should have left it to the professionals...

[Peter]

Feb 22, 2017 5:20:50 GMT -8 Alan Vende said:

Peter ,

Yes, that is correct -- I'm manually editing the number of affiliates every time I add an affiliate into the bar.

I hope you don't mind that I borrowed your span ID. I was going to use it anyway as the ID. I realized after I typed it into the plugin that it was the same as the one you used in the example. I'm like an accountant and the accounting equation -- I have no imagination for what I name things... -- my finance professor was an accountant and he said that as a joke one day in class that accountants have no imagination with their naming structure and formulas and such. Another example is the Break Even Quantity equation. What do you think that does? If you thought that it tells a company how many units they have to sell in order to not make or lose a profit or, break even, you would be right! See, no imagination!

No, that ID is all mine, you can't have it

Yeah, it's good to get into a habit of naming things that kinda explain what it is. Makes things so much easier when you come back to it a few months from now.

Feb 22, 2017 5:20:50 GMT -8 Alan Vende said:

I don't know what I was thinking when I coded the plugin to where it was all in the Components side of things and not having a UI. I guess I thought it would be easier to code it into the plugin instead of having a UI, especially since I already had the code for the affiliates lying around from a previous plugin I was using and I thought it would be easier to code the whole plugin instead of reinventing the wheel and basically recoding the plugin so it had an autoform in it. (Making more work for myself in the long run by doing it this way than just recoding it, I guess -- although I've never really used an autoform before and don't know how to make the plugin check every affiliate to have it do the total number...

You said that the JavaScript goes under the HTML code. You can put JS into a plugin's HTML element? I didn't think that that was possible, but I do see that you have the JS between <script></script> tags, so that's how you can put it into the HTML element? Also, I'm just guessing because of my prior HTML and CSS knowledge, but since the affiliate codes have images and such, those will still show even if there is JS under them to take their total? I ask because I noticed that your example is just links with no images or anything.

I assume you are using one of the global components (e.g. footer)? If so, yes, JavaScript in those components need the tags wrapped around it.

Since they are affiliates, I assumed they would be linked as well, so I didn't look for the image element, only the anchor element. You could do it the other way as well if you liked.

Feb 22, 2017 5:20:50 GMT -8 Alan Vende said:

Also, this is probably a noob question, but would it be okay to use a class? Or should an ID be used here? I'm guessing it should be an ID because of the document.getElementById("affiliate-wrapper"); line in the JS, I just wanted to make sure.

A class on the main wrapper instead of "affiliate-wrapper" (in my example)? You can do, but obviously you will need to change your JavaScript to fetch elements with that class instead.

Feb 22, 2017 5:20:50 GMT -8 Alan Vende said:

Could you also show me an example of how to code an autoform in case I do decide to go that route -- if I cannot get this to wrk and all? I just never used one of those before, partly because I was afraid of writing the JavaScript in the backend and inadvertently breaking the plugin or doing something that would affect ProBoards as a whole/inadvertently go against the Developer Guidelines. Yes, my brain things of the impossible like that sometimes -- it's very much a pain in the neck...

I will be sending you my book sometime this weekend, and it covers creating auto forms, and how to use them from JavaScript, so have a read of that section and let me know how you get on

Feb 22, 2017 5:20:50 GMT -8 Alan Vende said:

Also, I have other elements in the plugin that have an a tag -- such as the link that goes with the "
Did your affiliate code change?" button in the bottom right -- which is why I asked in a previous thread about how to make it so the button would have an on-click alert, kind of like the pieces in your Kitchen Sink plugin. I attempted to search around for an alert box code to see how it worked and whatnot, but every time I attempted to use/write one, it would show up as a box that comes up on a Mac, it wouldn't show the PB-oriented alert box with the title and content like the ones that you have in the plugin. Since I don't think I can put a class on the a tags and make this work the way I want it to, I think I will have to change the other tag first to be an alert box, wouldn't I?

Another also: I have the span id away from the spans, I'm guessing that it would still work, but I just wanted to ask first. The following is how I have the code so far:

...

The above reason is why I asked about having an ID and a class, but it doesn't look like I've broken the plugin or ProBoards as a whole, so I'm guessing that you can have both at the same time!

The above is also another example of me having no imagination ... I thought to myself, "alright, what do I want the ID to be? It's supposed to be around the pieces that I want to target and what do you call something that's supposed to be around something else? Oh, I know! A wrapper!"

I totally have no imagination...

A third also: I put in the <span> tags and the total affiliate ID and such, and I'm finding that after those changes, the behavior of the affiliate title changed. Now I'm seeing the following when I hover over my title:



Before I made the changes to initiate this, the above didn't do that -- it just hovered and had the title bar stay as a title bar and the whole just show on top of it. Kind of like it's doing now, but the title bar didn't expand when hovered like it's doing there. I wish I had a before picture, but I cannot get it back to the way it was before to show you how it hovered without doing that ... I would if I could...

To remedy this, I attempted removing the <span> tags, commented out the JS <script> tag with an HTML comment and removed the <div id="total-affiliates"></div> and <span id="total-affiliates">0</span>, but it's still behaving like the above screenshot for some reason...

Grr... this looks like it is much more complicated than I thought and I probably should have left it to the professionals...

The most important part we need to get sorted first is the HTML, the JavaScript we can work on in a later post.

Let's do another example, this time the links have a class.

<div>Total Affiliates: <span id="total-affiliates">0</span></div>
<div class="affiliatecodes">
<ul>
<li><a href="proboards.com" class="affiliate-link">#1</a></li>
<li><a href="proboards.com" class="affiliate-link">#2</a></li>
<li><a href="proboards.com" class="affiliate-link">#3</a></li>
</ul>
</div>

<script>

var affiliate_total = document.getElementsByClassName("affiliate-link").length;

document.getElementById("total-affiliates").textContent = affiliate_total;

</script>

So the most important part for you right now is to get the HTML structure correct, as well as get the ID / Class names on specific elements so that JavaScript can reference them.  Once you have that, the JavaScript will make more sense.

[Alan Vende]

Feb 22, 2017 13:14:02 GMT -8 Peter said:

Feb 22, 2017 5:20:50 GMT -8 Alan Vende said:

Peter ,

Yes, that is correct -- I'm manually editing the number of affiliates every time I add an affiliate into the bar.

I hope you don't mind that I borrowed your span ID. I was going to use it anyway as the ID. I realized after I typed it into the plugin that it was the same as the one you used in the example. I'm like an accountant and the accounting equation -- I have no imagination for what I name things... -- my finance professor was an accountant and he said that as a joke one day in class that accountants have no imagination with their naming structure and formulas and such. Another example is the Break Even Quantity equation. What do you think that does? If you thought that it tells a company how many units they have to sell in order to not make or lose a profit or, break even, you would be right! See, no imagination!

No, that ID is all mine, you can't have it

Yeah, it's good to get into a habit of naming things that kinda explain what it is. Makes things so much easier when you come back to it a few months from now.

Shall I pay you a royalty for being able to use it?

I do it way too often to the point where I don't realize that sometimes other coders do the same -- that, inadvertently, we may have the same class for two plugins. That's what I get for not having an imagination, i guess.

Feb 22, 2017 13:14:02 GMT -8 Peter said:

Feb 22, 2017 5:20:50 GMT -8 Alan Vende said:

I don't know what I was thinking when I coded the plugin to where it was all in the Components side of things and not having a UI. I guess I thought it would be easier to code it into the plugin instead of having a UI, especially since I already had the code for the affiliates lying around from a previous plugin I was using and I thought it would be easier to code the whole plugin instead of reinventing the wheel and basically recoding the plugin so it had an autoform in it. (Making more work for myself in the long run by doing it this way than just recoding it, I guess -- although I've never really used an autoform before and don't know how to make the plugin check every affiliate to have it do the total number...

You said that the JavaScript goes under the HTML code. You can put JS into a plugin's HTML element? I didn't think that that was possible, but I do see that you have the JS between <script></script> tags, so that's how you can put it into the HTML element? Also, I'm just guessing because of my prior HTML and CSS knowledge, but since the affiliate codes have images and such, those will still show even if there is JS under them to take their total? I ask because I noticed that your example is just links with no images or anything.

I assume you are using one of the global components (e.g. footer)? If so, yes, JavaScript in those components need the tags wrapped around it.

Since they are affiliates, I assumed they would be linked as well, so I didn't look for the image element, only the anchor element. You could do it the other way as well if you liked.

I'm using a Global Footer, yes. I thought about doing the Main Footer, but I didn't think that I wanted it just on the home page -- I thought that my affiliates should be on all pages of the forum, which is why I'm using the Global Footer.

I asked because I have a JS component in the plugin. Would the code still work if I put it into the JS component, or does it have to be near the HTML?

Feb 22, 2017 13:14:02 GMT -8 Peter said:

Feb 22, 2017 5:20:50 GMT -8 Alan Vende said:

Also, this is probably a noob question, but would it be okay to use a class? Or should an ID be used here? I'm guessing it should be an ID because of the document.getElementById("affiliate-wrapper"); line in the JS, I just wanted to make sure.

A class on the main wrapper instead of "affiliate-wrapper" (in my example)? You can do, but obviously you will need to change your JavaScript to fetch elements with that class instead.

No, using affiliate-wrapper, but I have a class already around the affiliates (affiliatecodes) which is doing something else. Oh, wait, I can have two classes! All I have to do is put a space in between them... Duh!

Sorry about that - a small lightbulb just blew in my mind.

Feb 22, 2017 13:14:02 GMT -8 Peter said:

Feb 22, 2017 5:20:50 GMT -8 Alan Vende said:

Could you also show me an example of how to code an autoform in case I do decide to go that route -- if I cannot get this to wrk and all? I just never used one of those before, partly because I was afraid of writing the JavaScript in the backend and inadvertently breaking the plugin or doing something that would affect ProBoards as a whole/inadvertently go against the Developer Guidelines. Yes, my brain things of the impossible like that sometimes -- it's very much a pain in the neck...

I will be sending you my book sometime this weekend, and it covers creating auto forms, and how to use them from JavaScript, so have a read of that section and let me know how you get on

I so, so look forward to that because I'm either thinking that I'm a bit dense (see your example below with the classes... HTML and CSS I understand, but I don't know why I feel like a complete noob when it comes to putting HTML and JS together...

Needless to say, I cannot wait for your book!

Feb 22, 2017 13:14:02 GMT -8 Peter said:

Feb 22, 2017 5:20:50 GMT -8 Alan Vende said:

Also, I have other elements in the plugin that have an a tag -- such as the link that goes with the "
Did your affiliate code change?" button in the bottom right -- which is why I asked in a previous thread about how to make it so the button would have an on-click alert, kind of like the pieces in your Kitchen Sink plugin. I attempted to search around for an alert box code to see how it worked and whatnot, but every time I attempted to use/write one, it would show up as a box that comes up on a Mac, it wouldn't show the PB-oriented alert box with the title and content like the ones that you have in the plugin. Since I don't think I can put a class on the a tags and make this work the way I want it to, I think I will have to change the other tag first to be an alert box, wouldn't I?

Another also: I have the span id away from the spans, I'm guessing that it would still work, but I just wanted to ask first. The following is how I have the code so far:

...

The above reason is why I asked about having an ID and a class, but it doesn't look like I've broken the plugin or ProBoards as a whole, so I'm guessing that you can have both at the same time!

The above is also another example of me having no imagination ... I thought to myself, "alright, what do I want the ID to be? It's supposed to be around the pieces that I want to target and what do you call something that's supposed to be around something else? Oh, I know! A wrapper!"

I totally have no imagination...

A third also: I put in the <span> tags and the total affiliate ID and such, and I'm finding that after those changes, the behavior of the affiliate title changed. Now I'm seeing the following when I hover over my title:



Before I made the changes to initiate this, the above didn't do that -- it just hovered and had the title bar stay as a title bar and the whole just show on top of it. Kind of like it's doing now, but the title bar didn't expand when hovered like it's doing there. I wish I had a before picture, but I cannot get it back to the way it was before to show you how it hovered without doing that ... I would if I could...

To remedy this, I attempted removing the <span> tags, commented out the JS <script> tag with an HTML comment and removed the <div id="total-affiliates"></div> and <span id="total-affiliates">0</span>, but it's still behaving like the above screenshot for some reason...

Grr... this looks like it is much more complicated than I thought and I probably should have left it to the professionals...

The most important part we need to get sorted first is the HTML, the JavaScript we can work on in a later post.

Let's do another example, this time the links have a class.

<div>Total Affiliates: <span id="total-affiliates">0</span></div>
<div class="affiliatecodes">
<ul>
<li><a href="proboards.com" class="affiliate-link">#1</a></li>
<li><a href="proboards.com" class="affiliate-link">#2</a></li>
<li><a href="proboards.com" class="affiliate-link">#3</a></li>
</ul>
</div>

<script>

var affiliate_total = document.getElementsByClassName("affiliate-link").length;

document.getElementById("total-affiliates").textContent = affiliate_total;

</script>

So the most important part for you right now is to get the HTML structure correct, as well as get the ID / Class names on specific elements so that JavaScript can reference them.  Once you have that, the JavaScript will make more sense.

I just finished putting classes onto the links. It looks something like this now:

<div class="affiliatecodes">
           <div id="total-affiliates">
                   <marquee scrollamount="3" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 2, 0);">
<ul class="affiliateaffcodes">
<li><span><a class="affiliate-link" href="http://support.proboards.com" target="_blank" title="Proboards Support"><img src="http://images.proboards.com/hotlink/forum_blue_88x31.png" alt="Proboards Support"></a></span></li> 

<li><span><a clsss="affiliate-link" href="http://maisonduviolette.proboards.com/" target="_blank" title="Maison du Violette"><img src="http://storage.proboards.com/2837905/i/YvLNTzdUKr_Amhw79v0A.jpg" alt="Maison du Violette" /></a></span></li> 

<li><span><a class="affiliate-link" href="http://army83.forums.net/" target="_blank" title="aRMY83 and Staff™"><img src="http://i1043./b436/army83_2010/aRMY83Staff3.gif" width="88" height="31" border="0" alt="aRMY83 and Staff™" /></a></span></li> 

<li><span><a class="affiliate-link" href="http://allkindsofeverything.boards.net/" target="_blank" title="All Kinds of Everything"><img src="http://i87./k156/Shaliza_2006/AKOE%20Forum%20Icons/144393513487842-1.jpeg" alt="All Kinds of Everything" border="0" width="88px" height="31px" /></a></span></li> 

<li><span><a class="affiliate-link" href="http://redhorizon.freeforums.net/" target="_blank" title="Alraënia"><img src="http://i.imgur.com/lKrhxpW.png" alt="Alraënia" border="0" width="88px" height="31px" /></a></span></li> 

<li><span><a class="affiliate-link" href="http://avatarascent.boards.net/" target="_blank" title="Avatar Ascent"><img src="http://i.imgur.com/NaDdixQ.png" alt="Avatar Ascent" border="0" width="88px" height="31px" /></a></span></li> 

<li><span><a class="affiliate-link" href="http://reflection38.proboards.com/" target="_blank" title="Reflection - Anime and Game "><img src="http://i1359./q800/Haruko_818/Image9_zpsyaegfbmm.png" alt="Reflection - Anime and Game " border="0" width="88px" height="31px" /></a></span></li> 

<li><span><a class="affiliate-link" href="http://promoforum.boards.net" title="PromoForum" target="_blank"><img src="http://storage.proboards.com/6344232/i/kg_QQFuiLZq3pAmHLY_e.png" alt="PromoForum.net" width="88px" height="31px" border="0"></a></span></li> 

<li><span><a class="affiliate-link" href="http://promisedisland.freeforums.net/"><img src="http://i68.servimg.com/u/f68/15/04/21/44/images10.jpg" border="0" alt="Promise Island"></a></span></li> 

<li><span><a class="affiliate-link" href="http://www.allthatremains.freeforums.net/index.cgi" target="_blank" /><img src="http://i.imgur.com/cCAqoqh.gif" border="0" alt="TWD: All That Remains" /></a></span></li> 

<li><span><a class="affiliate-link" href="http://occultknowledge.boards.net/" target="_blank" title="Occult Knowledge"><img src="http://i166./u110/brandonstallard1/OccultKnowledge1button_zpsti7anfft.gif" alt="" border="0" width="88px" height="31px" /></a></span></li>
</ul>
                   </marquee>
       </div>
</div>

[Peter]

Alan Vende ,

You can move the JavaScript into the JavaScript component (without the script tags wrapped around it), however, because you will need to reference the elements of the affiliates, then you would need to use a DOM ready event. For now, let it sit underneath the HTML until you are more familiar with DOM loading.

Ok, so you now have a class on your affiliate links. Next job is add some HTML for the number of affiliates. If you see my example above, you will see I add an ID (this needs to be unique for that element). The reason for this, is so that in our JavaScript later, we can grab a reference to that element, and set the text of it.

So figure out where you want the total to appear and then post the HTML for it. After that, we can look at the JavaScript.

[Alan Vende]

I already have some code in a JS component, which is why I asked about moving it there, so I could have all of the JS in it. I actually looked up DOM ready events, and I found this. I will wait, but I just don't want to seem like I'm trying to get the answers out of you, which is why I'm trying to do research as well.

Are you talking about the total-affiliates ID?

I put it where it hovers over on the title. For some reason, the title is doing something odd and making the title bar stretch so it's under the hover element and it's not on top of it... I'm wondering if I should add z-index: 1 to the content container?

EDIT: Sorry, I thought I posted the HTML, but it's not playing nice for some reason...

<div class="title-bar pp-affiliate-title"><div class="aff-dropdown">
 <span><h2>Psychic Psyghtings' Affiliates &amp; Friends</h2></span>
 <div class="aff-dropdown-content">
     <p><strong>Number of Affiliates:</strong> <span id="total-affiliates">0</span></p>
 </div>
</div>
   </div>
There we go, that worked! That's where I would like it.

[Peter]

Alan Vende,

The DOM ready event is something totally different. I can explain it if you like, but I feel that for the moment it will likely just confuse you.

Could you post your CSS rules for the affiliate HTML so I can give it a little test on my forum, that way I can see what the issue is and provide a possible explanation of the issue and see if you can fix it.

We will get there eventually, and hopefully you learn a little bit