I am looking to add a font selector/ text resizer on one of my websites and I was curious if anyone could tell me how to duplicate what they have done on this website?
I tried to look at the source, but I am not experienced enough to know what I am looking for. I have looked around on the internet and have not found a simple solution for what I am looking to do.
It would be nice if there was a script out there that I could copy and paste and apply it to a specific DIV id on my site.
<html><head><title></title><script type="text/javascript">
var text_size = 12;
function addSize(){
if(text_size <= 16)
text_size++;
document.getElementById('myTextContent').style.fontSize = text_size + "px";
}
function reduceSize(){
if(text_size >= 8)
text_size--;
document.getElementById('myTextContent').style.fontSize = text_size + "px";
}
function initTextSize(){
document.getElementById('myTextContent').style.fontSize = text_size + "px";
}
window.onload = initTextSize;
</script></head><body><div id="myTextContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in ligula metus. Praesent diam
urna, egestas quis venenatis vel, facilisis nec nisl. Suspendisse ac dolor rhoncus arcu porttitor
tincidunt. In pretium aliquam lacus. Aliquam enim erat, placerat mattis pellentesque vitae,
pellentesque at magna. In sed sodales ligula. Nunc sed pellentesque nisi. Nulla et nunc metus.
Curabitur mi erat, laoreet at dictum et, blandit feugiat nisl. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nullam mattis ornare dolor placerat
consequat. Duis imperdiet egestas convallis. Donec feugiat vulputate lectus vitae bibendum.
</div><input type="button" value="+" onclick="addSize()"><input type="button" value="-"
onclick="reduceSize()"></body></html>
Oh yea I forgot about the font type, well basically it just the same, just make an array of available fonts you want, make sure its a font that is available in all browser [default fonts]
and then you can use a drop down list to select your user what font they want
Ok i revised the code for you to add the functionality to change the font face
HTML Code:
<html><head><title></title><script type="text/javascript">
var text_size = 12;
function addSize(){
if(text_size <= 16)
text_size++;
document.getElementById('myTextContent').style.fontSize = text_size + "px";
}
function reduceSize(){
if(text_size >= 8)
text_size--;
document.getElementById('myTextContent').style.fontSize = text_size + "px";
}
function initTextSize(){
document.getElementById('myTextContent').style.fontSize = text_size + "px";
document.getElementById('myTextContent').style.fontFamily = fontArray[0];
}
function setFont(i){
var fontArray = ["Georgia", "Verdana", "Times New Roman", "Arial"];
document.getElementById('myTextContent').style.fontFamily = fontArray[i];
}
window.onload = initTextSize;
</script></head><body><select onChange="setFont(this.selectedIndex)"><option value=0>Georgia</option><option value=1>Verdana</option><option value=2>Times New Roman</option><option value=3>Arial</option></select><input type="button" value="+" onclick="addSize()"><input type="button" value="-" onclick="reduceSize()"><div id="myTextContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in ligula metus. Praesent diam
urna, egestas quis venenatis vel, facilisis nec nisl. Suspendisse ac dolor rhoncus arcu porttitor
tincidunt. In pretium aliquam lacus. Aliquam enim erat, placerat mattis pellentesque vitae,
pellentesque at magna. In sed sodales ligula. Nunc sed pellentesque nisi. Nulla et nunc metus.
Curabitur mi erat, laoreet at dictum et, blandit feugiat nisl. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nullam mattis ornare dolor placerat
consequat. Duis imperdiet egestas convallis. Donec feugiat vulputate lectus vitae bibendum.
</div></body></html>
Reply With Quote
Bookmarks