Home

jQuery Add Width Class Plugin

This plugin adds CSS classes depending from element width Pass your breakpoints to plugin in pixels and it will automatically add following CSS classes to your elements:

width-lt-xxx
width-gt-xxx

where 'xxx' is your breakpoint value

---

Plugin Setup

1. Create your markup

<div style="width: 350px">
    <h3>h3 tag 350px width</h3>
</div>
<div style="width: 450px">
    <h3>h3 tag 450px width</h3>
</div>
<div style="width: 550px">
    <h3>h3 tag 550px width</h3>
</div>
<div style="width: 650px">
    <h3>h3 tag 650px width</h3>
</div>

2. Add jQuery and Plugin

<script src="jquery-1.11.2.min.js"></script>
<script src="jquery.addwidthclass.js"></script>

3. Initialize your plugin

jQuery(document).ready(function(){
    jQuery('h3').addWidthClass({
        breakpoints: [400, 500, 600]
    });
});

If you done right, the result will be:

<div style="width: 350px">
    <h3 class="width-lt-600 width-lt-500 width-lt-400">h3 tag 350px width</h3>
</div>

<div style="width: 450px">
    <h3 class="width-lt-600 width-lt-500 width-gt-400">h3 tag 450px width</h3>
</div>

<div style="width: 550px">
    <h3 class="width-lt-600 width-gt-500 width-gt-400">h3 tag 550px width</h3>
</div>

<div style="width: 650px">
    <h3 class="width-gt-600 width-gt-500 width-gt-400">h3 tag 650px width</h3>
</div>

4. Add your CSS styles

h3 {
    background: #eee;
    color: #111;
}

h3.width-gt-400{
    background: #ccc;
    color: #333;
}

h3.width-gt-500{
    background: #111;
    color: #eee;
}

h3.width-gt-600{
    background: #aaa;
    color: #fff;
}