TerribleDev/DotNetMashup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

really fix continuous scroll

Browse Source
This commit is contained in:
Tommy Parnell
2015-10-09 13:18:55 -04:00
parent 64c0e92ba0
commit 9ebd3cd38d
4 changed files with 48 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/DotNetMashup.Web/Views/Home/Index.cshtml
View File

@@ -31,15 +31,15 @@
@section scripts{
<script type="text/javascript">
$(document).ready(function(){
var page = @Model.CurrentPage;
$('img').addClass('img-responsive');
$('.tile').addClass('show');
var loading = false;
$(window).on('scroll', function () {
var y_scroll_pos = window.pageYOffset +615;
var loadingImage = $('.loadWheel')
var loadingPosition = $('footer');
var scroll_pos_test = loadingPosition.position().top;
if (y_scroll_pos >= scroll_pos_test && loading === false) {
var loadingImage = $('.loadWheel');
var tile = $('.tile').last();
if($(window).scrollTop() + tile.height() + 150 >= tile.position().top && !loading ) {
loading = true
loadingImage.show();
$.ajax('/Home/Tiles', {data:{page:page+1}})
@@ -49,9 +49,17 @@
loadingImage.hide();
var resd = $(data);
resd.find('img').addClass('img-responsive');
$('#tilesContainer').append(resd);
$('#tilesContainer').append(resd).find('.tile').addClass('show');
})
.error(function(){
loadingImage.hide();
});
}
});
});
</script>
}

2
src/DotNetMashup.Web/Views/Shared/DisplayTemplates/GithubAnnouncement.cshtml
View File

@@ -6,7 +6,7 @@
<div class="col-md-2"><img class="img-responsive img" src="@Model.Author.ImageUrl" /></div>
<div class="col-md-10">
<h2><i class="fa fa-github" style="font-size:32px"></i> @Model.Author.Name</h2>
<h2><a href="@Model.OriginalLink">#@Model.IssueNumber @Model.Title</a></h2>
<h2 class="breakword"><a href="@Model.OriginalLink">#@Model.IssueNumber @Model.Title</a></h2>
</div>
</div>
<hr />

2
src/DotNetMashup.Web/Views/Shared/_Layout.cshtml
View File

@@ -11,7 +11,7 @@
</head>
<body>
<div class="headerwrap">
<h2 style="color: #FFFFFF; text-align:center;">ASP.NET News Mashups</h2>
<h2 class="head"><a asp-action="Index">ASP.NET News Mashups</a></h2>
</div>
<div class="container body-content">
@RenderBody()

16
src/DotNetMashup.Web/wwwroot/css/site.css
View File

@@ -7,6 +7,15 @@
-moz-box-shadow: 7px 10px 20px -7px rgba(0,0,0,0.75);
box-shadow: 7px 10px 20px -7px rgba(0,0,0,0.75);
padding: 5px;
-moz-transition: opacity .5s ease-in;
-o-transition: opacity .5s ease-in;
-webkit-transition: opacity .5s ease-in;
transition: opacity .5s ease-in;
opacity: 0;
}
.tile.show{
opacity: 1;
}
body {
@@ -61,3 +70,10 @@ code, pre {
-ms-word-wrap: break-word;
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.head{
color: #FFFFFF; text-align:center;
}
a.head, a:hover, a:visited{
color: #FFFFFF; text-align:center;
}