Code to Output a Number

[Alan Vende]

Thanks, Peter . I just didn't want you to think like I'm not trying to do research or anything myself, which is why I went out to try and find out about the DOM ready event. If you wouldn't mind explaining it, that would be great, but I think you may be right and to wait. I would like you to explain it, though.

Whoops. Sorry, I forgot to post the CSS -- sorry about that -- and thank you for reminding me. I will do so in a few minutes after I go put some food in my stomach. Thank you for looking it over, as it was working just fine before I looked into doing the total affiliate piece.

Thank you so much for your help! I am so glad to be able to learn this!

Peter , below is the full CSS of the plugin. I will be cleaning it up after we get the CSS and such fixed.

/* Begin My Affiliate CSS */
/* Begin Title Bar CSS */
.pp-affiliate-title {
   text-align: center;
}
.aff-dropdown {
   position: relative;
   display: inline-block;
}

.aff-dropdown-content {
   display: none;
   position: relative;
   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;
}

.aff-dropdown:hover .aff-dropdown-content {
   display: block;
   z-index: 1;
}
/* End Title Bar CSS */

.affiliatechange {
   float: right;
}
.affiliatechange, .affcodeandrules {
   margin-top: 5px;
   margin-bottom: 5px;
}
.affchangenumberrules {
   margin-top: 10px;
   margin-bottom: 5px;
}
.ppaffcoderules {
   float: left;
   padding-left: 5px;
}
.affiliatechange {
   padding-right: 5px;
}
/* .numberofaffiliates {
   margin-left: auto;
   margin-right: auto;
} */
.ppaffiliates {
   margin-top: 50px;
   margin-bottom: 10px;
   padding: 0px 5px 0px 5px;
}
.ppaffcodecontainer {
   border: 2px solid #000000;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   background-color: #ffffff;
   padding: 5px;
   margin-top: 5px;
   margin-bottom: 5px;
}
.ppaffcodetitle, .ppafftextheading {
   font-size: 14px;
   font-weight: bold;
   text-decoration: underline;
   margin-bottom: 5px;
}
.ppaffrules {
   border: 2px solid #000000;
   border-radius: 10px;
   background-color: #888888;
   margin-top: 5px;
   padding: 5px;
   font-family: cursive;
}
.ppaffrulestext {
   border: 2px solid #000000;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   width: 410px;
   padding: 5px;
   margin-left: auto;
   margin-right: auto;
   background-color: #ffffff;
}
.ppafftextbody {
   width: 405px;
   margin-bottom: 5px;
}
.affiliatecodes {
   border: 2px solid #000000;
   border-radius: 10px;
   -webkit-border-radius: 5px;
   margin-top: 15px;
   padding: 10px;
   width: 1240px;
   margin-right: auto;
   margin-left: auto;
}
.ppaffiliatecode {
   margin-top: 5px;
   margin-bottom: 5px;
}
/* End My Affiliate CSS */

/* Begin Title Hover CSS */
.dropdown {
   position: relative;
   display: inline-block;
}

.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   padding: 12px 16px;
   z-index: 1;
}

.dropdown:hover .dropdown-content {
   display: block;
   color: #000000;
}
/* End Title Hover CSS */

/* Begin Reverse Opacity CSS from http://jsfiddle.net/xbMtN/ */
ul.affiliateaffcodes li {
   display: inline-block;
}

ul.affiliateaffcodes li img {
   opacity: 1;
   -webkit-transition: opacity .5s;
   -moz-transition: opacity .5s;
   transition: opacity .5s;
}

ul.affiliateaffcodes:hover li img {
   opacity: .5;
}

ul.affiliateaffcodes:hover li img:hover {
   opacity: 1;
}
/* End Reverse Opacity CSS from http://jsfiddle.net/xbMtN/ */

[Peter]

Alan Vende ,

Not a problem. I could see from your posts that you are trying, I just hope what I'm posting makes sense

The DOM ready event is an interesting subject actually. There is a lot of history behind it because the actual DOM event wasn't widely supported, so we were forced to use hacks. Now days we can use the event directly, that being "DOMContentLoaded".

So what does it do?

There are 2 events available that can invoke a function when the page has "loaded", but there is a difference between the 2.

- DOMContentLoaded
Will invoke the function as soon as the DOM structure has been parsed. It doesn't wait for any resources to load (e.g., style sheets, images). This is extremely useful when you need to manipulate the DOM as soon as you can (e.g., Monetary System adding new elements to mini profiles).

- load
Will invoke the function once all resources have loaded. So if you are manipulating the DOM, you will not see your changes until the page has loaded fully. Pretty awful if there is an image taking a long time to finish loading, and then once it's done, the DOM manipulation takes place, which would get seen by the user.

Examples:


document.addEventListener("DOMContentLoaded", () => console.log("DOM Loaded"));

window.addEventListener("load", () => console.log("Page Loaded"));

jQuery "ready" Example:

$(() => console.log("jQuery DOM Ready 1"));

$(document).ready(() => console.log("jQuery DOM Ready 2"));

$(document).on("ready", () => console.log("jQuery DOM Ready 3"));
You will see most plugins will have a ready event in their code.

[Peter]

Alan Vende,

So the problem with the title is due to a class you have added.

<div class="title-bar pp-affiliate-title"><div class="aff-dropdown">
 <span><h2>Psychic Psyghtings' Affiliates & Friends</h2></span>
 <div class="aff-dropdown-content">
     <p><strong>Number of Affiliates:</strong> <span id="total-affiliates">0</span></p>
 </div>
</div>
  </div>

In your CSS, look for the class "aff-dropdown-content", you will see you are using a pseudo-class (:hover in your case). This is what is causing an issue in the title, ideally you just want to remove that class from the element.

Right now, it's all about putting this...

<p><strong>Number of Affiliates:</strong> <span id="total-affiliates">0</span></p>

...exactly where you want it. Once that is done and you are happy, then all you need to do is a little JavaScript below the affiliates to count them.

[Alan Vende]

Feb 23, 2017 15:36:59 GMT -8 Peter said:

Alan Vende ,

Not a problem. I could see from your posts that you are trying, I just hope what I'm posting makes sense

The DOM ready event is an interesting subject actually. There is a lot of history behind it because the actual DOM event wasn't widely supported, so we were forced to use hacks. Now days we can use the event directly, that being "DOMContentLoaded".

So what does it do?

There are 2 events available that can invoke a function when the page has "loaded", but there is a difference between the 2.

- DOMContentLoaded
Will invoke the function as soon as the DOM structure has been parsed. It doesn't wait for any resources to load (e.g., style sheets, images). This is extremely useful when you need to manipulate the DOM as soon as you can (e.g., Monetary System adding new elements to mini profiles).

- load
Will invoke the function once all resources have loaded. So if you are manipulating the DOM, you will not see your changes until the page has loaded fully. Pretty awful if there is an image taking a long time to finish loading, and then once it's done, the DOM manipulation takes place, which would get seen by the user.

Examples:


document.addEventListener("DOMContentLoaded", () => console.log("DOM Loaded"));

window.addEventListener("load", () => console.log("Page Loaded"));

jQuery "ready" Example:

$(() => console.log("jQuery DOM Ready 1"));

$(document).ready(() => console.log("jQuery DOM Ready 2"));

$(document).on("ready", () => console.log("jQuery DOM Ready 3"));
You will see most plugins will have a ready event in their code.

Sorry, I meant to say "eventually," not that you had to explain it now -- although I'm grateful that you did -- you were right, I am a bit confused. I thought the events were like the ones that I linked to in my post, the ones I saw from W3Schools. They're the place I go to when I have a question on code and I'm too new to know that they're wrong.

Thank you for telling me what they are. If they're written wrong, I know that whatever you're working on doesn't necessarily work correctly, but you cannot break what you're working on in the sense of the problem being irreversible, can you?

Feb 23, 2017 15:46:30 GMT -8 Peter said:

Alan Vende ,

So the problem with the title is due to a class you have added.

<div class="title-bar pp-affiliate-title"><div class="aff-dropdown">
 <span><h2>Psychic Psyghtings' Affiliates & Friends</h2></span>
 <div class="aff-dropdown-content">
     <p><strong>Number of Affiliates:</strong> <span id="total-affiliates">0</span></p>
 </div>
</div>
  </div>

In your CSS, look for the class "aff-dropdown-content", you will see you are using a pseudo-class (:hover in your case). This is what is causing an issue in the title, ideally you just want to remove that class from the element.

Right now, it's all about putting this...

<p><strong>Number of Affiliates:</strong> <span id="total-affiliates">0</span></p>

...exactly where you want it. Once that is done and you are happy, then all you need to do is a little JavaScript below the affiliates to count them.

When I did this, I wanted it to come on hover. I guess I could change it with Javascript and remove the :hover pseudo-class, right? How would it show on hover if I remove the pseudo-class? (Sorry, I always thought that you had to use that to make it show upon hover with CSS.

[Alan Vende]

Peter:

It took me about 20 minutes to remove the hover on the title bar that I had. I'm realizing that I will have to clean up my CSS. (Sorry, just kind of thinking out loud )