These are commonly used additions that you may want to use. Note: these examples are shown for a DynLayer that is named 'mylayer' but they will work for all DynLayers of any name.
When you want to use these functions all you have to do is include the dynlayer-common.js file after the dynlayer file:
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="dynlayer-common.js"></SCRIPT>
This method is based on the External Source Files lesson.
Usage of the load() method:
mylayer.load('myfile.html',fn)
The fn parameter is optional, it's used to execute some other function or statment when the external file has been fully loaded into the page.
In the main HTML document you must have an hidden IFrame named "bufferFrame", this is used to copy the contents of the external file into the layer.
<IFRAME STYLE="display:none" NAME="bufferFrame"></IFRAME>
The external html file must call the DynLayer's loadFinish() method. Since in IE, the main document is in a different frame, we must call it as "parent". Fortunately this is simultaneously compatible for Netscape because in Netscape it is all the same document, and therefore in that case "parent" is synonymous with "document".
<BODY onLoad="parent.mylayer.loadFinish()">
Warnings: This method will not work "as-is" if these these files are all to be contained within another frameset. In that case you'd need to send an additional parameter for the name of the frame instead of "parent". Nor will this work if you want to load multiple files simultaneously into separate layers. This function assumes there's only one IFrame, and hence only one file in a buffer-zone. If you wanted multiple files to be buffered like this you'd have to have separate IFrames, and yet another parameter to determine which frame to take the contents from.
Simply sets the background color of the layer. Watch out though, you usually have to have the layer clipped, and you'll sometimes run into problems with text that's contained within the layer. I'll leave you to encounter all the "fun" with this function :)
Usage of the setbg() Method:
mylayer.setbg('#ff0000')
This one-line method can be used instead of the changeImage() function so that you don't have to worry about nested references:
Usage of the img() Method:
myImgObject = new Image()
myImgObject.src = 'myimg-new.gif'
mylayer.img('myImg','myImgObject')
// image must have a NAME assigned, index values won't work between both browsers
<div id="mylayerDiv"><img src="myimg.gif" name="myImg"></div>
Get Relative X Location - getRelativeX()
This function can be used to find the actual left location of the layer (relative to the document). This only has to be used when you've positioned your layer relatively
In order to set your CSS to make a relatively positioned layer you can use either of the following:
#mylayer {position:absolute;} // no left or top defined
css('mylayerDiv',null,null) // in css() function null,null for x,y means relative positioning
Then to find the actual left location use the getRelativeX() method:
var x = mylayer.getRelativeX()
Get Relative Y Location - getRelativeY()
Same as the above but for the top location:
var y = mylayer.getRelativeY()
Get Content Height - getContentHeight()
When you don't specify a height in your CSS, you can still obtain what the actual height of the contents of that layer is by using the getContentHeight() method. Note this uses the same tactic as shown in the Scrolling Concepts lesson, however that lesson does the true call for this value explicitly.
var h = mylayer.getContentHeight()
Get Content Width - getContentWidth()
Same as above but for the width:
var w = mylayer.getContentWidth()
| Home | Next Lesson: Wipe Methods |