kwilliams Posted January 14, 2008 Share Posted January 14, 2008 Thanks to a great site, I have the following code that produces a news scroller: <%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" Title="Test Page" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Test Page</title><script type="text/javascript"> var pausecontent=new Array() var strAlert1 = "This is alert #1."; var strAlert2 = "This is alert #2."; var strAlert3 = "This is alert #3."; pausecontent[0]='<strong><a href="alert1.aspx">Alert #1:</a></strong> ' + strAlert1 pausecontent[1]='<strong><a href="alert2.aspx">Alert #2:</a></strong> ' + strAlert2 pausecontent[2]='<strong><a href="alert3.aspx">Alert #3:</a></strong> ' + strAlert3 /*********************************************** * 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. ***********************************************/ function pausescroller(content, divId, divClass, delay){ this.content=content //message array content this.tickerid=divId //ID of ticker div to display information this.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 div 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) //run onload in DOM2 browsers window.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 sec setTimeout(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=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) } // ------------------------------------------------------------------- // animateup()- Move the two inner divs of the scroller up and in sync // ------------------------------------------------------------------- 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) } } // ------------------------------------------------------------------- // swapdivs()- Swap between which is the visible and which is the hidden div // ------------------------------------------------------------------- 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" } // ------------------------------------------------------------------- // setmessage()- Populate the hidden div with the next message before it's visible // ------------------------------------------------------------------- pausescroller.prototype.setmessage=function(){ var scrollerinstance=this if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it) 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){ //get CSS padding value, if any if (tickerobj.currentStyle) return tickerobj.currentStyle["paddingTop"] else if (window.getComputedStyle) //if DOM2 return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top") else return 0 }</script></head><body><div> <script type="text/javascript"> new pausescroller(pausecontent, "scroller", "someclass", 4000); </script> </div></body></html> But I need to use this code within an ASP.NET/VB page using proper methods. This is what I've come up with so far: <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" Debug="True" %><%@ Import Namespace="System" %><%@ Import Namespace="System.IO" %><%@ Import Namespace="System.Xml" %><%@ Import Namespace="System.Xml.XPath" %><%@ Import Namespace="System.Xml.Xsl" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><script runat="server"> Partial Class MasterPage Inherits System.Web.UI.MasterPage Sub Page_PreLoad(ByVal sender As Object, ByVal e As EventArgs) 'Scroller TEST Dim objScroller As Object = False End SubEnd Class</script><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head id="Head1" runat="server"> <title>Test Page</title> <%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" Title="Test Page" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Test Page</title><script language="javascript" type="text/javascript" var pausecontent=new Array() var strAlert1 = "This is alert #1."; var strAlert2 = "This is alert #2."; var strAlert3 = "This is alert #3."; pausecontent[0]='<strong><a href="alert1.aspx">Alert #1:</a></strong> ' + strAlert1 pausecontent[1]='<strong><a href="alert2.aspx">Alert #2:</a></strong> ' + strAlert2 pausecontent[2]='<strong><a href="alert3.aspx">Alert #3:</a></strong> ' + strAlert3 /*********************************************** * 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. ***********************************************/ function pausescroller(content, divId, divClass, delay){ this.content=content //message array content this.tickerid=divId //ID of ticker div to display information this.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 div 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) //run onload in DOM2 browsers window.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 sec setTimeout(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=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) } // ------------------------------------------------------------------- // animateup()- Move the two inner divs of the scroller up and in sync // ------------------------------------------------------------------- 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) } } // ------------------------------------------------------------------- // swapdivs()- Swap between which is the visible and which is the hidden div // ------------------------------------------------------------------- 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" } // ------------------------------------------------------------------- // setmessage()- Populate the hidden div with the next message before it's visible // ------------------------------------------------------------------- pausescroller.prototype.setmessage=function(){ var scrollerinstance=this if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it) 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){ //get CSS padding value, if any if (tickerobj.currentStyle) return tickerobj.currentStyle["paddingTop"] else if (window.getComputedStyle) //if DOM2 return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top") else return 0 }</script></head><body><div> <script type="text/javascript"> new pausescroller(pausecontent, "scroller", "someclass", 4000); </script> </div></body></html></head><body> <div id="content"> <% If objScroller = True Then %> <!-- ***THIS SHOULD RESULT IN THE SCROLLER NOT SHOWING UP*** --> <!-- Scroller --> <div class="scroller"> <script type="text/javascript"> new pausescroller(pausecontent, "scroller", "someclass", 8000) </script> </div><!-- end scroller --> <% End If %> </div><!-- end content --></body></html> ...but this results in a "Name 'objScroller' is not declared." error message.So I really need some help at figuring out how to use the JavaScript within an ASP.NET/VB page in the proper way. Any and all help is appreciated. Thanks. Link to comment Share on other sites More sharing options...
jesh Posted January 14, 2008 Share Posted January 14, 2008 I don't know if I can help with your VB stuff, but this line is missing a bracket: <script language="javascript" type="text/javascript" Link to comment Share on other sites More sharing options...
kwilliams Posted January 14, 2008 Author Share Posted January 14, 2008 I don't know if I can help with your VB stuff, but this line is missing a bracket:<script language="javascript" type="text/javascript" That was just a typo, but thanks for the heads-up. Hopefully someone can help me out:) Link to comment Share on other sites More sharing options...
kwilliams Posted January 14, 2008 Author Share Posted January 14, 2008 Here's a working solution that I received from another forum: <div id="content"> <asp:literal runat="server" id="litScrollerJS"> <!-- Scroller --> <div class="scroller"> <script type="text/javascript"> new pausescroller(pausecontent, "scroller", "someclass", 8000) </script> </div><!-- end scroller --> </asp:literal></div><!-- end content --><script runat="server"> Partial Class MasterPage Inherits System.Web.UI.MasterPage Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) 'Scroller TEST litScrollerJS.Visible = False End Sub End Class</script> Thanks for your help anyway. I really appreciate it. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.