Set font on custom span jQuery Mobile slider labels

Question

Hello kind people of the internet,

I'm prepending and appending some text content as labels on the left and right side of a jQuery Mobile range slider, which works ok, but I can't seem to get the font to behave...the font is not displaying properly, and I can't seem to set/reset the label font either within the span.

Here's a test page: http://www.simdock.com/amort-test/dev-scratch/amort/scratchtesting-Slider-label-font-issue.html

Here's the javascript code that puts on the custom slider labels (minimum and maximum slider range values) on the left and right side of the slider:

 $.fn.extend({
 sliderLabels: function(left,right) {
 var $this = $(this); 
 var $sliderdiv= $this.next("div.ui-slider[role='application']");
 //
 $sliderdiv
 .prepend('<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px;">'+left+ '</span>')
 .append('<span class="ui-slider-inner-label" style="position: absolute; right:0px; bottom:20px;">'+right+ '</span>');     
  //   
 }
 });
 //
 $('#slider-PrincipleAmnt').sliderLabels('Min: $20', 'Max: $999');

I've tried many different iterations and attempts to explicitly set the font in the span, but alas, no luck.

I found the code originally out on the jquery forum at following link: https://forum.jquery.com/topic/how-do-i-add-text-labels-below-slider

The above link also has a jsfiddle, and the font comes out fine...so I just don't understand what I'm overlooking. http://jsfiddle.net/cUNyr/1/

Any help or advice would be much appreciated.

Update note: both Jack and Taifun offered some very helpful tips and ideas, however, I'm still struggling with what and how exactly to alter on the CSS? I'm also puzzled/frustrated about how I would even be able to determine in the text font even has a 'shadow' in the first place?...here's the span CSS as shown in Firebug:

<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px;">Min: $20</span>

There is no 'text shadow' attribute showing up in Firebug. Soooo, hmmmmm, what do I look for? and with what tool? Where is the 'text shadow' coming from? What would the CSS over-ride be?

At this point, how the odd-ball font appears, and how to fix it is still a bit of a mystery...but I'm sure there's an important lesson to be learned (a Zen thing: value your bugs) for the next time I run into a similar situation. Again: ya'll have been super helpful...and I feel like I'm close to having this figured out...but alas, not quite there yet.

I'm not really sure what your asking, but if your referring to the `text-shadow` then you can just override that with some CSS. — Jack, Dec 14 '12 at 03:17
Hi Jack, mucho thanks for the feedback as there's a learning opportunity here. What's still a bit confusing for me is after using Firebug to look at the span, there does not seem to be any CSS for just 'text-shadow'? — woody, Dec 15 '12 at 15:52
Hi again Jack, What Taifun pointed was most helpfull, and was right about the theme...and I had no idea the slider theme could affect a 'text-shadow' of the slider label. But I'm still uncertain about two other points: #1-What exactly would I be over-riding and setting with CSS to do the override of the font?, as again in Firebug I don't see anything specific for a text-shadow...and I don't have much experience creating CSS over-rides either and #2-Why wouldn't explicitly setting the text font within the Javascript for creating the span work?...why does a separate CSS file need to be created? — woody, Dec 15 '12 at 16:27

Taifun · Accepted Answer · 2012-12-15T23:29:45.587

1

in your example you are using data-theme="b" data-track-theme="a". Removing that you get a readable font. However if you like to use that theme, you can override the CSS as @Jack mentioned, more info here.

Overriding themes

The themes are meant as a solid starting point, but are meant to be customized. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify.

see also working example

EDIT: there is no need to create an external custom CSS file.... You can add this <style> in the head of your html to override your CSS, see also this fiddle

<style>
   .ui-slider-inner-label {
     text-shadow:none;
     color:black;
     font-weight:normal;
   }
</style>

edited Dec 15 '12 at 23:29

answered Dec 14 '12 at 14:32

Taifun

6,165
17
60
188

Note I added the following alteration to the span, and it took off the text shadow, set to blank and normal: text-shadow:none; color:black; font-weight:normal – woody Dec 15 '12 at 22:15
Hi Taifun, thanks mucho for the additional feed back...yet another way to alter the CSS is to add the CSS to head section. Very nice to have a solid example. To tell the truth, CSS seems a bit brittle and complex to me at this point...I'm kinda flailing and hacking at it using other folks code examples, without a solid understanding...sigh: I guess ya gotta start somewhere. Again: Thank You. – woody Dec 18 '12 at 20:03

score 1 · Answer 2 · answered Dec 15 '12 at 22:20

Note again the hints provided by Jack and Taifun were most helpful...but I did finally find a direct easy way to fix the issue by directly setting the text-shadow to none, then forcing the text to black (as was still displaying in white), and then to normal font (as was displaying in bold). So, while I didn't determine what exactly was inducing the shadow text, I did manage to at least reset it to a regular font using inline techniques, and avoided having to create an external custom CSS file.

  //
  $sliderdiv
  .prepend('<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px; text-shadow:none; color:black; font-weight:normal">'+left+ '</span>')
  .append('<span class="ui-slider-inner-label" style="position: absolute; right:0px; bottom:20px; text-shadow:none; color:black; font-weight:normal">'+right+ '</span>');      
  //

Set font on custom span jQuery Mobile slider labels

2 Answers2

Linked