using external style sheet

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
tomdagom
Forum Newbie
Posts: 7
Joined: Wed Jan 16, 2008 11:32 am

using external style sheet

Post by tomdagom »

~pickle | Please use [ javascript ][ /javascript ] tags when posting javascript as it's MUCH easier to read. Your post has been edited to reflect how we'd like to see code posted on these boards.

I am trying to create a text scroler. The code works fine internally like so :

Code: Select all

 <html><head><script type="text/javascript">  function pausescroller(content, divId, divClass, delay){this.content=content //message array contentthis.tickerid=divId //ID of ticker div to display informationthis.delay=delay //Delay between msg change, in miliseconds.this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)this.hiddendivpointer=1 //index of message array for hidden divdocument.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=thisif (window.addEventListener) //run onload in DOM2 browserswindow.addEventListener("load", function(){scrollerinstance.initialize()}, false)else if (window.attachEvent) //run onload in IE5.5+window.attachEvent("onload", function(){scrollerinstance.initialize()})else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 secsetTimeout(function(){scrollerinstance.initialize()}, 500)} // -------------------------------------------------------------------// initialize()- Initialize scroller method.// -Get div objects, set initial positions, start up down animation// ------------------------------------------------------------------- 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=thisdocument.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 IEwindow.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})setTimeout(function(){scrollerinstance.animateup()}, this.delay)}  // -------------------------------------------------------------------// animateup()- Move the two inner divs of the scroller up and in sync// ------------------------------------------------------------------- pausescroller.prototype.animateup=function(){var scrollerinstance=thisif (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)}} // -------------------------------------------------------------------// swapdivs()- Swap between which is the visible and which is the hidden div// ------------------------------------------------------------------- pausescroller.prototype.swapdivs=function(){var tempcontainer=this.visibledivthis.visiblediv=this.hiddendivthis.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"} // -------------------------------------------------------------------// setmessage()- Populate the hidden div with the next message before it's visible// ------------------------------------------------------------------- pausescroller.prototype.setmessage=function(){var scrollerinstance=thisif (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)setTimeout(function(){scrollerinstance.setmessage()}, 100)else{var i=this.hiddendivpointervar ceiling=this.content.lengththis.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]this.animateup()}} pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if anyif (tickerobj.currentStyle)return tickerobj.currentStyle["paddingTop"]else if (window.getComputedStyle) //if DOM2return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")elsereturn 0} </script><style type="text/css"> /*Example CSS for the two demo scrollers*/ #pscroller1{width: 200px;height: 100px;border: 1px solid black;padding: 5px;background-color: lightyellow;} #pscroller2{width: 350px;height: 20px;border: 1px solid black;padding: 3px;} #pscroller2 a{text-decoration: none;} .someclass{ /*=class to apply to your scroller(s) if desired */} </style></head><body><script type="text/javascript"> /*Example message arrays for the two demo scrollers*/ var pausecontent=new Array()pausecontent[0]='<a href="#">link 1</a><br />test1'pausecontent[1]='<a href="#">link 2</a><br />test 2.'pausecontent[2]='<a href="#" target="_new">link 3</a><br />test 3' var pausecontent2=new Array()pausecontent2[0]='<a href="#">this is just and example 1</a>'pausecontent2[1]='<a href="#">this is just and example 2</a>'pausecontent2[2]='<a href="#">this is just and example 3</a>' </script>  <script type="text/javascript"> //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds) new pausescroller(pausecontent, "pscroller1", "someclass", 3000)document.write("<br />")new pausescroller(pausecontent2, "pscroller2", "someclass", 2000) </script></body></html> 
but when i try to use an external js file by adding the following code to scroller.js,
the page does not work.

Code: Select all

 function pausescroller(content, divId, divClass, delay){this.content=content //message array contentthis.tickerid=divId //ID of ticker div to display informationthis.delay=delay //Delay between msg change, in miliseconds.this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)this.hiddendivpointer=1 //index of message array for hidden divdocument.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=thisif (window.addEventListener) //run onload in DOM2 browserswindow.addEventListener("load", function(){scrollerinstance.initialize()}, false)else if (window.attachEvent) //run onload in IE5.5+window.attachEvent("onload", function(){scrollerinstance.initialize()})else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 secsetTimeout(function(){scrollerinstance.initialize()}, 500)} // -------------------------------------------------------------------// initialize()- Initialize scroller method.// -Get div objects, set initial positions, start up down animation// ------------------------------------------------------------------- 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=thisdocument.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 IEwindow.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})setTimeout(function(){scrollerinstance.animateup()}, this.delay)}  // -------------------------------------------------------------------// animateup()- Move the two inner divs of the scroller up and in sync// ------------------------------------------------------------------- pausescroller.prototype.animateup=function(){var scrollerinstance=thisif (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)}} // -------------------------------------------------------------------// swapdivs()- Swap between which is the visible and which is the hidden div// ------------------------------------------------------------------- pausescroller.prototype.swapdivs=function(){var tempcontainer=this.visibledivthis.visiblediv=this.hiddendivthis.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"} // -------------------------------------------------------------------// setmessage()- Populate the hidden div with the next message before it's visible// ------------------------------------------------------------------- pausescroller.prototype.setmessage=function(){var scrollerinstance=thisif (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)setTimeout(function(){scrollerinstance.setmessage()}, 100)else{var i=this.hiddendivpointervar ceiling=this.content.lengththis.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]this.animateup()}} pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if anyif (tickerobj.currentStyle)return tickerobj.currentStyle["paddingTop"]else if (window.getComputedStyle) //if DOM2return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")elsereturn 0} 
i then specify src="scroller.js" in my script tag

any help would be much appreciated.

~pickle | Please use [ javascript ][ /javascript ] tags when posting javascript as it's MUCH easier to read. Your post has been edited to reflect how we'd like to see code posted on these boards.
User avatar
webspider
Forum Commoner
Posts: 52
Joined: Sat Oct 27, 2007 3:29 am

Re: using external style sheet

Post by webspider »

check the path of scroller.js.
i then specify src="scroller.js" in my script tag
put your scroller.js in same directory where you put .html file(from which you called it ) and also check <script> tag

Code: Select all

 
<script type="text/javascript" src="scroller.js" ></script>
 
Post Reply