Salve a tutti,
premetto che non so quasi niente di javascript, quindi vi chiedo un aiuto da profano.
Sto cercando di adattare un codice che ho trovato per eseguire lo scrolling di un <div> quando il mouse passa su un'immagine.
Il problema è che il <div> da scrollare, anzi i <div>, sono generati automaticamente all'interno di un DataList di ASP.NET, quindi se gli assegno un "id" questo non sarà più univoco e le funzioni javascript non funzionano più.
Spulciando in giro ho trovato il modo di sostituire il "getElementById(id)" con il "getElementsByTagName("div")" ma con scarso successo.
Vi posto il mio codice:
HTML:
codice:
<asp:DataList ID="DataList1" runat="server">
<ItemTemplate>
<div>
<asp:Image ID="imgFrecciaSu" runat="server"
ImageUrl="~/Immagini/freccia_su.png" onmouseout="stopMeUpDown()"
onmouseover="scrollUp(this)" style="cursor: hand" />
<div>
<asp:DataList ID="dtlOpere" runat="server" DataKeyField="IDOpera" DataSourceID="Tab_ElencoOpere">
<ItemTemplate>
[... elenco immagini ...]
</ItemTemplate>
</asp:DataList>
</div>
<asp:Image ID="imgFrecciaGiu" runat="server"
ImageUrl="~/Immagini/freccia_giu.png" onmouseout="stopMeUpDown()"
onmouseover="scrollDown(this)" style="cursor: hand" />
</div>
</ItemTemplate>
</asp:DataList>
javascript:
codice:
// SCROLL
//
scrollStepTopDown = 1
timerUp = ""
timerDown = ""
function scrollUp(ctl) {
var div = ctl.parent;
var targetElement = div.getElementsByTagName("div")[0];
// clearTimeout(timerUp)
// targetElement.scrollTop -= scrollStepTopDown
// timerUp = setTimeout(function() { scrollUp(targetElement); }, 10);
}
function scrollDown(ctl) {
var div = ctl.parent;
var targetElement = div.getElementsByTagName("div")[0];
clearTimeout(timerDown)
targetElement.scrollTop += scrollStepTopDown
timerDown = setTimeout(function() { scrollDown(targetElement); }, 10);
}
function stopMeUpDown() {
clearTimeout(timerUp)
clearTimeout(timerDown)
}
Ricevo un errore che dice: 'undefined' è nullo o non è un oggetto!
GRAZIE