6
Is it possible to combine multiple javascipts into one file and then call that file from a linked URL in the head section of an XHTML file?
Here are the two scripts I want to use with the instructions on where to normally place them in an XHTML document:
SCRIPT #1:
Step 1: Insert the below anywhere into the <body> section of your page where you wish the clock to be displayed:<script>
/*
Live Date Script-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thu rsday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May"," June","July","August","September","October","Novem ber","December")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
</script>
<span id="clock"></span>
Step 2: Add the below into the <body> tag itself, like this:
<body onLoad="goforit()">
Configuring the date- You can change the font type, size, and color of the date. To do so, go to the line "//change font configuration here" in the above code. Right below that line contains the simple HTML tags that you should change to change the font.
SCRIPT #2:
Step 1: Insert the below code in the <head> section of your page:
<style type="text/css">
/*Example CSS for the two demo tickers*/
#domticker{
width: 200px;
height: 100px;
border: 1px dashed black;
padding: 5px;
background-color: #FFFFCA;
}
#domticker div{ /*IE6 bug fix when text is bold and fade effect (alpha filter) is enabled. Style inner DIV with same color as outer DIV*/
background-color: #FFFFCA;
}
#domticker a{
font-weight: bold;
}
#domticker2{
width: 350px;
height: 1.2em;
border: 1px solid black;
padding: 3px;
}
#domticker2 a{
text-decoration: none;
}
.someclass{ //class to apply to your scroller(s) if desired
}
</style>
<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/
var tickercontent=new Array()
tickercontent[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!'
tickercontent[1]='<a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.'
tickercontent[2]='<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'
var tickercontent2=new Array()
tickercontent2[0]='<a href="http://www.news.com">News.com: Technology and business reports</a>'
tickercontent2[1]='<a href="http://www.cnn.com">CNN: Headline and breaking news 24/7</a>'
tickercontent2[2]='<a href="http://news.bbc.co.uk">BBC News: UK and international news</a>'
</script>
<script type="text/javascript">
/***********************************************
* DHTML Ticker script- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
function domticker(content, divId, divClass, delay, fadeornot){
this.content=content
this.tickerid=divId //ID of master ticker div. Message is contained inside first child of ticker div
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over ticker (and pause it if it is)
this.pointer=1
this.opacitystring=(typeof fadeornot!="undefined")? "width: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opa city=100); -moz-opacity: 1" : ""
if (this.opacitystring!="") this.delay+=500 //add 1/2 sec to account for fade effect, if enabled
this.opacitysetting=0.2 //Opacity value when reset. Internal use.
document.write('<div id="'+divId+'" class="'+divClass+'"><div style="'+this.opacitystring+'">'+content[0]+'</div></div>')
var instanceOfTicker=this
setTimeout(function(){instanceOfTicker.initialize( )}, delay)
}
domticker.prototype.initialize=function(){
var instanceOfTicker=this
this.contentdiv=document.getElementById(this.ticke rid).firstChild //div of inner content that holds the messages
document.getElementById(this.tickerid).onmouseover =function(){instanceOfTicker.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout= function(){instanceOfTicker.mouseoverBol=0}
this.rotatemsg()
}
domticker.prototype.rotatemsg=function(){
var instanceOfTicker=this
if (this.mouseoverBol==1) //if mouse is currently over ticker, do nothing (pause it)
setTimeout(function(){instanceOfTicker.rotatemsg() }, 100)
else{
this.fadetransition("reset") //FADE EFFECT- RESET OPACITY
this.contentdiv.innerHTML=this.content[this.pointer]
this.fadetimer1=setInterval(function(){instanceOfT icker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT
this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0
setTimeout(function(){instanceOfTicker.rotatemsg() }, this.delay) //update container
}
}
// -------------------------------------------------------------------
// fadetransition()- cross browser fade method for IE5.5+ and Mozilla/Firefox
// -------------------------------------------------------------------
domticker.prototype.fadetransition=function(fadety pe, timerid){
var contentdiv=this.contentdiv
if (fadetype=="reset")
this.opacitysetting=0.2
if (contentdiv.filters && contentdiv.filters[0]){
if (typeof contentdiv.filters[0].opacity=="number") //IE6+
contentdiv.filters[0].opacity=this.opacitysetting*100
else //IE 5.5
contentdiv.style.filter="alpha(opacity="+this.opac itysetting*100+")"
}
else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){
contentdiv.style.MozOpacity=this.opacitysetting
}
else
this.opacitysetting=1
if (fadetype=="up")
this.opacitysetting+=0.2
if (fadetype=="up" && this.opacitysetting>=1)
clearInterval(this[timerid])
}
</script>
Step 2: Then, inside the BODY section of your page, to display a ticker, simply use the below example code:
<script type="text/javascript">
//new domticker(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds, optionalfadeswitch)
new domticker(tickercontent, "domticker", "someclass", 3000, "fadeit")
document.write("<br />")
new domticker(tickercontent2, "domticker2", "someclass", 3000)
</script>
The code of Step 2 shows you how to invoke a ticker instance:
new domticker(tickercontent, "domticker", "someclass", 3000, "fadeit")
Where "tickercontent" is the name of the array defined earlier that contains your ticker messages, and "domticker", an arbitrary but unique CSS ID for that scroller. "someclass" is simply an random CSS classname you can pass to add additional style to the ticker, and "3000" points to the pause time between messages, in milliseconds. Finally, "fadeit" is an optional parameter that when set, causes the ticker to fade the messages into view. To disable this feature, just remove this parameter completely.
Thanks for any help with combining these scripts or suggestions on calling them separately from a linked URL in the head section of the XHTML document.
