freqdec / slabtext Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin for producing big, bold & responsive headlines
Home Page: http://freqdec.github.io/slabText/
License: MIT License
A jQuery plugin for producing big, bold & responsive headlines
Home Page: http://freqdec.github.io/slabText/
License: MIT License
Hello,
Is there a way i could make this script trigger during the browser resize event, instead of after the user has stopped resizing the browser? it just seems a little bit choppy the way it is right now.
I'm not entirely sure whether this is a problem in the script or if something changed in the browser(I've so far been unsuccessful downgrading a device in order to test), but I'm running out of things to try, so wanted to at least document it.
Working with this minimal file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://raw.github.com/freqdec/slabText/master/js/jquery.slabtext.min.js"></script>
<script>
$(document).ready(function() {
$('h1').slabText({
});
});
</script>
</head>
<body>
<h1>Google</h1>
<h1>Bing</h1>
</body>
</html>
The output is as expected in desktop browsers, and iPad Safari: Two lines of gigantic text spanning the entire browser window. On iPhones(5 and 4s, iOS6), the text scaling is not applied, although the lines do get stretched to fill the horizontal space. So we can at least tell that the script is running, and just some portion of the process is failing.
Further complications:
h1
elements above, iPhone behavior is as expected.<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
to the document produces expected behavior.Ideas?
(As a sidenote, there's a strong possibility of "stupid mistake" here. The problem doesn't seem to be happening on the Betteridge's Law site–this is for a new project–so maybe I've just gone blind to something.)
Hi, I've made some silly workaround to fire up function after the script has finished resizing but maybe there could be a prettier and more permanent solution in the script.
return this.each(function(){
(...)
}).promise().done( function(){ alert("Done } )
Hi there, like the plugin, great concept and seems to work well in all browsers - except mobile ios (version 4)... anyone else having problems viewing it on mobile safari? Here's a link: http://www.beenherethereandeverywhere.com.hk Thanks!
This may be the wrong place to seek help however I can't seem to get the headline links working.
This is the result,
http://mysite.com/?p=3883Test Post!Test Post!
And the source code,
http://mysite.com/?p=3883Test Post!Test Post!<a href="" title=""><h1></h1></a>
Slabtext seems to messing with my links that are being constructed with php with wordpress, here's my code to produce the headline links,
echo '<a href="' . the_permalink() . '" title="' . the_title_attribute() . '" ><h1>' . the_title() . '</h1></a>' . "\n";
Any idea what's happening?
Love the plugin, but the license is a bit confusing. Could you potentially change it to MIT License or point us to one that could be seen to be similar?
Thanks again.
It appears in my wordpress, that has the latest 1.11.1 of jquery the script does not work, if I try and change the code to a legacy version of the jquery it does work but that breaks other things on my site as they are reliant on the latest version.
Any advice greatly appreciated. I just updated from 2.3.1 to 2.4 to get the classnames slabtext-linesize-[N] and slabtext-linelength-[N].
I don't see the classes added. The right script is loading, slabtext is working, but no slabtext-linesize-[N] or slabtext-linelength-[N] classes.
I checked the demo and the new classes do not appear to need 'switching on'. Feeling dim, any help appreciated.
Regards
Mike
Hi,
I was using fitText before and I'm testing slabText now. For my application, sometimes I prefer to have fitText for titles, because with slab's default config, my titles gets too big and If I try to set a small max-font-size then I get too much irregular spacing between words.
So is there a way to mimic fitText behavior, so I don't have to include 2 different scripts ? I used font ratio = 1 and It seems to do the trick. Just wanted to make sure...
Cheers
When using the script on an element with a different font or font-weight than the body, The text overshoots the container. This only happens when the page is loaded, and is rectified when the viewport is resized
see here...
http://paul-browne.github.io/articlr/koe
bug not apparent in Firefox
The text breaks out of the container by about 20 pixels until I re-size even 1 pixel.
I had to disable the width check on the window resize event so I could trigger with the window resize event to handle the issue.
I am using border-box on everything, but the container has no padding, margin, or border.
Hi,
I noticed that the onRender function doesn't get called when the headline has less characters than the minCharsPerLine option.
Is this wanted? Wouldn't it be useful if it was still called, to determine when the script finishes the render (even if no edits were done in the DOM)?
Firstly great plugin!!
I'm using this in a forthcoming project which is using jQuery to create some content on the fly (i.e. after the doc ready event). Specifically, after an AJAX form submission, I want to display a little thank you message. Whilst it's all fairly simple in theory, SlabText does not process on the hidden content in its usual cool way.
Here's my code:
<div id="result" class="container hide">
<div class="row">
<div class="span7">
<h2 class="slab">
<span class="slabtext">Thanks!</span>
</h2>
</div>
<div class="span5">
<h2 class="slab">
<span class="slabtext">We'll be in touch</span>
<span class="slabtext">very soon</span>
</h2>
</div>
</div>
</div>
As you will probably notice, I'm using Twitter's Bootstrap & the 'hide' class to set a parent div to be display: none
. Once the form is submitted I set this div to be display: block
(via JS) but no joy.
I've also included a line to process slab text again within my JS function (i.e. after changing the display): $('#intro').slabText();
Alas this still doesn't work. I'm sure I'm being stupid & missing something fundamental, if so please advise.
Thanks for any assistance & once again for making a great little plug-in!
George
Currently, slabText creates a new line with as few as 2 characters, which produces some huge text in some cases:
The threshold for new lines appears to be set here but it might be nice to make this an optional parameter, defaulting to 2
.
Is there any way that you can add an option to stop the responsive behaviour?
Hi All,
I've spotted that commit f926eb5 of the minimised version of the JavaScript library makes Eclipse Indigo (3.7.1 on MacOS 10.7.2) crash when parsing it for symbols to show in the "Script Explorer" window. The same does not happen with the debug version of the file.
You can tell one or more Eclipse components crashed because the list of files Script Explorer shows is incomplete, and right click stops working. You must relaunch Eclipse.
I know this sounds quite like a stupid bug freqdec may not even have anything to do with, but it may suggest some other problem freqdec or others may want to investigate.
Thanks.
G.
The docs mention that, unlike the original slabtext algorithm vertical spacing is not taken into account in this plugin. I'm curious as to whether this is a bug or a feature? I'm looking to adapt slabText to autofill a block with a fixed height and width, so I'd be interested in adding this feature and doing a pull request. But before I start, I'm wondering if you ran into an issue with vertical spacing in the original design?
Even though component.json exists and the "main" property is listed, Bower still complains:
bower slabText#* invalid-meta slabText is missing "main" entry in bower.json
bower slabText#* invalid-meta slabText is missing "ignore" entry in bower.json
I think just adding a valid bower.json file with the "main" property would fix this. My project uses wire-dep and it needs to know which file is the main file, to include in the project .
Cheers!
Hey there, I'm desperately trying to get slabText working on my Wordpress site. I've got it working without any problems in standalone pages (not on Wordpress) but there's something in the Wordpress theme I'm using which seems to cause a problem.
Have tried everything any would REALLY appreciate any advice you can give...
This is the site in questions: http://madaboutlondon.com
Cheers,
Mikael
Applying slabText to an HTML form's submit button doesn't work. Example:
<input type="submit" value="Click Me!" name="submit" id="submit-button" />
I realize I can work around it with <button>Click Me!</button>
or <a class='button' href='example.com'>Click Me!</a>
and triggering the submit via jQuery. But, if a plugin is generating the submit button, I may not have the ability to do that.
This looks like a great plugin! The designers at my company are constantly giving me full-width, justified text that needs to be responsive, so this would be a perfect tool to add to our website.
Unfortunately, I can't seem to get it to work. I've tried a lot of different implementations and double checked my code before posting here.
My code can be viewed/modified here: http://codepen.io/LukeMichaels/pen/lkqrL
I double checked and made sure that I was setting up my JS correctly on codepen.io by referencing this pen: http://codepen.io/justincavery/pen/ecfEl
Any help would be greatly appreciated.
I added something to the plugin that I think should become an integrated feature as it provides a major performance boost: Lazy-loading. This allows one to have thousands of slab-text marquee headlines on a page while reducing the performance impact to a bare minimum. The UX on pages with too many slab-text headlines - especially mobile or orientation change, but also desktop with viewport resizing - is poor without this.
To do this is not complicated; here is how I did it: Within a div with class "marquee", I have hundreds of bootstrap 4 cards (with class "card-board"), each having their own individual slab-text headlines.
In the page CSS, I added two rules that collapse or show the container holding the slab-text, based upon whether the "visible" class has been added to the cards:
div.marquee div.card .card-block div.name-and-logo { visibility: collapse; }
div.marquee div.card.visible .card-block div.name-and-logo { visibility: visible; }
At the end of jquery.slabtext.js, I added an IntersectionObserver that toggles the visible class for cards that come into view:
// Hide Card divs that aren't in the viewport
// this is the target which is observed
var marquees = document.querySelectorAll('.card-board');
// configure the intersection observer instance
const config = {
// If marquees gets within 50px, make it visible so fonts are stretched
rootMargin: '50px 0px',
threshold: 0.01
};
let observer = new IntersectionObserver(onIntersection, config);
marquees.forEach(marquee => {
observer.observe(marquee);
});
function onIntersection(entries) {
entries.forEach(entry => {
entry.target.classList.toggle('visible', entry.intersectionRatio > 0);
});
}
Finally, I modified $.fn.slabText to resizeSlabs on scroll events, in addition to the existing code that does this already on width change events:
if(!settings.noResizeEvent) {
$(window).resize(function() {
// Only run the resize code if the viewport width has changed.
// we ignore the viewport height as it will be constantly changing.
if($(window).width() == viewportWidth) {
return;
};
viewportWidth = $(window).width();
clearTimeout(resizeThrottle);
resizeThrottle = setTimeout(resizeSlabs, settings.resizeThrottleTime);
});
// Start of added code
$(window).scroll(function () {
clearTimeout(resizeThrottle);
resizeThrottle = setTimeout(resizeSlabs, settings.resizeThrottleTime);
});
// End of added code
};
Cheers!
Eric
The site in question is up - http://whatsyourmark.org
slabText works and loads great on 10" screens and up but we run into problems with smaller screens and anytime we resize the screens. I have the text I want on each line marked off in my html with 'slabtext' classed spans. Each time the window resizes it doesn't fire correctly - is this because I'm using jQuery(document).ready instead of a window event?
Also, as you can see from the url above, when the second line has a hyphen in the line the line is broken into 2 lines at the hyphen. This mainly happens on smaller viewports. Any suggestions for this issue?
Awesome script BTW! Thanks!
Hi, what's the recommended use for a production environment (intranet)?
In issue #31 you mention using ("#someElem").show().slabText()
to reduce JS overhead
I'm only using local webfonts files (no internet, no loading of Google Fonts)
thx 👍
I have a site that I want to resize the text only if the title is not filling a line.
For example:
This short title could be larger - want it automatically filling the width: http://allaboutchris.org/blog/2012/being-judas/
Whereas this long title, I want to keep at 44px, since it doesn't need to be any larger: http://allaboutchris.org/blog/2012/why-windows-8-is-going-to-be-rubbish-lowrys-law/
Any ideas?
Bless,
Chris
Here, at JsFiddle: it overlaps and doesn't line up beautifully.
I have an odd issue in Chrome and Safari and possibly other webkit browsers. The text loads but it is scaled to about half the width of available space. If I re-size the browser, the text adjusts properly.
Was trying to get this to work using jQuery 1.8.3, I'm not seeing any errors in the console so I'm assuming it doesn't work with the latest version since the demo site is running 1.6. Any insight is appreciated.
I'm working on a design that is supposed to have a line of large responsive text where the second part of the line is slightly smaller than the rest. I tried wrapping the whole thing in a span.slabtext and then wrapping the second part in span.smaller (styled to 90% font-size). Seems like this should be the right way to accomplish this, however, for some reason the nested span gets stripped out by slabText. I can't see any reason why that needs to happen -- at least not when the span.slabtext is pre-applied. Is it possible this could be fixed?
I'm using it on one line of text, so I could probably use FitText instead, but I'd rather stick with slabText because it's more versatile. I'd feel rather silly if I end up needing to use two different text fitting scripts.
Is this code intended to be used freely? If so, a license header or some sort of wiki page would be helpful. Even a note on the demo page is probably enough. Thanks!
Hi,
First, what I'm trying to do:
Once slabText has adjusted text properties, i save these CSS values so I can include it in a page later, without having to recalculate.
Basically there is an app you write and adjust texts, then it exports pure string of html, with all inline styles.
I was plying with it and so far so good until.. a box with fixed width 250px containing 2 words. In the app, both words fit on the same line. After export (even the html of the export page is 100% the same, as well as the CSS (it's the same file)) the 2nd word is wrapped and goes down to the second line.
I inspected closely and found that actually in the box where it works fine (in the app), the last letter is a very little bit out of its container. It is very weird because it should wrap. What kind of sorcery is this ?
I'm wondering why, when the CSS is totally the same, the HTML totally the same it doesn't render the same ! I'm almost sure it does not come from the plugin.
As a further test, i resized my browser of very few pixels, to get slabText to render again. And text in fixed width divs, way smaller than the viewport rendered a bit differently. (and this time it was actually fitting in the box and the export was fine)
Do you have any idea what is happening here ?
a nice feature to have would be if slabText
returned a promise that could be used to trigger other events after it is done processing texts.
var slabtext = $('h1').slabtext();
slabtext.then(function(){
// trigger some other update function
// such as div resize to accommodate for div dimension changes made by slabtext
});
I am having trouble using slabText for rotating banners. It seems that any text that is not currently visible does not get (re)sized. I can force the resize after transition with $(window).trigger('resize'); but this seems to create a jittery effect even when the window is not being resized.
Any way to make this work inside of a fixed height container?
http://www.frequency-decoder.com/demo/slabText/ doesn't load.
Why not host on github pages? Or at least mirror the site at http://freqdec.github.io/slabText/
Willing and able to help.
The double pipe || does not seem to work, even though I have gone to the specific post page and checked:
Activate
Use ||(double-pipe) for dividing the title
Instead, what happens is that the text expands to the full width of the page as it should, but the || shows up as text instead of a line break. Is there a way to fix this or is there something I may be doing wrong?
Please help. Thanks so much!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.