using code behind to change the innerhtml of a client side div

  • Thread starter Thread starter Plateriot
  • Start date Start date
P

Plateriot

I have the following Ticker in a DIV that I was able to place on the top of
my page using javascript - 'webticker_lib.js' - it works just as I wish...

If I make the DIV runat="server" obviously, the javascript stops working.

My intent is to have a page where some administrative users can type text in
a textbox, click a button and whatever text they typed would be captured in
the innerhtml of this DIV

Seems fairly simple, but my client-side experience is still 'beginner'

How can I do this - or something more efficient? (the Div is below as well
as the javascript - webticker_lib.js)

<DIV ID="TICKER" STYLE="overflow:hidden; width:1000px"
onmouseover="TICKER_PAUSED=true" onmouseout="TICKER_PAUSED=false">
lkjlkjlkjl
</DIV>
<script type="text/javascript" src="webticker_lib.js"
language="javascript"></script>


// WebTicker by Mioplanet
// www.mioplanet.com

TICKER_CONTENT = document.getElementById("TICKER").innerHTML;

TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:12px; color:#444444";
TICKER_PAUSED = false;

ticker_start();

function ticker_start() {
var tickerSupported = false;
TICKER_WIDTH = document.getElementById("TICKER").style.width;
var img = "<img src=ticker_space.gif width="+TICKER_WIDTH+" height=0>";

// Firefox
if (navigator.userAgent.indexOf("Firefox")!=-1 ||
navigator.userAgent.indexOf("Safari")!=-1) {
document.getElementById("TICKER").innerHTML = "<TABLE cellspacing='0'
cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN
style='"+TICKER_STYLE+"' ID='TICKER_BODY'
width='100%'> </SPAN>"+img+"</TD></TR></TABLE>";
tickerSupported = true;
}
// IE
if (navigator.userAgent.indexOf("MSIE")!=-1 &&
navigator.userAgent.indexOf("Opera")==-1) {
document.getElementById("TICKER").innerHTML = "<DIV nowrap='nowrap'
style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY'
width='100%'></SPAN>"+img+"</DIV>";
tickerSupported = true;
}
if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {
document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ?
document.getElementById("TICKER").scrollWidth -
document.getElementById("TICKER").offsetWidth : 0;
document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;
document.getElementById("TICKER").style.display="block";
TICKER_tick();
}
}

function TICKER_tick() {
if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft +=
TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft <= 0)
document.getElementById("TICKER").scrollLeft =
document.getElementById("TICKER").scrollWidth -
document.getElementById("TICKER").offsetWidth;
if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >=
document.getElementById("TICKER").scrollWidth -
document.getElementById("TICKER").offsetWidth)
document.getElementById("TICKER").scrollLeft = 0;
window.setTimeout("TICKER_tick()", 30);
}
 
I have the following Ticker in a DIV that I was able to place on the top of
my page using javascript - 'webticker_lib.js' - it works just as I wish....

If I make the DIV runat="server" obviously, the javascript stops working.
Click to expand...

It stops working because id to DIV would be assigned by ASP.NET. You
can fix it by using ASP.NET injection

for example

<DIV ID="TICKER" runat="server"...

document.getElementById("<%= TICKER.ClientID %>")

Then js should work again.

Hope this helps
 
ok, so it's the:
document.getElementById("<%= TICKER.ClientID %>")

that does the trick.

What I ended up doing was adding an ASP label called lblTicker
then I referred to it in the div like this:
<%= lblTicker.Text %>

I didn't even need to modify the javascript!

either way, it was 2 steps away -- Thanks.
 
ok, so it's the:
document.getElementById("<%= TICKER.ClientID %>")

that does the trick.

What I ended up doing was adding an ASP label called lblTicker
then I referred to it in the div like this:
<%= lblTicker.Text %>

I didn't even need to modify the javascript!

either way, it was 2 steps away -- Thanks.
Click to expand...

Glad to hear it works
 
Back
Top