Problem with javascript file in ASP

Discussion in 'ASP .Net Building Controls' started by verci, Feb 21, 2007.

  1. verci

    verci Guest

    Hi guys, sorry if this seems stupid but I'm a newbie, I'm running Windows XP
    Pro SP2, IE 7, VS2005, ASP.net 2.0

    The problem is that I'm trying to display this news scroller made in a
    Javascript file(newsscroller.js) in my ASP page, everything works great in a
    normal HTML page, I can see the scroller just fine, but in an ASP page it
    just does not show, I get some error message that the control has not been
    initialize, so far I've been stuck for 2 days and just about given up on
    this and just use a plain HTML page for this script, can anyone help me find
    out what's wrong? Below you will find my ASP page and the java script file.

    Regards

    ************* My ASP page *************

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb"
    Inherits="Default2" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head runat="server">

    <title>Untitled Page</title>

    <script type="text/javascript" language="JavaScript"
    src="JS/newsscroller.js" />

    </head>

    <body>

    <script type="text/javascript">

    var scrollerMain = new NewsScroller("main");

    </script>

    <div style="float: right; width: 150px; height: 160px;"
    onmouseover="javascript:scrollerMain.StopScrolling();"

    onmouseout="javascript:scrollerMain.StartScrolling();">

    <script type="text/javascript">

    scrollerMain.Render("floatingNews");

    </script>

    </div>


    <script type="text/javascript">

    scrollerMain.LoadXML('http://localhost/news.xml');

    </script>

    <script type="text/javascript">

    scrollerMain.StartScrolling ();

    </script>

    </body>

    </html>



    ************* The js script ************
    // title and copyright notice go here

    // API
    // These are the functions you will call to use the NewsScroller from your
    web page

    // NewsScroller_Initialize
    // Parameters:
    // elmDivForNews: object reference to a DIV element that will be used to
    display the news
    // Return:
    // returns a NewsScroller object, with supporting properties and methods
    function NewsScroller ()
    {
    if (window.NewsScrollerInstance != null)
    {
    window.alert("Only one NewsScroller control is allowed on a page.");
    return;
    }
    window.NewsScrollerInstance = this;

    this.LoadXML = NewsScroller_LoadXML;
    this.AddNewsItem = NewsScroller_AddNewsItem;
    this.Clear = NewsScroller_Clear;
    this.StartScrolling = NewsScroller_StartScrolling;
    this.StopScrolling = NewsScroller_StopScrolling;
    this.Render = NewsScroller_Render;

    // public properties
    this.className = "";
    this.itemNormalClassName = "";

    this.scrollRate = 25;
    this.scrollStep = 1;
    this.scrollPause = 2000;

    // internal use
    this.RenderChildren = NewsScroller_RenderChildren;

    this.renderedControl = "";
    this.itemsText = new Array();
    this.itemsLink = new Array();
    this.itemCount = 0;

    this.scrollEnabled = false;
    }

    function NewsScroller_LoadXML (sXmlID)
    {
    this.Clear();
    var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async="false";
    xmlDoc.load(sXmlID);
    var xItems = xmlDoc.getElementsByTagName('item');
    for (var iNode = 0; iNode < xItems.length; iNode++)
    {
    var xItem = xItems[iNode];
    var xText = xItem.childNodes[0].text;
    var xLink = xItem.childNodes[1].text;
    this.AddNewsItem(xText, xLink);
    } var elmControl = document.getElementById(this.renderedControl);
    this.RenderChildren(this.renderedControl);
    }

    function NewsScroller_AddNewsItem (strText, strLink)
    {
    this.itemsText[this.itemCount] = strText;
    this.itemsLink[this.itemCount] = strLink;
    this.itemCount++;
    }

    function NewsScroller_Clear ()
    {
    this.StopScrolling ();
    var elmControl = document.getElementById(this.renderedControl);
    while (elmControl.childNodes.length > 0)
    elmControl.removeChild(elmControl.childNodes[0]);
    this.itemsText = new Array();
    this.itemsLink = new Array();
    this.itemCount = 0;
    }

    function NewsScroller_StartScrolling ()
    {
    if (this.itemCount > 0)
    {
    var sControlName = this.renderedControl;
    if (sControlName == null)
    {
    window.alert ("You must render a control before you can start scrolling
    it.");
    return;
    }
    var elmControl = document.getElementById(sControlName);
    var elmItem0 = document.getElementById("floatingNews0");
    if (this.itemCount > 1)
    {
    var elmItem1 = document.getElementById(sControlName + "1");
    this.cySeparator = (elmItem1.offsetTop - elmItem0.offsetTop) -
    elmItem0.offsetHeight;
    }
    else
    {
    this.cySeparator = 0;
    }

    if (this.ScrollTimerID == null)
    this.ScrollTimerID = window.setInterval(NewsScroller_ScrollNews,
    this.scrollRate);
    }
    }

    function NewsScroller_StopScrolling ()
    {
    window.clearInterval(this.ScrollTimerID);
    this.ScrollTimerID = null;
    }

    function NewsScroller_Render(sControlID)
    {
    if (sControlID.length == 0)
    {
    window.alert("You must provide a unique ID for the rendered control.");
    return;
    }
    var elmControl = document.getElementById(sControlID);
    if (elmControl != null)
    {
    window.alert("A NewsScroller with this ID has already been rendered.
    Please use a unique ID.");
    return;
    }
    this.renderedControl = sControlID;

    // <DIV>
    document.write("<div");
    document.write(" id=\"" + sControlID + "\"");
    document.write(" class=\"" + this.className + "\"");
    document.write(" style=\"position: relative; width: 100%; height: 100%;
    \"");
    document.write(">");

    // </DIV>
    document.write("</div>");

    this.RenderChildren(sControlID);

    var dtNow = new Date();
    var dtResume = new Date(dtNow.getFullYear(), dtNow.getMonth(),
    dtNow.getDate(), dtNow.getHours(), dtNow.getMinutes(), dtNow.getSeconds(),
    this.scrollPause);
    elmControl = document.getElementById(sControlID);
    elmControl.ResumeDateTime = dtResume;
    }

    // Supporting functions
    function NewsScroller_RenderChildren()
    {
    var sControlID = this.renderedControl;
    elmControl = document.getElementById(sControlID);

    // <DIV>
    elmDiv = document.createElement("div");
    elmDiv.style.position = "absolute";
    elmDiv.style.left = "0px";
    elmDiv.style.width = "100%";
    elmDiv.style.height = "100%";
    elmDiv.style.overflow = "hidden";
    elmControl.appendChild(elmDiv);

    for (var nItem = 0; nItem < this.itemCount; nItem++)
    {
    var sItemName = sControlID + nItem.toString();

    var elmP = document.createElement("p");
    elmP.id = sItemName;
    elmP.style.position = "relative";
    elmP.style.top = "0px";
    elmP.style.width = "100%";
    elmP.className = this.itemNormalClassName;
    elmDiv.appendChild(elmP);

    var elmA = document.createElement("a");
    elmA.className = this.itemNormalClassName;
    elmA.href = this.itemsLink[nItem];
    elmP.appendChild(elmA);

    var tn = document.createTextNode(this.itemsText[nItem]);
    elmA.appendChild(tn);

    }
    }

    function NewsScroller_ScrollNews()
    {
    var ns = window.NewsScrollerInstance;
    var sControlName = ns.renderedControl;
    if (sControlName.length == 0)
    {
    window.alert ("Do not call ScrollNews directly. Use the Start method of
    the NewsScroller object.");
    return;
    }
    var elmControl = document.getElementById(sControlName);
    if (new Date() >= elmControl.ResumeDateTime)
    {
    // see whether any item is about to reach the top,
    var cyOffset = 0;
    for (var nItem = 0; nItem < ns.itemCount; nItem++)
    {
    var sItemName = sControlName + nItem.toString();
    var elmItem = document.getElementById(sItemName);
    if ((elmItem.offsetTop > 0) && ((elmItem.offsetTop - ns.scrollStep) <=
    0))
    {
    // the top of this item has reached the top of the control,
    // so pause scrolling for the whole control
    var dtNow = new Date();
    var dtResume = new Date(dtNow.getFullYear(), dtNow.getMonth(),
    dtNow.getDate(), dtNow.getHours(), dtNow.getMinutes(), dtNow.getSeconds(),
    ns.scrollPause);
    elmControl.ResumeDateTime = dtResume;
    cyOffset = elmItem.offsetTop;
    }
    }
    if (cyOffset > 0)
    {
    // control is just now paused, so scroll all items up
    // in order to put the top item flush with the top of the control
    for (var nItem = 0; nItem < ns.itemCount; nItem++)
    {
    var sItemName = sControlName + nItem.toString();
    var elmItem = document.getElementById(sItemName);
    elmItem.style.pixelTop = elmItem.style.pixelTop - cyOffset;
    }
    }
    else
    {
    // the control is not paused, so scroll every item up by one step
    for (var nItem = 0; nItem < ns.itemCount; nItem++)
    {
    var sItemName = sControlName + nItem.toString();
    var elmItem = document.getElementById(sItemName);
    elmItem.style.pixelTop -= ns.scrollStep;


    }
    }
    // see whether any items have scrolled off the top
    for (var nItem = 0; nItem < ns.itemCount; nItem++)
    {
    var sItemName = sControlName + nItem.toString();
    var elmItem = document.getElementById(sItemName);
    if ((elmItem.offsetTop + elmItem.offsetHeight) <= 0)
    {
    // the bottom of this item has scrolled beyond the top of the control,
    // so move it to the bottom of the control
    if (ns.itemCount > 1)
    {
    var sBottomItemName;
    if (nItem == 0)
    sBottomItemName = sControlName + (ns.itemCount - 1).toString();
    else
    sBottomItemName = sControlName + (nItem - 1).toString();
    var elmBottomItem = document.getElementById(sBottomItemName);
    elmItem.style.pixelTop = (elmBottomItem.offsetTop +
    elmBottomItem.offsetHeight + ns.cySeparator) - (elmItem.offsetTop -
    elmItem.style.pixelTop);
    }
    else
    {
    elmItem.style.pixelTop = elmItem.parentElement.offsetHeight;
    }
    }
    }
    }
    }
     
    verci, Feb 21, 2007
    #1
    1. Advertising

  2. Hi,

    verci wrote:
    > Hi guys, sorry if this seems stupid but I'm a newbie, I'm running Windows XP
    > Pro SP2, IE 7, VS2005, ASP.net 2.0
    >
    > The problem is that I'm trying to display this news scroller made in a
    > Javascript file(newsscroller.js) in my ASP page, everything works great in a
    > normal HTML page, I can see the scroller just fine, but in an ASP page it
    > just does not show, I get some error message that the control has not been
    > initialize, so far I've been stuck for 2 days and just about given up on
    > this and just use a plain HTML page for this script, can anyone help me find
    > out what's wrong? Below you will find my ASP page and the java script file.
    >
    > Regards


    I didn't read the HUGE amount of code you provided (a link to a URL
    where the problem can be seen would have been wiser). However, if it
    works fine in HTML but not in the ASP.NET page, it often has to do with
    the DOCTYPE. According to the DOCTYPE, the browser will parse and
    interprete the document differently.

    Try to change this line:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    into

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

    and tell us if it works better.

    Greetings,
    Laurent
    --
    Laurent Bugnion [MVP ASP.NET]
    Software engineering, Blog: http://www.galasoft-LB.ch
    PhotoAlbum: http://www.galasoft-LB.ch/pictures
    Support children in Calcutta: http://www.calcutta-espoir.ch
     
    Laurent Bugnion [MVP], Feb 21, 2007
    #2
    1. Advertising

  3. verci

    verci Guest

    Hi

    It still does not work, i get a blank page and at the status bar appears an
    icon with the text Finish with errors, the error message :

    Line: 26
    char: 12
    error: scrollerMain is undefined
    code 0

    So I assumed it's an error on the javascript file?, but as I commented
    earlier in a plain HTML page works fine. :(


    "Laurent Bugnion [MVP]" <> wrote in message
    news:%...
    > Hi,
    >
    > verci wrote:
    >> Hi guys, sorry if this seems stupid but I'm a newbie, I'm running Windows
    >> XP Pro SP2, IE 7, VS2005, ASP.net 2.0
    >>
    >> The problem is that I'm trying to display this news scroller made in a
    >> Javascript file(newsscroller.js) in my ASP page, everything works great
    >> in a normal HTML page, I can see the scroller just fine, but in an ASP
    >> page it just does not show, I get some error message that the control has
    >> not been initialize, so far I've been stuck for 2 days and just about
    >> given up on this and just use a plain HTML page for this script, can
    >> anyone help me find out what's wrong? Below you will find my ASP page and
    >> the java script file.
    >>
    >> Regards

    >
    > I didn't read the HUGE amount of code you provided (a link to a URL where
    > the problem can be seen would have been wiser). However, if it works fine
    > in HTML but not in the ASP.NET page, it often has to do with the DOCTYPE.
    > According to the DOCTYPE, the browser will parse and interprete the
    > document differently.
    >
    > Try to change this line:
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >
    > into
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
    >
    > and tell us if it works better.
    >
    > Greetings,
    > Laurent
    > --
    > Laurent Bugnion [MVP ASP.NET]
    > Software engineering, Blog: http://www.galasoft-LB.ch
    > PhotoAlbum: http://www.galasoft-LB.ch/pictures
    > Support children in Calcutta: http://www.calcutta-espoir.ch
     
    verci, Feb 21, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. verci
    Replies:
    2
    Views:
    429
    verci
    Feb 21, 2007
  2. verci

    Problem with javascript file in ASP

    verci, Feb 21, 2007, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    122
    verci
    Feb 21, 2007
  3. Andy
    Replies:
    2
    Views:
    230
    kaeli
    Mar 4, 2004
  4. Antonio
    Replies:
    2
    Views:
    122
    Antonio
    May 21, 2004
  5. vunet
    Replies:
    2
    Views:
    161
    Laser Lips
    Jul 8, 2008
Loading...

Share This Page