• CA Lessons: Landscaping To Reduce Wildfire Risk
    While there are no ways to fireproof a property, there are strategies to design and maintain landscapes for reduced vulnerability. Click here to learn more.

I want a "text bigger" button.

V

Vikings

LawnSite Bronze Member
Location
canada
I had a website, my weather channel I thought though it's not there now, and it had a button that controlled text size. I'm trying to make a site with a template that has small writing and I thought it would be nice to have that "make text bigger" button in there.
I know about Ctrl++ but anyone know where a script is that I could place in my site?
 
topsites

topsites

LawnSite Fanatic
Location
Richmond Virginia
Oh, I always use Ctrl w/ mouse wheel lol, that ctrl + is a neat trick.
You might check into radio buttons, likely along the lines of a javascript, but idk...
 
D

Dirty Water

LawnSite Fanatic
Location
Redmond, WA
Here is something I just wrote for you.

Code: 
<html>
	<head>
		<title>Text size Control Via Javascript</title>
	</head>
	<script language="javascript">
		function ChangeFontSize()
		{
			var newFontSize;
			var selIndex = document.frmTextSize.ddlFontSizeSelector.selectedIndex;
			
			newFontSize = document.frmTextSize.ddlFontSizeSelector.options[selIndex].value;
			document.body.style.fontSize = newFontSize;
		}
	</script>
	<body>
	
	<p>Test Text!Test Text!Test Text!Test Text!Test Text!Test Text!Test Text!Test Text!Test Text!</p>
	
	<form id="frmTextSize" name="frmTextSize">
		<select id="ddlFontSizeSelector" onclick="ChangeFontSize();">
			<option value="10pt">Tiny</option>
			<option value="12pt" selected>Small</option>
			<option value="14pt">Medium</option>
			<option value="16pt">Large</option>
			<option value="18pt">Huge</option>
		</select>
	</form>
	</body>
</html>
Obviously, modify it to work in your site. It works off modifying the body tags style sheet element, so any inline styles will override it, but that could be modified.

You can view it in action here.
 
OP
V

Vikings

LawnSite Bronze Member
Location
canada
Dirty Water said:
Here is something I just wrote for you.

Code: 
<html>
	<head>
		<title>Text size Control Via Javascript</title>
	</head>
	<script language="javascript">
		function ChangeFontSize()
		{
			var newFontSize;
			var selIndex = document.frmTextSize.ddlFontSizeSelector.selectedIndex;
			
			newFontSize = document.frmTextSize.ddlFontSizeSelector.options[selIndex].value;
			document.body.style.fontSize = newFontSize;
		}
	</script>
	<body>
	
	<p>Test Text!Test Text!Test Text!Test Text!Test Text!Test Text!Test Text!Test Text!Test Text!</p>
	
	<form id="frmTextSize" name="frmTextSize">
		<select id="ddlFontSizeSelector" onclick="ChangeFontSize();">
			<option value="10pt">Tiny</option>
			<option value="12pt" selected>Small</option>
			<option value="14pt">Medium</option>
			<option value="16pt">Large</option>
			<option value="18pt">Huge</option>
		</select>
	</form>
	</body>
</html>
Obviously, modify it to work in your site. It works off modifying the body tags style sheet element, so any inline styles will override it, but that could be modified.

You can view it in action here.
Click to expand...
That's pretty cool Thanks.

*crosses fingers in case he's a hacker*
 
S

StBalor

LawnSite Senior Member
Location
Millersville, Maryland
topsites said:
Oh, I always use Ctrl w/ mouse wheel lol, that ctrl + is a neat trick.
You might check into radio buttons, likely along the lines of a javascript, but idk...
Click to expand...

Thanks for the tip topsites, i did not know that.
 
You must log in or register to reply here.

Share this page

Top