binding text with fonts and displaying
Hi,
I'm trying to bind fonts from a DropDown menu into the text typed in INPUT box and displaying it in a P tag. Can you please help me how to go about it. I tried some ways...
here it what i tried so far
<script type="text/javascript" >
function txtFunction() {
x=document.getElementById('inputText');
y=document.getElementById('displayText');
y.innerHTML=x.value;
x.value='';
}
</script>
<style>
p{line-height:25px; text-align:center; padding:50px 0 0 0;}
.displayBoard{ background:url(longsign.jpg) no-repeat left top; width:470px; height:165px; margin:0 auto;"}
</style>
</head>
<body>
<div style="width:470px; margin:0 auto; ">
<div class="displayBoard">
<p id="displayText"></p>
</div>
<!--for Text-->
<input type="text" id="inputText" style="width:300px; margin:25px 10px 0 0; border:1px solid #AC674A; height:40px; " />
<select style="width:300px; margin:25px 10px 0 0; " >
<option style="font-family: Andalus" value="Andalus.ttf">Andalus</option>
<option style="font-family: Arial" value="Arial.ttf">Arial</option>
<option style="font-family: Calibri" value="Calibri.ttf">Calibri</option>
<option style="font-family: Comic Sans MS" value="Comic Sans MS.ttf">Comic Sans MS</option>
<option style="font-family: Euphemia" value="Euphemia.ttf">Euphemia</option>
<option style="font-family: Gabriola" value="Gabriola.ttf">Gabriola</option>
<option style="font-family: Georgia" value="Georgia.ttf">Georgia</option>
<option style="font-family: Impact" value="Impact.ttf">Impact</option>
<option style="font-family: Narkisim" value="Narkisim.ttf">Narkisim</option>
<option style="font-family: Palatino" value="Palatino.ttf">Palatino</option>
<option style="font-family: Sesame" value="Sesame.ttf">Sesame</option>
<option style="font-family: Sylfaen" value="Sylfaen.ttf">Sylfaen</option>
<option style="font-family: Tahoma" value="Tahoma.ttf">Tahoma</option>
</select>
<div style="clear:both;"></div>
<input type="button" value="Submit" onclick="txtFunction()" style="float:right; margin:25px 10px 0 0; " />
</div>