Define in global scope vars for each used CSS classname

100%

Define in global scope vars for each used CSS classname

✓ Published0🌍 Public

Last edited Jul 11, 2015

Created on Jul 26, 2015

This example shows a JavaScript utility that automatically creates global jQuery variables named after CSS classnames found in the DOM. The function `defineVarsFromClassName()` scans all elements with a `class` attribute, splits each class name, and assigns a jQuery object reference to a variable like `$className` (with hyphens converted to underscores) if it doesn’t already exist. It relies on jQuery selectors and the global `window` object to store these variables, making class-based DOM access more convenient. The code demonstrates a pattern for reducing repetitive variable declarations in jQuery-heavy projects, using the document’s existing class attributes as the source of variable names.

AI-generated description

Give me a global var named "$"+class name

I do a lot of pens on CodePen and I tend to use the same pattern building a prototype as a pen.

For instance I use classnames as handles when inputting and outputting data to the test/prototype. For instance I would have an element with the classname source and one with output. So I always create var named $source and one called $output.

Why not write a function to automatically add global vars named "$" + classname?

This gist is that function! It will search for elements with classes on them. Run through them and create global vars named "$"+classname, which it then will assign the value of "$(classname)". So after this function have been executed (defineVarsFromClassNames()) in your global (window) scope you can expect to find vars with jQuery reference to the element.

Similar vizzes

Loading thumbnail…

Using CSS Variables in JS

This interactive scatter plot demonstrates dynamic theme switching through CSS variables. A menu lets users toggle between three color palettes—ggplot, Tableau 10, and BBC Primary—with selections persisted via localStorage. D3’s `select`, `join`, and event handlers render six circles positioned from static data, while `getComputedStyle` reads the active theme’s CSS custom properties to update fill colors on each theme change.

CCurran Kelleher

53% match

Loading thumbnail…

Leveraging Web Data Class 5 Homework

This example presents a study aid for JavaScript fundamentals, listing definitions and code snippets for variables, operators, loops, and conditional statements in static HTML. The page includes an interactive script that runs a FizzBuzz-style loop, logging “Hello World,” “Hello,” or “World” when iterating from 1 to 100 based on divisibility by 3 and 5. It uses standard JavaScript console output, with HTML heading and paragraph elements organizing the quiz-style content. The visual display is minimal, prioritizing textual explanation over graphical visualization.

PPGriner

52% match

Loading thumbnail…

For class

This example demonstrates simple JavaScript function definitions and invocations, displaying results in separate HTML paragraphs. It shows both standard function declarations and function expressions assigned to variables, each performing multiplication. A third function, `mycalc`, sums two numbers but is never called. The page uses plain HTML elements with IDs (`demo1`, `demo2`, `demo3`) and a CSS class for large, centered text, with all logic handled in an external `learn.js` file without any external libraries.

Pphoenixash065@gmail.com

52% match

Loading thumbnail…

Hidden classes in JavaScript and Inline Caching

This example illustrates how the V8 JavaScript engine optimizes object property access through hidden classes and inline caching, using a Person constructor with `firstName` and `lastName` properties. The visualization shows the creation of hidden classes (C0, C1, C2) as objects are initialized, and demonstrates how adding an `age` property changes the class chain. It also depicts assembly-level code snippets showing how V8 replaces a call to the Inline Cache with a direct memory address for a ~20x speed improvement, and explains when deoptimizations occur. The source is a Markdown document from a gist by Jastor11.

JJastor11

52% match

Loading thumbnail…

Gist 305339

This example demonstrates a reusable jQuery plugin pattern for encapsulating a custom visualization or interaction, applying it to selected DOM elements with configurable defaults. The code defines a `PluginClass` that initializes on plugin call, using `$.fn.extend` and `$.extend` to merge user options with defaults. It shows the structural scaffolding for a visualization module, though it contains no actual rendering logic or data-binding calls. The implementation relies on jQuery’s event and DOM utilities, with the plugin returning `this` to support method chaining, a common convention for jQuery-based visual components. The source is a single JavaScript file from a gist, focusing on code organization rather than visual output.

DDylanFM

51% match

Loading thumbnail…

Classes

This example shows how JavaScript classes can be constructed using three different patterns: functional, prototypal, and pseudoclassical. It uses plain JavaScript functions, the `Object.create` API, and the `new` keyword to demonstrate object creation and method delegation through the `Car.prototype` object. The code defines a `Car` class with a `move` method that increments a `loc` property, illustrating how each pattern achieves the same behavior with varying levels of syntactic convenience.

MMurithi

51% match

Loading thumbnail…

JS local scope definition

This example illustrates the distinction between global and local scope in JavaScript, showing how function declarations behave differently depending on their context. The first script defines a `bla()` function in the global scope, making it accessible via `window.bla()`, while the second script wraps a `foo()` function inside an immediately invoked function expression (IIFE) with `(function() { ... })()`, preventing external access. The code uses the browser's `console.log` to demonstrate execution order and visibility. No external libraries or data sources are involved; the example relies solely on native JavaScript scope rules within a plain HTML document.

RRestuta

50% match

Loading thumbnail…

SCSS cheat sheet

This example presents a SCSS cheat sheet as a source-code reference, showing syntax for imports, variables, nesting, mixins, and media queries. The code includes predefined color variables like `$dmn-blue`, uses `lighten()` to adjust shades, and demonstrates `@mixin` definitions for reusable styles such as `body-copy-style` and `rounded`. It also illustrates selector nesting with the `&:hover` parent reference and responsive design via `@media` rules keyed to width variables. The gist by LayneSmith serves as the data source, rendered directly as formatted code.

LLayne Smith

49% match