Welcome to our community

Be apart of something great, join today!

Releasing my first jQuery plugin for the site creators out there (part 1/3).

MOFNY

Active member
Aug 9, 2008
4,789
East Greenwich, RI
Hey there everyone.
Over the last few months I've been studying and working on a way to optimize/beautify my site.
The answer was a system to easily update my compilation stats.
There have been a few different versions, but now I am working on an overall jQuery plugin.
For those who are unfamiliar, jQuery plugins are an easy way to do many dynamic things: lightboxes, form validations, animations, etc.

So I'm releasing my first jQuery plugin here. This will be my first plugin out of three.
I've made three pages detailing what it can do, and if anyone would like to add it to your site, it's an easy process.

http://buttonnavigationsystem.weebly.com/ is where you can find the example and the zip download.

So the first step is to link the files and call the jQuery function:
Code:
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="jquery.compile.js"></script> 
    <script>
        $(document).ready(function(){
           $(".yearGroup").compile();
        });
    </script>
</head>

Then there's the basic HTML markup for an ordered list:

Code:
<body>    
<h1 class="overallTotalGroup"></h1>
    <hr />
    <ol class="yearGroup" data-value="8">
        <li>Something to add up</li>
        <li>Something to add up</li>
        <li>Something to add up</li>
        <li>Something to add up</li>
        <li>Something to add up</li>
        <li>Something to add up</li>
        <li>Something to add up</li>
        <li class="red">Something to avoid</li>
        <p class="totalGroup">the total</p>
    </ol>
    <hr />
    <ol class="yearGroup" data-value="10">
        <li>Something to add up</li>
        <li>Something to add up</li>
        <li>Something to add up</li>
        <li>Something to add up</li>
        <p class="totalGroup">the total</p>
    </ol>
</body>

That is literally all you need to use this plugin.
The ol needs the class="yearGroup".
It also needs a data-value, which is the total amount of cards that you count towards your completion stats.
If you want an individual total for a year, assign the p (or any other tag, i.e. div, span, h2, etc.) with class="totalGroup".
And if you want an overall total from all the years, assign the h1 (or any other tag, i.e. div, p, h2, etc.) with class="overallTotalGroup".


Now like other plugins mine has options.
The example above has the default options, which I use on my site.
An organized list with list items is a great way to organize many things.
However, some people have a different system, so I have them in mind.
http://buttonnavigationsystem.weebly.com/optionsdemo.html is where you will find the 2nd demo.

Instead of ol and li, I've used div and h4.
You can also customize the text, just in case you don't like "completion stats" or "overall completion stats".
Lastly, you can change the completion percentage decimal places. If you put 0 it will round up.
To count the individual h4s I've used a CSS counter. This is potentially the easiest way to have a numbered list without using ol and li. You don't need individual numbers though, if that's your preference.

Ok so here are the various codes:
Code:
<head>    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.compile.js"></script>
    <script>
        $(document).ready(function(){
           $(".yearGroup").compile({
            childSelector: "h4",
            decimalPlaces: 2,
            individualText: "This is my custom text: ",
            overallText: "My custom overall statistics text: "})
        });
    </script>
    <style>
  
h4 {
    counter-increment: section;
}
h4:before {
    content: counter(section)". ";
    color: blue
}


        .red
        {
            color: red
        }
        
    </style>
</head>

Code:
<body>
    <h1 class="overallTotalGroup"></h1>
    
    <div class="yearGroup" data-value="30">
        <h4>Something to add up</h4>
        <h4>Something to add up</h4>
        <h4>Something to add up</h4>
        <h4>Something to add up</h4>
        <h4>Something to add up</h4>
        <h4>Something to add up</h4>
        <h4>Something to add up</h4>
        <h4>Something to avoid<span class="red">***</span></h4>
        <p class="totalGroup">the total</p>
    </div>
    <div class="yearGroup" data-value="30">
        <h4>Something to add up</h4>
        <h4>Something to add up</h4>
        <h4>Something to add up</h4>
        <h4>Something to add up</h4>
        <p class="totalGroup">the total</p>
    </div>
    
</body>

So now all you have to do to update your site is add an li:
Code:
<li>2004 Awesome card</li>
I've done a practical example with our Justin Duchscherer collector: http://buttonnavigationsystem.weebly.com/justinduchscherer.html.

You can see how I have my site organized at royoswalt44.com.
Any suggestions for improvement would be great.
Thanks again for checking it out!
 
Last edited:

pander69

Member
Apr 6, 2010
64
Marshall, MN
This is really cool! I am looking at starting my site and will have to use this. I can't imagine the time you put into this. Thanks for sharing!
 

Latest posts

Top