Element Query Classnames

Developer
Jonathan Neal
Size
3,243 Kb
Views
30,360
  1. Element Query Classnames Previews
  2. Element Query Classnames HTML Codes
  3. Element Query Classnames CSS Codes
  4. Element Query Classnames JS Codes

How do I make an element query classnames?

What is a element query classnames? How do you make a element query classnames? This script and codes were developed by Jonathan Neal on 30 August 2022, Tuesday.

Element Query Classnames Previews
IQ Test

Element Query Classnames - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Element Query Classnames</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Responsive Alt Class</h1>
<p class="foo foo- bar" data-alt-class="-small 300 -medium qux 500 -large">	Resize this page<br>“Edit this pen” to see the sauce
</p>
<p>The fabulous-looking element above is given a responsive class using the <code>data-alt-class</code> attribute. The initial markup is as follows.</p>
<pre>&lt;p class="foo foo- bar" data-alt-class="-small 300 -medium qux 500 -large"
&gt;</pre>
<p>Hopefully, that’s simple but powerful, borrowing from Tab Atkins excellent <a href="http://tabatkins.github.io/specs/respimg/Overview.html">RespImg Syntax</a>. The resulting classes would be as follows.</p>
<table>	<thead>	<tr><th>Element width<th>Alternative class	<tbody>	<tr><td>* - 300px: <td>bar foo foo- foo-small	<tr><td>300px - 500px<td>bar foo foo- foo-medium qux	<tr><td>500px - *<td>bar foo foo- foo-large
</table>
<p>When a class name contains a trailing dash and an alt class contains a leading -, the two are fused, as is the case with <code>foo-small</code>, <code>foo-medium</code>, and <code>foo-large</code>.</p>
<p>Let me know what you think!</p> <script src="js/index.js"></script>
</body>
</html>

Element Query Classnames - Script Codes CSS Codes

h1, p, pre, table { box-sizing: border-box; margin: 2em auto; width: 50%; }
body, h1 { margin-bottom: 0.25em; }
code, pre { border: 1px solid #DDD; border-radius: 0.25em; padding: 0.25em; white-space: pre-wrap; }
body { font: 300 100%/1.5 "Helvetica Neue", sans-serif; }
td, th { border-bottom: 1px solid #DDD; text-align: left; }
pre { tab-size: 2; }
a { color: #55C; }
.foo { overflow: hidden; padding: 1em; text-align: center; }
.foo-small { background-color: #444; color: #FFF; }
.foo-medium { background-color: #ADF; }
.foo-large { background-color: #EEE; }
.bar { border: 1px solid #DDD; border-radius: 0.25em; }
.qux { font-family: monospace; font-size: 150%; }

Element Query Classnames - Script Codes JS Codes

(function () {	'use strict';	var	requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {	return setTimeout(callback, 16);	},	map = Array.prototype.map || function (callback) {	for (var array = this.slice(0), index = 0, length = array.length; index < length; ++index) {	array = callback.call(array, array[index]);	}	return array;	},	keys = Object.keys || function (object) {	var array = [], key;	for (key in object) array.push(key);	return array;	},	reClassName = /(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)/g,	attributeName = 'data-alt-class';	function detect() {	map.call(document.querySelectorAll('[' + attributeName + ']'), function (element) {	var	offsetWidth = element.offsetWidth,	className = element.className,	classKeys = {},	classExts = {},	classAlts = element.getAttribute(attributeName).replace(/^\s+|\s+$/g, '').split(/\s+/);	map.call(className.match(reClassName) || [], function (className) {	if (className.slice(-1) === '-') classExts[className] = true;	else classKeys[className] = true;	});	var	breakpoints = [{	classList: {},	min: 0,	max: Infinity	}];	map.call(classAlts, function (alt) {	var	number = parseInt(alt),	breakpoint = breakpoints[0];	if (!isNaN(number)) {	if (!isNaN(breakpoint.min)) breakpoints.unshift({	classList: {},	min: breakpoint.max = number,	max: Infinity	}); else {	breakpoint.min = number;	}	} else {	if (alt[0] === '-') {	var	keysList = keys(classKeys),	extsList = keys(classExts);	if (extsList.length) {	map.call(extsList, function (ext) {	breakpoint.classList[ext.slice(0, -1) + alt] = true;	});	} else if (keysList.length === 1) {	breakpoint.classList[keysList[0] + alt] = true;	}	} else {	breakpoint.classList[alt] = true;	}	}	});	var	finalKeys = {},	classNext = [],	key;	map.call(breakpoints, function (breakpoint) {	var	isActive = offsetWidth >= breakpoint.min && offsetWidth < breakpoint.max,	key;	for (key in breakpoint.classList) {	if (isActive) finalKeys[key] = true;	else delete classKeys[key];	}	});	for (key in classExts) classKeys[key] = true;	for (key in finalKeys) classKeys[key] = true;	for (key in classKeys) classNext.push(key);	classNext.sort();	classNext = classNext.join(' ');	if (className !== classNext) element.className = classNext;	});	requestAnimationFrame(detect);	}	detect();
})();
Element Query Classnames - Script Codes
Element Query Classnames - Script Codes
Home Page Home
Developer Jonathan Neal
Username jonneal
Uploaded August 30, 2022
Rating 3
Size 3,243 Kb
Views 30,360
Do you need developer help for Element Query Classnames?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jonathan Neal (jonneal) Script Codes
Name
Accessible breadcrumbs markup
Yelp Ratings SVG
Position Sticky
A Pen by Jonathan Neal
SVG for Everybody
SVG with and without viewBox
Object-fit polyfill
PostCSS Write SVG Example
Aim-Aware Menus
OkayNav in VanillaJS
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!