Working On It! » javascript http://alesmeralda.110mb.com/blog many are the things that you would like and need to know... Thu, 10 Dec 2009 16:17:40 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 The IFrame Ticker of Mystical Geek http://alesmeralda.110mb.com/blog/2008/07/14/the-iframe-ticker-of-mystical-geek/ http://alesmeralda.110mb.com/blog/2008/07/14/the-iframe-ticker-of-mystical-geek/#comments Sun, 13 Jul 2008 22:21:01 +0000 abet http://alesmeralda.110mb.com/blog/2008/07/14/the-iframe-ticker-of-mystical-geek/

_01mgeek_iframe

If you go to the Mystical Geek, you’d find that it has an animated portion on top of the blog entry and right under the main title header of the blog.  The trick is produced by some lines of code for an iframe and an external file which contains the script and the contents that are rotated.  The script is provided by Dynamic Drive and is easy to customize.  Below is the main code for the iframe.

 <!--<IFRAME> ticker- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--This credit MUST stay intact for use-->
<img src="http://img000.imageshack.us/img000/8350/pensmzl9.jpg"
 align="right" hspace="10">
<iframe id="tickermain" src="exfile.htm" width=300 height=80
 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=no>
</iframe>

The choice for the code was determined by the fact that I cannot use scripts that require one to add codes in the header of the Squarespace index page where the Mystical Geek resides.

The external file which is invoked by the iframe consists of the javascript and the content displayed by the iframe in between DIVs.  It looks like the following

<script language="JavaScript1.2">

//IFRAME TICKER- By Dynamic Drive (http://www.dynamicdrive.com)

//configure delay between changing messages (3000=3 seconds)
var delay=5000

var ie4=document.all

var curindex=0
var totalcontent=0

function get_total(){
if (ie4){
while (eval("document.all.content"+totalcontent))
totalcontent++
}
else{
while (document.getElementById("content"+totalcontent))
totalcontent++
}
}

function contract_all(){
for (y=0;y<totalcontent;y++){
if (ie4)
eval("document.all.content"+y).style.display="none"
else
document.getElementById("content"+y).style.display="none"
}
}

function expand_one(which){
contract_all()
if (ie4)
eval("document.all.content"+which).style.display=""
else
document.getElementById("content"+which).style.display=""
}

function rotate_content(){
get_total()
contract_all()
expand_one(curindex)
curindex=(curindex<totalcontent-1)? curindex+1: 0
setTimeout("rotate_content()",delay)
}

window.onload=rotate_content

</script>
 <style type="text/css">
 <!--
 P {
   font-family:Garamond;font-size:11pt;
 }

 A  {
   text-decoration:none
 }

 -->
 </style>
<BODY>

<!--ADD YOUR TICKER CONTENT BELOW, by wrapping each one inside a <DIV> as shown below.-->
<!--For each DIV, increment its ID attribute for each additional content (ie: "content1", "content2" etc)-->

<div id="content0" style="display:''">

<!-- ADD TICKER's CONTENT #1 HERE--------------------->

<span style="color:maroon;font-size:14pt;font-family:Trebuchet MS;Helvetica;Tahoma;font-weight:bold;">Update Your Bookmarks</span>
<p>You may now access this site using the shorter URL:  
<a href="http://www.agustino.org" target="_top"><span style="font-size:14pt;font-weight:bold;">www.agustino.org</span></a></p>

<!-- END CONTENT #1----------------->

</div>

<div id="content1" style="display:none">

<!-- ADD TICKER's CONTENT #2 HERE--------------------->
Some content here. <ul><li>even<li>lists<li>are<li>allowed</ul>
<!-- END CONTENT #2----------------->

</div>

<div id="content2" style="display:none">

<!-- ADD TICKER's CONTENT #3 HERE--------------------->

Some content here.  Even <span> specifications are allowed.
<!-- END CONTENT #3----------------->

</div>

<div id="content3" style="display:none">

<!-- ADD TICKER's CONTENT #4 HERE--------------------->
<table border="1"><tr><td>Some content here.  
Even tables are allowed.</td></tr></table>
<!-- END CONTENT #4----------------->

</div>

The ticker was useful in that it allowed me to fix links to the blog posts that contain the keywords visitors of the site look for. The hits to these increased dramatically over just a twenty-four hour period.  Try out the ticker.  Just copy the codes off this page and modify them.  And please, don’t delete the comments that say the codes are from Dynamic Drive.

]]> http://alesmeralda.110mb.com/blog/2008/07/14/the-iframe-ticker-of-mystical-geek/feed/ 0