I have an app that I'm building which is for completing a work order. The main page shows the details of the work order (site address, what needs to be done, etc.) and then there are a couple of listviews which show product and labour for that work order. At the start, there is no labour nor product attached to the work order, so these listviews are empty. When the employee is finished the work order, they can click Add Labour or Add Product to, well, add labour or product to the work order to reflect what work they've done.
I should point out that the main work order, the labour items, and the products are all distinct records in a database, all connected by the work order's primary key.
My question is about how I've laid this out. Currently, I have 3 distinct pages - one for the main work order, another for adding/editing labour and another for adding/editing product. When I say 'distinct page' I don't mean the <div data-role="page">, I mean, clicking "Add Labour" takes the user to a different website URL entirely.
I'm starting to question my logic in this design. Should I have all three (main, labour & product) on the same page, separated only by the <div data-role="page">? Then, when the user adds labour, it just takes them to that 'page' and, upon hitting "Save Labour" the main div (page) is dynamically updated (the labour listview gets an item added to it).
Not entirerly sure how I should have this built - I'm new to jQuery mobile.
Thanks
First let me tell you, you are not doing anything wrong.
There are 2 common ways of creating jQuery Mobile applications.
Single HTMl / multiple pages
Multiple HTML files
Each way has few good and few bad sides to it. From my experience people usually choose multiple HTML files solution and it is to be expected. Single HTML / multiple pages is a new paradigm created by jQuery Mobile developers and it will take some time for people to accept it as a normal/common way.
Because you didn't say what kind of app are you creating I cant advise you which approach is the best one. Usually if you are creating a classic web page it is best to use a multiple HTML solution. In case you are creating a Phonegap mobile hybrid app it is best to use single HTML file with multiple pages (this will make sure page transitions are smooth).
If you have more questions feel free to ask.
Related
i try to ask for help here. I have a wordpress site where I use Elementor for pages.
Assuming to create an area of the site where there are reviews divided into pages with menus for navigating them.
The problem is that there are thousands of reviews, how can I avoid having to enter them one by one? is there an automatic system that inserts them all into pages and also allows me to add them in the future?
And if it exists, is it possible to give it the style I want?
I've already done a similar thing by creating individual pages and inserting them the way I want. But when the reviews start to grow it becomes difficult and you have to create even hundreds of pages.
I have the reviews in a csv with columns "review" and "name".
Thanks!
My company runs a web application and in a couple of places our clients have a text editor (CKeditor) into which they can enter text for display on the customer facing area of the app. The information has to be displayed in very specific ways due to the way the products are regulated, and the client often copy/pastes html with inline style rules that they get from directly from their suppliers.
A couple of times now, we've had issues come up where the inline style rules aren't assigned to classes or anything, so they affect other parts of the page. We can go in and manually fix the code, but it absorbs a bunch of time, and we run the risk of adjusting something and taking a product out of compliance, if we fix it we take on some liability.
We can't have the client be responsible for fixing it, as they have no clue what they're looking at, they literally paste it from the supplier.
We can make it so that the areas of the customer portal with content from the CKeditor open in a new tab instead of being displayed on the same page, and then the style rules wouldn't touch anything that they're not supposed to. This is the solution I'm considering right now, but it'll take a fair amount of time and will require the client to communicate the change to all of their customers; again, pretty strict regulations.
My question: Is there some way we can just put a container around any content entered into CKeditor, so it only affects a limited area on the display page? Something that will basically limit the scope of inline style rules, but that we can create outside of the ckeditor?
Thank you!
Apologies for any faulty terminology or vagueness, I'm new to the field and faking it as best I can currently :)
I am new to chamilo lms learning system. I had created my portal on Chamilo and added courses also. Now I want to add filters on course home page from where i can filter courses according to their course progress.Filter like completed button filter will filter all the courses who gets completed and partial completed filter will filter process which are not completed yet.
Is there any way from which i can add a course progress filter on course home page ? Any kind of help either suggestion or technical will be appreciated.
It is not clear what you call courses. You seem to be mixing the notion of course (like the course space that offers a homepage) and of learning paths (that have a progress indicator). It is not clear either whether you want to filter courses or only show the tracking information and whether you want to do that as a teacher or as a student. This all makes it very difficult to answer you, but I'll guess.
The progress in the different learning paths can be seen on the learning paths list page. Chamilo is a relatively procedural language, with still relatively few friendly URLs, so it is very easy to understand where to look for examples in the code.
The tracking of learning paths is shown on the main/lp/lp_controller.php page (for your own progress, in chamilo 1.11.0 and above) and can be seen on the same page if you load the script with the "&action=report&lp_id=x" parameters. That should give you a first idea of where to look for the function calls that get the data you want.
Then showing this information on the course homepage is mostly a question of checking the main/course_home/ folder and see where you want to put it. You might need to modify templates in main/template/default/, but not all pages are supported by templates yet.
I will try and be succinct and you can ask for further information if you feel it would help.
We have designed and built a website for delivering training courses. We are continuing to add Courses and Lessons. Our design approach has been to design the Lessons in a similar way to designing a book in that each Lesson contains many 'pages' with no scrolling, of a fixed size, and the text and images carefully laid out individually with attention to the flow of the content and the use of white space. A navigation bar at the bottom allows the user to go to the next or previous 'page', jump to any of the sub-sections of the Lesson or jump to a specific 'page'.
We have created hundreds of Lessons and each Lesson has been approximately 20 'pages' in length. Our simple but effective approach has been to have a single html file for each Lesson and create each 'page' within its own Div. The visibility of the Divs are controlled by JavaScript functions called by the navigation bar at the bottom of the window (swf file). This way when managing and laying out all of the content we don't have thousands of individual html files and navigating a Lesson is simple. Also we can easily open up a complete Lesson and review it in isolation in a browser.
Just to complete the picture we have developed Course html files which act as a wrapper to pull in and display collections of Lessons. The Lessons are displayed within an iFrame in the Course html file and xml files are used to determine which Lessons a Course contains.
The project has been very successful (here comes the 'but') but our client is now increasing the length of new Lessons and it is this which is forcing us to re-consider our approach. Our client has a very managed corporate intranet and all Users have IE8. When viewing a Course and clicking to view a Lesson the whole Lesson has to be downloaded just to view the first 'page' (you knew that of course!). It was slow but acceptable before, now it is becoming a real problem.
So, eventually, here is the question: how could we evolve our approach to delivering our content more efficiently, asking the server to deliver page by page rather than a whole Lesson up front?
When the project started we were told by our client hosting the website that we could not create a dynamic website accessing SQL or similar so we went static with xml data. We have more freedom now and could employ a more dynamic approach. However I would prefer not to start again as we have a huge amount of legacy content. An ideal would be to evolve our current approach but to manage the downloading better.
I look forward to hearing your thoughts.
Regards
Chris
So you have some javascript like
openPage(pageId);
That takes a div id, hides the current "page" and opens the new one. You probably have a collection of those "pageIds" somewhere that provides the inter-page navigation (or you could be building it dynamically from the div ID's, but that would be tricky, distinguishing "page" div ids from normal div ids, so I'm sticking with my first assertion, you are keeping a list of ids.
I'd suggest adding a url to each id, and having the javascript check the iFrame's location against the requested pageId, and if it's different, load the new html file. It could default to "current location" so you don't have to modify all the existing content, just the javascript.
This would allow you to put the first page in a different html file then all the others, and to shred them into appropriately sized files.
If you are clever, you will kick off a process after you load the first page to go ahead and start pulling the other pages for the lesson into the browser cache so that they are quick to display once the user is done with the first page.
On this page, I want to get my scrolling dinosaur name window to specifically keep that dinosaurs name at the top so the person doesn't have to scroll all the way down to the next dinosaur.
I also want to know if there's an easier way to do this window.
My predicament is this....
I have over 30 dinosaurs on here. Each time I add a new one I have to update each and every one of the dinosaurs pages to add that one new dinosaur. Its not really time effective... Is there a better way without having to use frames?
My code is open so you can look at it and modify it at your leasure.
Thanks!
Vince
At this point I would suggest you go for server side code. Since you have 30 dinosaurs, it would be much easier to create and maintain a simple page using server side scripts such as PHP or ASP.NET to load the dinosaur from a database.
What are server side scripts?
Server side scripts allow you to dynamically generate a page on the fly whenever the user requests a page. For example, take youtube's search page. Rather than generate a seperate page for every single possible search term, they simply have a base template there, and then they fetch the relevant results based on the search query. The same can be applied to your site. You can have one page for all the dinosaurs, and you would just load the appropriate dinosaur based on the url.
Once you do that, putting the current dinosaur at the top of the page would be a trivial task. Since it appears that you already have a fair amount of knowledge in HTML, it should be easy for you to pick up and use some PHP. Codecademy has some excellent tutorials.
Along the same lines as Kevins answer but more specifically I'd like to recommend you look into a PHP MVC framework such as CakePHP, Laravel or CodeIgniter.
You've done all the hard work manually building these pages, which is awfully time consuming.
Once you learn one of these frameworks and you'll rebuild this site in a day.
If your links had id attributes on them you could scroll the list to a position by linking to #whatever. Here's a quick code example of a link.
<li id="camarasaurus">Camarasaurus</li>
Here's a small example: http://jsbin.com/ExExEvAB/1/edit?html,css,output
As for making it easier to administrate, I'd look into PHP since it's widely available and there's tons of resources to learn from. When you're basically looking for is <?php include "dinosaur-menu.html" ?> since you're thinking in terms of frames. You can make it even easier but this alone should make it a ton easier to update.
I really started to enjoy Mixture recently. It's great for prototyping and is, in my opinion, perfect for exactly what you're trying to do here.