StripBullets

This is a function to remove the leading bullets from each line when word-wrap moves to a new line

by rdillman

HTML

<h1>Resizable Window with bullet stripping</h1>

<p>drag the center bar left Update and right to see the bullets fall off as the conetent reflows</p>
<br />
<div id="tabs">
    <ul>
        <li><a href="#">List Item 1</a>

        </li>
        <li><a href="#">List Item 2</a>

        </li>
        <li><a href="#">List Item 3</a>

        </li>
        <li><a href="#">List Item 4</a>

        </li>
        <li><a href="#">List Item 5</a>

        </li>
        <li><a href="#">List Item 6</a>

        </li>
        <li><a href="#">List Item 7</a>

        </li>
        <li><a href="#">List Item 8</a>

        </li>
        <li><a href="#">List Item 9</a>

        </li>
        <li><a href="#">List Item 10</a>

        </li>
        <li><a href="#">List Item 11</a>

        </li>
        <li><a href="#">List Item 12</a>

        </li>
        <li><a href="#">List Item 13</a>

        </li>
        <li><a href="#">List Item 14</a>

        </li>
        <li><a href="#">List Item 15</a>

        </li>
        <li><a href="#">List Item 16</a>

        </li>
        <li><a href="#">List Item 17</a>

        </li>
        <li><a href="#">List Item 18</a>

        </li>
        <li><a href="#">List Item 19</a>

        </li>
        <li><a href="#">List Item 20</a>

        </li>
        <li><a href="#">List Item 21</a>

        </li>
        <li><a href="#">List Item 22</a>

        </li>
        <li><a href="#">List Item 23</a>

        </li>
        <li><a href="#">List Item 24</a>

        </li>
        <li><a href="#">List Item 25</a>

        </li>
        <li><a href="#">List Item 26</a>

        </li>
        <li><a href="#">List Item 27</a>

        </li>
        <li><a href="#">List Item 28</a>

        </li>
        <li><a href="#">List Item 29</a>

        </li>
        <li><a href="#">List Item 30</a>

        </li>
    </ul>
</div>

CSS

body, html {
    background-color:#000;
    color:#fff;
}
#tabs ul {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    list-style: none inside;
}
#tabs ul li {
    margin:0;
    padding:0;
    list-style: none;
    display: inline;
}
#tabs ul li a {
    white-space:nowrap;
}
#tabs ul li a.myList {
    text-decoration: none;
    color: #fff;
    padding: 3px 4px;
    display: inline-block;
}
#tabs ul li a.myListFirst {
    text-decoration: none;
    color: #fff;
    padding: 3px 4px 3px 5px;
    display: inline-block;
    background: none repeat scroll 0 0 transparent;
}
#tabs ul li a.myList:before {
    content:"\2022\20";
}
#tabs ul li a:hover {
    color: #9E0508;
}

JavaScript

var stripBullets,
    target = $('#tabs ul li a');
    $(document).ready(function () {
        "use strict";
        stripBullets(target, 'myListFirst', 'myList');
        $(window).resize(function () {
            stripBullets(target, 'myListFirst', 'myList');
        });
    });

    function stripBullets(target, nobullet, bulellt) {
        "use strict";
        var myTabsTop = target.first().offset().top;
        target.addClass(bulellt).removeClass(nobullet);
        target.first().removeClass(bulellt).addClass(nobullet);

        target.each(function () {
            if ($(this).offset().top > myTabsTop) {
                $(this).removeClass(bulellt).addClass(nobullet);
                myTabsTop = $(this).offset().top;
            }
        });
    }