/////////////////////////// ///////help script for //// ///////primes.html///////// /////////////////////////// ///////©/digsby wyscher/// ///////mmiv//////////////// function helper(helpnum) { if (helpnum!=22) {maintext=""; destination=output1HTML; magiccontents();} var buggerme=helpnum; if (eg) { eg=false;maintext="";destination=exampleHTML;magiccontents();exampleLyr.visibility="hidden";} if (buggerme==100 || buggerme==99 || buggerme==1 ) { if (queryLyr.visibility.indexOf('hid') == 0) {queryLyr.visibility='visible'; clipLayer(queryLyr,queryclipArray,1);} indexLyr.visibility="visible"; contactLyr.visibility="hidden"; } if (buggerme==100 || buggerme==1) { maintext=thefontsize+'

Help Menu
help is available for:

'+thefontsize+'browser performance '+thefontsize+'1
'+thefontsize+'error messages and browser issues '+thefontsize+'2
'+thefontsize+'graph types '+thefontsize+'3
'+thefontsize+'prime distributions '+thefontsize+'4
'+thefontsize+'labels and identifying primes'+thefontsize+'   '+thefontsize+'5
'+thefontsize+'further reading '+thefontsize+'6
'+thefontsize+'useful links and credits '+thefontsize+'7
'+thefontsize+'development and design '+thefontsize+'8
'+thefontsize+'contact details '+thefontsize+'9
'+thefontsize+'index '+thefontsize+'10
'; subsection='';} if (buggerme==10){ maintext=thefontsize+'
Browser Performance
Generating prime numbers using javascript can be a very labour intensive business for your humble browser.
WARNING: if you request very large ranges, your browser is liable to hang, (or at least give the appearance of doing so) - a request for all primes up to 100000 using NS4 on an old PC (M571 motherboard, 96M RAM, screen: 16 bit; 800x600) took about two hours. To increase overall performance: get a faster hard drive, reduce colour resolution, screen size & prime range.
Searching for all the primes is more processor / stack hungry than searching for pairs or quads, and hence takes longer. Any sizeable search with a range over 250,000 will involve making several cups of tea and possibly a short trip down the shops...
see also:individual browser issues'+endbit; subsection='';} if (buggerme==2) { maintext=thefontsize+"
Browser issues and errors"; if (document.all) {maintext=maintext+"
Internet Explorer users only
when handling large ranges of primes, up to 5,000,000 recursive statements per page can be executed (just under 20,000 searched primes) prior to the following timeout dialog box appearing:

***only if you choose 'no' will the script continue to process***NB Netscape users do not experience this problem
To alter MSIE's threshold limit, it is necessary to edit the system registry, as described in detail on the microsoft support site

see also:browser performance"+endbit;} else if (document.layers) {maintext=maintext+"
Netscape users only

As well as not generating tiresome timeout dialog boxes, Netscape in general performs slightly better than MSIExplorer.
But, despite a better handling of large number recursions, Netscape generates more problems between fonts and layers (resulting in a more complicated Document Object Model in DHTML for "child" layers), and complains bitterly when writing large numbers of layers consecutively into the page, a process necessary for generating the graphs...

see also:browser performance"+endbit; } else { maintext=maintext+"
Mozilla / Firefox users only
When handling large ranges of primes, only a certain number of recursive statements per page can be executed prior to the following timeout dialog box appearing:

***only if you choose 'cancel' will the script continue to process***
To stop this message occuring, type 'about:config' into the address bar, scroll down to the entry: dom.max_script_run_time and change the value to something considerably larger. Please note that we cannot guarantee that this might not effect the overall performance of your browser in other, perhaps detrimental, ways."+endbit; } subsection='';} if (buggerme==3) { maintext=thefontsize+"
Graph Types
By using the single/multi switch in the top left-hand corner of the screen, it is possible to switch between a single graph representing the chosen prime distribution, or a composite graph containing that prime distribution, and any subsequent distributions, in the following order:
all (single primes)
    pairs
        quads
when selecting a composite graph, the y-axis scale is determined by the pre-selected prime distribution.
see also:prime distributions"+endbit; subsection='';} if (buggerme==4) { maintext=thefontsize+"
Prime distributions
By using the pairs/quads/all switch in the top left-hand corner of the screen, it is possible to rotate between three distinct distributions of prime numbers:
1.    PAIRS
a list of 'twin primes', that is pairs of primes only separated by two. For example, in this sequence of primes [1, 2, 3, 5, 7, 11], 3 & 5, and 5 & 7 are both pairs of primes
2.    QUADS
a list of three primes spanning six integers; that is a pair of primes separated from another prime by two. For example, in this sequence of primes [5, 7, 11, 13, 17, 19, 23, 29], 5, 7 & 11, 11, 13 & 17, 13, 17 & 19, and 17, 19 & 23 are all prime quads
3.    ALL PRIMES
a complete list of primes.

each result is represented by a small tag like this: , this or this:
see also:identifying primes"+endbit; subsection='';} if (buggerme==5) { maintext=thefontsize+"
Identifying Primes
There are two methods of identifying individual primes.

1.   mouseover: by running the mouse pointer slowly over an individual point on the graph, the value of the prime number pops up on the screen next to it.

2.   labels: by using the blank/label switch in the top left-hand corner of the screen, it is possible to toggle on and off individual labels for each prime represented. Each distribution type has its own colour:
                  ALL - black
                        PAIRS - blue
                              QUADS - brown
WARNING if a large range is selected, the large volume of labels will make the graph appear very "cluttered".
see also:graph types"+endbit; subsection='';} if (buggerme==6) { maintext=thefontsize+"
Recommended further reading:
Apostrolos Doxiadis - Uncle Petros and GoldBach's Conjecture (faber and faber 1992)
    Paul Hoffman - The Man who Loved Only Numbers (fourth estate 1998)
        Simon Singh - Fermat's Last Theorem (fourth estate 1997)
            Ed Regis - Who Got Einstein's Office (penguin 1987)
                Douglas Hofstadter - Gödel, Escher, Bach (vintage 1980)
                    Karl Sabbagh - Dr Riemann's Zeros (atlantic 2002)"+endbit; subsection='';} if (buggerme==7) { maintext=thefontsize+"
Useful links and credits:
The following individuals and sites have provided invaluable assistance with the construction of this webspace:

     the truly inspirational DHTML Guru site - www.htmlguru.com
          comprehensive javascript archives - http://forums.devshed.com/archive
               microsoft support for internet explorer timeout problems - here
                    how to overcome some problems associated with large recursions - here
                         outlining prime number theory - here
                              large site dedicated to all things prime - http://primes.utm.edu
                         a rather useful least squares regression equation generator - here
                    Thanks to geedee and NetRegistry for their support and server space,
               Mr T for his lovely monitor,
          and a heartfelt thanks to my brother Nick for showing me how to do it properly."+endbit;subsection='';} if (buggerme==8) {maintext=thefontsize+"
Development and Design - Overview
Every object on this web page (table, image, button, block of text or point on a graph) is created by generating an individual layer for that object, each with a precise location on the page, and containing the relative text, image or table etc. In the case of graph rendering, as primes are found, a new layer is created and added into a pre-existing single string which is subsequently written to another layer, producing the graph.

design rationale

   Six main areas are highlighted is this design:

" +thefontsize+"cross-browser compatibility
content control for all objects - images, fonts, graphs etc
preloading and delay busters
interactive buttons
status messages and counters
dynamic graphs
"+endbit; subsection='';} if (buggerme==9) {maintext=thefontsize+"
Development and Design
Cross Browser Compatibility

For this site to perform consistently across divers browser technologies, a variety of scripts have been developed to cater for the different ways in which browsers handle web-page content. Most discrepancies arise from the different ways browsers approach the handling of a layer\'s attributes via the Document Object Model:
A Basic DOM switch - defines how javascript resolves the basic differences between common browsers.
There are also various site-specific extensions to this basic DOM:
       layerwriter() - writing any content (tables, text, graphics etc) into individual layers
       <DIV> vs <LAYER> - parent.child DOM structure easily corrupts in Netscape
       Dimension control switch - browsers use different values for page dimensions
       Capture events - carriage return keystroke handling
       Clipping Layers - controlling the location of a clipped layer
       Controlling Loops - pausing the write process"+endbit; subsection='[up one level]  [content control]';} if (buggerme==102) { maintext=thefontsize+"
Development and Design
Cross Browser Compatibility - The layerwriter() Function

To write a string of HTML 'output' as the contents of a "parent" layer called 'backgroundIMG' use:

"+thefontsize+"
function layerwriter() {
     if(document.layers) {//Netscape component
          backgroundIMG.open();
          backgroundIMG.write(output);
          backgroundIMG.close();
     } else {
eval('backgroundIMG.innerHTML = output');}//MIE component
}

NB When writing "child" layers into "parent" layers, the DOM structure for the "child" layers is different from the standard "parent" DOM structure...
see also: <DIV> vs <LAYER> - parent.child DOM structure"+endbit; subsection='[up one level]';} if (buggerme==11) { maintext=thefontsize+'
Development and Design
Cross Browser Compatibility - DIV vs LAYER & parent.child DOM structure

When Netscape attempts to write "child" layers (as a succession of <DIV>s in the string \'output\') into a "parent" <DIV>, the style sheet properties of the newly created "child" <DIV>s go awry (especially the <FONT> settings).

As a consequence, in Netscape, all new "child" layers abandon the standard DOM structure, and instead must be created using the <LAYER> tag, as opposed to the <DIV> tag. Unfortunately, Explorer doesn\'t recognise <LAYER> STYLE properties, so for MIE the standard <DIV> structure is maintained:

'+thefontsize+'ouput=\'<DIV id="anylayer" STYLE="position: absolute;"><img src=apoint.gif border=0 ></DIV>\';//standard setup
if (document.layers) {//Netscape switch
     output=\'<LAYER id="anylayer"><img src=apoint.gif border=0></LAYER>\';}
'+endbit; subsection='[up one level]  [graphs - parent.child creation]  [dynamic graphs]';} if (buggerme==12) { maintext=thefontsize+'
Development and Design
Cross Browser Compatibility - Capture Events

To submit the form from anywhere on the page, it is necessary to capture all keystrokes:
'+thefontsize+'netscape '+thefontsize+'vs '+thefontsize+'internet explorer
'+thefontsize+'document.captureEvents(Event.KEYPRESS);
document.onKeyPress = checkreturn; '+thefontsize+'document.onkeydown = checkreturn;
Then, direct them through a script checkreturn(e) which checks for \'enters\' or carriage returns and calls a \'form submit\' script "subform()" on their detection:
'+thefontsize+'                  function checkreturn(e) {
                      if (document.layers) {if (e.which == 13) {subform();}}//checks for Netscape carriage return
                      if (document.all) {if (event.keyCode == 13) {subform();}}//checks for MIE carriage return
                           else
                           return true;}
'+endbit; subsection='[up one level]';} if (buggerme==13) { maintext=thefontsize+'
Development and Design
Cross Browser Compatibility - Dimension Control Switch
To position all objects with consistent accuracy onto the webpage, it is essential to know the exact x and y dimensions of the browser application\'s window. Netscape and Explorer capture these values in slightly different ways:

'+thefontsize+'netscape '+thefontsize+'vs '+thefontsize+'internet explorer
'+thefontsize+'available_width=innerWidth;
available_height=innerHeight; '+thefontsize+'available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
see also:content control'+endbit; subsection='[up one level]  [status messages]  [graph dimensions]';} if (buggerme==14) { maintext='
'+thefontsize+'Development and Design
Content Control
The dimensions and locations of all images, text, tables, buttons, forms and graphs (objects) are defined in proportion to the available dimensions (width and height) of the user\'s screen (for information about determining these dimensions, see: dimension control switch). Despite the many combinations of different window and screen sizes employed by different users across the world, here the window contents re-size and realign themselves to any window size. Therefore, the page layout and proportions appear identical, independent of any individual computer\'s screen dimensions.
Setup and control varies for different object-types - select from:

'+thefontsize+'images
fonts and text
tables '+thefontsize+'graphs
buttons
or STYLE attributes for all properties and objects
see also:DOM switch'+endbit; subsection='[up one level]';} if (buggerme==15) { maintext=thefontsize+'
Development and Design
Content Control - Objects - Images

The background image for this screen, background.gif is written to the page as a string of HTML called output. By changing variables in this string, the image\'s dimensions are controlled relative to the page.
output=\'<table width=100% height=\'+(available_height)+\' border=0 cellspacing=0 cellpadding=0><tr><td valign=top><img src=background.gif border=0 width=\' + available_width + \' height=\'+ available_height +\'><br></td></tr></table>\';
output is then written to the layer backgroundIMG by using the layerwriter() function.
The position and visibility of backgroundLYR and hence also its contents can now be adjusted by changing the various STYLE attributes of the layer.

see also:DOM switch'+endbit; subsection='[up one level]  [fonts and text]  [tables]  [preloading]';} if (buggerme==16) { maintext=thefontsize+'
Development and Design
Content Control - Objects - STYLE attributes

Every layer in the page has both a \'style\' and \'content\' component, as defined by the DOM switch in the onload process.

The \'style\' backgroundLYR component controls the properties of the layer: size, positioning, visibility etc., while the \'content\' backgroundIMG component refers to the "space" where the layerwriter() script posts the output string - the objects within the layer.

This script positions the layer backgroundLYR in the top left corner of the screen, and makes it visible.
            backgroundLYR.left=0;
            backgroundLYR.top=0;
            backgroundLYR.visibility="visible";'+endbit; subsection='[up one level]  [images]  [fonts and text]  [tables]'} if (buggerme==17) { maintext=thefontsize+'
Development and Design
Cross Browser Compatibility - A simple DOM Switch

each layer is created in HTML:
<DIV ID="anyname" STYLE="position: absolute; visibilty:hidden;">
<img name=Image1 border=0 src=background.gif></DIV>

and evaluated as a string using this Javascript component:
'+thefontsize+'netscape '+thefontsize+'vs '+thefontsize+'internet explorer
'+thefontsize+'if (document.layers)   //Netscape
{doc = "document";
sty = "";
htm = ".document}" '+thefontsize+'if (document.all)   //MIE
{doc = "document.all";
sty = ".style";
htm = ".document";}
anyIMG = eval(doc + \'["anyname"]\' + htm); - refers to the contents or objects within the layer.
anyLYR = eval(doc + \'["anyname"]\' + sty); - refers to the style attributes, or properties of the layer.'+endbit; subsection='[up one level]  [content control]  [layerwriter() function]';} if (buggerme==18) { maintext='
'+thefontsize+'Development and Design
Content Control - Objects - Fonts and Text

Using the same principle as with the page\'s images, text is written to the page as a string of HTML.
var thefontsize = parseInt(available_width/240);//sets \'thefontsize\' proportional to screen size
if (thefontsize<4) {thefontsize="<font class=smallish>";}
if (thefontsize>3) {thefontsize="<font class=biggish>";}
output=thefontsize+\'please don\'t read this</font>\';
where the variable thefontsize is defined by the screen\'s dimensions:
and the .CSS style sheet settings are:
.biggish {font-weight: 335; font-size: 11pt;color: darkmagenta;}
.smallish {font-size: 9.5pt; color: purple;}
'+endbit; subsection='[up one level]  [tables]  [positioning layers]  [preloading]';} if (buggerme==19) { maintext=thefontsize+'
Development and Design
Content Control - Objects - Tables

Again, as with the page\'s images and text, tables are written to the page as a strings of HTML:
output=\'<table bgcolor=darkpink width=\'+(available_width/6)+\' height=\'+(available_height/6)+\' border=1 cellspacing=0 cellpadding=0><tr><td valign=center align=center>\'+thefontsize+\'don\'t read this</font><br></td></tr></table>\';
output is written to the layer tableIMG using a variation of the layerwriter() script.
       Positioning the layer:
              tableLYR.left=(available_width*0.8);tableLYR.top=(available_height*0.75);
                     places the table at the bottom of the right side of the page.
                            tableLYR.visibility="visible";
                                   makes it visible. Click here to show the table.'+endbit; subsection='[up one level]  [styles]'; } if (buggerme==20) { maintext=thefontsize+'
Development and Design
Content Control - Objects - Graphs and Point Generation

The layerwriter() script can create graphs in HTML. Every point on the graph has its own layer, represented by the string buffer. Each time the script loops, another layer is added to output:
var whatever=500;for (x = 1; x <= whatever; x++) {//loops upto \'whatever\' - in this case 500
y=available_height-x;
var buffer=\'<DIV STYLE="position: absolute; top:\'+y+\'px; left:\'+x+\'px; visibilty:visible;">
<img border=0 src=anypoint.gif></DIV>\';//buffer counts as a single point on the graph
output=output+buffer;}//adds the point to the final output string and loops again
//NB <LAYER> rather than <DIV> must be used for Netscape graph creation - see [here]
x and y are variables defined by the function of the graph and the screen\'s dimensions. This script draws a straight line containing 500 individual points, from the bottom left corner towards the top right corner of the screen.'+endbit; subsection='[up one level]  [<DIV> vs <LAYER>]  [positioning layers]  [dynamic graphs]';} if (buggerme==21) { maintext='
'+thefontsize+'Development and Design
Preloading and "Delay Busters"
To browse through any website, the content of the website\'s homepage is first downloaded from the "server" to the user\'s browser. Most browsing relies on HTML <A HREF> links, where the user or "client" clicks on a link, the browser sends a request to the "server" to send more content, the user waits, the request is slowly processed and new content eventually appears.

To accelerate the entire browsing process, when this home page loads, all the rest of its pages are loaded "behind-the-scenes" as individual strings. When the user executes a link, "client-based" javascript instantly writes these strings into their designated layers, causing text and images to appear without any delay. By manipulating the visibility of these layers via links and buttons, the user seamlessly jumps from page to page.
'+endbit; subsection='[up one level]  [content control]  [interactive buttons]';} if (buggerme==22) { maintext='Prime Number Generator

welcome

'+thefontsize+'
This website functions as a basic prime number generator, using javascript in combination with DHTML, enabling cross-browser compatibility - many of its features are still nascent web technologies
The generator works remarkably well for small ranges of primes, but performance and response times deteriorate with larger requests
Just enter the range of numbers to search in the fields at the top of the screen, select pairs or quads or all primes using the button in the top left-hand corner, hit GO or press \'ENTER\' and the search will start
For further information, development or contact details, use the other \'toggle\' buttons in the top left-hand corner or click here.'; subsection='';} if (buggerme==23) { maintext='contacting the author

'+thefontsize+'all correspondence, suggestions, criticisms or witticisms welcome and gratefully accepted via email at:
digsby@sonik-systems.com

alternatively, you can leave a voice message at:
+44 (0) 7763 217437

thank you for your attention

"may a star shine brightly on our meeting"

to exit from this help screen, click [here]

digsby wyscher - ©mmiv'; subsection='';} if (buggerme==24) { maintext='
'+thefontsize+'Development and Design
Interactive Buttons - Overview
As all content is preloaded, buttons and links instantly either replace objects within layers, or change the visibility or position of layers. Both processes are "client-based" - once all web-site content has downloaded to the user\'s browser, no further communication is necessary between server and user for the site to work.

A standard javascript button usually relies on an "onclick" event handler which swaps two pre-loaded images on the button face. But, some browsers still occasionally replace these preloaded images, resulting in a delay as the browser\'s responses slow to download the image again from the server.

To avoid this, here buttons are created using a single image containing all the button\'s faces which, placed within a "clipped" layer, is moved around to generate a switch or interactive button...
'+endbit; subsection='[up one level]  [button creation]';} if (buggerme==241) { maintext='
'+thefontsize+'Development and Design
Interactive Buttons - Contents
Button functionality, which involves redefining a layer\'s position and clip properties, is subdivided into the following sections:

'+thefontsize+'Overview
Button creation - Clipping
Button creation - Set up
Button creation - the clipValues() function
Button functionality - clipLayers() function
Button functionality - notes on clipLayers()
Button functionality - Basic Button Script

'+endbit; subsection='[up one level]';} if (buggerme==25) { maintext='
'+thefontsize+'Development and Design
Interactive Buttons - Button Creation - an outline to clipping
Each button comprises a clipped layer containing a button image embedded within a link. The button image is of two button faces, \'ON\' and \'OFF\'; the layer is clipped to half the size of this image - only half of the underlying button image can be seen at a time through the clip, revealing a single button face.

Whenever the link is requested, it\'s event handler calls a function which moves this entire layer one button width to the left. As the layer moves to the left, it takes its clip values with it, so the same function then simultaneously establishes a new clip position for the layer one button-width to the right of its original clip position. Result: the clip position remains in the same relative position on the page, but now reveals the other button face. No downloads, no image swapping, zero response time - an instant switch.
NB the source code for the clipLayers and clipValues functions has been adapted from the excellent DHTML Guru site - www.htmlguru.com'+endbit; subsection='[up one level]  [button setup]';} if (buggerme==26) { maintext='
'+thefontsize+'Development and Design
Interactive Buttons - Button Creation - setup
Design a button face eg:"button.gif"
Create the clipped button layer in HTML:
<DIV ID="buttonlayer" STYLE="position: absolute; width: 48px; height: 19px; clip: rect(0px 24px 19px 0px);">
<a href=javascript:switch();return false;><IMG border=0 src=button.gif alt="on and off"></a></div>

Define the button layer and establish a "clip" array for the button using the javascript clipValues() function:
button=eval(doc+\'["buttonlayer"]\'+sty);
button.left=8;
buttonclipArray=new Array();
buttonclipArray[0] =new clipValues(24,0,parseInt(button.left));
buttonclipArray[1] =new clipValues(48,24,parseInt(button.left)-24);

Array[0] corresponds to the button\'s original \'OFF\' position, Array[1] the \'ON\' position.'+endbit; subsection='[up one level]  [clipValues()]  [switching faces - clipLayers()]';} if (buggerme==27) { maintext='
'+thefontsize+'Development and Design
Interactive Buttons - Button Creation - the clipValues() Function
For each button layer, using the values defined in button setup, an array is generated where each member comprises of a set of data relating to how far the layer should be moved, and what the layer\'s clip values should be when the button is clicked:

function clipValues(right,left,move) {
      this.right = right;
      this.left = left;
      this.move = move;}

Once each array member has been populated, their values are used by the clipLayer() function to change the button\'s appearance by manipulating it\'s clipping and positional STYLE attributes as described in the section on clipping.'+endbit; subsection='[up one level]  [switching faces - clipLayers()]';} if (buggerme==28) { maintext='
'+thefontsize+'Development and Design
Interactive Buttons - Button Functionality - the clipLayers() Function

A call to this function with the following format results in the button face being switched off or on:
clipLayers(button,buttonclipArray,1); ON or clipLayers(button,buttonclipArray,0); OFF

function clipLayers(layer,array,index) {
      var cRight = array[index].right;
      var cLeft = array[index].left;
      layer.left = array[index].move;
      if(document.layers) {//Netscape component
            layer.clip.right = cRight;
            layer.clip.left = cLeft;
            } else {//MIE component
            layer.clip = \'rect(0 \' + cRight + \' 19 \' + cLeft + \')\';}}

see also:notes on the clipLayers() function'+endbit; subsection='[up one level]  [basic button script]  [clipValues()]';} if (buggerme==29) { maintext='
'+thefontsize+'Development and Design
Interactive Buttons - Button Functionality - the clipLayers() Function - notes

Using clipLayers(button,buttonclipArray,1); and buttonclipArray[1] =new clipValues(48,24,parseInt(button.left)-24); for this example, the script has two stages - firstly, it moves the layer defined in Array [1] twenty four pixels to the left.

Previously discussed under clipping, when the layer initially moves, the clip moves the corresponding distance. So, depending on the browser-type, a small DOM switch moves the position of the clip twenty four pixels to the right relative to the new layer position (Netscape and Explorer manipulate layer clipping STYLE properties in their own "individual" ways - as the vertical position of the button remains constant, Netscape only requires the new x-axis left and right locations, while Explorer needs all four components of the clip - left, top, right, bottom redefined).

see also:a basic button script'+endbit; subsection='[up one level]  [clipValues()]  [clipLayers() function]';} if (buggerme==30) { maintext='
'+thefontsize+'Development and Design
Interactive Buttons - Button Functionality - a Basic Button Script - buttonswitch()
By assigning TRUE or FALSE to a variable buttonon inside the script, when the script is called, whatever the value of buttonon, the value is swapped (true to false, false to true), the button appearance switches accordingly and the visibility of backgroundLYR is changed:

function buttonswitch() {
      if (buttonon) {
            buttonon=false;clipLayers(button,buttonclipArray,0);backgroundLYR.visibility="hidden";}
      else
            {buttonon=true;clipLayers(button,buttonclipArray,1);backgroundLYR.visibility="visible";}}

As with the "primes" button at the top left of the screen, further clipArrays can be assigned to a button, and the equivalent buttonon variables can have many possible values, creating a multi-switch button, adding considerable variety to any website.'+endbit; subsection='[up one level]  [clipValues()]  [clipLayers()]';} if (buggerme==31) { maintext='
'+thefontsize+'Development and Design
Status Messages and Counters - Overview
Constant active updates can be sent to the screen {while the browser continues to process information in the background) by creating a script call within the active process that continuously rewrites a table into a layer using the layerwriter() function.

Each time another step in the process is completed, the table is re-written, and a variable reflecting the incremental change in the process is represented either as text within - or a change to the properties of - the table (or both).

When the final step in the process is reached, the properties or text of the table can change again to indicate the process complete...
'+endbit; subsection='[up one level]  [status message loop]';} if (buggerme==32) { maintext='
'+thefontsize+'Development and Design
Status Messages and Counters - Status Message Loop

The regular output string for the table is subdivided into three string fragments, two constant - table_top, table_bottom - and one variable - table_middle. As the loop cycles, this variable changes and the table itself is re-written to the appropriate layer. The pause(0); script call is necessary otherwise Explorer will complete the whole task before showing the results.

var table_top=\'<table bgcolor=darkpink width=\'+(available_width/6)+\' height=\'+(available_height/6)+\' border=1 cellspacing=0 cellpadding=0><tr><td valign=center align=center>\';
var table_bottom=\'</font><br></td></tr></table>\';
     for (n = 1; n <= 100; n++) {//loops from 1 to 100
     table_middle=\'+thefontsize+\'numbers \' + n + \' to 100\';
     output=table_top+table_middle+table_bottom;//combine the fragments of the table into one string
     if (document.all) {pause(0);} //additional control for MIE
     layerwriter();}//write to the layer then loop again until complete
Click [here] to see this in action'+endbit; subsection='[up one level]  [pause() function]  [layerwriter()]  [dimension control]';} if (buggerme==33) { maintext='
'+thefontsize+'Development and Design
Status Messages and Counters - Controlling Loops - pause() function
When Netscape is processing any function, and a call is made to write output into a layer, this call is completed before the main script progresses. The same does not occur for Explorer - instead, the process completes prior to the output being written to the layer. This is unsuitable for actively updating the browser to indicate the status of "work in progress".

For Explorer, a small script is called to stagger the process and allow layerwriter() to write the layers for each step:
function pause(numberMillis)
      {var dialogScript = \'window.setTimeout(\' + \'function() {window.close(); }, \' + numberMillis + \');\';
      var result = window.showModalDialog( \'javascript:document.writeln(\' + \'"<script>\' + dialogScript + \'<\' + \'/script>")\');}'+endbit; subsection='[up one level]  [status message loop]';} if (buggerme==34) { maintext='
'+thefontsize+'Development and Design
Dynamic Graphs - Contents
Graph creation, which involves writing a combination of different object-types into various layers located around the screen, is subdivided into the following sections:

'+thefontsize+'Overview
Graph dimensions
Horizontal line - creation
Horizontal lines - labels and location
Horizontal axes
'+thefontsize+'Estimating and predicting totals - using regression
Vertical lines and axes
Point generation
Label generation
Popup labels
'+endbit; subsection='[up one level]';} if (buggerme==35) { maintext='
'+thefontsize+'Development and Design
Dynamic Graphs - Overview
This DHTML/javascript graph generator works by writing different objects (images, tables or text) into layers on the screen, each with an exact screen location and size as defined in proportion to the total graph size.

Every image or block of text within the graph; points, labels, x and y-axes or horizontal lines - embedded within their own layers - can be placed in precise, pixel-accurate, positions.

When the function of the graph generates each new x,y co-ordinate as a plot on the graph, a new layer is created at those co-ordinates containing an image of a point and a label referring to that point\'s particular value. This layer is resolved as a string and added to an expanding string: output that contains the entire series of points on the graph, each as an individual layer, generated so far.
'+endbit; subsection='[up one level]  [graph size]';} if (buggerme==36) { maintext='
'+thefontsize+'Development and Design
Dynamic Graphs - Graph Dimensions
Using values collected by dimension control, the graph width and height values are set at ¾ of the total page size:

'+thefontsize+'graph_width=(available_width*0.75);
graph_width=parseInt(graph_width);
graph_height=(available_height*0.75);
graph_height=parseInt(graph_height);

The graph_width and graph_height variables are used to control the position and size of all other elements of the graph.
'+endbit; subsection='[up one level]  [horizontal lines]  [vertical lines]  [point generation]';} if (buggerme==37) { maintext='
'+thefontsize+'Development and Design
Dynamic Graphs - Horizontal Lines
The length of a horizontal line, defined under graph dimensions, is set at graph_width. All plain horizontal lines on the graph are created by taking a small coloured square, 4x4 pixels in size, and extending this image\'s width so that it is stretched to equal the graph\'s width.

NB As discussed under parent.child browser compatibility issues, Netscape and MIE interpret changes to layer attributes differently, and hence a DOM switch is included here to generate a plain baseline for the graph:

'+thefontsize+'      output=\'<DIV STYLE="position: absolute; z-index:0; top:\' + Math.round(available_height-30) + \'px;"><font color=white size="-4"><b>0 </b><img src=small_square.gif border=0 height=4 width=\' + (table_width)+\'></DIV>\';
      if (document.layers) { //Netscape switch
            output=\'<LAYER top=\' + Math.round(available_height-30) + \'><font color=white size="-4"><b>0 </b><img src=small_square.gif border=0 height=4 width=\' + (table_width)+\'></LAYER>\';}
'+endbit; subsection='[up one level]  [labelling the lines]  [horizontal axis]  [vertical lines]';} if (buggerme==38) { maintext='
'+thefontsize+'Development and Design
Dynamic Graphs - Vertical Axes and Lines
The indices for the vertical axis are generated as
horizontal line labels
The height of the vertical axis, defined under graph dimensions, is set at graph_height. Again, a plain vertical line is created by taking a small coloured square, 4x4 pixels in size, and extending this image\'s height so that it is stretched to equal the graph\'s height.

NB Again, see parent.child browser compatibility issues for details about the Netscape switch:

'+thefontsize+'output=\'<DIV STYLE="position: absolute; z-index:0; top:\' +(available_height-table_height-30)+ \'px;"><img src=small_square.gif border=0 width=4 height=\' + (table_height)+\'></DIV>\';
   if (document.layers) { //Netscape switch
   output=\'<LAYER top=\' +(available_height-table_height-30)+ \'><img src=small_square.gif border=0 width=4 height=\' + (table_height)+\'></LAYER>\';}
'+endbit; subsection='[up one level]  [vertical axis indices]  [horizontal lines]  [horizontal axis]';} if (buggerme==39) { maintext='
'+thefontsize+'Development and Design
Dynamic Graphs - Labelling and Positioning Horizontal Lines
The position and label for any particular horizontal line are resolved by manipulating two variables in the string output that generates the line. See [here] for original output string.

To alter the vertical position the \'top\' variable changes so that it now reads:
      Math.round((available_height-30)-(table_height*x))
while to change the labels (the vertical axis indices), the text in the layer now reads:
      <font color=white size="-4"><b>\'+(predictedvalue*x)+\'</b>
where x is a value between 0 - 1, and predictedvalue is discussed [here].

If five horizontal lines are wanted, then, using an adapted version of the looped process outlined in graph control, x will have values 0.2, 0.4, 0.6, 0.8 and 1.

'+endbit; subsection='[up one level]  [horizontal axis]  [vertical lines]  [estimated totals]';} if (buggerme==40) { maintext='
'+thefontsize+'Development and Design
Dynamic Graphs - var Predictedvalue - using regression
The y-axis indices and the scaling factor used in accurately distributing the points on the graph are both determined by the total number of products or values there are of the function of the graph.

The dilemma is that, until the function has finished running, it is impossible to determine the exact number of products there will be. Result: no scaling factor = no accurate graph.

To side-step this issue, an predicted number of products for a function within any range is made. This estimation comes from an equation generated by running a simple regression analysis on a large set of results gleaned from the original function (in this case, three separate prime number generators).

Click here for a least-square equation generator'+endbit; subsection='[up one level]  [horizontal lines]  [vertical axis]  [point generation]';} if (buggerme==41) { maintext='
'+thefontsize+'Development and Design
Dynamic Graphs - The Horizontal Axis
This axis is created using principles adapted from ideas outlined in the section on table control. By generating a single row, six column table with each cell containing a value equivalent to a 20% increment on the total range of the function, the axis values change according to the range selected by the user.

Here\'s an example of the third cell in this table:
\'<td align=center width= \' + ((table_width)/5)+ \' >\'+thefontsize+\'<font color=white>\'+Math.round(bottomvalue-1+((topvalue-bottomvalue+1)*0.4))+\'</font></font></td>\'

where bottomvalue is the lowest value of the range, and topvalue is the top value of the numbers selected. In a range of 1 to 100, the value in this cell will be 40, in a range of 101 to 200, the value in this cell will be 140.'+endbit; subsection='[up one level]  [horizontal lines]  [vertical lines]';} if (buggerme==42) { maintext='
'+thefontsize+'Development and Design
Dynamic Graphs - Label Generation
Creating individual labels for points on a graph uses a similar process as used for writing points. Here, text is inserted around a blank point image, and the results are written to a different layer, which can be superimposed over the graph output layer by using a button to toggle the layer\'s visibility on and off. In this case, the buffer variable looks like this:

var buffer=\'<DIV STYLE="position: absolute; top:\'+ y +\'px; left:\'+ x +\'px; visibilty:visible;">\'+ thefontsize +\'result number:\'+ x + \'<img border=0 src=blankpoint.gif></font></DIV>\';
or this:
var buffer=\'<LAYER top=\'+ y +\' left=\'+ x +\'>\'+ thefontsize +\'result number:\'+ x + \'<img border=0 src=blankpoint.gif></font></LAYER>\';
Depending on the browser switch.'+endbit; subsection='[up one level]  [point generation]  [popup labels]  [horizontal lines]  [vertical lines]';} if (buggerme==43) { maintext='
'+thefontsize+'Development and Design
Dynamic Graphs - Label Generation
Creating popup labels for the graph works on a very similar principle to the standard label generation process, except that rather than embedding the point image around the text, text is instead inserted directly into the \'alt\' statement of the <IMG> tag for the point image:

var buffer=\'<DIV STYLE="position: absolute; top:\'+ y +\'px; left:\'+ x +\'px; visibilty:visible;"><img border=0 src=blankpoint.gif alt=result number:\'+ x + \'></DIV>\';
or this:
var buffer=\'<LAYER top=\'+ y +\' left=\'+ x +\'><img border=0 src=blankpoint.gif alt=result number:\'+ x + \'></font></LAYER>\';
Again, depending on the browser switch.'+endbit; subsection='[up one level]  [label generation]  [point generation]  [horizontal lines]  [vertical lines]';} if (buggerme==44) { maintext=thefontsize+'
Development and Design - Overview
Design Rationale - A Manifesto - 1
As far as the net goes, it\'s always best to keep ahead of the pack.
The main aim of this site is to address and attempt to narrow some of the margins (in both appearance and performance) between \'slick\' local (native or client) applications (eg computer software) and slow, inconsistant, internet (server-based) applications (eg any web page).

The design approach has been to create a javascript-driven DHTML site that can be used by all, irrespective of setup or browser, and that looks and behaves like locally stored software.
There are three key elements that are intrinsic to the differences between native and server applications, and they are all relevant to the design of this site. They are:
"user-friendliness",   "performance" and  "adaptability"'+endbit; subsection='[up one level]  [next page]  ';} if (buggerme==45) { maintext=thefontsize+'
Development and Design - Overview
Design Rationale - A Manifesto - 2
"User-friendliness": Local applications have zero-response times - one click, and there\'s your result. Internet applications will always experience some internet delays - known as "client-server delays".

"Performance": A local application depends mainly on the computer and operating system it is loaded on. Web applications depend not only on this but also on the user\'s browser. As browsers rarely behave consistantly, web-applications suffer from "cross-browser compatibility" problems.

"Adaptability": Local applications have a consistant appearance - they fill the application window, and maintain a constant proportional layout - no matter what screen set-up the user has. Web applications rarely cater for such "client-side variation"; text is too small, the wrong colour or off the screen, images are too large, readable content on one screen either overflows or is unintelligible on another - what is good for the goose turns out to be far from acceptable for the gander.
go to the next page'+endbit; subsection='[up one level]  [previous page]  [next page]  ';} if (buggerme==46) { maintext=thefontsize+'
Development and Design - Overview
Design Rationale - A Manifesto - 3
These problems are addressed in the following three ways:
1.   "Preloading" - no client-server delays - by preloading all objects on the home page, all internal requests have a zero response time - browsing is instantaneous. "Preloading" also permits the control of the proportional size of all objects via "autoscaling".
2.   An extended "Document Object Model" deals with all cross-browser compatibility problems by pinpointing and resolving all differences between browsers, and then creating coded "DOM-switches" to generate a consistant performance independent of browser technology.
3.   "Autoscaling" - without the "scroll" feature, the viewing area is restricted to the size of the browser window. To prevent content from overflow (on small screens), and to ensure images and text are readable (on large screens), "preloading" ensures that all objects on the page remain consistantly in proportion with the screen-size. Such "resizing" is also found in Macromedia\'s Flash, with one significant difference - a Flash site with this much content and functionality would require maybe 50 times as much space, and would create more bandwidth and delay issues than it solved.'+endbit; subsection='[up one level]  [previous page]  [next page]  ';} if (buggerme==47) { maintext=thefontsize+'
Development and Design - Overview
Design Rationale - A Manifesto - 4
The site is divided into three areas - graph production, help screens and button control. All require the judicious use of the strategies discussed above.

The graph component makes a layer for each plot, adds all the layers together and writes the result to the screen. Here it is employed in visually expressing the properties of prime distributions - it can be equally be combined with any popular online database via SQL - its applications are endless.

The "preloading" feature supplies the immediate responses to user requests - all text on this site is loaded "behind-the-scenes" at the home page. Requested text is written directly from memory to the page, hence no internet delays. The advantages of this are, again, endless. How many browsing surfers loose interest in your site because of the delays between requests?

seamless, delay-free, consistant, user-friendly web-pages.
You saw them here first.
'+endbit; subsection='[up one level]  [previous page]  ';} /// Rendering and Autoscaling if (buggerme==99) { maintext=thefontsize+'
Help Menu - index
'+thefontsize+'browser issues
browser performance
buttons - basic script
buttons - clipping visible layers
buttons - contents
buttons - overview
buttons - set up
capture events
clipping - button layers
clipLayers() - button functionality
clipLayers() - notes
clipValues() function - button creation
contact details
contents
content control - contents / overview
controlling loops
counters
credits
cross-browser-compatibility
delays
design rationale 1 - 4 '+thefontsize+'development and design - contents
development and design - overview
dimension control
dimensions - graphs
<DIV> vs <LAYER>
document object model
DOM switch - content control
error messages
estimating primes
fonts and text - content control
further reading
graphs - contents
graphs - overview
graphs - dimensions
graphs - horizontal axis
graphs - horizontal lines
graphs - horizontal line labels
graphs - label generator
graphs - point production
graphs - popup labels '+thefontsize+'graphs - vertical lines
graphs - vertical axis
graphs - vertical axis indices
graph types
images - content control
labels and identifying primes
labels - graphs - popup
labels - graphs - visible
<LAYER> vs <DIV>
layerwriter()
links
pause() function
predicting primes
preloading
prime distributions
regression & predicting prime values
status messages
status message loops
STYLE attributes - content control
tables - content control
'; subsection='';} if (buggerme>1) { destination=outputHTML;magiccontents(); if (buggerme!=22) {maintext=presubsection+''+subsection+''+postsubsection; destination=linksHTML; magiccontents(); linksLyr.visibility="visible"; linksbackLyr.visibility="visible"; } } if (buggerme<2){ if (outputLyr.visibility.indexOf('hid') == 0) { if (buggerme==1) { destination=outputHTML;magiccontents(); outputLyr.visibility="visible"; output1Lyr.visibility="visible"; blankLyr.visibility="visible"; clipLayer(queryLyr,queryclipArray,1); indexLyr.visibility="visible"; contactLyr.visibility="hidden"; } } else { outputLyr.visibility="hidden"; output1Lyr.visibility="hidden"; linksLyr.visibility="hidden"; linksbackLyr.visibility="hidden"; blankLyr.visibility="hidden"; clipLayer(queryLyr,queryclipArray,0); indexLyr.visibility="hidden"; contactLyr.visibility="visible"; } } } function quickshadow() { maintext='Prime Number Generator

welcome

'+thefontsize+'
This website functions as a basic prime number generator, using javascript in combination with DHTML, enabling cross-browser compatibility - many of its features are still nascent web technologies
The generator works remarkably well for small ranges of primes, but performance and response times deteriorate with larger requests
Just enter the range of numbers to search in the fields at the top of the screen, select pairs or quads or all primes using the button in the top left-hand corner, hit GO or press \'ENTER\' and the search will start
For further information, development or contact details, use the other \'toggle\' buttons in the top left-hand corner or click here'; destination=output1HTML; magiccontents(); }