Text zooming with jQuery and CSS

In this post I want to explain about Text Zooming with jQuery and CSS. This is basic level tutorial just changing style using jQuery script. It’s simple use it for zooming website content.

jQuery and CSS

Javascript Code
Contains javascript code. $(“#zoom”).change(funtion(){}- zoom is the id name of the select box. Using $(“#zoom”).val(); calling select box value. Applying style at $(“#main”).css

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#zoom").change(function() {
var size = $(this).val();
$("#main").css('font-size', size+'px');
return false; });

Contains HTML code.

Zoom Text:
<select id="zoom">
<option value="20">20 px</option>
<option value="30">30 px</option>
<option value="40">40 px</option>
<option value="50">50 px</option>
<option value="60">60 px</option>
<option value="70">70 px</option>
<option value="80">80 px</option>

<div id="main">
Website Content

Contains CSS code.

<style type="text/css">
body { font-size:15px; }
* { margin:0px; }
#main { margin:10px; font-size:25px;}
#zoom { font-size:15px;}
iframe { display:none; }

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch, I am available for freelance work. info@quickmysupport.com

Leave a Reply

Your email address will not be published. Required fields are marked *