<?php
if (!$_REQUEST['a']) {
require($_SERVER['DOCUMENT_ROOT']."/ui/engine.php");
$GLOBALS['pgtitle'] = "Fun with Page Numbers";
$GLOBALS['subtitle'] = "<a href=\"viewsrc.php?filename=pagenum.php\">View Source</a>";
printheader();
ds("About", "One day, I was thinking about page numbers on websites, such as on forums. I began to wonder if there was a way to make them more aesthetically pleasing or more functional. These are two concept designs that I have come up with to try to answer these questions. The first design prints the numbers out such that they are increasing in size until the middle number (or the middle two numbers in some cases) is reached and then tapers off. This is useful because often people viewing multiple pages of a topic find that they click the next or previous page most often, so those numbers should probably be larger than the rest. I originally designed the second one just for a challenge (there are still a few bugs, though), but it could have some practical uses. As you put your mouse over each number, the numbers magnify. This is useful if you have a lot of page numbers, little space, and you don't want to cut off too many numbers from either side. Please feel free to play around with them and look at the <a href=\"viewsrc.php?filename=pagenum.php\">source</a> of this page. Also, when you click on a value, it automatically highlights it. That may or may not be annoying for you. Sorry if it is...");
ds("Choose your Engine", "<a href=\"pagenum.php?a=mag\">Flat Magnified Engine</a></p><p><a href=\"pagenum.php?a=roll\">Roller Engine (like Mac OS X Dock)</a>");
printfooter();
}
elseif ($_REQUEST['a']=="mag") {
require($_SERVER['DOCUMENT_ROOT']."/ui/engine.php");
$GLOBALS['pgtitle'] = "Flat Magnified Engine";
$GLOBALS['subtitle'] = "<a href=\"viewsrc.php?filename=pagenum.php\">View Source</a> | <a href=\"pagenum.php\">Choose Engine</a>";
$GLOBALS['js'] = "
function createRequestObject() { //Shamelessly copied and modified from http://mikeoncode.blogspot.com/2006/02/ajax-project-to-get-you-going.html
var ro;
var browser = navigator.appName;
if(browser == \"Microsoft Internet Explorer\"){
ro = new ActiveXObject(\"Microsoft.XMLHTTP\");
}
else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq() {
document.getElementById('output').innerHTML = '<img src=\"working.gif\" alt=\"Working, please wait...\" />';
http.open('GET', 'pagenum.php?a=magsubmit&initial_num='+document.getElementById('initial_num').value+'&final_num='+document.getElementById('final_num').value+'&size='+document.getElementById('size').value+'&increment='+document.getElementById('increment').value);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('output').innerHTML = response;
}
}";
printheader();
draw_linkbox( array( "Back" => "pagenum.php" ) );
ds("Configuration", "</p>
<form action=\"javascript:sndReq()\" name=\"numgen\">
<p>Initial Number: <input type=\"text\" name=\"intial_num\" id=\"initial_num\" value=\"1\" onfocus=\"document.numgen.initial_num.select()\" /></p>
<p>Final Number: <input type=\"text\" name=\"final_num\" id=\"final_num\" value=\"9\" onfocus=\"document.numgen.final_num.select()\" /></p>
<p>Initial Size: <input type=\"text\" name=\"size\" id=\"size\" value=\"12\" onfocus=\"document.numgen.size.select()\" /></p>
<p>Size Increment: <input type=\"text\" name=\"increment\" id=\"increment\" value=\"2\" onfocus=\"document.numgen.increment.select()\" /></p>
<p><input type=\"submit\" name=\"submit\" value=\"Generate!\" /></p>
</form>");
ds("Output", "<div style=\"width: 80%; background-color: #CCFFCC; text-align: center; padding: 30px; margin: 0px auto 0px\" id=\"output\"> </div>");
printfooter();
}
elseif ($_REQUEST['a']=="roll") {
require($_SERVER['DOCUMENT_ROOT']."/ui/engine.php");
$GLOBALS['pgtitle'] = "Roller Engine";
$GLOBALS['subtitle'] = "<a href=\"viewsrc.php?filename=pagenum.php\">View Source</a> | <a href=\"pagenum.php\">Choose Engine</a>";
$GLOBALS['js'] = "
function setvals() {
minnum = document.getElementById('initial_num').value;
maxnum = document.getElementById('final_num').value;
initialSize = document.getElementById('size').value;
increment = document.getElementById('increment').value;
}
function magnify(num) {
numaa = num-2;
numab = num+2;
numba = num-1;
numbb = num+1
if (numaa>=minnum) document.getElementById('n'+numaa).style.fontSize = parseInt(initialSize)+parseInt(increment)+\"pt\";
if (numab<=maxnum) document.getElementById('n'+numab).style.fontSize = parseInt(initialSize)+parseInt(increment)+\"pt\";
if (numba>=minnum) document.getElementById('n'+numba).style.fontSize = parseInt(initialSize)+2*parseInt(increment)+\"pt\";
if (numbb<=maxnum) document.getElementById('n'+numbb).style.fontSize = parseInt(initialSize)+2*parseInt(increment)+\"pt\";
document.getElementById('n'+num).style.fontSize = parseInt(initialSize)+3*parseInt(increment)+\"pt\";
}
function unmagnify(num) {
numaa = num-2;
numab = num+2;
numba = num-1;
numbb = num+1
if (numaa>=minnum) document.getElementById('n'+numaa).style.fontSize = initialSize+\"pt\";
if (numab<=maxnum) document.getElementById('n'+numab).style.fontSize = initialSize+\"pt\";
if (numba>=minnum) document.getElementById('n'+numba).style.fontSize = initialSize+\"pt\";
if (numbb<=maxnum) document.getElementById('n'+numbb).style.fontSize = initialSize+\"pt\";
document.getElementById('n'+num).style.fontSize = initialSize+\"pt\";
}
//////////////////////////
function createRequestObject() { //Shamelessly copied and modified from http://mikeoncode.blogspot.com/2006/02/ajax-project-to-get-you-going.html
var ro;
var browser = navigator.appName;
if(browser == \"Microsoft Internet Explorer\"){
ro = new ActiveXObject(\"Microsoft.XMLHTTP\");
}
else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq() {
document.getElementById('output').innerHTML = '<img src=\"working.gif\" alt=\"Working, please wait...\" />';
http.open('GET', 'pagenum.php?a=rollsubmit&initial_num='+document.getElementById('initial_num').value+'&final_num='+document.getElementById('final_num').value+'&size='+document.getElementById('size').value+'&increment='+document.getElementById('increment').value);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
document.getElementById('output').innerHTML = response;
}
}";
printheader();
draw_linkbox( array( "Back" => "pagenum.php" ) );
ds("Configuration", "</p>
<form action=\"javascript:sndReq()\" name=\"rollercfg\" onsubmit=\"setvals()\">
<p>Initial Number: <input type=\"text\" name=\"intial_num\" id=\"initial_num\" value=\"1\" onfocus=\"document.rollercfg.initial_num.select()\" /></p>
<p>Final Number: <input type=\"text\" name=\"final_num\" id=\"final_num\" value=\"9\" onfocus=\"document.rollercfg.final_num.select()\" /></p>
<p>Initial Size: <input type=\"text\" name=\"size\" id=\"size\" value=\"18\" onfocus=\"document.rollercfg.size.select()\" /></p>
<p>Size Increment: <input type=\"text\" name=\"increment\" id=\"increment\" value=\"3\" onfocus=\"document.rollercfg.increment.select()\" /></p>
<p><input type=\"submit\" name=\"submit\" value=\"Generate!\" /></p>
</form>
<p>");
ds("Output", "<div style=\"width: 80%; background-color: #CCFFCC; text-align: center; padding: 30px; margin: 0px auto 0px\" id=\"output\"> </div>");
printfooter();
}
elseif($_REQUEST['a']=="magsubmit") {
$initial_num = $_REQUEST['initial_num'];
$final_num = $_REQUEST['final_num'];
$size = $_REQUEST['size'];
$increment = $_REQUEST['increment'];
for ($i=$initial_num; $i<=$final_num; $i++) {
echo "<a style=\"font-size: {$size}pt; font-family: Tahoma, Arial, sans-serif\" href=\"#\">$i</a> ";
if ($i<(($final_num+$initial_num-1)/2)) $size += $increment;
elseif ( (($final_num-$initial_num-1)%2==0) && ($i==($final_num+$initial_num-1)/2) ) continue;
else $size -= $increment;
}
}
elseif($_REQUEST['a']=="rollsubmit") {
for ($i=$_REQUEST['initial_num']; $i<=$_REQUEST['final_num']; $i++) {
$output = $output."<a href=\"#\" style=\"font-size: {$_REQUEST['size']}pt; font-family: Tahoma, Arial, sans-serif\" class=\"roll\" id=\"n{$i}\" onmouseover=\"magnify({$i})\" onmouseout=\"unmagnify({$i})\">{$i} </a>";
}
echo $output;
}