2

Context

Here is a jsfiddle that I've been working with: http://jsfiddle.net/21r7uvgx/

For context, I'm using http://malsup.com/jquery/cycle/basic.html to make the rotating banner cycle through each <a> within the .custom-banners wrapper. I have the script as an external resource within the jsfiddle.

Starting Point

The idea is to make each span that has multiple lines (purely from window size) apply Style A, and those that have just one line apply Style B. Resizing the window changes what style each span gets.

I'm doing it to the span instead of the a based on the assumption that to achieve what I want, I need to target a element that displays as a block by default.

Issue and Goal

The issue I'm running into is that with the cycling script, a span that is not visible has a height of 0, so the math isn't right and it won't apply the correct style, even once the span becomes visible.

The goal is to find a way to have it check a span when it becomes visible, and apply the correct style.

Bonus Goal

If there's a better way to calculate the lineheight and determine what style needs to be applied, I'd also like those suggestions.

I was using this before, but it was very buggy when I manually resized the window.

var divheight = $(this).height(); 
var lineheight = $(this).css('line-height').replace("px","");
if (Math.round(divheight/parseInt(lineheight)) >= 2) {
$(this).attr('style','font-size: 10px');
} else {
$(this).attr('style','font-size: inherit');
};
Community
  • 1
  • 1
James Cliburn
  • 205
  • 1
  • 2
  • 10
  • 1
    You could also try measuring the width of the text and compare it to the width of the container. See this post: http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript – VuoriLiikaluoma Jul 02 '15 at 04:36
  • Would that still be applicable with the window width being the only width to refer to? My wrapper's width is equal to the size of the window. – James Cliburn Jul 02 '15 at 04:48
  • I see no reason it wouldn't be. Just re-trigger any JS on a window resize event. – VuoriLiikaluoma Jul 02 '15 at 04:52

1 Answers1

1

Try this javascript. I have edited your javascript from the jsfiddle that you linked. If you don't want to change the font color (as in jsfiddle) and just want to change font size, then do it appropriately. Copy paste the below code to your jsfiddle and verify.

$(document).ready(function () {

    $(window).on("resize", function () {
        $('.custom-banners span').each(function () {
            var lineheight = 20;
            var divheight = $('.banner-link').height(); 
            if (divheight > lineheight) {
                $(this).css('color', 'red');
            } else {
                $(this).css('color', 'green');
            };
        });
    });
});
Hari Ram
  • 317
  • 4
  • 21