Useful Code Fragments

Bruceee's Sandpit
Web Design with SiteSpinner

home

code

Miscellaneous Code

The following are short bits of code you can place in your SiteSpinner workpage to do something useful. If you don't know how to do this, first see Including Code on Your Pages.

I have either used or tested everything here myself, so it should work for you too. If you find anything that doesn't or has bad side effects, please let me know.

Here is a summary of the code fragments on this page:

Window operations
Maximize a window -- make a window full sized
Close this window -- same effect as clicking the red x on the top right
Send a window to the back -- behind other windows
Hide vertical scroll bar -- in Internet Explorer

Page operations
Include a javascript file -- use the same javascript on more that one page
Draw a horizontal line -- using some simple HTML code
Bookmark a page -- in Internet Explorer add this page to the Favorites list
Show date last updated -- show the date a page was last changed
Page Ranking -- how important is your page?
Go Back link -- go back to the previous page; like the browser 'Back' button

Maximize a window
This code will 'maximize' a window when it is opened. Actually it is not a true maximize -- rather it is 'make the window full-screen' Use carefully -- you can annoy your viewers if you mess with their window sizes. Place this as a code object in the page to be maximized:

<SCRIPT type="text/javascript">
window.resizeTo (screen.availWidth, screen.availHeight); window.moveTo (0, 0);
</SCRIPT>

Close this window
To close a browser window, enter the following in a text link:

Link Type: (leave blank)

Link URL: javascript:close()
Link Text:: Close this window (or anything you like)

Example: close this window

Send a window to the back
Place the next code object on the page whose window is to be sent to the back, behind other browser windows. Here is an example playing background music.

<SCRIPT type="text/javascript">
window.blur();
</SCRIPT>

Hide vertical scroll bar
Internet Explorer has the habit of displaying the scroll bar even on short pages when it is not needed. Go to Page Editor > Header > New Header > Custom Header and paste in this code. While you are there, give the header a name like 'NoScrollbar'

<STYLE type="text/css">
body {overflow:auto;}
</STYLE>

Include a javascript file
To include a Javascript file in your page, add this as a code object near the top of your page. My file is called "common.js" -- amend the code to suit your file name.

More details on Javascript includes.

Draw a horizontal line
Place this code object on your workpage where you want the line to start. Change the width parameter to be the width in pixels that you want:

"HR" means "Horizontal Rule". Another option is to use the HR tag like this and stretch the code object to match the width of line you require. This is a little more visual -- I have used them above as section breaks.

<HR>

Bookmark a page
Placing this code on your page makes it a little easier for visitors using Internet Explorer to bookmark your site.

Firstly a code object -- you may want to modify the url and title to suit your page.

<SCRIPT type="text/javascript">
var url=location.href;
var title='Bruceee\'s Sandpit'; //change to suit your site
function newfavorite(){
if(document.all)
window.external.AddFavorite(url,title)
}
</SCRIPT>

Now a text link to the code:

Link Type: (leave blank)

Link URL: javascript:newfavorite()
Link Text:: Bookmark this page (or anything you like)

You could instead use a small image and place a very similar link on that.

Example: Bookmark this page

Show date last updated
Sometimes, it is useful to automatically show the date that a page was last updated. Like this:

The code to do this is in two parts:
The javascript function that displays the date of the last update

<SCRIPT type="text/javascript">
function ShowChange() {
var modDate = new Date(document.lastModified)
var year = modDate.getYear()
if(year < 1000)
year += 1900
var monthArray = new Array("Jan", "Feb", "Mar","Apr", "May", "Jun", "Jul", "Aug","Sep", "Oct", "Nov", "Dec")
var modString = "Last change: " + modDate.getDate()
modString += " " + monthArray[modDate.getMonth()] + " " +year
document.write(modString.small(modString))
}
</SCRIPT>

Place the above code at the top of your page -- use the to back button on the bottom toolbar. Even better, if you will use the code on more that one page, is to include it in a Javascript include file. Which is what I have done on this page.

Place the second bit of code on the page wherever you want the last change to display. Here is the code:

<SCRIPT type="text/javascript">
ShowChange()
</SCRIPT>

There are two occasions where this technique may not work:

Your page is on a site which has ads inserted.
Your page has some other code like a footer which is added automatically by your server. (Maybe.)

In both cases, this insertion or addition counts as a modification to the page, (today) so the code will faithfully display todays date.

Oops, I got confused with Google's site.

Here's what Google really thinks about this page.

Page Ranking
Thanks to Podge on the VM forums for this suggestion.

To see how important a page is in the world of Google, include this snippet as a code object on your page.This code does not have to be on the page you want to test. Under "site", substitute the full URL of the page you are interested in.

Rankings range from 10 = "The Greatest", to 0 = "Utterly Insignificant".

Here's MSN

PageRank is Google`s measure of the importance of this page

Here's this page, and hopefully yours too

A 'Go Back' link
A 'Go Back' link has the same effect as the 'Back Button' on your browser. To create one, start off with a normal link on text or an object, and set these parameters:

Link type: (leave blank)

Link URL: javascript:history.go(-1)
Link Text: Go Back (or whatever)

Here is an example used in connection with the i-frame pages. See also restore history.