I have an array with length of 1.5k, each entry needs to be shown (set of DIV's per entry) but when I'm showing it all at once the browser hangs most of the time. I'm trying to figure out the most flexible, easiest and user friendly way to present this data. All my ideas were hard to make or not user friendly. What I've thought of so far:
show the DIV's that are in user's viewport (hard to make it work on all screen configurations)
group the entries by pages and switch them on scroll event (not user friendly - no visible scrollbar)
load more entries when "Load more" is pressed (not user friendly, user would have to click 100 times on the button if he'd like to get to the 1000th entry, and it would hang the browser anyway)
What is the best way to present this data?
Update - I've also wrote another lib:
https://github.com/yairEO/infinite
Using this endless scrolling script, you could do:
var items = [], // array of objects to load on scroll
batchCount = 10;
// load more items
function showMore(howMany){
// remove X amount of items from the total hidden item's jQuery object and show them
var toLoad = items.splice(0, howMany), // from the items array, cut only the batch we need to show
i;
// Make sure that an image in the current batch is loaded before adding it to the DOM
for( i=toLoad.length; i--; ){
// show item toLoad[i]
batchCount--;
}
}
function onScrollEnd(){
if( batchCount <= 0 && items.length ){
// load 10 items on every scroll
batchCount = 10;
showMore(batchCount);
}
}
$(window).endless({offset:'20%', callback: onScrollEnd });
Your items array could be a javascript array of DOM elements or a jQuery st of elements, which you should convert to a real array for this example code to work without much changes.
Related
The Problem:
Before I began adding the div swaps, I could only type into the left (from_value) input and the result of the calculations would be applied via ajax to the right (to_value) input.
I would like to allow the user to type into either box and have the results display in the opposite box they're typing in.
What I am doing to make this happen:
I am swapping the left div with the right div on mouseover of the to_value input. Here's the code i'm using to do the swap:
$.fn.swapWith = function (that) {
var $this = this;
var $that = $(that);
// create temporary placeholder
var $temp = $("<div>");
// 3-step swap
$this.before($temp);
$that.before($this);
$temp.after($that).remove();
return $this;
};
var leftSide = $('#left-side');
var rightSide = $('#right-side');
$('#to_value_input').on('mouseover', function () {
$(rightSide).swapWith(leftSide);
});
This effectively swaps the divs, bringing along with it ids and names of the inputs which retains functionality of my server-side script to perform calculations. As expected, the from_unit select list and to_unit select list are swapped and their values / displayed text are also swapped from one side to the other.
I would like to swap the values and text of the two select boxes either directly before or more likely, directly after the div swap so it appears as if nothing changed on screen.
Similar questions that I have reviewed:
How to swap values in select lists with jquery?
How to swap selected option in 2 select elements?
I have tried several variations of each of the provided solutions. This seems like it should be a fairly simple thing to do but I find myself stuck. Any further help would be greatly appreciated.
The full code base is available on github if you need to see it: https://github.com/pschudar/measurement-conversion
I have made minor changes to the code hosted there to accommodate the div swaps.
I'm currently having a datatable with some data. The issue is as follows:
Lest have a total of 91 rows and we set paging to 10 rows per page. This gives us 10 pages with the last page with only 1 row.
I'm using the .ajax.reload() method from the DataTables API to refresh the table whenever I make any change on it and I pass the "keepPage" parameter as true which means that if I'm on 5th page and I edit something, after the server side processing, my data will still load page 5.
However, the problem comes when I'm on the last page with only 1 row and I delete that row. My table refreshes on the 10th page and since there isn't anything more on it, it displays an empty table.
How can I change the page in this case to the previous one?
Use page.info() to get paging information about the table before reloading with ajax.reload().
Then perform the following calculations.
var table = $('#example').DataTable();
// Get paging information
var info = table.page.info();
// Number of deleted rows
var numDeleted = 1;
// Calculate number of pages after deleting rows
var numPagesAfter = Math.ceil((info.recordsDisplay - numDeleted)/info.length);
// If number of pages after deleting rows is less than total number of pages
// and the last page is displayed
if(numPagesAfter < info.pages && info.page === (info.pages - 1)){
// Go to previous page using zero-based index
table.page(numPagesAfter - 1);
}
// Reload table
table.ajax.reload();
Basically I am going with an application style site for mobile view and they wanted a button on the bottom to flip through the pages in order while the nav at the top allows you to flip through them in any order. I want to change the bottom button to link to the following page depending on which one it is on. so I want the button to change links when specific buttons are focused. I tried many different things and can not seem to make it work. Please do your magic.
if(document.getElementById("abt").hasFocus()) {
document.getElementById("golink").href = "#work";
}
I don't believe focus is what you're looking for as focus can be fleeting to track outside of form objects.
I've mocked up a possible solution to help aid you to what you're looking for.
Here is a link to the JSFiddle:
EDIT - Updated Fiddle: https://jsfiddle.net/t0uwff4t/
Javascript in the fiddle:
// Array of sections.
var sections = [
'#first',
'#second',
'#third',
'#fourth',
'#fifth'
]
// Get the last value in the array.
var lastArrayValue = sections[sections.length - 1];
// Button pointer
var btn = document.querySelector('#button');
// On click of the button, do work.
btn.onclick = function() {
// Get the current href.
var href = btn.getAttribute('href');
// Ternary operator setting the index to zero if the user is on the last index of array.
// Else set the index to the next array value.
var index = (href === lastArrayValue) ? 0 : sections.indexOf(href) + 1;
// Set the href attribute.
btn.setAttribute('href', sections[index]);
}
NOTE: While this example works, this is only a mockup - meaning that it doesn't account for rapid button clicking by the user to 'flip pages'.
Good luck and I hope this helps you to your goal.
I have 2 jQuery UI sortable lists (http://jqueryui.com/demos/sortable/#connect-lists).
I drag items from list A (catalog) to list B (basket).
What I want is for the lists (A and B) to reorder themselves automatically when an item is added (sorted by price). So when an item is dropped into the basket, it will go to its position (top/middle/bottom) according to its price.
You should use the "receive" event form sortable in conjunction with the sort method.
$('.list_a, .list_b').sortable({
receive: function(){
$('.list_a').html($('.list_a').get().sort(sortByPrice));
$('.list_b').html($('.list_b').get().sort(sortByPrice));
// As we replaced the content of the list, you probably need to
// make it sortable again... kind of a big hack
}
});
function sortByPrice(a, b){
// The parseFloat will not work if you have text before the price
// in the price container.
var price_a = parseFloat($('.price_selector', a).text());
var price_b = parseFloat($('.price_selector', b).text());
if(price_a < price_b) return -1;
if(price_a > price_b) return 1;
return 0;
}
I don't think there is a built in sorting mechanism like you've describted for the jQuery UI sortable lists. However, you could use this jQuery plugin to manually sort the items. It's very light weight and lets you control how things are sorted by defining a sorting function.
You could attach the sorting routine to the receive event of your "basket list." In that event, you would sort the items in the basket list by looking at their price and comparing them numerically. Pay attention to the second parameter of sortElements. It allows you to tell the sorter what element you actually want to move. Though in this case, just moving the li item might be fine.
I have created a table in HTML, consisting of table rows in a tbody tag.
I've used a javascript code snippet from mredkj.com to be able to add rows and delete them, too. The rows are sorted and their rank is in the first TD (cell) in every TR (row).
Now I would like the add the functionality of being able to manually 'resort' the tablerows.
The problems are:
my javascript/jquery knowledge is
very limited
the ranks of tablerows
do not get updated(when you delete a row, the
rowranks get updated by the
'reorderRows function, but calling this function from within my jQuery does not seem to
sort out the problem)
the user's input in textarea's gets erased as soon as up or down button is clicked.
For example: user adds a TR, that gets added at the bottom of the current list of tablerows, fills in the textarea and desides that the row (s)he filled should be ranked first, so she clicks the up arrow a couple of times, until it's on top.
The rank of the row is now #1 and the input is still in the textarea's.
My questions are:
Does anyone know how I can make the
rows update their ranking when the
user moves the row?
How do I maintain the user's input?
Any help is very much appreciated and if you have any other suggestions, please share them.
Code here: http://jsbin.com/eyefu5/edit - for some reason, the moving up and down doesn't work in js bin, it does however when I run it in my browser.
I updated your code to do what I think you were trying to do: http://jsbin.com/eyefu5/9/
My primary changes were to the following swap logic:
function swap(a, b){
b.before(a);
reorderRows(document.getElementById(TABLE_NAME), 0);
}
function getParent(cell){ return $(cell).parent('tr'); }
$('#diagnosetabel').on('click', '.upArrow', function(){
var parent = getParent(this);
var prev = parent.prev('tr');
if(prev.length == 1){ swap(parent, prev); }
});
$('#diagnosetabel').on('click', '.downArrow', function(){
var parent = getParent(this);
var next = parent.next('tr');
if(next.length == 1){ swap(next, parent); }
});
The biggest difference is that I switched the swap code to using jQuery's before method, which should take care of just about everything for you. I also added a call to the reorderRows method which you were already using. At the moment it starts at the beginning and reorders all the numbers after the swap, but you could narrow this down as needed because you know the only two rows which were modified.
Hope that helps!