I am usining masonry view to display content with infinite scrolling functionality.
Masonry view part is working fine. For infinite scroll I have tried infinitescroll js
or on the basis of scroll as I have written below code.
Problem :- After first scroll I am facing too much recursion problem.
jQuery(document).ready(function($) {
var $container = jQuery('.main_container');
$container.imagesLoaded(function(){
// options
$container.masonry({
itemSelector: '.pin',
isAnimated: true,
isFitWidth: true,
isAnimatedFromBottom: true
});
});
//for infinite scrollings
jQuery(window).scroll(function() {
if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
alert("bottom!");
ajaxurl = "script url here";
var data = {start:startLimit,end:endLimit};
jQuery.get(ajaxurl, data, function(response) {
var $boxes = $(response);
$('.main_container').append( $boxes ).masonry( 'appended', $boxes );
});
}
});
});
I am trying this on wordpress admin section plugin.
After step-by-step checking I found solution , Cause of the problem I am using animate effect in masonry which is conflict some how with wordpress plugin view js.
$container.imagesLoaded(function(){
// options
$container.masonry({
itemSelector: '.pin',
isAnimated: false,
isFitWidth: true,
isAnimatedFromBottom: false
});
});
Related
I've been working on a website for some time now and while they do have a large amount of content and I have upgraded them, the AJAX load more call on the masonry grid is very slow. I have tried caching and using a CDN but it's still taking a very long time, particularly after the first instance.
Does anyone have any ideas? Website is www.noctismag.com
Here's the script I'm using to run it, in my footer.
<script>
jQuery(function ($) {
/* Masonry + Infinite Scroll */
var $container = $('#grid-container');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.post'
});
});
$('#grid-container').masonry({
itemSelector: '.post'
, columnWidth: 258
});
$container.infinitescroll({
navSelector: '#page-nav'
, nextSelector: '#page-nav a'
, itemSelector: '.post'
}, function (newElements) {
var $newElems = $(newElements).css({
opacity: 0
});
$newElems.imagesLoaded(function () {
$newElems.animate({
opacity: 1
});
$container.masonry('appended', $newElems, true);
});
});
$(window).unbind('.infscr');
jQuery("#page-nav a").click(function () {
jQuery('#grid-container').infinitescroll('retrieve');
return false;
});
$(document).ajaxError(function (e, xhr, opt) {
if (xhr.status == 404) $('#page-nav a').remove();
});
});
</script>
Does the Ajax request send back HTML code?
If it's the case try to change the code, Ajax call must return data as a JSON string and a front-end function will transform that data to render it on grid.
I have tinymce working well FIRST time you click the button, but after that it doesn't init anymore, no errors however.
To get editor again you need to refresh page.
Is it possible to get init editor to the text area every time you open the modal without refreshing page ?
$(document).ready(function() {
$(document).on('click', '.btn.modal', function() {
var title = $('.modal-title'),
content = $('.modal-body'),
footer = $('.modal-footer');
$.post('units.php', { addnew: 'unit' }, function(r) {
title.html(r.title);
content.html(r.content);
footer.html(r.btns);
tinymce.init({ selector: 'textarea' });
$('#modal').modal('show');
},'json');
});
});
The problem is you are using the general initialisating, which probably conflits with the textarea(s) which already have been initialised... .
The best way to solve this is by destroying all the initialised tinymce first using:
$('textarea').tinymce().remove();
and then initialising them again like this:
tinymce.init({ selector: 'textarea' });
In your example this would be:
$(document).ready(function() {
$(document).on('click', '.btn.modal', function() {
var title = $('.modal-title'),
content = $('.modal-body'),
footer = $('.modal-footer');
$.post('units.php', { addnew: 'unit' }, function(r) {
title.html(r.title);
content.html(r.content);
footer.html(r.btns);
$('textarea').tinymce().remove();
tinymce.init({ selector: 'textarea' });
$('#modal').modal('show');
},'json');
});
});
I am using Isotope with a masonry layout in WordPress, along with ImagesLoaded. Each post is a separate isotope item. All seems to be working well, except when I load something dynamic in the post, like a twitter widget or a embedded video. The initial height of the item is set before the post/widget has loaded. Once it has fully loaded, I need isotope to re-layout again to accommodate the new height.
Is there a way to call the layout function again after all the posts are fully loaded?
Here is my isotope code:
// init isotope
var $container = $('#cards');
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: '.grid-sizer',
isFitWidth: true
}
});
// layout Isotope again after all images have loaded
$container.imagesLoaded( function() {
$container.isotope('layout');
});
// infinite scroll
$container.infinitescroll({
navSelector : '.pagination',
nextSelector : '.pagination a',
itemSelector : '.item-scroll',
behavior: "twitter",
loading: {
finishedMsg: 'No more pages to load.'
}
},
function ( newElements ) {
var $newElems = jQuery( newElements ).hide(); // hide to begin with
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.fadeIn(); // fade in when ready
$container.isotope( 'appended', $newElems );
});
}
);
function onLayout() {
$container.infinitescroll('scroll');
}
Thank you for your help!
Try this:
var $container = $('#cards');
$container.imagesLoaded( function() {
// init isotope
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: '.grid-sizer',
isFitWidth: true
}
});
});
// infinite scroll
$container.infinitescroll({
navSelector : '.pagination',
nextSelector : '.pagination a',
itemSelector : '.item-scroll',
behavior: "twitter",
loading: {
finishedMsg: 'No more pages to load.'
}
},
function ( newElements ) {
var $newElems = jQuery( newElements ).hide(); // hide to begin with
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.fadeIn(); // fade in when ready
$container.isotope( 'appended', $newElems ).isotope('layout');
});
}
);
function onLayout() {
$container.infinitescroll('scroll');
}
I have a form using Janko At Warpseeds Form to Wizard Plugin alongside the ImagePicker plugin and I would like to make sure all the images are selected before being able to click Next.
I am currently using Bassassistance validation plugin.
Does anyone have any idea how I could implement this?
JSFiddle showing current working code and all javascript here http://jsfiddle.net/4Hkxy/
$(function () {
jQuery(function($){
var $signupForm = $( '#multipage' );
$signupForm.formToWizard({
submitButton: 'SaveAccount',
showProgress: true, //default value for showProgress is also true
nextBtnName: 'Forward >>',
prevBtnName: '<< Previous',
showStepNo: false,
validateBeforeNext: function() {
var selectedCount = $('.thumbnails.image_picker_selector:visible .selected').length;
var totalCount = $('.thumbnails.image_picker_selector:visible').length;
if(selectedCount != totalCount) {
alert('please select an image per selection');
}
}
});
});
$("select.image-picker").imagepicker({
hide_select: true,
show_label: true,
});
$("select.image-picker.show-labels").imagepicker({
hide_select: true,
show_label: true,
});
var container = $("select.image-picker.masonry").next("ul.thumbnails");
container.imagesLoaded(function () {
container.masonry({
itemSelector: "li",
});
});
Any help would be appreciated.
Try this:
//inside "next.onclick" handler
var selectedCount = $('.thumbnails.image_picker_selector:visible .selected').length;
var totalCount = $('.thumbnails.image_picker_selector:visible').length;
if(selectedCount != totalCount) {
alert('please select an image per selection');
}
I'm using Twitter Bootstrap's Popover feature on a sidebar. The sidebar is fetched and reloads the content every 30 seconds. I'm suing XMLHttpRequest to reload the content of the sidebar by fetching a file called stats.php.
The following code is the "refresh" code which resides in the header of the page.
function onIndexLoad()
{
setInterval(onTimerCallback, 30000);
}
function onTimerCallback()
{
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState == 4 && request.status == 200)
{
document.getElementById("stats").style.opacity = 0;
setTimeout(function() {
document.getElementById("stats").innerHTML = request.responseText;
document.getElementById("stats").style.opacity = 100;
}, 1000);
}
}
request.open("GET", "stats.php", true);
request.send();
}
The above code works flawlessly, however, after it reloads the #stats div, the popover no long does what it's supposed to - popup.
The popover code is in the stats.php in a foreach() loop because I have multiple popover scripts I need because there are multiple popovers on the sidebar.
Here's my popover code:
$(document).ready(function() {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
The $id and $title are dynamic as they are pulled from the foreach() loop.
How can I fix it so after the div reloads, the popover function will reinitialize?
$("a[rel=popover_controller_$cid]").on({
mouseenter: function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
}
});
I have also tried:
$("a[rel=popover_controller_$cid]").on("mouseover", function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
.live is depreciated. use .on delegation
try something like this:
$('#stats').on("mouseenter", "a[rel=popover_controller_$cid]",function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
This delegates the mouseenter event from #stats to a[rel=popover_controller_$cid] and because the event is delegated it will still fire when #stats contents are replaced.
be careful - you will keep initializing popover on each mouseover. that might be bad.
while you are at it - you should use jquery's ajax instead of native xhr. its easier and more cross browser.
$.get('stats.php', function(d){
$('#stats').html(d);
};
--
setInterval(function(){
$.get('stats.php', function(data) {
$('#stats').html(data);
});
}, 30000);