beedie
06-12-2008, 07:27 PM
Is it possible to get a dynamically updated font.
For example i have a drop down with a few font options. I have to assume the user doesn't have them so I need to get them from the server. Can this be done with Ajax in such a way that the text with the new font can still be changed by local functions like these:
function changecolor(){
var oldHTML = document.getElementById('boldy').innerHTML;
var color = document.getElementById('input_field_1').value;
var newHTML = "<span style='color:" +color +"'>" + oldHTML + "</span>";
document.getElementById('boldy').innerHTML = newHTML;
}
///This one would be replaced by the ajax i hope//
function changefont(){
var oldHTML = document.getElementById('boldy').innerHTML;
var font = document.getElementById('font').value;
var newHTML = "<span style='{font-family:" +font +";}'>" + oldHTML + "</span>";
document.getElementById('boldy').innerHTML = newHTML;
}
function changefontsize(){
var oldHTML = document.getElementById('boldy').innerHTML;
var fontsize = document.getElementById('fontsize').value;
var newHTML = "<span style='{font-size:" +fontsize +";}'>" + oldHTML + "</span>";
document.getElementById('boldy').innerHTML = newHTML;
}
This is the boldy div:
<div id="boldy" class="boldy"><span style='{font-size:60px;}'> </span></div>
For example i have a drop down with a few font options. I have to assume the user doesn't have them so I need to get them from the server. Can this be done with Ajax in such a way that the text with the new font can still be changed by local functions like these:
function changecolor(){
var oldHTML = document.getElementById('boldy').innerHTML;
var color = document.getElementById('input_field_1').value;
var newHTML = "<span style='color:" +color +"'>" + oldHTML + "</span>";
document.getElementById('boldy').innerHTML = newHTML;
}
///This one would be replaced by the ajax i hope//
function changefont(){
var oldHTML = document.getElementById('boldy').innerHTML;
var font = document.getElementById('font').value;
var newHTML = "<span style='{font-family:" +font +";}'>" + oldHTML + "</span>";
document.getElementById('boldy').innerHTML = newHTML;
}
function changefontsize(){
var oldHTML = document.getElementById('boldy').innerHTML;
var fontsize = document.getElementById('fontsize').value;
var newHTML = "<span style='{font-size:" +fontsize +";}'>" + oldHTML + "</span>";
document.getElementById('boldy').innerHTML = newHTML;
}
This is the boldy div:
<div id="boldy" class="boldy"><span style='{font-size:60px;}'> </span></div>