Actually, there are a few ways to achieve what you want without using javascript.
One way would involve moving the CSS that controls font size into your template, making a simple little snippet to remember the desired font size and output it as a placeholder, then using that placeholder in the CSS in your template.
To illustrate, the template could start something like this...
[[fontsizer? ]]
<html>
<head>
<style>
body {
font-size:[+fontsize+]px;
}
</style>
</head>
...
Then the fontsizer snippet would just need to read the font size value you want (I’m using a querystring parameter just to make it easy), remember it in the php session, and set a placeholder.
<?php
/**
* fontsizer snippet
*/
$fontsize = '12'; //the default value
// ... see if the querystring is telling us the font size
if(isset($_GET['fontsize']) && is_numeric($_GET['fontsize'])) {
$fontsize = $_GET['fontsize'];
$_SESSION['fontsize'] = $fontsize;
// ... if the querystring isn't set, see if there's a value set in the php session
} elseif(isset($_SESSION['fontsize']) && is_numeric($_SESSION['fontsize'])) {
$fontsize = $_SESSION['fontsize'];
}
$modx->setPlaceholder('fontsize', $fontsize);
return '';
Then from some link on your page, you just need to link the page to itself, plus the font size.
<a href="[~[*id*]~]?fontsize=12">regular</a> | <a href="[~[*id*]~]?fontsize=14">large</a>
I haven’t tried the above code.. but I hope it helps get you going.
☆ A M B ☆
MODX Staff
