Raw code, as we use the term here, is special unformatted text. The term "code" is often used also to refer to the CSS or HTML code that SiteSpinner creates when you preview or publish your project. We use the term "raw" to make it clear that here we are mostly discussing code that you enter.
Compared to titles and text, SiteSpinner will pass on raw code without modification. Raw code is thus best suited to adding banners, shopping carts, counters or other code that needs to be used without any modification. It helps a lot if somebody else has already written it!
Create a code object with one of these actions:
select the blue Code button on the Tools toolbar to the left
double click an existing Code object or
select the File > Open File ... menu while in the Text Editor, and choose a code file. Start with a blank text object -- Open File will overwrite any text already in the text object without warning.
Any of these actions will open the Text Editor with a subset of the usual text-editing commands. It will display Code in the drop-down "Text Type" box on the menu bar.
SiteSpinner does not check for errors in the code you enter. Take care to ensure that the code is valid -- errors when you preview or publish your project are often caused by invalid code. Sometimes the code itself will work, but the object after the naughty code will malfunction. See Z-order.
You can also enter code as normal text (Rich Text); this is best for something that is mostly text but which in which you may want to enter occasional code -- say to make a line or show a small embedded image like a smiley.
Some simple examples
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. Or experiment right here!
Description Code
Horizontal line like the one above
A button -- this one does nothing apart from look pretty
A Javascript alert box, useful for debugging. Test it here
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.
Slightly more complex example (CSS)
If you give a text object a colored background with the Quick Editor > Shading tab, as we did with the grey boxes just above right, you'll see that the text starts exactly at the left hand margin. You can control the padding, the gap between the margins and the start or end of the text, with the CSS code below. Change the padding from 20 pixels (px) each side to whatever other value you want, Use it cautiously, as it causes a deviation from WYSIWYG -- your preview will differ slightly from what you see on your workpage.
Copy and paste the following code into this page as a Code object of type "in CSS" and then preview -- note the differences in the grey boxes, and also in the other text objects on this page. Not all the changes are desirable!
Code copy instructions 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"
For existing projects you may instead choose to add header code via the old method:
Open the Page Editor -- Main Menu > Page > Edit Page Properties
Click the 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 (Code) Editor window
Make sure the Code Type window says "in Body" -- the default setting
Save and Close from the Text Editor
Resize the code object. It is not essential to do this -- however if the code will display an image, it is useful to make the code object about the same size as the image. See Dimensions of code object
At this point, the code object will still display as text
Preview your page. 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
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 on page) 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 Code Type.
Positioning on page
For any object, there are two kinds of positioning:
The left-right, up-down position (CSS Positioning.). 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. 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 left/right and up/down 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 "In Body" code has no physical representation on the screen -- i.e. it does not generate a fixed visible image, 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 the 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 either of:
setting the No CSS Positioning option in the Object Editor > Transformation tab
clicking the button on the top toolbar of the Code Editor titled "No CSS positioning".
There will be occasions where you need raw code to be positioned at a certain place in the code on your finished page -- perhaps at the very beginning or the very end, or maybe in the CSS. Simply select the place you want from the drop-down list box at the top of the Code Editor.
You can have multiple code objects in each location in the finished code; they simply appear one after another, in the order you created them. The order follows the z-order, so if you want a different order, change the z-order.
Because you can place code in the header too, this replaces the older method of using a Custom header in the Page Editor > Header tab -- and is much more flexible.
If you want the same code on more than one of your pages, make the code object an include.
There are examples of each type on this page. Use the Code View window to view the code, or in preview, use your browser > View Source function.
Where you have two or more code objects fighting for one position in the page, precedence is determined by the z-order. The one lower in the z-order, further up the page, will appear first in the finished code. The "In Body" position within the body of your page is determined entirely by z-order.
CSS positioning matters only for "in Body" code; for other code types, the master position control is the Code Type selection.
Positioning code via special geometry names -- deprecated
"Deprecated" is a word we have always wanted to use, but have not been able to until now! It means that this feature is obsolete for new projects, but is still in place for compatibility with older existing projects. So if you are working on a new project or are prepared to modify an old one, skip the rest of this section and move back to Positioning code by code type.
In the past, you may have wanted to place code outside the header and main body of your page. SiteSpinner had, and still 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.
You can have multiple specials of each type. Suppose you want another TOPMOST:
Give it a geometry name of TOPMOSTA
Place it after the existing TOPMOST in the z-order. (The z-order controls the placement order.)
Dimensions of a code object
Make a code object any size (dimensions) you like. For objects that appear in a fixed place on screen, make the code the same size as its 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, you could 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 width and height of the object. If you are annoyed by your code objects flopping to some favored dimensions whenever you edit them, you may have set the scale by dragging while holding down the Alt key. So 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, but width and height changes do.
Code View window
The Code View window makes it possible to view the code that SiteSpinner creates. It is a read-only view -- if you want to add or change code of your own, do so via a Code object.
Open the Code window with one of:
The inspector button, if you have one, on the top toolbar,
View > Show Code Window
Keyboard shortcut: Alt + C
Hover your mouse over any of the Code View buttons to see the tool tip that briefly describes the use of that button.
Resize the Code window by dragging the center bar left or right.
The Refresh button refreshes the code view after you make changes to your workpage, and want to see what that has done to the code.
The Relative Path button shows the path to any file in the code -- the advantage of the relative path is that is it is compact, showing the path relative to the location of your .ims project file. For files that SiteSpinner itself creates, they will show as if in the ./geometry folder in your SiteSpinner preview folder.
The Header Code button allows you show or hide the header. Use this if you want to see the header code -- often it contains a lot of CSS which may not be of interest. Also related to this, you can show only the mobile CSS, only the desktop CSS or the default Combined CSS -- both lots of CSS together. The settings controlling this are in the Project Options > General tab.
Viewing created code in your browser Another way of viewing the code that SiteSpinner creates is to preview or publish your page, then use your browser's View > Source function. This also allows you to edit the code, which may be useful on occasion.
If the code doesn't work
If the code doesn't 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.
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.
