Hey, my script seems to be getting this warning message whenever I run it.
This happens when I call a jquery function in the script. I have included the script below and put - Warning: Unresponsive Script - comment where I called the function. I don't really know why I'm getting the warning message.
Here is the project Im working on, if you want to see it Click Here
I am trying to update the pagination numbers when filter options are selected. So when you select the color 'yellow' you get one result, which is 'giant' and there should only be 1 page number displayed as opposed to the 4.
If anyone has any ideas to get this working properly that would be amazing. Thanks.
JQuery Script:
<script>
$(document).ready(function(){
function paginateIt(){
//how much items per page to show
var show_per_page = 3;
//getting the amount of elements inside content div
var number_of_items = $('#content ul').filter(":not(.hidden)").children().size();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//set the value of our hidden input fields
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
//now when we got all we need for the navigation let's make it '
/*
what are we going to have in the navigation?
- link to previous page
- links to specific pages
- link to next page
*/
var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
$('#page_navigation').html(navigation_html);
//add active_page class to the first page link
$('#page_navigation .page_link:first').addClass('active_page');
//hide all the elements inside content div
$('#content ul').filter(":not(.hidden)").children().css('display', 'none');
//and show the first n (show_per_page) elements
$('#content ul').filter(":not(.hidden)").children().slice(0, show_per_page).css('display', 'block');
// Start filter script
(function($) {
$.fn.randomize = function(){
return $(this).sort(function() {return 0.5 - Math.random()});
}
$.fn.filterprojects = function(settings) {
settings = $.extend({
animationSpeed: 900,
animationPulse: 100,
animationEase: "linear",
activeClass: "active",
allTag: "all",
randomize: true,
show: { width: "show", opacity: "show" },
hide: { width: "hide", opacity: "hide" },
filterTagSelector: [] // specify at least one
}, settings);
$(this).each(function(i, o){
var _elements = $(this).children();
/* Binding the filter */
$(this).bind("filter", function(){
var _groups = [];
var _filtered_elements = _elements;
$.each(settings.filterTagSelector, function(k, j){
_groups[k] = [];
$(this + "." + settings.activeClass).each(function(){
if(!$(this).hasClass(settings.allTag) && this.hash != undefined) { _groups[k].push(this.hash.substring(1)); }
});
if(_groups[k].length > 0){
_filtered_elements = _filtered_elements.filter("." + _groups[k].join(",."));
}
});
/* Randomize */
if(settings.randomize){
_filtered_elements = _filtered_elements.randomize();
_elements = _elements.randomize();
}
/* Show */
_filtered_elements.each(function(i,o){
$(this).queue(function(){
$(this).animate({left: "+0"}, (settings.animationPulse*i)); // dirty trick :)
$(this).animate(settings.show, settings.animationSpeed);
$(this).dequeue()
});
});
/* Hide */
_elements.not(_filtered_elements).each(function(i,o){
$(this).queue(function(){
$(this).animate({left: "+0"}, (settings.animationPulse*i)); // dirty trick :)
$(this).animate(settings.hide, settings.animationSpeed);
$(this).dequeue()
});
});
});
/* Setup filter selectors */
$.each(settings.filterTagSelector, function(k, j){
$(""+this).click(function(e){
e.preventDefault();
if($(this).hasClass(settings.allTag)){
$(j).removeClass(settings.activeClass);
$(this).addClass(settings.activeClass);
} else {
$(this).hasClass(settings.activeClass) ? $(this).removeClass(settings.activeClass) : $(this).addClass(settings.activeClass);
$(j+"."+settings.activeClass).length > 0 ? $(j+"."+settings.allTag).removeClass(settings.activeClass) : $(j+"."+settings.allTag).addClass(settings.activeClass);
}
/* Triggering the filter */
$(o).trigger("filter");
})
});
});
return this
};
// Warning: Unresponsive Script
paginateIt();
})(jQuery); // End filter script
} // End PaginateIt script
paginateIt();
}); // End of JS script.
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
//hide all children elements of content div, get specific items and show them
$('#content ul').filter(":not(.hidden)").children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
//update the current page input field
$('#current_page').val(page_num);
}
</script>
Unresponsive Script Fix
It looks like you're just calling paginateIt recursively. The paginateIt function does a bunch of work and then calls itself again, infinitely.
To fix this, remove the call to paginateIt() just below your comment "Warning: Unresponsive Script" comment.
Here's the simplified structure of your code so that you can see the problem more clearly:
function paginateIt(){
// Start filter script
(function($) {
$.fn.filterprojects = function(settings) {
$(this).each(function(i, o){
/* Binding the filter */
/* Setup filter selectors */
});
};
// Warning: Unresponsive Script
paginateIt();
})(jQuery); // End filter script
} // End PaginateIt script
paginateIt();
Re-pagination Fix
I would have written this line of code:
//getting the amount of elements inside content div
var number_of_items = $('#content ul').filter(":not(.hidden)").children().size();
as this:
var number_of_items = $('#content ul').children().filter(":visible").length;
Also, you'll want to call paginateIt after the animation completes for that to work correctly. You'll probably want to do this in an animation callback, but here's a temporary workaround:
/* Triggering the filter */
$(o).trigger("filter");
setTimeout(paginateIt, 1500);
Related
I have a working search bar that is added through the html. However to make the code unobtrusive i am trying to append the search bar and button through JavaScript. I am able to display the search bar and button, but the functionality of bringing up results has stopped working.
Here is the section to add the search bar in JS.
var $searchSection = $('<div class="student-search"></div>');
$searchSection.append('<input id = "search-criteria" placeholder="Search for students..."></input>');
$searchSection.append('<button>Search</button>');
//Append search section
$('.page-header').append($searchSection);
I am trying to get the functionality of search working. Here is a link to the code with the search working, as the search bar is included in the html. http://codepen.io/fun/pen/RRyaNm
This is a link to the code with search bar added through the js but with no search functionality. http://codepen.io/fun/pen/VjraNd?editors=1010
How do you get the search to work through adding from the js?
Any help or pointers would be awesome.
Thank you,
Harry
You don't have to add more function, just move your codes to the top. Check this
jsfiddle https://jsfiddle.net/xt5193z1/
//Search section
var $searchSection = $('<div class="student-search"></div>');
$searchSection.append('<input id = "search-criteria" placeholder="Search for students..."></input>');
$searchSection.append('<button>Search</button>');
//Append search section
$('.page-header').append($searchSection);
var $studentItem = $('.student-item');
var $pagination = $('.pagination');
var $searchCriteria = $('#search-criteria');
var perPage = 10;
// count number of student items
var studentCount = $studentItem.length;
// number of pages = number of students / 10 rounded up
var pageNumber = Math.ceil(studentCount / perPage);
// remove all student items
var initialTen = $studentItem.hide();
// display first 10 student items
initialTen = $studentItem.slice(0, perPage).show();
// pagination ul
var paginationHTML = '<ul>';
// calc number of links
for (var i = 1; i < pageNumber + 1; i++) {
// li and link for each page
paginationHTML += '<li>' + i + '</li>';
}
// end of ul
paginationHTML += '</ul>';
// display list to page
$pagination.html(paginationHTML);
// pagination link click
$('.pagination li a').on('click', function() {
// remove active
$('.pagination li a.active').removeClass('active');
// add active class
$(this).addClass('active');
// page number of clicked
var pageNum = this.text;
// Start point for slice
// e.g 3 * 10
var startFrom = pageNum * perPage - perPage;
// end point for slice
// e.g 30 + 10
var endOn = startFrom + perPage;
// display students based on number clicked
$studentItem.hide().slice(startFrom, endOn).show();
});
// Error message for no matches found
var $noMatches = $('<h2>No matches found please try again</h2>');
// Add to page
$('.page').append($noMatches);
// hide initially
$noMatches.hide();
// search box on type
$searchCriteria.on('input', function() {
// remove all result classes
$studentItem.each(function() {
$(this).removeClass("result");
});
// value of searched
var text = $(this).val().toLowerCase();
// results of search
var results = $("ul.student-list li:contains('" + text.toLowerCase() + "')");
results.addClass("result");
// show or hide based on result matching div
$studentItem.each(function() {
if ($(this).hasClass('result')) {
$(this).show("slow");
} else {
$(this).hide();
}
});
if (results.length > 10) {
// remove all student items
var initialTen = $studentItem.hide();
// display first 10 student items
initialTen = $studentItem.slice(0, perPage).show();
// show pagination
$('.pagination').show();
// hide no matches message
$noMatches.hide();
} else if (results.length === 0) {
$pagination.hide();
$noMatches.show();
} else {
$pagination.hide();
}
});
As Siguza said, $('#search-criteria') doesn't exist at the time you're fetching it. So, the on function is a good idea, but it should be given like this :
$('.page-header').on('input', '#search-criteria', function() {
//your code
});
What it does is , it will bind the function to the element that is added dynamically in DOM
Here is the jsFiidle
It will work for you. :)
I'm using the following code to automatically shorten div elements that contain a lot of text. It abbreviates the first paragraph and adds a "Read More" link. This works fine, as does the "Read less" link, which appears after the content is expanded. However, the "Read More" link does not work the second time it is clicked.
Is there a JavaScript error that could be causing this problem in the code below? (Tested on mobile safari, iOS simulator.)
function ExpandableContent(container, userSettings) {
/************ Validation *************/
if (!this.constructor || !this.constructor instanceof ExpandableContent) {
return new ExpandableContent(container, userSettings);
}
if (typeof container !== 'object') {
console.error("Must provide DOM element.");
return;
}
if (!container.find('p').first().length) {
console.error("Containing element must include at least one paragraph element.");
return;
}
/************ Process user-provided settings *************/
var settings = {
previewLen: 75,
readMoreClass: 'read-more',
readLessClass: 'read-less',
readMoreText: 'Read More >',
readLessText: '< Read Less',
ellipsis: true
};
// Any property can be overridden by adding a data attribute to the container
for (var prop in settings) {
if (userSettings && prop in userSettings) settings[prop] = userSettings[prop];
if (typeof container.data(prop) !== 'undefined') settings[prop] = container.data(prop);
}
/************ Initialization *************/
var containerOrig, para1, para1Orig, bottomBuffer, readMore, readLess;
function init() {
readMore = $("<a href='javascript:undefined;'></a>").addClass(settings.readMoreClass),
readLess = $("<a href='javascript:undefined;'></a>").addClass(settings.readLessClass);
readMore.text(settings.readMoreText);
readLess.text(settings.readLessText);
// Store the original state of the container
containerOrig = (function(o) {
return {
height: o.height,
top: o.top
};
})(container.offset()),
// Store the original state of the container's first paragraph if it exists
para1 = container.find('p').first();
para1Orig = (function(para1, o) {
return {
content: para1.html(),
height: o.height,
top: o.top
};
})(para1, para1.offset());
// Shortened divs will be extended by the pixel equivalent of 1rem to make room for CSS borders.
bottomBuffer = getFontSizeAsPixels($('h1'));
}
init();
hide();
/************ Public hide, show and text abbreviation methods *************/
function show(){
readMore.remove();
// Show all elements after paragraph 1
elementsAfterPara1().map(function(el) { $(el).show(); });
// Restore height of container and its 1st paragraph
para1.html( para1Orig.content ).removeClass('abbreviated');
container.removeClass('abbreviated').css('height', containerOrig.height);
// Generate 'Read less' link
container.append(readLess);
readLess.click(function(){
hide();
scrollToEl(container);
});
}
function abbreviate(text) {
if (text.length <= settings.previewLen) return text; // Nothing to abbreviate
text = text.substr(0, settings.previewLen);
if (settings.ellipsis === true) text+= '...';
return text;
}
function elementsAfterPara1() {
var result = [], children = container.children(), start = children.index(para1) + 1;
if (!children[start]) return; // nothing to hide
for (var i = start, l = children.length; i < l; i++)
result.push(children[i]);
return result;
}
function hide(){
// Remove 'Read Less' if such a link is leftover from a previous request
readLess.remove();
// Get abbreviated text for first paragraph
var abbrev = abbreviate(para1Orig.content);
// abbreviate the first paragraph, shortening the text and appending an '...' if necessary
para1.html(abbrev);
//Shorten the container so it's just tall enough to encompass paragraph 1
var containerNewHeight = (para1Orig.top - containerOrig.top) + para1.offset().height;
// Hide everything after the first paragraph
elementsAfterPara1().map(function(el) { $(el).hide(); });
// Setting overflow-y to hidden prevents the user from scrolling the abbreviated div
container.addClass('abbreviated').css('height', containerNewHeight).css('overflow-y','hidden');
// Prevent the user from scrolling internally through the DIV
container.on('touchmove', function(e) {
e.preventDefault();
});
//Generate a 'Read More' link and place it below the text
para1.append(readMore);
readMore.on('tap click', show);
}
};
Only thing I can think of is that line: readMore.on('tap click', show);
Are you sure that 'tap click' (with space) is the correct event?
Why don't you stick to the
readMore.click(function(){
...
});
you used in the show function?
Below is the code I'm using. The top part $('div.pagination... works fine, I can alert(length) and it gives me the correct value of pages in the pagination section. The bottom part appears not to work. This is for a scraper that will open each page on a forum. If I leave the loop out of it it successfully retreaves the url for page here. The length -=2 is to remove the next/previous li from the total count.
$('div.pagination').each(function() {
var length = $(this).find('li').length;
length -= 2;
});
for (var i = 0; var <= length; i++) {
var pageToOpen = 'http://someWebsite.com/index/page:' + i;
alert(pageToOpen);
page.open(pageToOpen, function (status) {
if (status == 'success') {
logAuctions();
}
}});
}
Define your var length outside (before) the.each()
Using .lentgh method you might miss the real page indexes. So I would suggest to grab the real anchor hrefs.
FIDDLE DEMO
var pages = [];
// skipping the "Next" and "Last" get all A ahchors
$('div.pagination li').slice(0,-2).find('a').each(function(){
pages.push( $(this).attr('href') );
});
$.each(pages, function(i, v){
$('<div>'+ ("http://someWebsite.com"+v) +'</div>').appendTo('#output');
});
/* WILL RESULT IN:
http://someWebsite.com/auctions/index/page:2
http://someWebsite.com/auctions/index/page:3
http://someWebsite.com/auctions/index/page:4
*/
How to generate page numbers like the below using javascript/jquery?
If the 5 th page is selected i have to show 3,4 and 6,7 and also 1,last page with prev,next...
Any suggestion....
EDIT:
How to work with json data that use these pagination div? (ie) My json data contains 50 records
I want to 10 in page 1 and so on... How to paginate json data with these numbers...
I want a jquery function to pass currentpageno,lastpagenumber and the function should generate me page numbers like the below for me
If it is the first page
If it is in the middle,
If it is the last page,
Second EDIT:
I have tried this function but doesn't seem to get the desired result
function generatePages(currentPage, LastPage) {
if (LastPage <= 5) {
var pages = '';
for(var i=1;i<=5;i++)
{
pages += "<a class='page-numbers' href='#'>" + i + "</a>"
}
$("#PagerDiv").append(pages);
}
if (LastPage > 5) {
var pages = '';
for (var i = 1; i <= 5; i++) {
pages += "<a class='page-numbers' href='#'>" + i + "</a>"
}
$("#PagerDiv").append(pages);
}
}
I have the lastPage and currentPage values please help me out getting this...
What you are looking for is called "pagination" and there's (as always) a jQuery plugin that does the job for you:
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
(Download it here)
Edit: Since you don't seem to be able to get it working, here is one way (of several different) how you can use the plugin.
Step 1: Generate markup from your JSON-data like the following:
<div id="display">
<!-- This is the div where the visible page will be displayed -->
</div>
<div id="hiddenData">
<!-- This is the div where you output your records -->
<div class="record">
<!-- create one record-div for each record you have in your JSON data -->
</div>
<div class="record">
</div>
</div>
The idea is to copy the respective record to the display div when clicking on a page-link. Therefore, the plugin offers a pageSelect-callback function. Step 2 is to implement this function, for instance:
function pageselectCallback(pageIndex, jq){
// Clone the record that should be displayed
var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone();
// Update the display container
$('#display').empty().append(newContent);
return false;
}
This would mean that you have one page per record. If you want to display multiple records per page, you have to modify the above function accordingly.
The third and final step is to initialize the whole thing correctly.
function initPagination() {
// Hide the records... they shouldn't be displayed
$("#hiddenData").css("display", "none");
// Get the number of records
var numEntries = $('#hiddenData div.result').length;
// Create pagination element
$("#pagination").pagination(numEntries, {
num_edge_entries: 2,
num_display_entries: 8, // number of page links displayed
callback: pageselectCallback,
items_per_page: 1 // Adjust this value if you change the callback!
});
}
So, you just have to generate the HTML markup from your JSON data and call the init-function afterwards.
It's not that difficult, is it?
yeah #SLaks is right. nothing too crazy here. You will have 2 variables currentPageNumber and lastPageNumber.
$("div.paginator").append("<a...>prev</a>");
$("div.paginator").append("<a...>1</a>");
for (x = (currentPageNumber - 2; x <= (currentPageNumber + 2); x++) {
$("div.paginator").append("<a...>"+ x +"</a>");
}
$("div.paginator").append("<a...>"+ lastPageNumber +"</a>");
$("div.paginator").append("<a...>next</a>");
// you could apply styles to and a tag in the div.paginator
// you could apply a special class to the a tag that matches the currentPageNumber
// you can also bind some click events to each a tag and use the $(this).text() to grab the number of the page to go to
Use THIS or THAT plugin. They're both easy html pagination plugins. Put everything in the html at once and paginate with one of those.
Add two new hidden inputs
<input type='hidden' id='current_page' />
<input type='hidden' id='show_per_page' />
Next add an empty div to create pagination controls
<!-- An empty div which will be populated using jQuery -->
<div id='page_navigation'></div>
$(document).ready(function(){
//how much items per page to show
var show_per_page = 5;
//getting the amount of elements inside content div
var number_of_items = $('#content').children().size();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//set the value of our hidden input fields
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
//now when we got all we need for the navigation let's make it '
/*
what are we going to have in the navigation?
- link to previous page
- links to specific pages
- link to next page
*/
var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
$('#page_navigation').html(navigation_html);
//add active_page class to the first page link
$('#page_navigation .page_link:first').addClass('active_page');
//hide all the elements inside content div
$('#content').children().css('display', 'none');
//and show the first n (show_per_page) elements
$('#content').children().slice(0, show_per_page).css('display', 'block');
});
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
//hide all children elements of content div, get specific items and show them
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
//update the current page input field
$('#current_page').val(page_num);
}
Here's what should happen.
1. Get the rel attribute of the clicked link
2. For every div with class 'entry':
(i)Get its 'left' position
(ii) Calculate its outer height
(iii)Loop through all instances of 'a.tag_filter'. If it finds the same string in the 'rel' as the one oringinally clicked on then add 1 to 'V' and break out of the loop.
(iv)If 'V' is equal to 0 after the loop we know the same tag isn't present within that '.entry' so fade it out.
(v)Once the fadeout has finished loop through all the '.entry' after the faded out one and get their 'left' values.
(vi)If the left value of the faded entry = the left value of the current '.entry' then reposition it to the new 'top' value.
What is currently happening.
It runs through and fades out all the correct '.entry' elements and only after all of them have faded out does it reposition them remaining '.entry' elements.
After each element is faded out I would like the repositioning loop to run so it essentially positions the remaining elements one at a time rather than all at once.
Heres my code EDIT:
$('a.tag_filter').click(function(e){
e.preventDefault();
var selectTag = $(this).attr('rel');
$('div.spotlight_entry_container_grid').each(function(i){
var $entry = $(this);
var tagArray = [];
$('a.tag_filter', this).each(function(){
tagArray.push ($(this).attr('rel'));
});
if($.inArray(selectTag,tagArray) == -1){
var leftPos = $entry.css("left");
var topPos = $entry.css("top");
$entry.fadeOut(1000, function(){
var nextLeftPos;
var nextTopPos;
$('div.spotlight_entry_container_grid:gt('+i+')').each(function(j) {
var $laterEntry = $(this);
nextLeftPos = $laterEntry.css("left");
nextTopPos = $laterEntry.css("top");
//we need to keep the entries in their columns.
//matching left values will do it. No need to animate left values.
if(leftPos == nextLeftPos){
$laterEntry.animate({ top: topPos});
}
});
});
}
});
});
Hopefully that makes sense
Any help would be appreciated!
I'm probably doing something crazy but I just can't spot it.
Thanks
in here
$('a.tag_filter', this).each(function(){
var curTag = $(this).attr('rel');
if(curTag == selectTag){
v++;
return false;
}
});
returning false inside of $().each() breaks the looping through each element in the wrapped set.
From the documentation
Returning 'false' from within the each
function completely stops the loop
through all of the elements (this is
like using a 'break' with a normal
loop). Returning 'true' from within
the loop skips to the next iteration
(this is like using a 'continue' with
a normal loop).
Also, I would recommend caching $(this) inside of each each() in a local variable for performance instead of referencing it several times.
EDIT:
After looking at the code further, I think the following should do it
$('a.tag_filter').click(function(e){
// prevent the default anchor behaviour
e.preventDefault();
var selectTag = $(this).attr('rel');
$('div.entry').each(function(i){
var $entry = $(this);
// get an array of the anchor tag rel attributes
var tagArray = [];
$('a.tag_filter', this).each(function() {
tagArray.push ($(this).attr('rel'));
});
// if we can't find the selected tag in the entries tags
if ($.inArray(selectTag,tagArray) == -1) {
var leftPos = $entry.css("left");
var topPos = $entry.css("top");
$entry.fadeOut(1000, function(){
var nextLeftPos;
var nextTopPos;
$('div.entry:gt('+i+')').each(function(j) {
var $laterEntry = $(this);
nextLeftPos = $laterEntry.css("left");
nextTopPos = $laterEntry.css("top");
// for the first element, set top and left to the faded out element values
if (j == 0) {
$laterEntry.animate({ top: topPos, left: leftPos });
}
// for later elements in the loop, ste the values to the previous element values
else {
$laterEntry.animate({ top: nextTopPos, left: nextLeftPos });
}
});
});
}
});
});
You don't need to cache $(this), jQuery auto caches the this selector for function callbacks.