Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 2.0 > ASP.NET 2.0 Professional
| Search | Today's Posts | Mark Forums Read
ASP.NET 2.0 Professional If you are an experienced ASP.NET programmer, this is the forum for your 2.0 questions. Please also see the Visual Web Developer 2005 forum.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 2.0 Professional section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old January 14th, 2008, 12:57 PM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default How to Use JavaScript in an ASP.NET/VB page

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
  #2 (permalink)  
Old January 14th, 2008, 01:38 PM
planoie's Avatar
Friend of Wrox
Points: 16,481, Level: 55
Points: 16,481, Level: 55 Points: 16,481, Level: 55 Points: 16,481, Level: 55
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2003
Location: Clifton Park, New York, USA.
Posts: 5,407
Thanks: 0
Thanked 16 Times in 16 Posts
Default

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
  #3 (permalink)  
Old January 14th, 2008, 01:48 PM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
  #4 (permalink)  
Old January 14th, 2008, 02:00 PM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
  #5 (permalink)  
Old January 14th, 2008, 03:01 PM
planoie's Avatar
Friend of Wrox
Points: 16,481, Level: 55
Points: 16,481, Level: 55 Points: 16,481, Level: 55 Points: 16,481, Level: 55
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Aug 2003
Location: Clifton Park, New York, USA.
Posts: 5,407
Thanks: 0
Thanked 16 Times in 16 Posts
Default

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
  #6 (permalink)  
Old January 14th, 2008, 03:30 PM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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


Similar Threads
Thread Thread Starter Forum Replies Last Post
Timer:JavaScript or VB.NET gaurav_jain2403 Other Programming Languages 0 February 13th, 2006 03:15 PM
Parse XML doc using VB.NET into ASP.NET page kwilliams Classic ASP XML 17 November 11th, 2005 10:42 AM
How can I call a vb.net Exe from an asp.net page? jorevil Classic ASP Basics 0 October 1st, 2003 11:34 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.