Place Code in Your Pages

Bruceee's Sandpit
Web Design with SiteSpinner

home

code

Place Code in Your Pages

Special code is sometimes useful for things like counters, shopping carts, menus and the like. But before we get into the trickier stuff, let's start with are a few simple examples of code objects. These all do something slightly useful. To test, just copy and paste the code on the right into a code object on your own page.

Description Code

Horizontal line like the one below

A button -- this one does nothing apart from look pretty

A javascript alert box, useful for debugging. Test it here

<HR>

<SCRIPT type="text/javascript">
alert("Just testing")
</SCRIPT>

SiteSpinner does not touch any code you place in a code object. The code will show as text on your workpage. When you preview or publish, your browser will run the code and show the result -- hopefully the result you are looking for.

The code you deal with will normally be more complex than that above. Nearly always, someone else will have already written it, and they will give you some instructions like these:

'Copy and paste this code to the header of your page'
'Copy and paste this code to the body of your page'
'Copy and paste this code to your body tag'

Fortunately each of these steps is very easy with SiteSpinner.

Header code
To paste code into the header of your page:

Open the Page Editor (left-hand toolbar) > Header tab
Click the 'New Header' button
Paste the code into the 'Custom Header' box. If the code is showing <HEAD> tags, take those out -- SIteSpinner will add them itself as part of the custom header. If you have already pasted the same code into another page, instead select the header from the drop-down list box
Consider giving the header a meaningful new name
Click the OK button

You won't see this code on your workpage -- but it should do its stuff when you preview or publish.

You can have only one custom header on a page, so if you find yourself wanting more than one, join the various bits of code together to make one larger header.

Edit a custom header
The window for the Custom Header is quite small and not easy to edit. To edit the header normally in the text editor, do this:

Look at the header and note its name -- this will be something like 'header1'.
Open the text editor
On the top toolbar, in the drop-down list of geometries, select the name of the header. The geometry names in this list normally start with 'rtf'

Body code
To paste code into the body of your page:

Create a Code Object (left hand toolbar)
Paste the provided code into the text editor window
Save and Close the text editor
Resize the code object. It is not essential to do this -- however if the code will display an image, I find it useful to make the code object about the same size as the image
At this point, the code object will still display as text
Preview your project. The code should now execute and do whatever you intended.

Body tag code
Less commonly, you may get an instruction like this:
'Include this code in the <body> tag'. and then will follow some code like this:
<body onLoad="SomeFunction()">
The intention of this code is to execute the javascript function SomeFunction() when the page is fully loaded. The name SomeFunction will vary but will always match the name of a function elsewhere in the code.

Methods of handling a body tag from within SiteSpinner are:

Add the whole code line as a custom header. Yes strange, but it seems to work
Add the whole code line as the very last line of an existing custom header
Modify the code and use it as a code object.

A modification looks like this:
     <SCRIPT type="text/javascript">
     SomeFunction()
     </SCRIPT>
Use the code as a normal code object on your page. Use the To Front button to move the code down the bottom of the finished page. (See positioning) This ensures that the code does not execute until the earlier part of the page has loaded.

Another possibility is to try the code object with a special BELOWBODY or BOTTOMMOST geometry name.

Positioning on page
For any object, there are two kinds of positioning:

The left-right, up-down position. These are the x,y coordinates where objects are placed when you drag them around the screen.
The back-to-front position -- also called "z-order" A lot more about z-order here.

When you add a new code object (or any object) to your page, it automatically goes to the front of the page. (The bottom of the finished code.) This may be just where you want it.

Z-order may be important for code objects -- if one code object depends on another in order to run properly, that "another" should be lower in the z-order (nearer the back). If you have code that may need to run as the page is loading, it should be as near the back of the page as you can make it. You can even put it in the header.

Control code objects' placement accurately in the z-order with the Front/Back button set on the bottom toolbar:

Front=bottom of page
Back=top of page

With four front/back buttons, you have very fine control over the exact z-order position of any code object within the body of your page.

Most times, you won't have to worry about all this. But do consider it if your code fails to run properly.

CSS positioning
Cascading Style Sheets (CSS) allow SiteSpinner to accurately control the position of objects on your published or previewed page (your finished page).

Like any other object, a code object is wrapped in HTML <div> </div> tags on your finished page. This allows the code rectangle on your workpage to define the physical representation (x,y position and width/height) of the code on your finished page. E.g., if your code will display an image on screen, place the code rectangle (its bounding box), where the image will display.

If the code has no physical representation on the screen -- i.e. it does not generate a fixed visible image, I suggest you put CSS positioning off -- you save a hundred bytes or so of finished page size. Without CSS positioning, any visible objects will start displaying at the top left corner of your page, and work down from there in z-order. So turn CSS off only for invisible code objects.

Moving objects like cursor trails can also have CSS positioning off -- the code itself has all the positioning information it needs.

Turn off CSS positioning by:

setting the 'No CSS positioning option ( in the Object Editor > Transformation tab; or
clicking the icon on the top toolbar of the Code Editor titled 'No CSS positioning'.

Special geometry names
Sometimes you may want to place code outside the header and main body of your page. SiteSpinner has three special geometry names that allow you to do this. Each of these geometry names must be in upper case as shown below: Note -- these are geometry names, not object names. It is convenient to do the naming in the text editor -- replace the default rtfxxx number as you create the code object. All these objects ignore the CSS positioning settings, but will remain visible on your workpage, and will not be affected by where you place them in the z-order.

TOPMOST This code appears at the very top of the page -- even before the header

BELOWBODY This code appears immediately underneath the closing </body> tag

BOTTOMMOST This code appears as the last thing on the page -- below the closing </html> tag. Note the spelling -- a double M in BOTTOMMOST

This page has a 'do nothing' code object of each type. View the code for this page and see if you can spot them

Size of code object
Make a code object any size you like. For objects that appear in a fixed place on screen, I make the code the same size as it's physical representation. E.g. if the code will display an image of a certain size, make the code object the same size as the image. This makes it a little more visual on the workpage.

Otherwise, I suggest you make the code object quite small, and place it in a margin or in the gap between paragraphs.

There are two ways you can change the size of the code object:

Width and height
Scale

If you resize the code object with the mouse, you change the scale of the object. If you are annoyed by your code objects flopping to the default 400x400 pixels whenever you edit them, in the Quick Editor:

set both the x and y scales to 1.0
adjust the width and height

Scale changes do not affect any clones of the code object, width and height changes do.

Javascript include file
If you have code that is repeated on more than one page, or you have a piece of code that is quite large, consider using a Javascript include file.

Haaalp!! It doesn't work!
If the code does not work:

Check that you have pasted in everything you needed. It is easy to accidentally lose characters from the beginning or end of the code

If it is a code object in the body of your page, try repositioning it with the Front/Back button set. See Positioning on page above
Sometimes malfunctioning code can do really weird things to other objects on your page. In cases like this, add a test page to your project and isolate the code there while you test it
You can have only one custom header on a page. If you have two or more custom headers for a page, join all the code together to make one larger custom header
Sometimes two code objects may fight for control of the same mouse event; the loser is the piece of code that does not run. It should be possible to modify the mouse event code so that it handles both code objects
If you paste code into the code editor from another source, use the 'Paste Plain Text' option. Sometimes you can paste in hidden formatting characters that screw things up