freqdec / slabtext Goto Github PK

View Code? Open in Web Editor NEW

1.3K 1.3K 144.0 113 KB

A jQuery plugin for producing big, bold & responsive headlines

Home Page: http://freqdec.github.io/slabText/

License: MIT License

JavaScript 31.46% HTML 68.54%

slabtext's People

Contributors

Stargazers

Watchers

Forkers

paultyng iamjoshhansen bronfman ursuleacv idearise emayk maxfromhamburg rdomingue cyrke paizai doubleotoo lipsumar tazzkiller khamilton acelasiom jksdua cmex su germanocaldeira lickasha jfayard dineshkummarc krijosoft fengyiyi nvdnkpr terrcin tianyow jatins gizm0bill maheshbabu antonydoyle dleatherman danielriemer kehezen spantree pourbrew gurprit steallan unabridgedxcrpt kumarlab matsnl65 michellelaralin liquidran bensochar sideways-nyc gschoppe jerbellefeuille mentordct chantalgo dindows-systems jpaezsa gkniazkov sethvincent web5design bigrats rdancer yoanmarchal edmellum nyergesadam charlie8230 rocheicabo goodtwin muc jeffkent drrobotnik qfishy mittsh jackmakesthings arron21 ifyoumakeit andreipopovici bocian69 blezek dlorenc ahmadkadhim chrishoman thetoke imclab gaecom ryanlfoster atomicreach nufusion alterego-buzzvil quatmo webeau controlledchaos sschepis dboydor ganlanyuan nullnotfound espenegeland studiovm andrewnick kimpetersend1 meadowhb josephurciuoli elen-palii happychapmedia warpsmith kscherr

slabtext's Issues

Trigger while resizing is happening, instead of on resize complete

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.

Strange failure on iPhone Safari when multiple strings manipulated

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:

This only seems to happen if there are multiple strings to parse. If you remove one of those h1 elements above, iPhone behavior is as expected.
For some reason, adding scaling instructions, eg. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> to the document produces expected behavior.
…but only in this minimal test scenario. In the real, more complex layout I'm working on, it only works after rotating between portrait/landscape, and even then kind of inconsistently.

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.)

Invoking an action after all the slabbing is finished.

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 } )

Problem in mobile iOS (version 4) iphone etc?

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!

Headline Links not working

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?

License Clarification

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.

No support for the latest version of Jquery

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.

slabtext-linesize-[N] and slabtext-linelength-[N] not added

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

Simulating fitText.js with SlabText

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

text overshooting when different font/font-weight is used

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

Text breaks out of container until I resize window.

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.

onRender with less character than minCharsPerLine

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)?

SlabText for content that is hidden on load & then displayed via JS

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

Parameterize the minimum characters per line

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.

Stop responsive behaviour

Is there any way that you can add an option to stop the responsive behaviour?

Eclipse crashes when parsing slabText

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.

Optionally take vertical space into account

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?

Usage in Bower: invalid-meta slabText is missing "main" entry in bower.json

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!

Can't get slabText working in my wordpress site

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

Doesn't work on input type submit

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.

Can't get it working on my site.

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.

Recommended update: Lazy loading support

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

Resize Problems and Hyphen Issues

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!

"Please do not do this in a production environment"

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 👍

Resizing just the first line

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

Produced headlines make no sense!

Here, at JsFiddle: it overlaps and doesn't line up beautifully.

http://jsfiddle.net/K8Eta/1

Improper sizing in Chrome and Safari

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.

Does it work with jQuery 1.8.3?

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.

Strips inline elements

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.

License?

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!

Weird tiny adjustment

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 ?

done callback?

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
});

Using Slabtext In Rotating Banners

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.

Doesn't work inside fixed height container

Any way to make this work inside of a fixed height container?

demo page down

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.

Double pipe not breaking lines in Wordpress plugin

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!