Change the text size in your website with a simple script using php.
Hi you must have come across many websites having an option to change the text size then and there itself wondering how it is done?
Simple, here is the code which demonstrates the same
My first post in the year 2009 starts now. Enjoy!!!!!!!!!!!!
I have used PHP, Css and HTML
Procedure
Step 1: Create a Web page
Begin by creating a HTML document, complete with placeholder content. Here’s an example (Listing A):
Listing A:
<html>
<head>
</head>
<body>
<!– font size buttons –>
Text size: <a href=”resize.php?s=small”>small</a> | <a href=”resize.php?s=medium”>medium</a> | <a href=”resize.php?s=large”>large</a>
<p />
<!– dummy page content –>
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim
ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea commodoconsequat.
Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiadeseruntmollitanim id estlaborum.
</body>
</html>Pay special attention to the text hyperlinks at the top of this page. Each hyperlink points to the script resize.php, and passes it the selected text size through the URL GET method.
Save this document to your Web server directory with a .php extension—for example, index.php.
Step 2: Create stylesheets
Next, create stylesheets for each of the available text sizes for the page: small.css, medium.css and large.css. Here’s what small.css looks like:
body {
font: 10px
}In a similar manner, create medium.css and large.css, with font sizes of 17px and 25px respectively. Save these stylesheets to the same directory as the Web page created in the previous step.
Step 3: Create the text resizing mechanism
As previously described, the Web page “knows” which stylesheet to load by looking in a pre-defined session variable. This session variable is controlled by the script resize.php, (Listing B) which is activated whenever a user clicks one of the text-sizing buttons at the top of each page. Here’s what resize.php looks like:
Listing B
<?php
// start session
// import selected size into session
session_start();
$_SESSION['textsize'] = $_GET['s'];
header(“Location: ” . $_SERVER['HTTP_REFERER']);
?>This is fairly simple. When a user selects a new text size, resize.php receives that size value through the GET method and stores it in the session variable $_SESSION['textsize']. It then redirects the browser back to the page from whence it came.
Of course, there’s still one missing component: the intelligence that lets the page detect which text size is currently selected and load the appropriate stylesheet. To add this, pop open your Web page index.php, and add the following lines at the beginning of the page (Listing C):
Listing C
<?php
// start session
// import variables
session_start();
// set default text size for this page
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = ‘medium’;
}
?>You should also add a stylesheet link between the <head>…</head> elements, as follows:
<link rel=”stylesheet” href=”<?php echo $_SESSION['textsize']; ?>.css” type=”text/css”>Here’s (Listing D) what the completed index.php will look like:
Listing D
<?php
// start session
// import variables
session_start();
// set default text size for this page
if (!isset($_SESSION['textsize'])) {
$_SESSION['textsize'] = ‘medium’;
}
?>
<html>
<head>
<link rel=”stylesheet” href=”<?php echo $_SESSION['textsize']; ?>.css” type=”text/css”>
</head>
<body>
<!– font size buttons –>
Text size: <a href=”resize.php?s=small”>small</a> | <a href=”resize.php?s=medium”>medium</a> | <a href=”resize.php?s=large”>large</a>
<p />
<!– dummy page content –>
Loremipsum dolor sit amet,
consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim
ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea commodoconsequat.
Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum.
</body>
</html>It should be easy to understand how this works. When the Web page is loaded, it restores the current session, checks the $_SESSION['textsize'] variable to see which text size is currently selected, and then dynamically loads the corresponding stylesheet through the <link… /> element. This causes the page to automatically re-render in the correct size.
Using PHP and CSS in this combination is slightly different from the traditional approach, which uses JavaScript to dynamically alter CSS styles. The advantage of using PHP instead of JavaScript is that you’re not dependent on the client supporting JavaScript, nor do you need to worry about creating browser-specific workarounds. Perhaps you will find a use for this tip the next time you sit down to design a Web site. Happy coding!
Incoming search terms:
- text resize script php (3)
- php text size (3)
- search text on page javascript (2)
- how to change text size in php (2)
- ie jquery get file size (2)
- xampp how to increase import size (2)
- content swithing in html using javascripts (2)
- text size php (2)
- php website text resizing (2)
- what is the appropriate size of text in php? (2)
- php prevent document expired firefox (2)
- php text resize (2)
- php tuto small medium large (1)
- resize text with css and php (1)
- resize the text description into small in php (1)
- resize the text in php (1)
- script change font autotext (1)
- script to resize font in webpage (1)
- php mysql three different page sizes buttons (1)
- resize text using css on php site (1)
- php script to change text size by a click (1)
- resize font in web page php script (1)
- query string xss preg match (1)
- preg_match querystring (1)
- PHP script: setting size page (1)
- picture gallery css php and mysql (1)
- phpexcel reset (1)
- php text resize cookie (1)
- php mysql search and export results (1)
- search text with fpdf (1)
- text-size php (1)
- tooglefrom down javascript (1)
- transparent login form styles in html code (1)
- tuto resizer php (1)
- tutorial xampp mysql size (1)
- Web Page Size Calculator php script (1)
- window beforeunload change message (1)
- wordpress wp_nav_menu Uppercase first letter (1)
- xampp change font (1)
- text size script in php (1)
You will also be interested in ,
- Simple page flip effect using Jquery, css and simple html
- Another cool horizontal menu script using css
- Transparent Box using CSS
- Simple CSS Dropdown Menu
- New horizontal drop down menu using css
- Buzzing or vibrating the login form using jquery
- Beautiful Christmas countdown timer complete webpage with css download free
- Image preloader using CSS
- Drop down menu going behind flash element
- Changing link style properties using css
Fine….keep the spirits high…
a nice tutorial