Solved

Dynamically change fonts in CSS

Posted on 2011-09-28
5
176 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

930 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

16 Experts available now in Live!

Get 1:1 Help Now