Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 192
  • Last Modified:

Dynamically change fonts in CSS

Hi! I have a drop-down list as follows:

<select name="Font" class="fontselect">
    <option  value="1">Arial Unicode</option>
    <option  value="2" >Arial (bold, italic)</option>
    <option  value="3" >Times New Roman</option>
    <option  value="4" >Times New Roman (bold)</option>
    <option  value="5" >Times New Roman (italic)</option>
    <option  value="6" >Times New Roman (bold, italic)</option>
    <option  value="7" >Verdana (bold)</option>
</select>

Open in new window


Unfortunately, I can't change anything on this list since the options are dynamically generated. What I'd like to do is have the option name displayed in the appropriate font. I have all the fonts defined in a CSS file, and their names are the defined the same as they appear above. Is this possible using Javascript/jQuery? I have the CSS figured out, I guess it's just a matter of whether or not there's a jQuery selector that will work on each of the <option> elements. If I could even change the value attribute, I could do something like this in CSS:

select.fontselect option[value="Arial (bold, italic)"] { font-family: "Arial (bold, italic)"; }

Open in new window


Unfortunately though, that doesn't seem to be an option right now (no pun intended).
0
Julian Matz
Asked:
Julian Matz
3 Solutions
 
Kyle HamiltonData ScientistCommented:
using jquery you can do this:

 
<script>
$(function(){

$('select.fontselect option[value="Arial (bold, italic)"]').css({ 'font' : 'bold italic Arial'});

// do same for other options/fonts

});

</script>

Open in new window


remember to include the jquery library before your script.
0
 
Kyle HamiltonData ScientistCommented:
sorry, correction:


<script>
$(function(){

$('select.fontselect option[value="2"]').css({ 'font' : 'bold italic Arial'});

// do same for other options/fonts

});

</script>

Open in new window

0
 
danbaugherCommented:
If the values will always be the same you can use that as a selector then apply the fonts that way using the .css().

I would go this route.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('.fontselect option[value=1]').addClass('arialunicode');
	$('.fontselect option[value=2]').addClass('arialbolditalic');
	$('.fontselect option[value=3]').addClass('times');
	$('.fontselect option[value=4]').addClass('timesbold');
	$('.fontselect option[value=5]').addClass('timesitalic');
	$('.fontselect option[value=6]').addClass('timesitalicbold');
	$('.fontselect option[value=7]').addClass('verdanabold');
});
</script>

<style type="text/css">

.arialunicode{font:bold 12px "Arial Unicode MS";}
.arialbolditalic{font:bold 12px "Arial Unicode MS";}
.times{font:normal 12px "times New Roman";}
.timesbold{font:bold 12px "times New Roman";}
.timesitalic{font:normal italic 12px "times New Roman";}
.timesitalicbold{font:bold italic 12px "times New Roman";}
.verdanabold{font:normal 12px verdana;}
</style>

</head>
<body>

<form id="form">
<select name="Font" class="fontselect">
    <option  value="1">Arial Unicode</option>
    <option  value="2" >Arial (bold, italic)</option>
    <option  value="3" >Times New Roman</option>
    <option  value="4" >Times New Roman (bold)</option>
    <option  value="5" >Times New Roman (italic)</option>
    <option  value="6" >Times New Roman (bold, italic)</option>
    <option  value="7" >Verdana (bold)</option>
</select>
</form>



</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Create a fake dropdown ul+li
for example a simple one : http://blog.hladnik.net/2010/02/16/custom-selectbox/

you may found a lot (jquery or not) on google
0
 
Julian MatzJoint ChairpersonAuthor Commented:
Thanks for the suggestions! It looks like I'll have to somehow configure each font to have a unique ID so that this can be used for the value attribute in the drop-down list.

I'll give that a try.

Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now