I have coded a paginated comment section,
even if you never used symfony2 its very simple to understand
It just loops through 100 comments and then uses a "next" button for the next comment page to show.
{% for comment in pagination %}
<div class="comment-container">
<div class="bubble">
<div class="cmt-avatar"></div>
{{ comment.text }}
</div>
</div>
{% endfor %}
this method is working perfectly so far.
But it makes the design look terrible, specially with a giant scroll bar on the right side of the page.
What I'd need is a way to make it 'look' like the comment-container is being loaded while the user scrolls.It's obviously just a static page, it just needs to look like its infinite scroll.
What I've tried so far:
I found this on this page, it didn't work though, no errors, but does nothing.
{% for comment in pagination %}
<div class="scrollable-data'">
<div class="comment-container">
<div class="bubble">
<div class="cmt-avatar"></div>
{{ comment.text }}
</div>
</div>
</div>
{% endfor %}
... script
var $doc=$(document);
var $win=$(window);
// hide everything that is out of bound
$('.scrollable-data').filter(function(index){
return ($(this).scrollTop() > $doc.height());
}).hide();
var DATA_INCREMENT=5;
$(window).scroll(function(){
// test if at the bottom
if ($doc.height()-$win.height()-$(this).scrollTop() == 0) {
// show the <DATA_INCREMENT> (5) next hidden data tags
$('.scrollable-data:hidden:lt('+DATA_INCREMENT+')').show();
}
});
Your routine is script intricated.
This is how I would implement this:
A routine that shows only elmenets contained "within the current scrollbar" (sorry, no better words for it):
function rescroll(){
//show all
$('.scrollable-data').show();
// hide everything that is out of bound
$('.scrollable-data').filter(function(index){
console.log($(this).position().top, $(window).height()+$(window).scrollTop());
return ($(this).position().top > $(window).height()+$(window).scrollTop());
}).hide();
}
Then call this routine every time the user perform a scroll:
$(window).scroll(function(){
rescroll();
});
Then call also rescroll() at the page loading.
Working example: http://jsfiddle.net/5WtTU/
Some considerations:
Usually infinite scroll works so that, when the user scrolls 'till a certain comment, then, if he/she scrolls back these comments are not hidden again!
So you should save somewhere the maximum of the scroll of a user, and always hide untill this point. In this way you wont re-hide things if the user scrolls up.
Related
I need to alter the colour of an HTML element based on the text content of another element. However, the content is being generated with a Python for loop using a Jinja shortcut.
For example:
{% for article in articles %}
<div class="row article">
<div class="col s6">
<strong>{{ article.title }}</strong>
<p>Page count: {{ article.page_count }}</p>
<p>Layout code: <span id="layout">{{ article.layout }}</span></p>
</div>
<div id="show_layout" class="col s1 layout"></div>
</div>
{% endfor %}
I'm trying to use Javascript or jQuery to make the #show_layout element red if a layout code is present (ie. there is some text content in that span). The trouble is that I'm only able to make all or none show up red as the JS function runs once and affects every iteration of the for loop. For example, if 3 article listings are generated by the for loop (pulled from MongoDB) then each of the #show_layout elements turn red, if just one has any layout code content. I've tried experimenting with using the 'this' keyword, but I'm not getting anywhere.
Currently this is the basic function I'm altering, though there have been many different versions! I'm calling this on page load; calling it from the element itself doesn't seem to do anything!
function showLayout() {
let code = document.getElementById("layout").textContent;
let toChange = document.getElementById("show_layout");
if (code !== "") {
toChange.classList.add("layout-red");
console.log(code)
}
else {
console.log("arghghg")
}
}
I'm very new to Python and Jinja, so perhaps my approach is entirely wrong. Can anyone suggest a better way of doing this, or am I missing something obvious?
CBroe pointed me in the right direction here, by suggesting that I do this via Jinja, which had not occurred to me (I'm very, very new to Jinja!).
adding:
{% if article.layout != "" %}
<div id="show_layout" class="col s1 layout-red show_layout"></div>
{% endif %}
did the trick!
Thank you CBroe!
I have a django project which I implemented a jquery function to toggle a link but it is not working. the link does not display the hidden contect i want it to display on toggle. my code is written below.
REP
<div class="comment-reply" style="display: None;">
{% for child_comment in comment.children%}
{{ child_comment.timestamp|timesince }
{% endfor %}
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".comment-reply-btn").click(function(event){
event.preventDefault();
$(this).parent().next("comment-reply").fadeToggle();
})
})
</script>
You're navigating to the wrong DOM element. next() finds the next matching sibling, but you've put parent() first - so you are looking for the next sibling of that parent. Drop that parent call.
$(this).next("comment-reply").fadeToggle();
As always i did lot of searching around google and here but did not find what i want.
This is wordpress and ajax loading (pagination)
My page with jobs cat. It does have several div with other sub cats and each having its own wp loop for getting posts with that specific sub category
like this
<div id="container">
<div id="alljobs">
<div id="posts">
//wp loop #1
//all jobs will be here from all cats; post title etc.
</div><!--Posts -->
<div id="alljobspagi">
//the pagination for all jobs
</div><!--alljobspagi -->
</div><!--alljobs -->
<div id="alljobspg">
<div id="posts">
//wp loop #2
//all jobs will be here from pg cats; post title etc.
</div><!--Posts -->
<div id="alljobspgpagi">
//the pagination for all jobs
</div><!--alljobspgpagi -->
</div><!--alljobspg -->
</div><!-- The container -->
Now all I want is when user clicks "a" of pagination (labeled numbered 1,2,3 and so on) it goes through preventdefault() and loads that divs posts with the next pages posts.
I have succeeded in making one but that is somehow working and somehow not.
The js code i am using is ( in header.php btwn )
$('div#alljobspgpagi a[href]').click(function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('div#alljobspgpagi').html('<center><b>Working on it Please Wait .......</b><br /><img src="http://localhost/preloader.gif"/></center>');
jQuery('#alljobspg').load(link+' #alljobspg');
});
Well the above code is working partially. For example if i have two pages for pagination like for now i am on first page "1" which is in active class (non clickable) and when i click on number "2" (clickable having a) to go to the second page the ajax works and everything works with no error. Now i am on second page of the result and i want to go back to first page 1 or page 3 (next). But when i click it ajax failed to work and the whole page refreshed (or loaded with first page or next page).
Can someone give me any idea for this. My code is working but only for one time. I don't know what is wrong with it but the preventDefault() is not making any sense when going back to page page or next page. The js code is working only one time after page loading whether it is going back to page 1 (previous) or going forward to page 3 (next). Sorry i am new to this jQuery thing but not to wp.
Thank you and sorry if i have bad english.
Got it fixed. I was updating content of and by doing so event got cleared. So what i have done is by adding one extra div for all events.
<div id="container">
<div id="alljobs">
<div id="posts">
//wp loop #1
//all jobs will be here from all cats; post title etc.
</div><!--Posts -->
<div id="alljobevents">
<div id="alljobspagi">
//the pagination for all jobs
</div><!--alljobspagi -->
</div><!-- Update : This is Extra-->
</div><!--alljobs -->
<div id="alljobspg">
<div id="pglist">
<div id="posts">
//wp loop #2
//all jobs will be here from pg cats; post title etc.
</div><!--Posts -->
<div id="alljobspgevent">
<div id="alljobspgpagi">
//the pagination for all jobs
</div><!--alljobspgpagi -->
</div>
</div><!--pglist -->
</div><!--alljobspg -->
</div><!-- The container -->
And updated Js becomes
$('#alljobspgevent').click(function(e) {
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#pglist').html('<center><b>Working on it Please Wait .......</b><br /><img src="http://localhost/preloader.gif"/></center>');
jQuery('#pglist').load(link+' #pglist');
// Same can be done for updating pagination
});
I am using ngInfiniteScroll to enable infinite scrolling on my website. It works partly as expected, once I scroll to the bottom of the page it calls the method I want it to call to show more posts, except that it keeps calling posts without end after it is triggered once. Does anybody know what could be causing this? This is what my code looks like where I am implementing ngInfiniteScroll, I don't know that this specific code will help much though. I suspect it is getting thrown off by code in another file.
<div style="height: 1px">
<post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"> </post>
<div ng-if="items.feed.length == 0 && !initialLoad">
<div class="empty-message">Your feed is currently empty, visit the Users page and find some more people to follow!</div>
</div>
<a infinite-scroll="nextPosts()" infinite-scroll-distance="1" href ng-click="nextPosts()" class="show-more">Show more </a>
</div>
Example
You can use the infinite-scroll-disabled directive of ngInfiniteScroll to tell it to NOT load data if a call is already in progress.
E.g.
<div infinite-scroll='loadMore()' infinite-scroll-disabled='busyLoadingData' infinite-scroll-distance='1'>
<p ng-repeat='item in items'>Some data</p>
</div>
JS:
$scope.busyLoadingData = false;
$scope.loadMore = function () {
if ($scope.busyLoadingData) return;
$scope.busyLoadingData = true;
// $http call to get next set of data
// on the .success() callback do $scope.busyLoadingData = false;
}
I am trying to hide/show a div that is within a for loop using jquery's toggle. When I click the button to toggle, the div slides out for a quick moment, but then hides again. When this happens, the toggle button almost seems disabled for the next click...then works again with the same problematic div display. I used the {{email.sender}} template value because when I clicked on the toggle button, all the items in the list would be activated instead of just that one. The below code is inserted into a tab with Jquery (this part is working). Thanks for any advice you can give on this-
<div id="email_received_list">
{% for email in email_received_list %}
<p>
<input type="button" id="{{email.sender}}" value="Show Message"> {{email.sender}}: {{ email.subject }}
</p>
<script>
$(document).ready(function(){
$('#{{email.sender}}').click(function() {
$('.{{email.sender}}').slideToggle('fast');
return false;
});
});
</script>
<div class="{{email.sender}}" style="display:none; background-color:#4CF;width:100%;height:100%;"></div>
{% else %}
(You have not received any messages yet.)
{% endfor %}
Ok, I feel stupid on this one - but once I added some actual content to the div (not just trying to color a square) it worked fine. I guess since it was in a loop, it was trying to size the div match the content. When there was no content, the div just hid itself again. If you know something different on this, please let me know -thanks.