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.
Related
I created a function (myFunction88) that holds the zen desk chat widget script that is only activated on click of an image in the bottom right corner of a staging site.
http://allcal.staging.wpengine.com/
The purpose is to not load the chat script at all unless someone clicks to start a chat. Increase my site's load speed and not load the chat script on every page when most users don't use it.
It works great. Image in the corner. Click on image, loads the chat.
***My Question is how can I load the script on every page when the image is clicked so the chat will follow the user? Currently the chat only works on the page it clicked on so if you go to a new page, have to start a new chat. Is there a way to onclick of the image, load "myFunction88" output script to every page for that user so the chat is activated on all pages they visit?
JS:
function myFunction88() {
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="https://v2.zopim.com/?[My ZenDeskChatNumber]";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
});}
In Function.php:
add_action ( 'wp_footer', 'hook_infooter' );
function hook_infooter() {
echo '<<div class="chatimagediv"><img id="chatimageid"
class="chatimage2" src="https://beachcandyswimwear.com/wp-content/uploads/2018/11/Screen-Shot-2018-11-07-at-8.18.03-AM.png" width=240
onclick="myFunction88(); toggleClick4();"></div>>';
}
This is a different problem from a similar question about 'reload'. This use case has to use 'withReplaceState' to handle back button reloading.
I've found the FlowRouter documentation for FlowRouter.withReplaceState(fn), but I've been unable to find specific code examples and can't get it working.
My problem is with Isotope, a plugin that moves elements around when window is resized. User sometimes visits Isotope page, goes to another page, re-sizes window, then presses "back" button to return to Isotope page. Page has to reload to re-trigger the Isotope layout correctly for the new window size.
This is my route. How would I use FlowRouter.withReplaceState() to ensure that user who clicks back button is not seeing the cached page?
FlowRouter.route( '/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
});
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
})
Here's my page: http://ilijaveselica.com/Gallery/GetCroatiaFavPhotos
I'd like to implement this page into another website. I tried with iframe but lightbox (fancybox) opens only within iframe, not whole page. Any idea how can I solve this without much pain?
Here's how it looks: http://www.croatia-photography.com/
The only way I can imagine of doing that is including the gallery elements within the fancybox script itself.
So, in your page http://ilijaveselica.com/Gallery/GetCroatiaFavPhotos, instead of having this :
$(".fancybox-thumb").fancybox({
// API options here
});
...and all your hidden html anchors for each image of the gallery, have something like this :
$('.gallery').click(function(e){
e.preventDefault();
parent.$.fancybox([
{href:'images/01.jpg', title: '01'},
{href:'images/02.jpg', title: '02'},
{href:'images/03.jpg', title: '03'}
],{
// API options here
}); // fancybox
}); // click
Notice that we are providing the href and title within the brackets. Also notice that we used parent.$.fancybox to indicate that fancybox will open in the parent page and outside the iframe.
Then the only html you would need to open the gallery outside the iframe is :
<a class="gallery" href="javascript:;"><img src="{thumbnail}" alt="" /></a>
For further reference and DEMO (see update), check this https://stackoverflow.com/a/8855410/1055987
I'm building a photo gallery in ASP.NET. The user can browse thumbnails along the left and select one, which brings a preview-sized version into the right pane of the page.
I'd like to fade between the images, so that the current one fades out and the next one fades in. I'm using jQuery to fade the preview image in after it is loaded, which works great. Unfortunately, I can't get the fadeOut script to run before the click event posts the page back to the server. The thumbnails are ASP.NET ImageButtons, which means they're <input> tags.
Is there a way to get the postback to delay just long enough for the image to fade out? I've seen some tricks with the form onSubmit and setTimeout() but that would affect all the links and buttons on the page. I want to delay postback for the thumbnails only.
TIA
EDIT: Based on my research, and trying the suggestions below, it may be possible to delay the postback to accomplish this but it's not the best approach on several levels. To get a clean fade transition between images, in the future I would not do any posting back at all. I would use jQuery exclusively for the fadeout, load, fadein.
Try adding a return false to your function that handles the fadein/out... It should prevent the page postback from occurring...
$('#<%= this.aspbutton.ClientId%>').click(function(){
$('#myDiv').fadeout("slow");
return false;
});
I'm not sure what you are getting on the PostBack where you would want to fade out an image and then fade one in. Have you considered using AJAX for that? You could even have the thumbnail image contain the necessary information within the image tags for the larger image.
Take a look at the jQuery Lightbox plugin. I have implemented this plugin and modified the .JS a bit to allow for viewing a higher resolution photo in addition to the web view. Check it out here.
$('#<%= this.aspbutton.ClientId%>').click(function(){
var $btn = $(this);
$('#myDiv').fadeout("slow", function() {
$btn.unbind('click').click();
});
return false;
});
Here's the solution I used:
Since I AM using MS AJAX with an UpdatePanel, I can use the client-side AJAX event handler.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(fadeOut);
function fadeOut() {
if ($('.mainImage').length > 0) {
$('.mainImage').fadeOut('normal');
}
}
This gives me the exact behavior I wanted- any time the user navigates between thumbnails, the image fades out, loads, then the new one fades in.
HOWEVER...
This is still not ideal, as there is a pause between fades while the page posts back. It will work for now but in the long run it would be better to use jQuery to set the preview image rather than the thumbnails posting back as ImageButtons.