Generally we will bind DataList from DataBase, I got a requirement that First bind Images to DataList and Shuffle the randomly on regular time intervals. So solution is
Here I used four Hidden elements to save Image IDs,Urls,Hyperlink Ids and Hyperlink Urls. After binding Data to DataList. I read all the Ids and Urls to respective hidden elemets separating with a ',' and in Javascript I converted the IDs and Urls to Array on spltting by ','. and I called a java script function which will shuffle Positions of Urls in Urls Array and Using a for loop I assigned the shuffled urls to Unshuffled Ids. Thats all images are shuffled. I called this function regulary by using setTimeout("call1();",parseInt(1000));. oh.. my work is done.
HTML:
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" RepeatDirection="Vertical" RepeatColumns="2">
<ItemTemplate>
<a href='<%#Eval("Links") %>' runat="server" id="alink">
<asp:Image ID="Image1" ImageUrl='<%#Eval("URL")%>' runat="server" />
</a>
</ItemTemplate>
</asp:DataList>
<asp:HiddenField ID="hdnIds" runat="server" />
<asp:HiddenField ID="hdnURLs" runat="server" />
<asp:HiddenField ID="hdnLinks" runat="server" />
<asp:HiddenField ID="hdnLinkID" runat="server" />
</div>
</form>
<script language="javascript" type="text/javascript">
var ids = document.getElementById("hdnIds").value.split(',');
var URLs=document.getElementById("hdnURLs").value.split(',');
var links = document.getElementById("hdnLinks").value.split(',');
var linkIds = document.getElementById("hdnLinkID").value.split(',');
call1();
function Shuffle(n)
{
var i, j, k;
var temp,templink;
for (i = 0; i < n; i++)
for (j = 0; j < this.URLs.length; j++)
{
k = Math.floor(Math.random() * this.URLs.length);
temp = this.URLs[j];
templink = this.links[j];
this.URLs[j] = this.URLs[k];
this.URLs[k] = temp;
this.links[j] = this.links[k];
this.links[k] = templink;
}
}
function call1()
{
Shuffle(1);
for(im = 0 ; im {
var wz =ids[im];
document.getElementById(wz).src = URLs[im];
document.getElementById(linkIds[im]).href = links[im];
}
setTimeout("call1();",parseInt(1000));
}
</script>
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GenerateTable();
}
}
private void GenerateTable()
{
try
{
DataTable dt = new DataTable();
DataColumn dc = new DataColumn("URL");
DataColumn dc1 = new DataColumn("Links");
dt.Columns.Add(dc);
dt.Columns.Add(dc1);
DataRow dr1 = dt.NewRow();
dr1["URL"] = "Images/Confusion.jpg";
dr1["Links"] = "http://www.yahoo.com";
dt.Rows.Add(dr1);
DataRow dr2 = dt.NewRow();
dr2["URL"] = "Images/horror.jpg";
dr2["Links"] = "http://www.gmail.com";
dt.Rows.Add(dr2);
DataRow dr3 = dt.NewRow();
dr3["URL"] = "Images/Icantstop.gif";
dr3["Links"] = "http://www.google.com";
dt.Rows.Add(dr3);
DataRow dr4 = dt.NewRow();
dr4["URL"] = "Images/Micky.jpg";
dr4["Links"] = "http://www.msn.com";
dt.Rows.Add(dr4);
DataRow dr5 = dt.NewRow();
dr5["URL"] = "Images/Scientist1.jpg";
dr5["Links"] = "http://www.orkut.com";
dt.Rows.Add(dr5);
DataRow dr6 = dt.NewRow();
dr6["URL"] = "Images/Tom.jpg";
dr6["Links"] = "http://www.cricinfo.com";
dt.Rows.Add(dr6);
DataList1.DataSource = dt;
DataList1.DataBind();
string str =string.Empty;
string strUrl = string.Empty;
string strLinks = string.Empty;
string strLinkIds = string.Empty;
foreach (DataListItem dl in DataList1.Items)
{
str += dl.FindControl("Image1").ClientID+",";
Image img = (Image)dl.FindControl("Image1");
strUrl += "" + img.ImageUrl + ",";
HtmlAnchor alink = (HtmlAnchor)dl.FindControl("alink");
strLinks += alink.HRef+",";
strLinkIds += alink.ClientID+",";
}
hdnIds.Value = str.Remove(str.Length-1);
hdnURLs.Value = strUrl.Remove(strUrl.Length - 1);
hdnLinks.Value = strLinks.Remove(strLinks.Length - 1);
hdnLinkID.Value = strLinkIds.Remove(strLinkIds.Length - 1);
}
catch (Exception exception)
{
}
}
|
| Author: rahul 05 Jun 2008 | Member Level: Gold Points : 1 |
I tried the example but its not working.
Images are not shuffling..
and can you told where you call the javascript function on page...
|