javascript - Apply style to span based on number of lines within a cycling banner -
context
here jsfiddle i've been working with: http://jsfiddle.net/21r7uvgx/
for context, i'm using http://malsup.com/jquery/cycle/basic.html make rotating banner cycle through each <a>
within .custom-banners
wrapper. have script external resource within jsfiddle.
starting point
the idea make each span
has multiple lines (purely window size) apply style a, , have 1 line apply style b. resizing window changes style each span
gets.
i'm doing span
instead of a
based on assumption achieve want, need target element displays block default.
issue , goal
the issue i'm running is cycling script, span
not visible has height of 0, math isn't right , won't apply correct style, once span
becomes visible.
the goal find way have check span
when becomes visible, , apply correct style.
bonus goal
if there's better way calculate lineheight , determine style needs applied, i'd suggestions.
i using before, buggy when manually resized 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'); };
try javascript. have edited javascript jsfiddle linked. if don't want change font color (as in jsfiddle) , want change font size, appropriately. copy paste below code jsfiddle , 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'); }; }); }); });
Comments
Post a Comment