Al's TAFE Certificate IV I.T. (Website Design) Exercises
Client Side Script 2
- Frames are used on the web on many websites to improve navigation layout. They allow you to have a fixed navigation section on your pages that does not need to be redrawn by the browser every time the user goes to a different page on your site. In other words, the navigation frame will remain constant while the rest of the pages load beside the navigation frame. It can speed up delivery of content to end users and improve the usability of the pages.
- There are a few big negatives with frames that need to be considered if you are going to use them on your web pages. They are: -
- It is hard to bookmark a page within a framed site.
- It is hard to print a page nested within frames.
- Frames can hinder getting good rankings in search engines for your website. This is probably the major drawback of frames.
- Shari Thurow in her book "Search Engine Visibility" states "I highly recommend mot designing with frames. …the search engine spiders might not be able to find keyword-rich web pages on a site if the pages are not coded properly. In addition, search engine results can send visitors to web pages with no navigation schemes.
There are a few workarounds that can improve the ranking if frames websites within search engines, but generally sites without frames will do better.
- One type of frame is a lot more search engine friendly, and that is the iframe. The iframe still allows you to present all the important keyword-rich content on your pages as the iframe sits somewhere in the middle of a normal HTML page. This mean that when the search engine spiders visit an iframe page they still have lots of useful content to index, which is very important. I never use frames anymore for page design, but I would consider an iframe because of the above reasons, and also because they do provide a good way to present lots of data on one page.
- JavaScript is used to create an iframe page. The following is a sample of code used to create an iframe page.
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Working with iframes</title>
<script src="scripts/jslibrary.js" type="text/javascript"> </script>
<script type="text/javascript">
function loadContent(thisObj,elemID,url){
getObj(elemID).src = url;
/*This statement gets the number of buttons on the page.*/
var btns = document.getElementsByTagName("button").length
/*This loop resets the colors for all the buttons.*/
for (i=1;i<=btns;i++){
getObj('btn'+i).style.background = "blue";
getObj('btn'+i).style.color = "white";
}
/*These statements set the colors for the button just
clicked.*/
thisObj.style.background = "blue";
thisObj.style.color = "red";
}
</script>
<style type="text/css">
body {background:white; color:#000099;font-family:helvetica;sans-serif}
h1 {font-family:sans-serif;color:dark blue;}
.btn {background:blue;color:white;font-family:
sans-serif;font-weight:bold}
</style>
</head>
<body>
<h1>Importing External Content</h1>
<p>This page contains iframes. Each iframe loads an external HTML document. To load new content into the iframe you assign a new URL to the src attribute. Click the buttons below to load selected code listings into the iframe.</p>
<button type="button" class="btn" id="btn1" onclick="loadContent(this,'miniFrame','iframepageone.html');">Page One</button>
<button type="button" class="btn" id="btn2" onclick="loadContent(this,'miniFrame','iframepagetwo.html');">Page Two</button>
<button type="button" class="btn" id="btn3" onclick="loadContent(this,'miniFrame','iframepagethree.html');">Page Three</button>
<button type="button" class="btn" id="btn4" onclick="loadContent(this,'miniFrame','iframepagefour.html');">Page Four</button>
<button type="button" class="btn" id="btn5" onclick="loadContent(this,'miniFrame','iframepagefive.html');">Page Five</button> <br>
<iframe src="" name="innerFrame" id="miniFrame" width="750" height="350">
<a href="codelistings.html" target="_blank">Menu of Code Listings for older browsers</a><br>
</iframe>
<p>You can position iframes anywhere in your document and place other content around them as desired.</p>
</body>
</html>
- To run this iframe page you will also need to create five pages for the script to call on to insert into the iframe. I have called each page iframePageOne.html and so on up to iframePageFive.html, but you can name your pages according to what you want to put on each page and how many pages you need. For example your pages might be named, aboutus.html, contact.html, services.html, products.html and so on. You will also need to include the jslibrary.js file on your local folder for the script to call on. I will put a copy of this on the network for you to copy.
- The script works like this: -
- When the page loads jslibrary.js is read into memory as the script will refer to some of the functions in that file later. The main <script> tag contains a single function known as loadContent() that will be called upon later.
- The internal style information sets the style for the body, H1 and button style. The buttons are styled using a style class called btn.
- Every button uses that style sheet to control its appearance. Each button is also given a name so they can be identified by the programming.
- When a visitor clicks the button for page one, for example, the onClick event handler in the <button> tag calls the calls the loadContent function and passes three values. The first value is a reference to the actual button object called "this", the second value is an id name given to the inline frame (miniframe). Then the third value is the URL or filename of the webpage to be loaded into that frame.
- The loadContent() function places those three values into the parameter variables called thisObj, elemID and url in order. The next line in the function assigns the value in url to the src property of the inline frame.
- Next in the coding is the getElementByTagName() method used to create an array of all the page elements that have the name "button". The length of this array tells us how many buttons are on the page.
- Then using a loop the buttons are set to have a blue background with white text.
- The final two lines of script set the colours for the button that was just clicked to have red writing on a blue background. This helps the page visitor know where they are looking on your site, and the button text will stay red like that until they click on a different button.
Activity One: -
-
Create an iframe webpage with several pages on it, and adjust and customise the JavaScript to use your own page file names, button names etc.
NB: These iframes will work in IE4.0 and above browsers, but not in Netscape 4.
- Click here to see my iFrame
JavaScript Library Code
The code content for jslibrary.js is as follows, in case you do not have access to the network drive. Not all this code is needed for the performing of the inline frame programming, and it would be a good activity for you to work out which coding the iframe page is actually calling on.
/* Convert object name string or object reference
into a valid object reference */
function getObj(elementID){
if (typeof elementID == "string") {
return document.getElementById(elementID);
}else{
return elementID;
}
}
/*Set the background color of an object*/
function setBackground(thisobj, color){
getObj(thisobj).style.background = color;
}
/*Set the text color of an object*/
function setColor(thisobj, color){
getObj(thisobj).style.color = color;
}
/*Setting the visibility of an object*/
function setVisibility(obj,vis){
var theObj = getObj(obj);
if (vis == true || vis=='visible' || vis=='y'){
theObj.style.visibility = "visible";
}else{
theObj.style.visibility = "hidden";
}
}
/*Getting the visibility of an object*/
function isVisible(obj) {
var theObj = getObj(obj);
return theObj.style.visibility;
}
/*Setting the display of an object*/
function setDisplay(obj,dis){
var theObj = getObj(obj);
if (dis==true || dis=='block' || dis=='y'){
theObj.style.display = "block";
}else{
if (dis==false || dis=='n'){
theObj.style.display = "none";
}else{
theObj.style.display = dis;
}
}
}
/*Getting the display of an object*/
function isDisplayed(obj) {
var theObj = getObj(obj);
return theObj.style.display;
}
