Auto pagination of set number of items (with auto scroll) - javascript

I am trying to find a jQuery script that will take list items and virtually paginate them into 9 items per page. I have seen similar scripts on Dynamic drive, but they do not auto-play.
For example: http://www.dynamicdrive.com/dynamicindex17/virtualpagination.htm
Demo #1 here is almost perfect if it auto-played with a slide or fade effect. Is there a script out there that does this? Or is it easy to modify this script?
Any help is appreciated!
Thanks.

"autoplay" as you described can be achieved with a setInterval. Now I dont know the internals of that script, but something sort of like this should work.
// New image every 3 seconds
setInterval(function() {
slideShowObj.next();
}, 3000);
Where "slideShowObject" is some object that has a next function that shows the next item. Filling in that middle line is up to you.

Related

Appending more views to a webview after scrolling down

I have some items, let's say 50, which are in HTML format. When the application starts I'm showing the first 10 items in a webview. After the user scrolls down to the 10th item I want to load the next 10 items.
Can anybody suggest me how to do achieve this. I've searched for this and found this link however it didn't work for me. Any help would be appreciated.
This is more look like facebook feed loading.But like in facebook we can use endless apdapter.But here the problem is i want to load items in a webview.Please give me some idea,how to do it.
After Struggling and searching a lot I got this answer please check.
So it will append the new document in the Html part with id question with the new Data
function appendText(extraStr) {
document.getElementById('question').innerHTML = document.getElementById('question').innerHTML + extraStr;
}

Trouble calling function after Infinite Scroll runs

I am using the Infinite Scroll plugin, for Wordpress, to load new posts on to the page when users scroll to the bottom. The problem is this has been loading duplicate posts, as the sorting changes extremely fast (due to popularity) and posts end up on different pages.
When the plugin grabs the next page, sometimes products that were originally on the FIRST page have been sorted to the SECOND page. So I end up with duplicates.
I was planning on waiting for the script to load the next page content, then loop through all of the post titles and locate the duplicates. Then I would remove the second instance of each post.
I noticed Infinite Scroll has a window in the settings labeled "Run after content is loaded/callback" so I thought I could enter a function in that field to be called.
removeDuplicates();
Then I entered something like this in the footer:
function removeDuplicates(){
var titleList = [];
$('.title').each(function(i, obj) {
/* The titles are in <h1> tags, I cycle through them,
if it's the first time seeing the title I add it to titleList.
If it's already in the array I hide the parent. */
});
});
I keep getting "undefined function" related to the .each, and it seems like it has something to do with scope but I'm not sure what's happening.
Is there an easier way to trigger the function to remove the duplicates? Am I at least on the right track?
Thanks for any insight you can provide!
It seems like jquery isn't loaded. Even if you use a selector that returns no elements, it should still have the .each() method.
Try using vanillaJS instead of jquery.
var titleNodeList = document.querySelectorAll('.title'); // get elements
var titleElArray = Array.prototype.slice(titleNodeList); // convert to array
titleElArray.forEach(function(el){...}); // iterate

stopping a for loop- jquery

previous question
I was looking at this question but I can't get it to apply to my problem.
Here's what I want to do:
loop through a set of html tables using a button to start
pause the animation using another pause button
resume the animation where it left off
this is something similar to what I'm working on: fiddle
My current version is too cumbersome to make an updated fiddle, but the concept is the same. I'll just be changing the content of the table like the right-most slider does.
Here's the code:
$('#Animate1').click(function(e){ //controls the tabR animation (top small table)
for(i = 1; i < 37; i++){ //number of frames in the animation
(function(i){
setTimeout(function(){
$('#amount1').val(i); //this changes the number corresponding to the slider position
updateTable2(i); //this updates the contents of the html table
updateHighlightedCell(); //this controls the "highlighted cells"
$('#hSlider').slider({ animate:true,value: i});}, 1000 ); //this animates the slider
}(i));
}
});
I'm also having trouble with the delay. I was trying to work the delay into the loop, but it seems it's just the starting delay. I'd like to be able to control the frame rate a bit.
Many of the examples I've seen stop infinite loops, but mine is finite. How can I stop this loop and start it again? My ultimate loop will have 365 "frames" in it so it won't be quite as fast.
Any help would be appreciated. Thanks!
I made a simple version in a JSFiddle of what you may be interested in, and hopefully extract the components that will be helpful to you. Also threw in a ton of comments to help understand the pieces.
The basic idea behind my method is having the setInterval() act as your for loop, and once per loop it will check to see if clearInterval() has been called on it. You will have a global counter to keep track of the position.

How to harness control of my JQuery coded sliding divs?

Essentially I have 4 divs that take turns sliding in and sliding out with delays and then it recalls the function. Like so:
$(document).ready (function bradslide(){
$("#slide1").delay('1000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide2").delay('9000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide3").delay('17000').slideDown('1000').delay('6000').slideUp('1000');
$("#slide4").delay('25000').slideDown('1000').delay('6000').slideUp('1000', 'swing', bradslide);
}
);
Let me say that this works fine, but that I am open to cleaning it up or making it easier or more up to standard if suggestions are made.
However my question is this: How can I arrange this so that the end user can manipulate the animation. This slides through the divs on its own, but ideally I would like to have a couple buttons to click to go backward or forwards (I think you get the idea).
Any suggestions of how or where to begin would be greatly appreciated. I imagine I might have to scrap this little piece of code as it stands. Thanks in advance guys.
Despite my own comment, I do have some general advice:
Look into using classes instead of IDs, and then use jQuery's DOM-traversal methods to identify what the next slider candidate is. Tracking the "currentSlide" and then targeting the "nextSlide" (identified with a .next() perhaps?) means that you can add any number of slider divs (with a class instead of ID, remember?) and still have it work.
The user controls (next, prev, or selecting a specific slide) simply interrupt the timer (probably a setTimeout instead of .delay()) and then invoke the exact same function that brings the next slide into place.
To make code more reusable and flexible, you should use some variables. For example, if your slide duration is going to be 1000, you would have var duration = 1000 scoped to an appropriate place (the document ready function is fine... or the sliding function) and then in your function call (whatever it ends up looking like), you would use .slideDown(duration). Then you can set that value to whatever you want and update it easily later.
Extending on the above, you could even build an API allowing you to pass values into your custom slider function:
var bradslide = function(container, delay, duration) {
// do stuff with a parent container, some delay value, and a duration value
};
bradslide('sliderParent', 6000, 1000);

how can I make a slide show repeat

I set up a slideshow for my webpage with the following script, but can't find it out how can I make it repeat. I mean I want when it go to the last photo, it will repeat to the first one again. Any one can help please:
open this link and view the code source please:
http://www.xuanyinwen.com/test2.html
Many thanks
Wayne
you can either set the number of cycles in displaymode: {type:'auto', pause:2500, cycles:[here], wraparound:false}, you should also try changing persist: true
as it will remember the last viewed slide and recall it.
HI Neo, could you have another look for my script again, its working now: http://www.xuanyinwen.com/test2.html
not sure what script should I overrided by your line: setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, 2500)
thanks
this isn't even working as you say it is. However if it was you could add following line manually to override anything:
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, 2500)

Categories