Solved

Dynamically change fonts in CSS

Posted on 2011-09-28
5
179 Views
Last Modified: 2012-06-27
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
Comment
Question by:Julian Matz
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 36740695
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
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 167 total points
ID: 36741608
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
 
LVL 1

Assisted Solution

by:danbaugher
danbaugher earned 166 total points
ID: 36742742
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 167 total points
ID: 36749335
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
 
LVL 21

Author Comment

by:Julian Matz
ID: 36952667
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question