JavaScript and client side scripting.
Moderator: General Moderators
seaten
Forum Newbie
Posts: 22 Joined: Thu Mar 16, 2006 1:30 pm
Post
by seaten » Thu Mar 23, 2006 1:09 pm
feyd | Please use Code: Select all
tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Hi guys,
I want the user to pick a font type, at the moment I have it in check boxes but I prefer to have it in a drop down list.
But the key is to have each font option displayed in their own style. Any Ideas ?
here is my current code:Code: Select all
<b>Choose a Font Style for your Text:</b>
<font face= arial>Arial</font>
<input name="fontType" type="checkbox" id="sel_templateA" value="arial">
<font face="Bookman Old Style">Bookman Old Style </font>
<input name="fontType" type="checkbox" id="sel_templateA" value="Bookman Old Style">
<font face="Comic Sans MS">Comic Sans </font>
<input name="fontType" type="checkbox" id="sel_templateA" value="Comic Sans MS">
<font face="Courier">Courier </font>
<input name="fontType" type="checkbox" id="sel_templateA" value="Courier">
feyd | Please use Code: Select all
tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
onion2k
Jedi Mod
Posts: 5263 Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com
Post
by onion2k » Thu Mar 23, 2006 1:44 pm
Code: Select all
<select name="font">
<option value="arial" style="font-family: arial;">Arial</option>
<option value="verdana" style="font-family: verdana;">Verdana</option>
<option value="tahoma" style="font-family: tahoma;">Tahoma</option>
</select>
seaten
Forum Newbie
Posts: 22 Joined: Thu Mar 16, 2006 1:30 pm
Post
by seaten » Thu Mar 23, 2006 2:02 pm
Thanks man but that didnt work , any idea
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Thu Mar 23, 2006 2:33 pm
like onion2k posted,
Code: Select all
<select>
<option value="arial" style="font-family: Arial, sans-serif">Arial</option>
<option value="times" style="font-family: Times, serif">Times</option>
<option value="gaumond" style="font-family: Gaumond, serif">Gaumond</option>
<option value="verdana" style="font-family: Verdana, sans-serif">Verdana</option>
<option value="courier" style="font-family: Courier, monospace">Courier</option>
</select>works in Firefox. It does not work in IE however even though it is listed on Microsoft's page for select tags:
http://msdn.microsoft.com/workshop/auth ... select.asp
seaten
Forum Newbie
Posts: 22 Joined: Thu Mar 16, 2006 1:30 pm
Post
by seaten » Thu Mar 23, 2006 2:43 pm
ok im using IE, guess I'll have to stick with the old way then.... thanks anyway
pickle
Briney Mod
Posts: 6445 Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:
Post
by pickle » Thu Mar 23, 2006 3:41 pm
Code: Select all
<select>
<option value="arial" style="font-family: Arial, sans-serif;">Arial</option>
<option value="times" style="font-family: Times, serif;">Times</option>
<option value="gaumond" style="font-family: Gaumond, serif;">Gaumond</option>
<option value="verdana" style="font-family: Verdana, sans-serif;">Verdana</option>
<option value="courier" style="font-family: Courier, monospace;">Courier</option>
</select>
To be 100% savvy, you should end the style declaration with a semi-colon. It's a long shot though...
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Benjamin
Site Administrator
Posts: 6935 Joined: Sun May 19, 2002 10:24 pm
Post
by Benjamin » Thu Mar 23, 2006 4:47 pm
I'm not sure but ie might be case sensitive with font variants as well.
mattcooper
Forum Contributor
Posts: 210 Joined: Thu Mar 17, 2005 5:51 am
Location: London, UK
Post
by mattcooper » Fri Mar 24, 2006 1:24 pm
Maybe use a hidden layer and CSS with a litle bit of JS to emulate the <select>??
feyd
Neighborhood Spidermoddy
Posts: 31559 Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA
Post
by feyd » Fri Mar 24, 2006 3:52 pm
yeah, making your own select is the way to go for the most part anyways since on Windows machines it's often rendered by the OS rather than the browser (layering issues galore, there are hacks, but that's beside the point.)