I'm using the infinite scroll plugin in a tumblr blog and everything works as it should, provided the user is in the front page- for example: "{someblog}.tumblr.com".
Starting from "{someblog}.tumblr.com/page/2" and so on, the plugin doesn't seem to load at all (it doesn't hide the navigation elements).
initialize
Here's the code I use to call it:
$('#container').infinitescroll({
loading: {
finished: undefined,
finishedMsg: "Finished",
img: "preloader.gif",
msg: null,
msgText: "Loading...",
selector: null,
speed: 'fast',
start: undefined
},
state: {
isDuringAjax: false,
isInvalidPage: false,
isDestroyed: false,
isDone: false, // For when it goes all the way through the archive.
isPaused: false,
currPage: 1
},
callback: undefined,
debug: false,
behavior: undefined,
binder: $(window), // used to cache the selector
nextSelector: "#next a",
navSelector: ".navigation",
contentSelector: "#container", // rename to pageFragment
itemSelector: "div.post",
animate: false,
pathParse: undefined,
dataType: 'html',
appendCallback: true,
bufferPx: 400
},
...
edit: I enabled debug information and I got the following info:
({0:"Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com."})
({0:"determinePath", 1:"/page/4"})
({0:"Binding", 1:"bind"}
It seems that it does find the address to the next page-"/page/4" (since I was on page 3). But it can't "parse" it for some reason?
Is it possible that the plugin can only function on page one, where the link to next page contains a "2"? If so, how can I override it?
Thanks a lot in advance!
Thanks to #graygilmore I figured it out. This is the line that needs to be added to the code:
pathParse: function() {
return ['http://{Name}.tumblr.com/page/', '']
},
Note that {Name} is a Tumblr variable and needs not be changed- Tumblr replaces it automatically.
Additionally- this line should be added in the state: {...} block:
currPage: {CurrentPage}
(Where as in the example in my question above I simply set it to "1").
{CurrentPage} is a Tumblr variable as well, so it's being replaced automatically with the current page number, for every page being viewed.
Now Infinite-Scroll loads properly on every page of the blog, which is especially useful when wanting to create a "load more posts" button, which gives the user a choice between regular (paged) navigation and infinite-scrolling.
Related
I don't want reset page on update. I don't want to reset the page on update. Specifically when using forceUpdate() , I want my grid to only update the data at the current pagination.
pagination: {
enabled: true,
limit: 25,
summary: false,
resetPageOnUpdate: false,
},
I see in pagination there is "resetPageOnUpdate" attribute butBut when i use forceUpdate() it doesn't seem to work and still resets the internal partition. Help me, thanks.
I am not good at writing English. Consider it and see.
I use jquery
$(".gridjs-currentPage").text() : current page number
update before save current page data
.updateConfig({
update data...
pagination: {
setting... ,
page : current page number - 1
}
}).forceRender();
I found plenty of stuff on StackOverflow and tried different things to achieve what i want, but i'm stuck on this here.
I have a Text in my HTML, if i click this text a fancybox should open with an Image Gallery, the images should come from the images Array.
What happens now is that it's opening a broken fancybox, without any styling, opacity, closebutton whatsoever. Here's a example of what it looks like!
My Javascript is the following
$(function(){
$("#turn_all_pictures").click(function(){
if(images.length == 0){
loadImages();
}
$(this).fancybox();
$.fancybox.open(
images,
{
'autoScale': true,
'autoDimensions': true,
'centerOnScroll': true,
helpers:{
overlay:{
css:{
'background' : 'rgba(58, 42, 45, 0.95)'
}
},
buttons:{}
}
});
});
})
An entry in the Array looks like this, which should be right according to this Stack Overflow Q/A
Object { href="<img class="hidden_img fancybox" rel="turn_gallery" src="../../../images/1085/5263-3-medium.jpg"/>"}
The needed HTML is this:
<p><span class="turn_left" id="turn_all_pictures">Alle Bilder anzeigen</span></p><br>
What am i doing wrong, what do i miss so that the fancybox will open correctly formatted and with the image Gallery instead of the Text from the HTML?
EDIT
I tried out to append the images in my loadImages() function to a div and then ref to this div with my fancybox.
$.fancybox.open(
images,
{
// 'autoScale': true,
// 'autoDimensions': true,
// 'centerOnScroll': true,
// helpers:{
// overlay:{
// css:{
// 'background' : 'rgba(58, 42, 45, 0.95)'
// }
// },
// buttons:{}
href: '#hidden_pictures'
}
)
That will show all pictures, the whole div, in a fancybox, so i'm guessing that it has something to do with the images array
Check the location of your resources such as your CSS and images for fancybox. You can also inspect your DOM using firebug or some DOM inspection tool to see if your resources are ring found.
I used firebug and looked at the NET tab which showed the http request to the resource. You may see a 404 error if it's not found.
Check you have passed images array in a format like this:
[
{
href: 'image1.jpg',
title: 'title 1'
},
{
href: 'image2.jpg',
title: 'title 2'
}
]
make sure you have included the css properly (check the path)
Also see this
I am using infinate scroll plugin (by Paul Irish). I want to use custom functions when the next page is loading and when the maxPage is reached.
I have tried the below based on the documentation, however this starts the loading function but doesn't ever call the finished function. Its not calling the next page either when I look in the console. What am I missing?
// Infinite Ajax Scroll configuration
$container.infinitescroll({
navSelector: "div.paginate",
nextSelector: "div.paginate a",
itemSelector: "div.element",
maxPage: 5,
loading: {
start: function(){
alert('started');
},
finished: function(){
alert('finsihed loading');
}
}
},
function(newElements) {
var $newElements = $(newElements).css({opacity: 0});
//remove the first item
$newElements.splice(0, 1);
$container.isotope('appended', $newElements);
}
});
});
The scrolling could go on for pages and pages until the browser crashes due to memory issues, I therefore need to stop infinite scrolling when the current page gets to maxPage and allow the user to select a "Load More" button. Hopefully solving memory issues.
This is discussed in the link below but I cannot find any further documentation on how to do this exactly and cann't even get the above sample to work.
https://github.com/paulirish/infinite-scroll/issues/300
First, ensure it works will the minimum options (plus console debug messages):
$container.infinitescroll({
navSelector: "div.paginate",
nextSelector: "div.paginate a",
itemSelector: "div.element",
debug: true
});
If it does, add in options until it breaks.
I recommend debugging the start/finished functions in the console, like this:
loading: {
start: function(){
console.log('started');
},
finished: function(){
console.log('finsihed loading');
}
}
Consider adding the errorCallback option to debug ajax issues.
This answer has been taken from this post:
Fancybox problem on iPhone
This was voted as best answer but I am new and still learning at js and I am having such a difficult time putting this all together, can someone help me with some more detailed instructions?
Fancybox attempts to auto resize and center itself everytime that the
browser window is resized, and this event gets triggered a lot on
iPads and iPhones. For fancy box 1.3.4, the code which controls this
is line 608: $(window).bind("resize.fb", $fancybox.resize);
To fix the issue, I modified this part of the fancybox JS, and added
another option called "resizeOnWindowResize", which you can set to
false for iPad and iPhone users, or just disable all together.
if(currentOpts.resizeOnWindowResize) { $(window).bind("resize.fb",
$fancybox.resize); } You must also add a default value for this
option in $.fn.fancybox.defaults hash map.
Then, when calling fancybox you can utilize this new option:
$('#fancybox_link').fancybox(${'scrolling': 'no',
width: 'auto',
height: 'auto',
centerOnScroll: false,
resizeOnWindowResize : false});
I got as far as go to line 608. I really do not know what to do next. What should the final product look like after you've added "resizeonwindowResize" and the if statement?
Add this:
if(currentOpts.resizeOnWindowResize) {
$(window).bind("resize.fb", $.fancybox.resize);
}
Where you find:
$(window).bind("resize.fb", $.fancybox.resize);
Near the bottom of:
$.fn.fancybox.defaults = { //blah blah blah options here.
onComplete : function(){},
onCleanup : function(){},
onClosed : function(){},
onError : function(){},
// Add this
resizeOnWindowResize: true
};
Then save and when you call the fancybox:
$('.photo_gallery a').fancybox({
resizeOnWindowResize: false
});
This is also an alternative. Just replace the $.fancybox.resize function to as follows. It's just adding a simple userAgent check to avoid the .center call for iPhones.
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
$.fancybox.center(true);
}
};
I have a jCarouselLite plug in on my website. I am loading the li's from a jquery.load function. I cycle through the carousel vertically and have a function that triggers as soon as the first item comes back around to the top.
At this point, I want to refresh the data with another ajax.load. This is where I run into a problem. Once that data is reloaded, the carousel stops rotating (or rather, is running in the background).
One solution I tried is to try re-instating the carousel with another:
$("#tableapp").jCarouselLite({})
line. This seems to cause two carousels to be running at the same time. And then a third, and 4th, and so on.
So basically I am looking for some way to clear the carousel, reload the updated data, then run it again. Any ideas?
$(document).ready(function () {
updateConsole() //Gets new data
scrollWindow() //Starts carousell
});
function updateConsole() {
$('#tableapp').load('AjaxPages/ApplicationMonitor.aspx #application');
}
function scrollwindow() {
$("#tableapp").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 6000,
speed: 500,
scroll: 4,
circular: true,
afterEnd: function (a) { ScrollEnd(a); }
});
};
function ScrollEnd(a) {
$('#tbDebug').val($('#tbDebug').val() + '\nScroll Ends');
if (**code that determines slide 1 is back on top**) {
updateConsoles();
scrollWindow(); //If this code is commented, the carousel stops cycling.
//If it isn't commented, two carousels start and things
//get buggy and eventually freezes.
}
}
I am pretty new to javascript, jquery, etc. I also tried this on jCarousel (not lite), but I couldn't get it working with vertical scrolling. It seemed buggy.
Here's a not-particulary thought out suggestion:
When you ScrollEnd, .remove that div.
http://api.jquery.com/remove/
Then recreate it and dump load into it.
Creating a div element in jQuery
Does that trick it into working?