PDA

View Full Version : Need to call external .js for Pause Scroller (crosstick)



jamesgz
10-24-2006, 08:58 PM
1) Script Title: Pause up Scroller (Crosstick)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex2/crosstick.htm

3) Great script. Have it working in the right nav. View it here:
http://www.featureplan.com/contact/indexT5.htm

Issue: Works fine on the page. Id like to call it as an external script in the js directory > js/testimonials.js

I need help stipping out whats not needed for testimonials.js and
add whatever is needed in the document.write section

I have read other posts regarding this issue but nothing that worked.

Thanks for your help

jscheuer1
10-25-2006, 06:13 AM
Everything between <script type="text/javascript"> and </script> that is in Step 1 on the demo page may be placed in an external file.

Please also be sure to follow these general guidelines:


Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:


<script src="some.js" type="text/javascript"></script>

Common problems arise when:

1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:


<script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>

2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:
<script>
<!--and
//-->
</script>and any of their many variations from the beginning and end of the external file.

3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:


http://www.somedomain.com/images/button.gif

http://www.somedomain.com/~mysitename/index.html

5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex:


<script src="some.js" type="text/javascript">
/***********************************************
* IFrame SSI script II- Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>

Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters without which the script won't function.

jamesgz
10-25-2006, 01:10 PM
Thanks for the response.

To the best of my knowledge all your recommendations were put in place. some.js is in root with test1.htm Yet it Still does not work What am I doing wrong? I noticed the javascript has 2 elements calling scripts the varcontent stuff and the functionpause scroller stuff. In taking out both these scripts have I inadvertantly broken something? Can the css stuff be in the .js file or does it have to remain in the head tag of test1.htm

I tried 2 variations for call the script one in the head tag <script src="some.js" type="text/javascript"> Did not work and the current body tag does not work either

Test1.htm code
<html>
<head>
<style type="text/css">
#pscroller1{
width: 200px;
height: 100px;
border: 1px solid black;
padding: 5px;
background-color: lightyellow;}

.someclass{ }

</style>

</head>

<body>
<script src="some.js" type="text/javascript">
/***********************************************
* Pausing up-down scroller- &#169; Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
</script>
</body>
</html>

some.js code with all the script tags pulled


var pausecontent=new Array()
pausecontent[0]='<a href="http://www.javascriptkit.com">JavaScript Kit</a><br />Comprehensive JavaScript tutorials and over 400+ free scripts!'
pausecontent[1]='<a href="http://www.codingforums.com">Coding Forums</a><br />Web coding and development forums.'
pausecontent[2]='<a href="http://www.cssdrive.com" target="_new">CSS Drive</a><br />Categorized CSS gallery and examples.'


function pausescroller(content, divId, divClass, delay){
this.content=content
this.tickerid=divId
this.delay=delay
this.mouseoverBol=0
this.hiddendivpointer=1
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener)
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent)
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById)
setTimeout(function(){scrollerinstance.initialize()}, 500)
}


pausescroller.prototype.initialize=function(){
this.tickerdiv=document.getElementById(this.tickerid)
this.visiblediv=document.getElementById(this.tickerid+"1")
this.hiddendiv=document.getElementById(this.tickerid+"2")
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
this.getinline(this.visiblediv, this.hiddendiv)
this.hiddendiv.style.visibility="visible"
var scrollerinstance=this
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
if (window.attachEvent) //Clean up loose references in IE
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay)
}



pausescroller.prototype.animateup=function(){
var scrollerinstance=this
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
setTimeout(function(){scrollerinstance.animateup()}, 50)
}
else{
this.getinline(this.hiddendiv, this.visiblediv)
this.swapdivs()
setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
}
}

pausescroller.prototype.swapdivs=function(){
var tempcontainer=this.visiblediv
this.visiblediv=this.hiddendiv
this.hiddendiv=tempcontainer
}

pausescroller.prototype.getinline=function(div1, div2){
div1.style.top=this.visibledivtop+"px"
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
}



pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}

pausescroller.getCSSpadding=function(tickerobj){
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle)
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}

jscheuer1
10-25-2006, 04:36 PM
I am going to assume for now that you have faithfully copied Step 1 to the external file. You might want to call it something more descriptive, rather than just 'some.js' but, that's up to you.

What you cannot do is this:


<script src="some.js" type="text/javascript">
/***********************************************
* Pausing up-down scroller- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
</script>

Since there were two script tags in the original (one in the head containing the main script and one in the body containing the individual call to the main script) you need to maintain this structure. Assuming you have copied and edited correctly, as I say, you would have this in the head:


<script src="some.js" type="text/javascript">
/***********************************************
* Pausing up-down scroller- Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
</script>

And, this in the body (where you want the scroller to appear):


<script type="text/javascript">
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
</script>

The css must remain in the head of the page or be included in an external .css stylesheet file and linked to the head using a <link> tag.

Notes: The pausecontent array can be defined in the second block on the page (before the new pausescroller() call) instead of in the external script, allowing the main script to be used on multiple pages with separate content on each page but, this is a fine point and is unnecessary unless this multiple page use/separate content is your goal. This same effect can be achieved by defining additional arrays and using a separate new pausescroller() call on each page. In any case, I'd certainly advise your first getting it to work without these additional modifications.

jamesgz
10-27-2006, 01:28 PM
I took a look at your suggestions and voila the external .js call now works. Thanks.