I recently started playing around with the infinite scroll feature of the wordpress jetpack plugin. It seems to work ok, but I'm trying to integrate with Masonry, so I need to use the post-load event that's supposed to fire when Jetpack loads more posts.
But I can't seem to catch that event.
I have a very minimal set up (with a supported, default theme - twentyfourteen) and I added this small script to footer.php to try and catch the event:
<script type='text/javascript'>
document.body.addEventListener("post-load", function() {
alert('posts loaded');
});
</script>
But I never get my alert even though the new posts are loaded.
Any ideas?
Thanks in advance.
This is an old question and I was looking for an answer too. The reason it doesn't work is because the infinity.js script used by Jetpack fires the 'post-load' event using the jQuery .trigger().
.trigger() is not a native event so it doesn't get picked up using addEventListener.
Use:
jQuery(document.body).on("post-load", function(e) {
// your code
})
Related
I made a site http://18union.cc/, and used the infinite scroll in homepage.
When I scroll down, the facebook like&share box doesn't show up.
I have tried many methods, but it didn't work.
How could I fix this?
You will need to reinitialize the facebook script after the Ajax completes.
You can add your code between this code:
jQuery( document ).ajaxComplete(function() {
jQuery( ".log" ).text( "Add Facebook initialisation here." );
})
You should add this in your custom javaScript file.
I have implemented jPanel Menu via a rendered template, which works great, until a route has been changed, then the menu stops working. Here is the code I am using to evoke the plugin.
Template.mobileMenu.rendered = function(){
var jPM = $.jPanelMenu({
menu: '#mobile-menu',
trigger: '.menu-trigger'
});
jPM.on();
};
The template is loaded on all pages in the footer. I am thinking it needs to be rerun on route change, OR prevented from being rerun. I am not sure which. Thanks for any tips.
This sounds similar to the problem many people have with using 3rd-party ui components. I put together a working example of using a modal dialog component which may be of some help:
https://github.com/alanning/meteor-modal-example
Also I should point out that the new Meteor UI rendering system, "Blaze", should eliminate these kinds of issues. I would expect Blaze to be released soon.
(For those visitors coming from the future, at the time of writing Meteor v0.7.0.1 is the latest version.)
The solution was to wrap it in an if not rendered, to prevent it from being re-rendered on template / route changes.
Template.mobileMenu.rendered = function(){
if (!this.rendered){
var jPM = $.jPanelMenu({
menu: '#mobile-menu',
trigger: '.menu-trigger'
});
jPM.on();
this.rendered = true;
}
};
I am having some problem with the integration of "addthis" social sharing inside a lightbox so that image can be shared from lightbox.
I tried with prettyPhoto and fancybox but there is something to do with callback functions, and I can not find a way to make it work.
I found this thread, but it doesn't provide much help: http://support.addthis.com/customer/portal/questions/132264-addthis-in-a-lightbox
I know this is old, but I was looking for something similar, I have found that calling addthis.layers.refresh(); does the job.
You only have to make sure the function is defined before you try calling it:
if(addthis.layers && typeof addthis.layers.refresh === 'function'){
addthis.layers.refresh();
}
http://support.addthis.com/customer/portal/articles/1692927-using-dashboard-configuration-tools-dynamically
This works perfectly, add it before </body>
<script type="text/javascript">
//always refresh on URL change
window.addEventListener("hashchange", function () {
addthis.layers.refresh();
});
</script>
Have a look at reveal.js instead of lightbox
Im using the jQuery noConflict method here:
http://drupal.org/node/1058168
Now, both of the following work:
$jq("document").ready(function(){
alert('alert');
});
$("document").ready(function(){
alert('alert');
});
However this does work:
$("document").ready(function(){
$(".view-product-slideshow .pager-num-1 img").css("display","none");
});
But this does not:
$jq("document").ready(function(){
$jq(".view-product-slideshow .pager-num-1 img").css("display","none");
});
Ive used the noConflict method once before and it worked fine. Ive no idea why it would work for the alert but not the CSS change.
My site is here:
http://smartpeopletalkfast.co.uk/pp4/shop/baby-essentials/sleepsuit-plush
Thanks
UPDATE - Ive now removed the extra code from script.js so all thats there is:
//Hide thumnail on product page thats being used as main image
$jq("document").ready(function(){
$jq(".view-product-slideshow .pager-num-1 img").css("display","none");
});
your error is on line 61 of ur script.js:
Uncaught TypeError: Object #
has no method 'smoothDivScroll'
also in that file u should have everything wrapped in the .ready() not every individual thing
Turns out the element I was trying to target with jQuery was itself generated by javascript. Changing my document.ready to window.load fixed this.
When using the noconflict mode of jQuery, you should use this:
jQuery(document).ready(function($){
$(".view-product-slideshow .pager-num-1 img").css("display","none");
});
jQuery is the new $ and you can pass jQuery as $ to your function().
Also, it's document and not "document"
I have a usercontrol with a couple of drop downs Lists and a button, I want the user to click the button (Which response.redirects depending on the selection in the DDL's).
Now instead of redirecting straight away, I want to display a little loading icon for 3 seconds and then redirect... Has anyone done anything like this?
An artificial delay where none is needed is kinda lame. What you can do instead is on submission of your form display your throbber. I use the following on a document upload form where large media files are being posted.
<script type="text/javascript" id="PreJavaScript">
function NUsubmit(){
document.getElementById("uploadFormInputs").style.display = 'none';
document.getElementById("progressBar").style.display = 'block';
return true;
};
function init() { document.getElementById("UploadFormObject").onsubmit = NUsubmit; };
window.onload = init;
</script>
If I remember correctly, in some versions of IE the animated gif didn't play but it worked fine in IE6+ and FireFox.
This way if the postback is quick they never see the throbber but if it takes a while they see it and it gives them the sense that something is happening.
You can perform delays with the setTimeout() function in javascript.
setTimeout(function() { alert('After 5 seconds.'); }, 5000);
You're probably going to need to override a couple things in your Javascript and use a "setTimeout" to delay the loading.
<script type="text/javascript" >
var __handleSubmit = theForm.submit;
theForm.onsubmit = function() {
alert('loading'); //Show your message here
window.setTimeout(function() {
__handleSubmit();
}, 3000);
}
</script>
You might want to play with a bit more... this is may not work for all instances since I've never done it.
If the delay is simply for "aesthetics", to make it appear it is working, then I'd recommend against it - programmers appear to be the only people that think loading bars are cool :)
Looks like you should implement this page using AJAX. You can place a progress indictor on your page to alert the user that a long running process is taking place.
I got this working by using
System.Threading.Thread.Sleep(4000);
In the postback