V
verci
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:
// elmDivForobject 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;
}
}
}
}
}
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:
// elmDivForobject 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;
}
}
}
}
}
