Using J Query in DataList
-
Hey guys, I'm new to Jquery and I'm trying to use <pre>jCapSlide</pre> in a datalist,
<pre lang="HTML">
<asp:DataList ID="DataListList" runat="server" DataSourceID="ObjectDataSourceList"
RepeatColumns="5" CellPadding="5" CellSpacing="5"
OnItemDataBound="DataListList_ItemDataBound">
<ItemTemplate>
<div id="capslide_img_cont" class="ic_container">
<asp:Image ImageUrl='<%#Eval("Images.Image.Virtual_FileName") %>' ID="MainImage"
CssClass="NewsImage1" runat="server" />
<div class="overlay" style="display: none;">
</div>
<div class="ic_caption">
<p class="ic_category">
'<%# Eval("Category.cName")%>'</p>
<h3>
'<%# Eval("pTitle") %>'</h3>
<p class="ic_text">
'<%# Eval("pTitle") %>'
</p>
</div>
</div>
</ItemTemplate>
</asp:DataList>
</pre>with this Function
<pre lang="Javascript">
<script type="text/javascript">
$(function () {
$("#capslide_img_cont").capslide({
caption_color: 'white',
caption_bgcolor: 'black',
overlay_bgcolor: 'black',
border: '',
showcaption: false
});
});
</script>
</pre>There are 3 records, this applies on the first one but not the other two,
I think the problem is repeated <pre>id="capslide_img_cont"</pre> but can't seem to fix it.
can you help me out ?
It's deeply appreciated -
Hey guys, I'm new to Jquery and I'm trying to use <pre>jCapSlide</pre> in a datalist,
<pre lang="HTML">
<asp:DataList ID="DataListList" runat="server" DataSourceID="ObjectDataSourceList"
RepeatColumns="5" CellPadding="5" CellSpacing="5"
OnItemDataBound="DataListList_ItemDataBound">
<ItemTemplate>
<div id="capslide_img_cont" class="ic_container">
<asp:Image ImageUrl='<%#Eval("Images.Image.Virtual_FileName") %>' ID="MainImage"
CssClass="NewsImage1" runat="server" />
<div class="overlay" style="display: none;">
</div>
<div class="ic_caption">
<p class="ic_category">
'<%# Eval("Category.cName")%>'</p>
<h3>
'<%# Eval("pTitle") %>'</h3>
<p class="ic_text">
'<%# Eval("pTitle") %>'
</p>
</div>
</div>
</ItemTemplate>
</asp:DataList>
</pre>with this Function
<pre lang="Javascript">
<script type="text/javascript">
$(function () {
$("#capslide_img_cont").capslide({
caption_color: 'white',
caption_bgcolor: 'black',
overlay_bgcolor: 'black',
border: '',
showcaption: false
});
});
</script>
</pre>There are 3 records, this applies on the first one but not the other two,
I think the problem is repeated <pre>id="capslide_img_cont"</pre> but can't seem to fix it.
can you help me out ?
It's deeply appreciated -
Hey guys, I'm new to Jquery and I'm trying to use <pre>jCapSlide</pre> in a datalist,
<pre lang="HTML">
<asp:DataList ID="DataListList" runat="server" DataSourceID="ObjectDataSourceList"
RepeatColumns="5" CellPadding="5" CellSpacing="5"
OnItemDataBound="DataListList_ItemDataBound">
<ItemTemplate>
<div id="capslide_img_cont" class="ic_container">
<asp:Image ImageUrl='<%#Eval("Images.Image.Virtual_FileName") %>' ID="MainImage"
CssClass="NewsImage1" runat="server" />
<div class="overlay" style="display: none;">
</div>
<div class="ic_caption">
<p class="ic_category">
'<%# Eval("Category.cName")%>'</p>
<h3>
'<%# Eval("pTitle") %>'</h3>
<p class="ic_text">
'<%# Eval("pTitle") %>'
</p>
</div>
</div>
</ItemTemplate>
</asp:DataList>
</pre>with this Function
<pre lang="Javascript">
<script type="text/javascript">
$(function () {
$("#capslide_img_cont").capslide({
caption_color: 'white',
caption_bgcolor: 'black',
overlay_bgcolor: 'black',
border: '',
showcaption: false
});
});
</script>
</pre>There are 3 records, this applies on the first one but not the other two,
I think the problem is repeated <pre>id="capslide_img_cont"</pre> but can't seem to fix it.
can you help me out ?
It's deeply appreciatedThere are basically two ways to create a webpage with code behind. 1. Create dynamic data inside the HTML (what you do here) 2. Spit out complete HTML from the code behind Personally I always use option 2 as much as I can. What you would need to do then is create a datalist and add a label to it. In that label you can set any HTML coding you want. (There are also many more advanced ways to do it) Hope this helps.
V.
(MQOTD Rules )