rattribute.js

v1.3.1

Published

8 days ago

A lightweight JavaScript library for automatically changing HTML element attributes based on responsive screen sizes.

0High
0Medium
0Low

williamtroup

typescript javascript html5 rattribute.js attribute html responsive link target render

🚀 Zero dependencies and lightweight.
📝 Written in TypeScript with excellent editor support.
📱 Responsive breakpoints matching Bootstrap (xs–xxl), plus custom sizes.
🔄 Automatically detects new DOM elements.
⚙️ Public API for manual control.
🎯 Ignore specific elements when needed.
🧩 Set attribute values directly or from function calls.

Rattribute.js works in all modern browsers, including:

Google Chrome
Microsoft Edge
Mozilla Firefox
Safari
Opera

To see a list of all the most recent changes, click here.

You can install the library with npm into your local modules directory using the following command:

npm install rattribute.js

Or, you can also use the following CDN links:

https://cdn.jsdelivr.net/gh/williamtroup/[email protected]/dist/rattribute.min.js

To get started using Rattribute.js, do the following steps:

1. Prerequisites:

Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:

<!DOCTYPE html>

2. Include Files:

<script src="dist/rattribute.js"></script>

3. Setup Elements:

<p><a href="https://www.william-troup.com/" data-rattribute-js-xs="target=_blank;class=xs-class" target="_self">Test Link XS</a></p>
<p><a href="https://www.william-troup.com/" data-rattribute-js-sm="target=_blank;class=sm-class" target="_self">Test Link SM</a></p>
<p><a href="https://www.william-troup.com/" data-rattribute-js-md="target=_blank;class=md-class" target="_self">Test Link MD</a></p>
<p><a href="https://www.william-troup.com/" data-rattribute-js-lg="target=_blank;class=lg-class" target="_self">Test Link LG</a></p>
<p><a href="https://www.william-troup.com/" data-rattribute-js-xl="target=_blank;class=xl-class" target="_self">Test Link XL</a></p>
<p><a href="https://www.william-troup.com/" data-rattribute-js-xxl="target=_blank;class=xxl-class" target="_self">Test Link XXL</a></p>
<p><a href="https://www.william-troup.com/" data-rattribute-js-xxxl="target=_blank;class=xxxl-class" target="_self">Test Link XXXL</a></p>
<p><a href="https://www.william-troup.com/" data-rattribute-js-800="target=_blank;class=800-class" data-rattribute-js-lg="target=_parent;class=lg-class" target="_self">Test Link (800, MD)</a></p>
<p><a href="https://www.william-troup.com/" data-rattribute-js-ignore="true" data-rattribute-js-600="target=_blank;class=600-class" target="_self">Test Link (600, Ignore)</a></p>
<p><a href="https://www.william-troup.com/" data-rattribute-js-ignore="false" data-rattribute-js-600="target=targetFunc()" data-rattribute-js-md="target=targetFuncWithArgs(true)" target="targetFuncWithArgs(false)">Test Link (600, From Functions)</a></p>

Rattribute.js automatically updates the element when the viewport crosses the configured width.

4. Finishing Up:

That's it! Nice and simple. Please refer to the code if you need more help (fully documented).

To customize, and get more out of Rattribute.js, please read through the following documentation.

1. Public API:

To see a list of all the API functions available, click here.

2. Configuration:

Configuration options allow you to customize how Rattribute.js will function. You can set them as follows:

<script> 
    $rattribute.setConfiguration( {
        responsiveDelay: 500
    } );
</script>

To see a list of all the available configuration options you can use, click here.

Published

Vulnerabilities

Links

Maintainers

Keywords