HTML Tags Collector

jQuery plugin that allows you to collect what type and how many HTML tags a piece of code contains.

  • Version: 1.0
  • Created: 05 Oct, 2014
  • Role: HTML/CSS, JavaScript
  • License: MIT
    The MIT License (MIT)

    Copyright (c) 2009-2016 Georgi Kalaydzhiev

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Demo GitHub

Installation

  1. Download the latest jQuery version.
  2. Add the following code between the head tag or before the closing body tag. Replace “path-to” with the actual path to the file.
    <script src="path-to/jquery-latest.min.js"></script>
  3. Download HTML Tags Collector and place html-tags-collector.js in a preferred folder in your project.
  4. Right after you load jQuery add the following code. Replace “path-to” with actual path to the file.
    <script src="path-to/html-tags-collector.js"></script>
  5. Next, add this piece of code.
    <script>
        $(document).ready( function() {
           $('html').HTMLTagsCollector();
        });
    </script>
    
  6. You’re all set! Your final code should look like:
    <script type="text/javascript" src="path-to/jquery-latest.min.js"></script>
    <script type="text/javascript" src="path-to/html-tags-collector.js"></script>
    <script>
        $(document).ready( function() {
           $('html').HTMLTagsCollector();
        });
    </script>
    

Configuration

Basically, the plugin is designed to work without any additional configuration, but in case you wanted to change something, here are a couple of default options and values.

<script>
    $(document).ready( function() {
        $('html').HTMLTagsCollector({
            backgroundColor: '#111', // Changes the background color.
            textColor: '#fefefe',    // Changes the text color. 
            width: '130px'           // Changes the width of the box.
        });
    });
</script>

Here is an example how your final code should look like with some customizations.

<script type="text/javascript" src="path-to/jquery-latest.min.js"></script>
<script type="text/javascript" src="path-to/html-tags-collector.js"></script>
<script>
    $(document).ready( function() {
        $('html').HTMLTagsCollector({
            backgroundColor: '#f00'
        });
    });
</script>

Please Note: Basically, as you can see in the example above I attached the plugin to the html element, but you don’t need to. You can actually put it to every element and the plugin will count items in it.

Changelog

v1.0 (05 Oct, 2014)

- Initial release.
Contact
captcha