https://github.com/ivopetkov/responsive-attributes
https://github.com/ivopetkov/responsive-attributes
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ivopetkov/responsive-attributes
- Owner: ivopetkov
- License: mit
- Created: 2016-06-22T12:07:16.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-12-05T21:03:32.000Z (almost 2 years ago)
- Last Synced: 2025-01-16T23:31:59.887Z (9 months ago)
- Language: JavaScript
- Size: 33.2 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Responsive attributes
Make element's attributes responsive.
## Usage
Include the library.
```html
```
Add the `data-responsive-attributes` attribute to the target element.
```html
```
**Attribute format:**
EXPRESSION=>ATTRIBUTE_NAME=ATTRIBUTE_VALUE
**Expression properties:**
w - element's width
h - element's height
vw - viewport's width
vh - viewport's height
f(FUNCTION_NAME) - function to call
q(QUERY_SELECTOR) - query selector to run
## Examples
### 1. Check element's width
If the element's width is lower than 200px set attribute `data-size=small`.
```html
```
If the element's width is higher than 200px and lower than 500px set attribute `data-size=medium`.
```html
```
### 2. Check viewport's width
If viewport's width is lower than 200px set attribute `data-size=small`.
```html
```
If viewport's width is higher than 200px and lower than 500px set attribute `data-size=medium`.
```html
```
### 3. Run custom check
Call a JS function to check if the `data-size` attribute should be set.
```html
function check1(element, details) {
return details.width < 300;
}
```
### 4. Run a query selector
Run a query selector. If the result is not empty the `data-size` attribute will be set.
```html
```
### 5. Multiple rules
If the element's width is lower than 200px set attribute `data-width=small`. If the element's height is lower than 200px set attribute `data-height=small`.
```html
```
### 5. Multiple rules in multiple attributes
This is makes it easier to modify rules with JavaScript. Just specify `data-responsive-attributes="*"` and add multiple attributes starting with `data-responsive-attributes-`.
If the element's width is lower than 200px set attribute `data-width=small`. If the element's height is lower than 200px set attribute `data-height=small`.
```html
```