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.
It's also lightweight, coming in at a mere 757 bytes minified.
So the first step is to link the files and call the jQuery function:
Then there's the basic HTML markup for an ordered list:
overall total
Something to add up
Something to add up
Something to add up
Something to add up
Something to add up
Something to add up
Something to add up
Something to avoid
individual total
Something to add up
Something to add up
Something to add up
Something to add up
individual total
That is literally all you need to use this plugin.
The ol needs the class="yearGroup".
It also needs a data-group, 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 id="overallTotalGroup".
Unique IDs are meant to be used once on a page. If you would like to use a class, please see the 2nd demo below.
If you would like to have a list item, but not include it in the totals, include a class="red" anywhere within the li tag.
The $(".yearGroup").compile(); is also chainable. Refresh the page to see the lists fade in. So now updating your site is a breeze; add an li: <li>2004 Awesome card</li>
Below you will find an running example of the default plugin.
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. Continue on to find the 2nd demo.