I am working on a progressive web app (PWA) project which contains a very long list of items. These items include: avatars, names, text descriptions and buttons. Ideally I want this project to work on an tablet (mainly iPad).
Requirements:
The list has to be ordered alphabetically.
Each item has a dynamic height.
Scrolling must be smooth, same as in the Contacts iOS app.
Each group of people who start with the same letter, will have a title of the letter, same as in the Contacts iOS app.
There is an alphabetical list on the right side which should link to the relevant group letter in the list.
The alphabetical list has to support smooth scrolling same as in the Contacts iOS app.
See attached screenshot for more information.
I am using only jQuery, Bootstrap and iScroll, no other frameworks.
I have managed to set most of it up but got into few issues:
When the list is too long, the PWA crushes, probably as a result of memory issue.
I have edited some parts of iScroll Infinite, which basically removes most of the items from the DOM when they are not used but that creates some UI issues.
Any idea how can I solve these issues?
I have made some examples in order to be more clear as I think it’s quite hard to just explain the issues above without showing it:
With extra CSS:
https://shakedos.com/examples/list/pwa.php
Without CSS:
https://shakedos.com/examples/list/pwa-nocss.php
Screenshot:
Related
Until now I mainly made web sites suitable for PC (desktop) with help with Javascript, jQuery. Now I need to make some small web site Tabular job time records with menus, popups, dialogs, charts and the ability to input and modify data by click events (mouse or touch device) on table cell, plus additional statistics, math, etc. I started by making separate versions including jQuery mobile) but after some time it was very confusing for me to track all changes and understand such complex coding! Then I decided to apply some kind of responsive technique but after reading a dozen web articles I'm still unable to make conclusion what way is right!? Do I need to start web site as primary for mobile and then add some code for desktop, or opposite? Or is there some way, implemented does score for all three type of devices? Thanks.
This question is a little vague. If this question is only about the javascript interactions your answers will vary with UX requirements and libraries. As far as layout etc is concerned, both bootstrap and foundation recommend you start with a mobile design to have the minimum amount of elements necessary for all the content, then add features and readability as you get more real estate.
Mobile first is simply a way to ensure that you don't end up with too many elements to fit on a smaller screen.
I'm developing my first AngularJS App. The App has various features but introducing one in particular I started having performance problems (Nodes and Heap). The section involved is composed of one or more tabs (max six). Each tab contains within it a table, the detail of an element of the table and an additional external filter.
The plugin used for table is ng-table. The number of columns in the table can be up to 20. The columns must be sortable, filterable, displayed or hidden and has to be possible to move to rearrange the display order. To do this I had to do a custom header (attached).
Find below a screenshot of the performance at the opening of six tabs simultaneously.
Is possible that the problem was made by the old version of ng_table plugin ? Because after upgrade it the performance is improving!
What can I do to improve? Please, help me.
I want to dynamically add data into data.js in my JavaScript Windows 8 app based on the grid app template. I want some particular group items in that template to scroll from right to left. And also how to flip images of particular tile inside the group items?
For the question of adding data dynamically, I would check out the following samples:
HTML ListView loading behaviors sample
HTML ListView optimizing performance sample
More samples may be found at: http://code.msdn.microsoft.com/windowsapps
For the latter question, I'd suggest posting a separate question on the image manipulation, with some additional detail on what you're trying to do.
For more info on Windows Store app development, register for Generation App.
I am tasked with implementing d-pad navigation for an existing web application for GoogleTV (and I'm testing in Google Chrome, and so far they seem to operate similarly. In their notes for implementing d-pad navigation they have basic handlers for up, right, left, down and select.
At present I have a scheme to initialize a virtual cursor, and then for the various dpad strokes. I rely on using document.elementFromPoint() and looping through until I find a new element that was not previously selected. I'm using outline: css to indicate current position and I only show it when one of the dpad controls has been selected.
I have a step on initialization which adds the class dpadClickable to all the items which are clickable, and then as the cursor moves I have dpadHighlighted added to the new one and removed from all other elements. It looks right.
This all fails if I have an element which is scrollable, or if the orientation is such that moving my point downward finds nothing.
What I would like is a data structure to keep all my dpadClickable items in, and then on d-pad clicks, be able to iterate it to find the best closest top, down, left, and right elements. Like, should I do it based on the top and left properties? Or based on a calculated center point?
I found a jQuery library which sort of implements this, and am reverse-engineering it to some extent. But what I'd really like is a primer on this class of programming problem: should I be looking for graphics programming algorithms? games? Something else?
UPDATE: Question over on the User Experience StackExchange site: Adding D-pad navigation to an existing web application: Resources?
Have you looked at http://code.google.com/tv/web/lib/ where the official Google TV Java Script extensions / libraries are? They might help you with this.
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.