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
Solved

Dynamically change fonts in CSS

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

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.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

856 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