Skip to content
This repository has been archived by the owner on Mar 9, 2018. It is now read-only.

my implementation (in case helpful)... #7

Open
syberknight opened this issue May 28, 2015 · 0 comments
Open

my implementation (in case helpful)... #7

syberknight opened this issue May 28, 2015 · 0 comments

Comments

@syberknight
Copy link

hello,
i spent DAYS researching & trying out all the various plugins that do this (FitText, FlowType, TextFill, TextFit, etc etc etc) as well as numerous off-the-cuff ideas from StackOverflow peeps, & finally landed on QuickFit.

but i had trouble getting it to work in my situation - i have a form that folks fill out & that data gets submitted to a MySQL database. i've got a bunch of PHP to process it all, and then, via AJAX, spit out the results into what may look like a table but is done with divs, flexbox, & inline-blocks etc. this data is not only sortable but filterable too, via dropdowns, & changes the results based on those selections without refreshing the page.

i instantly got QuickFit to work on my test (static html) file. but when i plugged it in to the real thing, it didn't. i discovered that it was getting triggered BEFORE all the data was loaded.

i'm not a "programmer" and only barely get by with what i find on the net (yeah, had someone else do the initial writing of the php & javascript etc). but i do know html/css. i think i spent 3 days reading, researching, & trying different things but nothing worked. it wasn't until i figured out the timing was off that i found my way to http://api.jquery.com/ajaxComplete

after changing the initialization of the script to use this instead of what you show in your demo's, it finally worked! if interested, here's what i used...

$(document).ajaxComplete(function() {
          $('.data-info, .cycle-type, .cycle-type3rd').quickfit({ 
              max: 13, 
              min: 10, 
              tolerance: 0.02,
              truncate: false,
          });
});

i now have a tiny issue of controling when it shrinks; i did play with the tolerance option but ended up leaving it at default as the best it'll do. so i just solved how it looks with some additional CSS'ing.

it would be cool if i could get it to utilize wrapping within its container size, but i'm making it work with the no-wrap option as your instructions indicate. i did find it works better with that than not. so, oh well - maybe a future version(?).

so, hope that helps in case anybody comes along with a similar situation & they're stuck.
.peace.:.jason.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant