Hi,
I'm using a jquery function and an updatepanel to show news articles in my website.
In the Initial page load I'm loading 10 items and when scrolled down to the page end I'm loading 10 more items every time.
This is working fine Until I used a tabbed section with different divs.
When I have one div everything goes good.
But, when I used multiple div tags as a tabbed section I have the problem.
Code:
<script type="text/javascript">
$(window).scroll(function() {
if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
var newscount = document.getElementById('<%=hidNewsCount.ClientID%>');
newscount.value = parseInt(newscount.value) + 2;
document.getElementById('<%=btnLoadMoreNews.ClientID%>').click();
}
});
</script>
<asp:UpdatePanel ID="udpNewsItems" runat="server" RenderMode="Inline" ChildrenAsTriggers="true"
UpdateMode="Conditional">
<ContentTemplate>
<div id="tabbedcontent" class="tabbing">
<ul class="tabbing-tabs">
<li id="lit1">
<a id="aTab1" href="#Tab1"><asp:Literal ID="litTab1" runat="server"></asp:Literal></a>
</li>
<li id="lit2">
<a id="aTab2" href="#Tab2"><asp:Literal ID="litTab2" runat="server"></asp:Literal></a>
</li>
<li id="lit3">
<a id="aTab3" href="#Tab3"><asp:Literal ID="litTab3" runat="server"></asp:Literal></a>
</li>
<li id="lit4">
<a id="aTab4" href="#Tab4"><asp:Literal ID="litTab4" runat="server"></asp:Literal></a>
</li>
</ul>
<div class="tabbing-tabbed">
<h2 id="Tab1">
<asp:Literal ID="litTitle" runat="server"></asp:Literal></h2>
<div class="wysiwyg">
<asp:HiddenField ID="hidNewsCount" runat="server" />
<div class="newsListing">
//Binding news with literals
</div>
<asp:Literal ID="litNewsListing" runat="server"></asp:Literal>
</div>
</div>
<div class="tabbing-tabbed">
<h2 id="Tab2">
<asp:Literal ID="litTitle_LastYr" runat="server"></asp:Literal></h2>
<div class="wysiwyg">
<div class="newsListing">
//Binding news with literals
</div>
<asp:Literal ID="litNewsListing_LastYr" runat="server"></asp:Literal>
</div>
</div>
<div class="tabbing-tabbed">
<h2 id="Tab3">
<asp:Literal ID="litTitle_TwoYrs" runat="server"></asp:Literal></h2>
<div class="wysiwyg">
<div class="newsListing">
//Binding news with literals
</div>
<asp:Literal ID="litNewsListing_TwoYrs" runat="server"></asp:Literal>
</div>
</div>
<div class="tabbing-tabbed">
<h2 id="Tab4">
<asp:Literal ID="litTitle_Old" runat="server"></asp:Literal></h2>
<div class="wysiwyg">
<div class="newsListing">
//Binding news with literals
</div>
<asp:Literal ID="litNewsListing_Old" runat="server"></asp:Literal>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLoadMoreNews" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btnLoadMoreNews" runat="server" Style="display: none" OnClick="btnLoadMoreNews_Click" />
The problem is, If I'm in a 3rd tab and reached the end point of the page while scrolling it loads more items, but shows the first tab content automatically and more over I'm notable to switch to any other tab.
Please help me.
Thanks alot!!