Jump to content

Archived

This topic is now archived and is closed to further replies.

MobileParity

FitText.js

Recommended Posts

MobileParity

I am pretty good with CSS and using DevTools to target the changes that I want however I am terrible when using jQuery. I am trying to use the FitText.js plugin to resize my Masthead Titles when the screen is resized. I have followed a brief tutorial however it seems I am not adding the script to the correct area. I have tried the Custom Code section for header scripts. I have tried adding the code the wp-header via Hooker and still nothing.

Website URL:www.bingerr.com
Framework Version:DMS 2
WordPress Version: 4+
Plugins in Use: https://github.com/davatron5000/FitText.js
Server/Host:Flywheel
Screenshots:
Details: Code i am using is below:

<script src="jquery.fittext.js"></script>

<script>
$(document).ready(function() {
  //CHANGE the jQuery selectors using your Canvas Area's Section ID
 
  //Adding FitText Min/Max font size to Landing Page Masthead
  $("#mastheadusrim9x h1.masthead-title").fitText(1, { minFontSize: '50px', maxFontSize: '160px' });
})
 
(function( $ ){
 
  $.fn.fitText = function( kompressor, options ) {
 
    // Setup options
    var compressor = kompressor || 1,
        settings = $.extend({
          'minFontSize' : Number.NEGATIVE_INFINITY,
          'maxFontSize' : Number.POSITIVE_INFINITY
        }, options);
 
    return this.each(function(){
 
      // Store the object
      var $this = $(this);
 
      // Resizer() resizes items based on the object width divided by the compressor * 10
      var resizer = function () {
        $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
      };
 
      // Call once to set.
      resizer();
 
      // Call on resize. Opera debounces their resize by default.
      $(window).on('resize.fittext orientationchange.fittext', resizer);
 
    });
 
  };
 
})( jQuery );
 
</script>

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Unfortunately, we are unable to provide support for third party scripts. However, if you're still using this:

 

<script src="jquery.fittext.js"></script>

 

Then that will not work, you need to provide the full path to the script.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • cas45
      By cas45+
      I am running a site based on PageLines Framework 2.5.0. I am making some changes to a current website and managed to find a script that will do what I want.:
       
      $(".vend-cat").each( function() {
          if ( $(this).find(".no-vendors").html() == '' ) {
                 $(this).hide();
          }
      } );
       
      I have tested it on jsfiddle and it works fine. It does however need to be adapted to work with jQuery for pagelines and wordpress. Any help or advice?
       
      Thanks
    • medtime
      By medtime+
      Hello,
      We are using ProPricing but We cant change the colors from the Table. 
      How can we change it? It is all grey and we would like to add colors according our identity.
      Best,
       

    • unifeyed
      By unifeyed+
      Hello there. 
      I am trying to have all the ® symbols throughout my website superscript without having to individually go to each symbol and wrap them in <sup> tags. There is quite a bit of them. I have the following code within the Custom Scripts, but it seems to cause issues with the Hamburger navigation, as it does not seem to work. Can you offer up some assistance? 

      <script>
      jQuery(document).ready(function() {
                 jQuery("body").html(
          jQuery("body").html().replace(/®/gi, '<sup>®</sup>').replace(/®/gi, '<sup>®</sup>')
         );
              });
      </script>
    • ppotent
      By ppotent+
      Any chance of a pagelines table plug-in coming? I know that the use of short codes and bootstrap can achieve this, but I can't seem to find any easy/visual editor way of doing this. There are table plug-ins around for wordpress, but honestly, they are pretty clunky. I'd pay for a tables plug-in, given how much I would use tables if I could.
       
       
    • Perry
      By Perry+
      Hello there,
      We have started experiencing a crippling issue within the last few days. It seems that ever since three days ago the CSS will not load for our pages outside of the DMS editor. Inside of the editor everything appears to be looking fine, but after publishing and viewing the page in a new browser our elements are all over the place, and in the console it appears that there is an error stating that the CSS did not get loaded. Looking through FTP, it seems that the two CSS files in the pagelines folder in wp-content are now missing. We did not access this folder or modify any files prior to this.  What kind of problem could this be? We are totally halted on any work we can perform until this is solved, so any help would be greatly appreciated. 
      An example of the phenomenon: http://datesafe2.21thirteenhost.com/category/ask-mike/
      Best,
      Perry
×