Placing an object at the bottom of your page as a footer is not hard in SiteSpinner. Just pick your object and put it there. And if you want that same object as a footer on all your pages, that is no problem either. Just right-click the object and in the displayed menu, select "Include on All Pages." This will place the footer at the same spot on all your pages.
If your pages vary in length, the "include" option may not work as the same spot on every page could put the footer on top of or underneath another object. In this case you need to copy the footer and "clone" it on every page. Unfortunately, SiteSpinner does not have a simple menu command for "Clone on All Pages", so you will need to manually clone the footer on each page. If you have many pages in your project, you are probably kicking yourself for not think of using a footer sooner in your page design.
While cloning a footer will allow you to reposition the footer to a desirable location on each page, cloning may not suit your needs. If you use a text object for your footer, you must remember that changing a cloned object does not change all the objects as an included object does. So if you need to change your text footer, will need to edit it on every page.
The script presented here will automatically reposition your included footer object below the last visible object on your page. It is designed to work with single SiteSpinner objects: text, images, tables and shapes. It will not work with grouped objects due to the way SiteSpinner creates CSS positioning for each object in a group.
Preparing Your Project
There are a few steps you need to perform to prepare your project to use a floating footer. First, you need to have an object to use as a footer. Position the footer horizontally on the page where you want it to show up. Do not be concerned about its vertical placement as the script will reposition the footer below the last visible object on the page. When the footer is in its horizontal position, use the SpecialFX→Loading menu item and activate both the "Hide while loading" and "Hide after loading" options. Now right-click the footer object and select the "Include on All Pages" item. The footer is now positioned on every page in your project and ready for the script to position it. Make note of the footer’s object name; you will need it to let the script know which object is the footer.
Enter the following in a custom header:
function putFooter(footerObj, offset) {
divs = document.getElementsByTagName(‘div’);
maxBottom = 0;
for (i=0; i<divs.length; i++) {
v = divs[i].style.visibility;
if (v == "visible" || v == "") {
t = divs[i].offsetTop;
h = divs[i].offsetHeight;
th = t + h;
if (th > maxBottom) maxBottom = th;
}
} footer = document.getElementById("O"+footerObj).style;
if (offset == "undefined") offset = 0;
footer.top = maxBottom+parseInt(offset)+"px";
footer.visibility = "visible";
}
</script>
<body onLoad="putFooter(‘objX’,offset);" >
You will need to modify the last line in the script, replacing the objX parameter with the actual object name of your footer, and entering a value for the offset parameter. The offset parameter is used to fine-tune the footer’s vertical placement and represents the distance (in pixels) between the last visible object on your page and the top of the footer. For example, if your footer has an object name of obj32 and you wanted the footer placed 15 pixels below the last visible page object, the last line would be:
If you have multiple pages in your project, you will need to make sure this script is included on every page. This can be accomplished by using the "All Pages" button found on the Page Editor→Header tab. Be very careful about using the "All Pages" button. If any of your pages already contain a custom header, using this button will erase the content of that header and replace it with what you are including.
SiteSpinner Pro Users: You can use a code object to hold the script and use the Code Placement option of "in Header". This will allow you to use the mouse right-click menu "Include on All Pages" without worrying about overwriting any previous custom header information.
Using a Code Object
If using a custom header is not feasible, the script can be modified by placing the above code in a code object. You will need to replace the last line (<body onLoad="…">) with the following:
<script type="text/javascript">
putFooter(‘objX’,offset);
</script>
The code object must be published below all the other objects, so position it using the "To Front" placement button. You must also deactivate the SpecialFX→Loading "Hide after loading" option (i.e., use only the "Hide while loading" option). Since the VM script that controls the SpecialFX Loading options is always last on the published page, the "Hide after loading" option will always be active and no footer objects will appear. This is only a problem when the script is included as part of the page body.
Also, SiteSpinner always uses CSS positioning for published objects, even code objects that are invisible on your page. Because code objects have CSS positions, they will effect where the footer will be placed. You must use the Object Editor→Transformation tab "No CSS Positioning" option to prevent the code object from interfering with the footer placement.
Multiple Footers
This script can be used to vertically stack multiple footers on your page. Footers will be aligned vertically based on the last footer’s vertical position, so unfortunately, there is no way to place multiple footers in a horizontal line. As mentioned earlier, grouped objects will not work either.
To produce stacked footers, you just need to duplicate the putFooter() function for each object. For example, if you have an text object (a copyright statement) as obj23 and a company logo image as obj45, and you want them space 5 pixels apart, the execution line for the custom header would be:
<body onLoad="putFooter(‘obj23′,5);putFooter(‘obj45′,’5′);" >
and for a code object:
<script type="text/javascrpt">
putFooter(‘obj23′,5);
putFooter(‘obj45′,5);
</script>
Contact the LowTechGeezer
VM User's Forum
Bruceee's Sandpit
Webmaster's Corner
Other Useful Sites
Is it just me??
I am trying to use the “floating footer” script as it appears on your site. No luck.
I have created a png called “footer” , it is recognized as ‘obj96′ on my site – so I have made the necessary change in the ‘objX’ parameter and have put ’5′ as the offset parameter. I have followed faithfully all the other instructions you have given (including the “Hide on Loading” and “Hide after Loading” Special FX insructions, which I don’t quite understand. Why do I want to hide the footer after it is loaded?). Anyway, I have had no success. I know I am being a pest, but can you help me out with this? Is there possible another “Smart Quotes” error we have missed?
Thanks again for all your time, Larry.