I have implemented jquery jscroll on first page load all data is showing perfectly with the perfect respective animation but on 2nd data set animations are not working. What I am doing is i have made a partial page which loads all time the data set comes and set all javascript in main page.
This is my MainPage code
<script src="~/Content/JavaScript/Caption.js"></script>
<script type="text/javascript">
$(window).load(function () {
//for each description div...
$('div.description').each(function () {
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'block');
});
$('div.wrapper').hover(function () {
//when mouse hover over the wrapper div
//get it's children elements with class descriptio
//and show it using fadeTo
$(this).children('.description').stop().fadeTo(500, 0.7);
}, function () {
//when mouse out of the wrapper div
//use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});
});
</script>
<style>
div.wrapper {
position: relative; /* important(so we can absolutely position the description div */
}
div.description {
position: absolute; /* absolute position (so we can position it where we want)*/
bottom: 0px; /* position will be on bottom */
left: 0px;
width: 100%;
display: none; /* hide it */
/* styling bellow */
background-color: black;
font-family: 'tahoma';
font-size: 15px;
color: white;
}
div.description_content {
padding: 10px;
}
</style>
<div class="row">
<div class="scroll">
@Html.Partial("_Products")
</div>
</div> <!-- .main-content -->
<script src="~/Content/JavaScript/jquery.js"></script>
<script src="~/Content/JavaScript/jqueryui/jquery-ui-1.10.4.custom.min.js"></script>
<script src="~/Content/JavaScript/jquery.jscroll.js"></script>
<script type="text/javascript">
var i = 0;
//Get Value From Query String
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function Filter() {
var goto = updateTextArea();
var addpricerangefilter = UpdateQueryString("price_range", document.getElementById('PriceRangeFrom').value +'-'+ document.getElementById('PriceRangeTo').value, goto)
window.location = addpricerangefilter
}
$(function () {
$('.scroll').jscroll({
debug: true,
autoTrigger: false
});
});
</script>
Partial Page
@Code
Dim i As Integer = 1
Dim CurrencyCODE As String = "INR"
Dim CurrencyRATE As String = 1
Try
CurrencyCODE = Request.Cookies("currency_code").Value.ToString
CurrencyRATE = Val(Request.Cookies("currency_rate").Value.ToString)
Catch ex As Exception
End Try
End Code
@For Each AllProducts In ViewBag.lstProducts
@<div class="col-sm-4">
<div class="single-item">
@If AllProducts.ItemTag <> "" Then
@<div class="ribbon-wrapper"><div style="background-color:@AllProducts.ItemTagColor;" class="ribbon">@AllProducts.ItemTag</div></div>
End If
<div class="single-item-header wrapper">
@Code
Dim ImagePath = AllProducts.SKUID &"00.jpg"
End Code
<a href="/SingleProduct/[email protected]"><img src="/Content/Images/ProductImage/@ImagePath" class="image270320" alt="@AllProducts.ItemShortDesc"></a>
<div class="description">
<div class="description_content">
@AllProducts.ItemShortDesc
<a class="add-to-cart pull-right auto-width-right" href="#" onclick="AddToCart('@AllProducts.SKUID','1')"><i class="fa fa-shopping-cart shopcart"></i></a>
<a class="add-to-cart pull-right auto-width-right" href="#" onclick="AddToWishList('@AllProducts.SKUID')"><i class="fa fa-heart favorlist"></i></a>
</div>
</div>
</div>
<div class="single-item-body">
<p class="single-item-title">
@AllProducts.SKUID
</p>
<p class="single-item-price">
@If AllProducts.ItemDiscountedPrice <> "0" And AllProducts.ItemDiscountedPrice <> "" Then
@<span class="flash-del">@CurrencyCODE @Math.Round(CurrencyRATE * AllProducts.ItemOrignalPrice, 2, MidpointRounding.AwayFromZero)</span>
@<span class="flash-sale">@CurrencyCODE @Math.Round(CurrencyRATE * AllProducts.ItemDiscountedPrice, 2, MidpointRounding.AwayFromZero)</span>
Else
@<span>@CurrencyCODE @Math.Round(CurrencyRATE * AllProducts.ItemOrignalPrice, 2, MidpointRounding.AwayFromZero)</span>
End If
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
If i = 3 Then
@<div class="space40"> </div>
i=0
End If
i = i + 1
Next
@If ViewBag.lstProducts.Count > 0 Then
@<div style="position:absolute;bottom:0px;height :5px;margin-top :5px;padding-left:400px">
<a href="/Product/[email protected]("category_id")&[email protected]("order_by")&[email protected]("group_name")&[email protected]&[email protected]("detail_id")&[email protected]("price_range")&[email protected]("sku")">Load More Products...</a>
</div>
Else
@<div style="position:absolute;bottom:0px;height :5px;margin-top :5px;padding-left:400px">
Oops we are at the end of product list!!!
</div>
End If
What I try is copying all scripts in partial page but it won't work
