0

I have applied a jQuery plugin [textfill][1] to certain elements within my a view and a view-slideshow. I have locally linked the relevant .js file via the .info file.

In the view-slideshow the first node is only effected However in my other view all nodes are.

Within the views-slideshow i have attached the jQuery targeted class '.textfill' class through the views 'global: custom text field' and have added a div to the corresponding replacement pattern. With the normal view i have attached the class to the desired field via the corresponding field tpl.php file.

Here's what it looks like: http://imgur.com/a/I4VV4/

This is the plugin:

; (function($) {
$.fn.textfill = function(options) {
var defaults = {
  debug: false,
  maxFontPixels: 40,
  minFontPixels: 4,
  innerTag: 'a',
  widthOnly: false,
  callback: null,
  complete: null,
  explicitWidth: null,
  explicitHeight: null
};
var Opts = jQuery.extend(defaults, options);

function _debug_sizing(prefix, ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels) {
  if (!Opts.debug) {
    return;
  }

  function _m(v1, v2) {
    var marker = ' / ';
    if (v1 > v2) {
      marker = ' > ';
    } else if (v1 == v2) {
      marker = ' = ';
    }
    return marker;
  }

  console.debug(
    prefix +
    'font: ' + ourText.css('font-size') +
    ', H: ' + ourText.height() + _m(ourText.height(), maxHeight) + maxHeight +
    ', W: ' + ourText.width()  + _m(ourText.width() , maxWidth)  + maxWidth +
    ', minFontPixels: ' + minFontPixels +
    ', maxFontPixels: ' + maxFontPixels
  );
}

function _sizing(prefix, ourText, func, max, maxHeight, maxWidth, minFontPixels, maxFontPixels) {
  _debug_sizing(prefix + ': ', ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels);
  while (minFontPixels < maxFontPixels - 1) {
    var fontSize = Math.floor((minFontPixels + maxFontPixels) / 2)
    ourText.css('font-size', fontSize);
    if (func.call(ourText) <= max) {
      minFontPixels = fontSize;
      if (func.call(ourText) == max) {
        break;
      }
    } else {
      maxFontPixels = fontSize;
    }
    _debug_sizing(prefix + ': ', ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels);
  }
  ourText.css('font-size', maxFontPixels);
  if (func.call(ourText) <= max) {
    minFontPixels = maxFontPixels;
    _debug_sizing(prefix + '* ', ourText, maxHeight, maxWidth, minFontPixels, maxFontPixels);
  }
  return minFontPixels;
}

this.each(function() {
  var ourText = $(Opts.innerTag + ':visible:first', this);
  // Use explicit dimensions when specified
  var maxHeight = Opts.explicitHeight || $(this).height();
  var maxWidth = Opts.explicitWidth || $(this).width();
  var oldFontSize = ourText.css('font-size');
  var fontSize;

  if (Opts.debug) {
    console.log('Opts: ', Opts);
    console.log('Vars:' +
      ' maxHeight: ' + maxHeight +
      ', maxWidth: ' + maxWidth
    );
  }

  var minFontPixels = Opts.minFontPixels;
  var maxFontPixels = Opts.maxFontPixels <= 0 ? maxHeight : Opts.maxFontPixels;
  var HfontSize = undefined;
  if (!Opts.widthOnly) {
    HfontSize = _sizing('H', ourText, $.fn.height, maxHeight, maxHeight, maxWidth, minFontPixels, maxFontPixels);
  }
  var WfontSize = _sizing('W', ourText, $.fn.width, maxWidth, maxHeight, maxWidth, minFontPixels, maxFontPixels);

  if (Opts.widthOnly) {
    ourText.css('font-size', WfontSize);
  } else {
    ourText.css('font-size', Math.min(HfontSize, WfontSize));
  }
  if (Opts.debug) {
    console.debug('Final: ' + ourText.css('font-size'));
  }

  if (ourText.width() > maxWidth || ourText.height() > maxHeight) {
    ourText.css('font-size', oldFontSize);
  }
  // call callback on each result
  if (Opts.callback) Opts.callback(this);
});

// call complete when all is complete
if (Opts.complete) Opts.complete(this);

return this;
};


})(jQuery);

this is my other .js file

jQuery(function(){
   jQuery('.textfill').textfill({ maxFontPixels: 200 });
});

i also should note that i am a relative beginner to drupal aswell as using stackerexchange

0

If you are trying to affect all nodes within the view, why not iterate over all the nodes using jQuery to add your class? Ex.: $('selectors for nodes inside view').addClass('textfill'); This is like calling .each(), except the iteration is implicit. Then, after you search the DOM and add the classes you want, call $('.textfill').textfill(); .

  • Hey diek. real sorry i took so long to reply. I did your suggestion but still cant get it to work. Ill keep trying – Jeremy Apr 13 '13 at 12:38
0

I had the same problem using the Views Slideshow: jquery Cycle, I resolved it by adding : "display:block !important" in my css file. The problem was caused by textfill not able to evaluate the height and width of the divs that are hidden dynamically by the jquery plugin. Since the slides are displayed "position:absolute" in my design, that change did not affect the rendering of the slider, and now all the text in every slides are getting resized.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.