Make your text sizing responsive!

Last update: Oct 31, 2022

Related tags

Overview

jQuery responsiveText

A jQuery plugin to set font sizes responsively based on its' container width. Use jQuery responsiveText to have scalable headlines, build responsive tables and more!

View the demo at [http://garyhepting.com/jquery-responsive-text]

Installation:

Initialize the plugin:

<script type="text/javascript">
  $(document).ready(function() {
    $('.responsive').responsiveText();
  });
</script>

Configurations can be added to the markup of each element with simple data attributes:

<h1 class="responsive" data-compression="8" data-min="20" data-max="60">Responsive Text</h1>

<p class="responsive" data-compression="25" data-min="14" data-max="40">A jQuery plugin to set font sizes responsively based on its' container width. Use responsiveText.js to have scalable headlines, build <a href="https://github.com/ghepting/jquery-responsive-tables">responsive tables</a> and more!</p>

Scrollable Text:

<h1 class="responsive" data-scrollable="1" data-min="20" data-max="60">Scrollable Responsive Text</h1>

Complete Options:

<h1 class="responsive" data-compression="8" data-scrollable="1" data-scrollspeed="1000" data-scrollreset="500" data-min="20" data-max="100">Responsive Text with all of the options</h1>

Comments

Text height

I've got this working well on my site, but in trying to make my site fully responsive, I want everything to resize for height as well as width. When I have a header set to responsive, it works well when I change width, but doesn't change at all when the browser height changes and doesn't allow me to choose a new height in css media queries.

opened by benjaminwork 3
Ode and bower package request

I find yout plugin very useful. I don't know if the text resize algorithm is something different from other similar scripts but it works beautifully and the data-attribute support is more than convenient. Hope its development will continue in the future and that you'll make it available as a bower package too.

opened by yumyo 0

Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.

twitter-text This repository is a collection of libraries and conformance tests to standardize parsing of Tweet text. It synchronizes development, tes

Jan 8, 2023

Obsidian text generator Plugin Text generator using GPT-3 (OpenAI)

is a handy plugin for Obsidian that helps you generate text content using the powerful language model GP

Dec 29, 2022

Obsidian plugin: Type text shortcuts that expand into javascript generated text.

Obsidian Plugin - Text Expander JS (open beta) This Obsidian plugin allows the user to type text shortcuts that are replaced by (or "expanded into") j

Dec 27, 2022

A lightweight JavaScript library that renders text in a brilliant style by displaying strings of random characters before the actual text.

cryptoWriter.js A lightweight javascript library which creates brilliant text animation by rendering strings of random characters before the actual te

Sep 13, 2022

This is a small web application I made using Vanilla Javascript. It's a text generator that cooks up classic lyrics (lorem ispum style) from the rap collective Wu Tang Clan. This was a blast to make and I hope others can get some use out of it, or at least a good laugh.

Wu Tang Lorem Ipsum Text Generator This is a small web application I made using Vanilla Javascript. It's a text generator that cooks up classic lyrics

Aug 1, 2022

Blast text apart to make it manipulable.

##Blast (2.0.0) Docs julian.com/research/velocity/blast Quickstart npm install blast-text bower install blast-text Frameworks Both jQuery and Zepto ar

Nov 26, 2022

Make text fit container, prevent overflow and underflow.

AutoTextSize Make text fit container, prevent overflow and underflow. The font size of the text is adjusted so that it precisely fills its container.

Dec 30, 2022

Functions and objects that make it easier to add fields to Portable Text editors for accessibility meta information, like language changes or abbreviations.

Porta11y Porta11y is a collection of accessibility-focused annotations, decorators and validators for Sanity’s Portable Text editor. Portable Text is

Aug 25, 2022

why make apps to increase focus -- when you can make apps to reduce focus

impossifocus 🕺 What is this? ImpossiFocus will measure focus by reading your brainwaves -- and if you're in the zone, it'll ensure that changes with

Nov 30, 2022

Notes may contain grammatical errors and some wont make sense and will only make sense to me

This is my own notes containing all the information and knowledge I've gained during my studying sessions. The notes are all topics that relates to technology such as computers, software or programming.

Dec 15, 2022

In this exercise, I will write a few practical tests for JavaScript functions using the Jest library. I will make sure to follow the AAA pattern to make my tests easier for other developers to read and understand. I will also try to use the TDD approach in practice.

Testing Practices To get a local copy up and running follow these simple example steps. (NPM) Ope your terminal Navigate to the directory where you wa

Dec 20, 2022

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, vid

Jan 2, 2023

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.

OpenUI5. Build Once. Run on any device. What is it? OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on al

Dec 31, 2022

jSuites is a collection of lightweight common required javascript web components. It is composed of fully responsive vanilla plugins to help you bring the best user experience to your projects, independent of the platform. Same JS codebase across different platforms.

jSuites v4 - Webcomponents and JavaScript plugins. About jSuites is a collection of lightweight common required javascript web components. It is compo

Admin UI Template is a modern, responsive, and customizable admin UI template for your business.

Admin UI Template is a modern, responsive, and customizable admin UI template for your business. It contains reusable components, theme color, and design support along with dark theme support.

Dec 18, 2022

Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

generate statistics on the number of audience minutes your site is generating, and if readers make it to the end of your screeds

audience-minutes generate statistics on the number of audience minutes your site is receiving, and if readers make it to the end of your screeds. “If

Dec 28, 2022

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

catalogist 📚 📓 📒 📖 🔖 The easy way to catalog and make your software and (micro)services visible to your organization through an API You were a pe

Dec 13, 2022

All in one is a CLI to make your journey in web development less painful (it makes your life way easier).

All In One CLI (Aio) The Ultimate CLI for all your needs in web development. Description This is a CLI that has all the commands you need to do anythi

Sep 25, 2022

Make your text sizing responsive!

Related tags

Overview

jQuery responsiveText

Installation:

You might also like...

Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.

Obsidian text generator Plugin Text generator using GPT-3 (OpenAI)

Obsidian plugin: Type text shortcuts that expand into javascript generated text.

A lightweight JavaScript library that renders text in a brilliant style by displaying strings of random characters before the actual text.

This is a small web application I made using Vanilla Javascript. It's a text generator that cooks up classic lyrics (lorem ispum style) from the rap collective Wu Tang Clan. This was a blast to make and I hope others can get some use out of it, or at least a good laugh.

Blast text apart to make it manipulable.

Make text fit container, prevent overflow and underflow.

Functions and objects that make it easier to add fields to Portable Text editors for accessibility meta information, like language changes or abbreviations.

why make apps to increase focus -- when you can make apps to reduce focus

Notes may contain grammatical errors and some wont make sense and will only make sense to me

In this exercise, I will write a few practical tests for JavaScript functions using the Jest library. I will make sure to follow the AAA pattern to make my tests easier for other developers to read and understand. I will also try to use the TDD approach in practice.

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.

jSuites is a collection of lightweight common required javascript web components. It is composed of fully responsive vanilla plugins to help you bring the best user experience to your projects, independent of the platform. Same JS codebase across different platforms.

Admin UI Template is a modern, responsive, and customizable admin UI template for your business.

Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

generate statistics on the number of audience minutes your site is generating, and if readers make it to the end of your screeds

Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

All in one is a CLI to make your journey in web development less painful (it makes your life way easier).

Comments

Text height

Ode and bower package request

Owner

Gary Hepting

jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.

Text Neon Golden effect jQuery plug-in

Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

A library for boolean aliases to help you make your code more confusing and make your coworkers hate you.

PowerModeInput can make your text input box more compelling

Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element a bit easier, and a bit more fun!

jQuery plugin to make HTML tables responsive

"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

Json2video-nodejs-sdk - Create videos programmatically in the cloud from NodeJS: add watermarks, resize videos, create slideshows, add soundtrack, voice-over with text-to-speech (TTS), text animations.