I'm developing an app for mobile devices. I'm using jquery mobile and phonegap (to access the internal functions of the device). I have a big xml file with 10 to more than a thousand nodes. Basically I need to display each node on its own page. In jquery mobile it's common practice to build one html file that contains all pages.
I'm playing with the idea to build something like this:
<div data-role="page" id="1">JS template filled with content of node1 from xml and linking to page 2.</div>
<div data-role="page" id="2">JS template filled with content of node2 from xml and linking to page 3.</div>
If I create such a huge page by parsing the XML file with javascript, I'm concerned that the app would be tremendously slow. In my experience browsers cannot handle pages that well, if they are very long. The xml file can contain text, and links to images, video and audiofiles.
I tried to render the xml file via xslt on client-side, but ran into the problem, that most android browsers do not support xsl (at least mine does not).
I need to find a solution on client-side, because the app should work also without internet-connection.
Can you point me to the right direction? Maybe I am wrong and it's no big deal if the main html-file contains a couple of hundred pages? I also had the idea to fetch the pages one by one from the xml, since I don't display more than one page at a time. But I'm not sure how to keep track of the nodes that I have already displayed to the user. The xml file contains no auto-incrementing identifiers. So it would be difficult to access specific nodes in order via xpath, or am I missing out on something?
Thank you!
An XML file with a thousand nodes is pretty small by most people's standards (and one with 10 nodes is miniscule), so it's hard to see what your real problem is.
Although some mobile browsers do not have native XSLT support, you could try Saxon-CE which offers an XSLT 2.0 implementation that runs on any Javascript-enabled browser.
Related
Due to the safety rules of the same-origin policy (SOP), i am unable to load certain local files when opening an index HTML-file directly with a browser. Using a "live-server"-plugin works fine, as all the files in that case are "on the same server". I need to distribute the website as a client-side only app - A folder and html file to be opened with your browser. Solutions to the problem always seem to require setting up a server. Is there any way to avoid that, and keep everything on the client?
I am making a mathematics e-book, that i want to distribute as a website people can download. I want it to be client-only and a download, since if it were to become popular, then i wouldn't be able to afford running the server (as i would be studying at that time). I have chosen html and javascript over EPUB, as they are much more powerful, and allow for tons of interactivity (and much more efficient development).
So far i have a browser.html file, that loads individual pages with JQuery .load(). This browser.html file has both html, and javascript. The CSS is in an external file. The individual pages have many pictures, that are also stored locally on the server. As the pages are contained in subfolders, the picture URL's go out into their parent folder, and into the assets folder, like: ../../../Assets/Chapter1/Talopgaver og intuition/Misc\F\solsystem.png. I use custom-elements (shadow-DOM) to handle various complex aspects such as questions, answers, along with certain other things too. Other than JQuery, i also make use of Math-Jax, and a "polymer" library that helps with cross-browser support of custom-elements. All the pages in a certain chapter are loaded in the start, and then put into a array (this makes it fast to scroll through pages as you often do in books). They (as strings) are each modified slightly to automate certain tedious parts of development.
I have tried to open the browser.html file on chrome, firefox, internet-explorer, and edge. They all load the html that browser.html inherently contains (properly styled even), but none of them load any external pages. Interestingly, one of the images used in the browser.html file still works (i would think that would be a local file too, not?). If have tried turning off calls to ajax or external CSS, but nothing changed. I have searched for other people with similair problems, but all the answers just reccomended setting up a server.
When loading the page with a live-server plugin, the result looks something like this:
browser.html page opened with "live-server" visual studio code plugin by Dey, Ritwick
When opening the browser.html page directly using chrome, it looks like this:
browser.html page opened directly with chrome
The error i get (after having removed an ajax .get() call) isn't particularily descriptive: simply "Failed to load resource: net::ERR_FILE_NOT_FOUND" from "platform.js:1". Even if turn off the call to start loading pages, it gives me excaclty the same error messages.
Looking at the network reports, with live server it looks very ordinary. without it's pretty weird. It says it takes hours to load browser.html, even though that clearly isn't the case. It fails loading platform.js, after using 22 seconds trying. The networks report looks a bit more healthy when turning off the call to load pages. It gives up loading platform.js faster (8 seconds), yet still supposedly takes hours to load browser.html.
Though it shouldn't ultimately be neccesary, i have linked the entire browser.html document below, along with an example of a page it might load (the example in the first picture above).
browser.html. Too big for a stackexchange code-block embed
Page in previous picture (page 37)
Any help is appreciated!
EDIT: Main problem seems to be the loading of pages using JQuery.load(). Even on a simple testing website that operation is just not possible without running on a server.
Is it possible to create a single html page containing embedded D3js charts, CommonMark text, and equations (e.g. Katex or MathJax) and have it all rendered the browser offline?
Must have:
Works offline using modern Firefox/Chrome/Safari, after having
downloaded a minimal number of JavaScript libs.
No requirement for installing anything beyond the web browser. So no local http server, Pandoc, R, Python etc.
Should have:
Possible to write everything in a single html file, which opens in a normal modern browser.
Good archival properties with minimal maintanence.
Motivation:
We work in a high security locked down IT environment and can’t install stuff, but we do have decent web browsers and can run javascript in them.
We routinely share small analytical reports internally, and are experimenting with delivering a directory containing
an html file (with embedded JSON data), and
downloaded D3 and Underscore librariess
All the internal customer has to do is click on index.html. So far this has been very succesful, but we'd like to use markdown and equations too.
We are vaguely aware of data science workbook solutions like Jupyter and Observable, but not sure that these meet our criteria.
Clarification
I know we can download libs and place them in a dir alongside index.html, but I'm not sure if a JavaScript library exists which can render the markdown and equations and write the results directly into the DOM. And even if such a library exists, where in index.html would the markdown be written? Is there some kind of html tag which can just hide a load of raw text which will be parsed by JS?
To answer your question, it is possible. You'll either need Node app that will render static HTML pages or simple HTML page with embedded Javascript. Since all these libraries are available as UDM packages, I suggest 2nd option.
CommonMark CDN: https://cdnjs.com/libraries/commonmark
KaTeX CDN: https://khan.github.io/KaTeX/docs/browser.html
You'll only need to download these libraries and include them in page. KaTeX includes JS to convert simple text to rendered mathematical equation, you only need to give it text and element where to render equation: https://khan.github.io/KaTeX/docs/api.html. CommonMark is similar but it only gives you rendered HTML, you need to insert it with element.innerHTML yourself: https://www.npmjs.com/package/commonmark.
I am creating a Ruby on Rails app. A specific page in my app is divided into several sections by <div> tags. Each <div> includes a combination of text (using different fonts), symbols and mathematic formulas. I use MathJax and a few other Javascript codes to display them correctly and everything works great on my computer. However Javascript is not enabled on everyone's browser and some Javascript codes might not load correctly on some other people's browsers. One solution I was thinking is this: after all the javascripts are done processing and the page is displayed correctly on my computer (server) I use some code to generate a snapshot of each <div> in PNG and send them to the server (for example I click a <button> tag on the page to activate this code after I'm happy what is displayed is correct). Then I'll save these images in the database and serve them which will look the same on everyone's computer regardless of whether Javascript is enabled, what browser they're using, etc. Is anyone aware of a code or command that I can use? Please note, currently after the page is loaded, Javascripts process the HTML content and produce the correct display. Also I don't want to take a snapshot of the whole page; snapshot of each <div> separately.
Thanks a lot.
Well this is a client-side problem, here is a javascript that will work for you http://experiments.hertzen.com/jsfeedback/
You've got a bit of a problem there. Javascript is not executed until the page has finished loading, i.e. all of the information has already been sent to the client. You're not executing javascript at the server level, so you wouldn't be able to do that kind of processing at all. If they have javascript disabled, your code will never get executed.
You could generate the images using Imagemagick or something similar, I know PHP has bindings for that. There are a couple of extremely messy solutions like rendering it in a browser on the server side with something like selenium, but I definitely wouldn't recommend doing that. Overall, it depends on the platform on which your developing, but most major languages have support for generating images that don't require 100% javascript.
I am developing a WebView based Android application. This application is very responsive and fast on major Android versions i.e. 2.3 onwards but it's very slow on Amazon Kindle fire. One of the reasons for this sluggish behavior is it's reading lots of xml files (40-50) to load contents in a single html page and there are also hundreds of images per page.
One solution that I can think of is to read and parse xml files using native Android APIs (in a thread) and then incorporate the parsed xml into the html page. Could anybody please tell me how to use Java object in JavaScript? Any help would be highly appreciated.
For your parse slowness issue
Have a JS-> Java Interface to parse in Java and have those XML data fetch operations in Java too.
Displaying too many images slowness
Display only selective set of images as you scroll. Displaying all the images together puts a heavy load on the browser rendering. So use a Lazy Load (jQuery plugin) - http://www.appelsiini.net/projects/lazyload to only load when the user scrolls.
Here's my problem: I want to build a website, mostly static but with some dynamic parts (a little blog for news, etc..).
My webserver can only do static files (it's actually a public dropbox directory!) but I don't want to repeat the layout in every html page!
Now, I see two possible solutions here: either I create an index.htm page that emulates site navigation with javascript and AJAX or I create all the different html pages and then somehow import the layout bits with javascript..
From you I need ideas and suggestions on how to implement this, which libraries to use, or maybe there exists even something tailored exactly for what I need?
Thanks!!
I would define the site layout in your index.html file, and then use JavaScript and Ajax to load the actual content into a content div on the page. That way your content files (fetched by Ajax) will be more or less plain HTML, with CSS classes defined in index.html. Also, I wouldn't recommend building a blog in pure HTML and JavaScript. It wouldn't be very interactive; no comments, ratings, etc. You could store your blog content in XML and then fetch and display it with Ajax and JavaScript, however.
While on the subject of XML, you could implement all your site content in XML. You should also store the list of pages (for generating navigation) as XML.
Just another one way. You can generate static HTML in your computer and upload result to dropbox. Look at emacs muse.
jQuery allows you to easily load a section of one page into another page. I recommend loading common navigation sections into the different pages, rather than the other way around to avoid back/forward problems. Layout can be done with a separate CSS file rather than with tables to minimize the amount of repeated code. For the blog, you could put each blog entry in a separate file and load each section individually.
However, I would just use something already available. TiddlyWiki, for example, is a self-contained wiki that is all in one file. It's very customizable, and there's already a blog plug-in available for it. You can work on the site on your hard drive or USB drive, and then you can upload it to the web when done. There's nothing more to it.
Have you considered using publishing software on your computer to combine your content with a template, resulting in a set of static pages that you can then upload to the dropbox?
Some options in this regard come to mind:
Movable Type - can output static HTML which can then be uploaded to the server
Adobe Dreamweaver
Apple iWork Pages
To handle comments, you can use Disqus. It inserts a complete comment system into your site using just JavaScript.
You can use the Google Closure templates. It's one of the fastest and most versatile javascript templating solutions around.