Solved

Dynamically change fonts in CSS

Posted on 2011-09-28
5
175 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
5 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

762 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now