davatron5000 / FitText.js

A jQuery plugin for inflating web type
http://fittextjs.com
6.75k stars 1.39k forks source link

Not resizing text when URL contains a hash tag #93

Closed elizabethhammond closed 10 years ago

elizabethhammond commented 10 years ago

Hi, I've prepared the following site using Fittext for the header, "2013" and "Holiday Greetings": http://2013holiday.uncods.webfactional.com/v18eh

Fittext works perfectly until you click one of the buttons on the site which adds a hash tag to the end of the URL, such as this: http://2013holiday.uncods.webfactional.com/v18eh/#oldwell AND then refresh the page. You have to refresh the page with the hash tag in order to replicate the problem.

Will anyone actually do this? I'm not sure, but I'd like to clear it up before sending out the link.

Thanks for any advice.

Elizabeth

davatron5000 commented 10 years ago

@elizabethhammond Took a look at this and it appears that your Was Scroll plugin is in conflict. Basically it causes the following to happen...

  1. Scroll plugin detects the #hashtag and hides the whole page and waits for the page to load.
  2. FitText and Lettering fire. Because the page is hidden hidden however, FitText interprets the element width as 0, which means it goes to the minFontSize.
  3. Page is show()n and then page scrolls.

Not sure what you can do, but removing the Scroll plugin will fix the issue. You could also try adding the following...

$(window).load(function(){
  $(window).trigger('resize.fittext');
});
// OR and this sets a timeout and is bad for performance.
window.setTimeout(function(){
    $(window).trigger('resize.fittext');
}, 100);
elizabethhammond commented 10 years ago

Thanks!