iFrame code for CSB - scrolling iFrame


Each SCROLLING IFRAME requires two pages.  
Build each page, place the codes, then modify as necessary for your site.


Create the iFrame Page
Create a page within which the iframe will appear.  We'll call that the iFrame Page.

Using Insert > HTML Code (or webgem in Trellix) add the following code:

<!--BEGIN code for iFrame Page>
<!--<IFRAME> scroller- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->
<iframe id="datamain" src="mycontentspage.htm" width=400 height=250 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>
<!--END of code for iFrame Page>


Create the Contents Page  
FORMAT: You may want to create a new page layout for iFrame content pages that has no static text, borders, etc.  All of the page will attempt to load into the iframe.  If you have a border it will take up extra room you may not like.  If you want a long pause between the reload of the content, add extra spaces (blank lines) below the text.  (See example 3)
PLACEMENT: You will not want the Content Page on a main sequence line because you want access to that page only through the iFrame window.  This page can be made in the same site file as the iFrame page, or in a different directory, or a different site that you build! You must be able to place codes into the Contents page!  For this example, all pages are in the same tlx file.

At the very top of the Contents Page, use Insert > HTML Code to insert the following:

<!--BEGIN code for Contents Page TOP>
<div id="datacontainer" style="position:absolute;left:0;top:10;width:100%" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache">
<div>
<!--END code for Contents Page TOP>

At the very bottom of the Contents Page, use Insert > HTML Code to insert the following:

<!--BEGIN code for Contents Page BOTTOM>
</div>
<div>
<script language="JavaScript1.2">
//<iframe> script by Dynamicdrive.com
//Specify speed of scroll. Larger=faster (ie: 5)
var scrollspeed=cache=2
function initialize(){
marqueeheight=document.all? parent.document.all.datamain.height : parent.document.getElementById("datamain").getAttribute("height")
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top=5
thelength=dataobj.offsetHeight
scrolltest()
}
function scrolltest(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top=5
setTimeout("scrolltest()",50)
}
window.onload=initialize
</script>
<!--END code for Contents Page BOTTOM>

Now, go back and modify the codes as necessary for your site!


This page displaying iFrame Code for CSB is: id60.htm


IMPORTANT:  If you arrived on this plain gray page directly from a search engine, CLICK HERE for tutorial!