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

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

python - How to remove the Xframe Options header in django? -