Javascript widget inspired by iPhone UITableView? - javascript

Cocoa Touch's UITableView allows a user to scroll through large numbers of data rows with good performance because it recycles table rows. Rather than create a GUI element for every single data row, a limited number of table rows is created, and simply updated with the relevant data as the user scrolls, giving the illusion of navigating up and down a very large number of table rows.
Has anyone seen this done in javascript? Is there a plugin available anywhere that will do this for me?

infinity.js works well. It will dynamically load 'pages' behind the scenes giving you the appearance that the list has been fully loaded.
More information can be found on their Github page - https://github.com/airbnb/infinity
Additionally, I've forked the project updating it to work with Zepto. I also set it up to use any scrollable div (set up with overflow: scoll) with the class 'scrollable' - https://github.com/elliotcw/infinity
I should add that I made these changes as this is great for large lists on mobile devices, which slow down when you have to many complex elements on the page.

I was looking for this as well, and infinityjs [1] doesn't seem to quite mimic the same interface as UITableView. And it was a problem for my scenario that infinityjs required that the element containing the list items already be added to the DOM.
MegaList [2] came closest to what I wanted. Andrew (author) has done a great job of designing it for mobile first, with touch support etc. One caveat for me was that it appears to assume a strict selection list model and does a little bit more than I'd like a list component to do (e.g. binding to resize events and trying to handle that automatically).
So I started writing a barebones list component, also modeled after the iOS UITableView. It's a work in progress and I'm putting in just what I need. Sources are here https://github.com/shyam-habarakada/js-virtual-list-view. I'm putting in just what I need as I go, and contributors are needed :-)
[1] http://airbnb.github.io/infinity/
[3] https://github.com/triceam/MegaList

Actually the algorithm is not difficult at all. If you know javascript you should be able to write this. The algorithm only needs the height of a cell and the height of the table.
I only know these two:
Apple's Dashcode javascript Framework has an implementation of a Table. You could take a look and see if that is what you need.
Or Cappuccino Framework which is basically Objective-J but behind the scenes is Javascript.

Clusterize.js does exactly that.
It's small and works with any tag (table, lists, divs)

Related

Dojo Datagrid Sorting Mask

I'm currently working with a dojo datagrid that works perfectly well except for one small problem. Due to a large number of fields that must be accounted for, clicking on a column to sort the contents of the grid by the value within that column can be rather time consuming (several seconds). Is there any way to display to my users that the content of the grid is "loading"/"sorting"/etc during this downtime? I've looked around the web but only found loading masks and no sorting masks. As far as I can tell there are no built-in methods for detecting sorting or changes in sorting.
Thanks in advance.
This Post handles the onHeaderCellClick event which would catch the onClick in the header.
Declarative dojox.grid.datagrid's header has onclick event?
Theres a fiddle in the Post, which disrcibes it very well.
You can use it to make a loadingimage visible and hide it again, when sortig ends.
Regards, Miriam

Updating overflow without removing elements from the div?

If I used:
parentNode.removeChild( divHere );
It does work and the scroll bar for the overflow updates accordingly. If I use JS to 'divHere.style.visibily = "hidden";' well that doesn't work anymore. What I've done pretty much is create 115 divs that are in a container div and the user can select filters to show only the images they want, all the divs have a background image and are essentially just an image with a name under it.
So I have 2 questions:
1) Is there a way to update the overflow and make it not take hidden elements into consideration?
2) If 1) isn't possible than when I use removeChild to remove a div from the container, it does indeed disappear but what exactly happens to it? Does it disappear off the page because it's not added to any element on the page? So it essentially works like it's hidden? I don't have to worry about people seeing the images in some completely weird spot in some lesser used browser?
and well 3) If you have a better method of doing this it would be greatly appreciated
Thanks in advance for any help
The removeChild() method removes a specified child node of the specified element and returns the removed node as a Node object, or null if the node does not exist.
That null means that the element is now removed from your mark-up.
You should use it to not let the browser take that into consideration, as the browser will not find that element in the mark-up.
You can do it in this way as well:
$(document).remove(object_to_remove);
FInd more about it: http://api.jquery.com/remove/
I believe I may have a response for the third part of your question. That large number of divs in your containing div and the usage of filtering make me think you might want to look into using the DataTables plugin for jQuery (http://www.datatables.net/). It has some very nice features for sorting/filtering/etc. a large number of data elements and supports a variety of data sources. There are also some plugins for the plugin if the basic functionality isn't enough for you.
There is a bit of a learning curve if you want to do more complex stuff with it, and it might be tricky to get used to if you haven't worked with jQuery much (though being someone who hasn't worked with jQuery all that much due to not doing much web development, I can say that I quite like using it whenever I get the chance, although that may just be due to me enjoying learning how to do new things in programming), but I feel that if you're willing to spend the time on it you will have something much more maintainable than what you currently have.

Dynamically injecting code in Twitter Bootstrap carousel

So, I've built a responsive site with Twitter Bootstrap. The problem is that I've done this using visible-phone, visible-tablet, and visible-desktop. This means that when someone views my source code, I have whole sections that are included twice or three times, in order to get around problems with differences in span amounts, or, for instance, because a carousel on the tablet should have 2 items, while on the desktop it should have 4.
I'm wondering if I'm doing this right. Should I be injecting (or adding? Not sure of the right name) code to the DOM dynamically using Javascript, based on screen size? Or should I be editing around with my custom, very simple .php files based on screen size? I don't know, and I can't find an answer about good practice anywhere. I've tried looking at sites I like for this, but I never find a javascript script that specifically adds stuff in this situation. Given, I'm not sure what I'd be looking for.
Any pointers?
I would avoid using script to dynamically add the content; as a fellow developer that just makes it less intuitive (in my opinion) and I always aim to produce intuitive code for the chap after me.
If your requirements state that a carousel should have four items on the desktop and two on mobile, then I think your solution is completely valid.

Using JS Raphael to create a navigation bar. Bad idea? Good idea?

I am trying to create a navigation bar that will sit at the top of my website for all of my pages.
I am much more familiar with the code that the Raphael library uses, and it will be much simpler for me than creating a bunch of tiles and the corresponding JavaScript.
Is there any problem with using a canvas for these sorts of purposes?
Does anyone have a better idea?
Thanks in advance for any advice.
UPDATE: Problems with render speed? Again, I'm totally open to alternate suggestions!
Short answer: Probably not the greatest idea.
Longer Answer: As logical Chimp hinted, using the canvas for a crucial element is certainly a bad idea, as browsers with no javascript support and/or no canvas support (including web spiders, and browsers that are for various perceptual differences (blindness, etc)) would see nothing. (for people, this means they won't find your sub pages. For web spiders (Google, etc.) this means no one would ever find your sub pages.)
If you want to use Raphael or another canvas based solution, for accessibility you should start with an html based navigation element (like ul li in a div as has been done for years), and then you'll replace that via javascript when the page loads (see HTML5 Canvas replace to <div> for an example of how to do this (includes a jsfiddle link)
The reason it's not the greatest idea is that you'll need to ensure that you keep your html nav element in sync with your canvas based one - although I guess if it's being generated by a server side process (e.g. wordpress) it's not too much more work to build the html nav element, and then you only need to test it regularly to ensure it's working.

Design choice for top_nav_bar in web application(HTML)

Pretty simple question.
Its just some advice based on personal opinion and best practice.
It's difficult to explain so I'll draw the best image I can.
Try to imagine that I have any old website and at the very top I have a navigation bar which is broken into 3 rows.
Top is application: Settings, Profile, Login/Out
Second is notification: Error, new message
Third is part navigation part functional.
So we have 3 rows supporting different functionality and obviously different color schemes. Each on is no more than about 5% of the total pages height.
I supposed the question I'm asking is whats the best way to do this.
First guess was to use tables to format the data and space them out:
This worked, but It looks sloppy.
{
border-collapse: collapse;
border-spacing: 0;
}
seems to fill in any gaps in the table but it doesn't look right
Second guess was to use frame sets:
Shot myself a dirty look for even thinking of it
Third guess was to keep everything css and Html
Which seems like the most sensible one next to tables but keeping content organized with the multiple buttons and such sounds like it could be trouble.
Lastly
was use a JQuery or javascript UI library. This presents It's own set of problems but could be the prettiest if done right.
So if it was you, how would you go about doing this simple task and why?
picture of view as requested. Part in question is top nav
http://s1180.photobucket.com/albums/x406/0vertone/?action=view&current=globalview.jpg
Don't use tables for this purpose.
Only use tables for tabular data (which this isn't).
Just use divs for the containers and lis for the menus.
EDIT
This is somewhat like I would do:
http://jsfiddle.net/uf2zU/1/
This uses elements what they are meant for.
And can be easily controlled using CSS.
EDIT 2
http://jsfiddle.net/uf2zU/4/
I would go about this using sets of HTML uls and CSS, because that's the most forward thinking, plus it uses HTML the way it should be. However, if you want to use tables, try border: none; and border-collapse: collapse;
I would go with the third guess for the presentation part, because that's the most flexible part, at least for me. If you split up all the sections correctly, then the task of managing the content will become quite easy, because you will be able to target the section and style anything with it.
In addition, I would go with the last option (i.e. vanilla JavaScript and jQuery), for client side functionality, because that's the Swiss Army Knife of DOM manipulation.
A horizontal nav bar just that -- a horizontal entity. Therefore, I wouldn't "stack" elements as rows, rather as columns. It's the difference between a huge header and something that's visually much easier to comprehend. Stretch your elements out, use icons, whatever. If you have the need to be really verbose, go with a giant menu
I personally use JQuery UI Tabs whenever possible because they're a well-established UI pattern, are easy to deploy, and automatically "Ajax Load" my pages. Sure, you get a few "gotchas" but they're nothing for a competent jQuery user to overcome.
In situations where I can't use UI Tabs, I will do a pure CSS bar across the top, "floating" via absolute positioning if that is what the client specs. Layout is no place for Tables (they are for tabular content elements) and you're right that frames have no place, period. This shouldn't be any more difficult than basic page layout, so it's a no-brainer to go this route.
For notification, there are other options that are more obvious and timely. Try the Notification Widget or StackOverflow style notifications All other small, basic info could be contained on your horizontal bar.

Categories