How to Use JavaScript in an ASP.NET/VB page

kwilliams · January 14th, 2008, 12:57 PM

Thanks to a great site, I have the following code that produces a news scroller:

Code:

<%@ 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:

Code:

<%@ 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 Sub
End 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 %>


                <div class="scroller">
            <script type="text/javascript">
                            new pausescroller(pausecontent, "ealert_scroll", "someclass", 8000)
                        </script>
        </div>
    <% End If %>
    </div>
</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.

KWilliams

planoie · January 14th, 2008, 01:38 PM

You are mixing code in your user interface in a classic ASP way. This is not recommended.

You are declaring the objScroller variable in the context of the Page_PreLoad method. That variable will not be accessible to the code later on in your page.

To solve this, I would wrap the code you want to show/hide inside of a <asp:literal> or <asp:placeholder> server control. For example

Code:

<div id="content">
    <asp:literal runat="server" id="litScrollerJS">


        <div class="scroller">
            <script type="text/javascript">
                new pausescroller(pausecontent, "ealert_scroll", "someclass", 8000)
            </script>
        </div>
    </asp:literal>
</div>

In your page's Page_PreLoad method, you can then make the server control visible or not:

Code:

<script runat="server">
    Partial Class MasterPage
        Inherits System.Web.UI.MasterPage
        Sub Page_PreLoad(ByVal sender As Object, ByVal e As EventArgs)
            'Scroller TEST
            litScrollerJS = False
        End Sub
    End Class
</script>

I notice you have two script blocks that contain "new pausescroller". Could this also be contributing to the problem?

-Peter

kwilliams · January 14th, 2008, 01:48 PM

Quote:

quote:Originally posted by planoie
You are mixing code in your user interface in a classic ASP way. This is not recommended.

Yes I know. That's why I posted the code here. I know that's not the proper way to do it, and I wanted feedback on what *is* the proper way.

Quote:

quote:You are declaring the objScroller variable in the context of the Page_PreLoad method. That variable will not be accessible to the code later on in your page.

To solve this, I would wrap the code you want to show/hide inside of a <asp:literal> or <asp:placeholder> server control. For example

Code:

<div id="content">
    <asp:literal runat="server" id="litScrollerJS">


        <div class="scroller">
            <script type="text/javascript">
                new pausescroller(pausecontent, "ealert_scroll", "someclass", 8000)
            </script>
        </div>
    </asp:literal>
</div>

In your page's Page_PreLoad method, you can then make the server control visible or not:

Code:

<script runat="server">
    Partial Class MasterPage
        Inherits System.Web.UI.MasterPage
        Sub Page_PreLoad(ByVal sender As Object, ByVal e As EventArgs)
            'Scroller TEST
            litScrollerJS = False
        End Sub
    End Class
</script>

Thanks for this code sample. I'll give it a try, but I'll place the variable using of the Page_Load method instead of the Page_PreLoad method so that it will work on every page load. If it won't work in that case, please let me know.

Quote:

quote:I notice you have two script blocks that contain "new pausescroller". Could this also be contributing to the problem?-Peter

That was just a typo...sorry. I shorted some of the code to make it post-ready, so that is my mistake. I'm not having any problem with the scroller displaying or not displaying. But thanks for the heads-up.

KWilliams

kwilliams · January 14th, 2008, 02:00 PM

Well, I copied and pasted your code without success. I tried placing in the literal var in the Page_Load and Page_PreLoad, but neither worked. This is what I tried:

Code:

Partial Class MasterPage
    Inherits System.Web.UI.MasterPage
    Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        Dim litScrollerJS = False
    End Sub
End Class

<div id="content">
    <asp:literal runat="server" id="litScrollerJS">


        <div class="scroller">
            <script type="text/javascript">
                new pausescroller(pausecontent, "ealert_scroll", "someclass", 8000)
            </script>
        </div>
    </asp:literal>
</div>

Shouldn't this work in the Page_Load or Page_PreLoad methods?

KWilliams

planoie · January 14th, 2008, 03:01 PM

Pay close attention to the Page_Preload code in my first post.

The presence of a server tag serves as the declaration of a variable of the type matching the tag.
E.g. having this in your page:

   <asp:literal id="litScrollerJS" ...>

translates roughly to this in the runtime code of the page:

   protected System.Web.UI.WebControls.LiteralControl litScrollerJS;

That is a class scope field, thus you can refer to that instance variable anywhere in your page's code.

You are circumventing that core functionality if you declare a new variable of the same name in your method:

   Dim litScrollerJS

Also, the code I posted is not correct. It should be like this:

   litScrollerJS.Visible = False

Sorry about that.

-Peter

kwilliams · January 14th, 2008, 03:30 PM

Oh, that makes perfect sense now...and it works great.

I didn't understand logically how it would work with "litScrollerJS = False". When I typed that in, I received the old you need to declare the variable line. So I automatically assumed that I needed to add "Dim". Thanks for the clarification on how that works, and I really appreciate your help.

KWilliams