I'm trying to create documentation for use offline (included on a microSD card). I can't assume that the user will have Internet access, nor do I want to assume they will have any installed applications besides a web browser. Therefore, I want to utilize the web browser to dynamically read files. For example, the page might look like this:
Select chapter: <drop-down-list>
Once they select the chapter from a drop-down list, it will simply display under the "Select chapter" part.
Each chapter is a separate .html file. I thought of going old-school with frames, but even then I don't know how I would load the frame based on the drop down item selected. Then I thought I would consider Ajax to not be so 1996, but it seemed like the method for AJAX is "GET" which requires a real webserver.
I know this is very vague, but if somebody has the skills to just whip out a sample how to do this any way possible, that would be awesome. Thanks.
Use selected chapter .
To be more specific, Because you are using a select box, you should implement an onchange method which does something like
document.getElementById('your target frame ID').src="your source html path";.
Please note : Though your question is reasonable and you have understanding of other options available to you, due to exaggerated writing you would get downvotes. You better edit your question just to the point.
Only some browsers will support reading local files using XHR by default (Firefox does, Chrome needs extra flags).
IMHO you should use simple hypertext/HTML instead.
You could have it all in one page but hide/show what you want on chapter selection. Or simply make a huge html with a table of contents on top and use anchors (classic FAQ, help...).
Related
First of all, I have a background in C (++), Java, MATLAB and Python, mainly used for scientific and electronic applications (Math operation on data, reading data from sensors, microcontrollers).
But i'm relatively new to both HTML (CSS) and Javascript.
For both I've read some books. In HTML books, multiple pages are done by links (<a></a>).
In javascript (which feels a lot more natural to me than HTML), I've seen some examples where there is only 1 html page, full of divs, who are shown and hiden each time a certain page needs to be shown.
This is done with the Jquery command $('#div1').hide() and $('#div2').show();
Now my question is, what is the best practice? When is it better to have multiple HTML pages, and when is it better to have just hide/show divs with Javascript?
Thanks
Not Every one Can Use Javascript. Not Every Computer Or Browser Has The Basics Of Java Installed. But Every Computer Can Read HTML every Browswer Can Read HTML.
To identify If a visitor is using java.
How to check whether Java plugins are installed or not in a browser using Code .?
Java is mostly installed now days with the browser some basic functions. But older navigator or IE browsers dont always have it installed by default.
More Info Here also
How can I detect the Java runtime installed on a client from an ASP .NET website?
The easiest is using <ul><li> css navigation themes. Check this site out for more info.
https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
When you have multiple html pages and user clicks on links, then on each click a new web page has to be fetched from server and then rendered.
Whereas when you do it in java script the same web page will be altered, so there are no additional requests to the server. And this will be much faster than loading a new web page.
But remember the initial loading time is second approach is longer but its negligible.
Let me point out that there is no "best practice" to the question that you are asking. It is entirely up to the team if they want to push all the content in one page or keep them separately.
If in case you have a content that requires decent amount of images to be loaded, or contents that you are sure will rarely be seen, you might want to keep them in separate pages so as to make the page load faster.
If you have heavy contents which requires a lot of interaction with javascript/jQuery then you certainly might want to keep them in separate pages so that later when you want to debug/add to the code it can be easily done.
The vice versa of the above holds true as well.
If in case you just have small content, or simple text content then you can easily do it in a single page.
Maybe you should use a tab component ? bootstrap wraps one very nicely:
http://getbootstrap.com/javascript/
Maybe thats the best approach, also take a look at angular.js routes in specific, it should do what ever you are looking for.
I want to be able to open an Excel sheet using Office Web Viewer, HTML viewing component. (This seems to also be called the "Office Web Apps Viewer".) The viewer component is a really excellent HTML office document rendering engine, but I can find absolutely no documentation online for it. It's even hard to discern what its correct name is. (Does anyone have details on the API?)
I need to be able to load the document and immediately call a JavaScript function to do a search so that the document opens with the search result already highlighted. Even better would be to be able to set the search term in the query string given to the viewer component.
Does anyone know if this is possible and if so, how?
I can say with quite some certainty that there is no such API as the viewer is not intended for such usage. Yeah, I know, not the answer you wished to hear, but then again, that's just the way it is. It's just a viewer, not a component to be used as part of applications.
The quick & dirty solution: Using an extension
One way to achieve what you want is to write an extension that would expose this functionality to you. Of course this would require your users to install this extension, but it is definitely an option and such an extension would be relatively simple to write.
The better solution: PDF.js
Convert your documents to PDF's using some server side solution.
On Linux with OpenOffice.org this could for example look like oowriter -convert-to pdf:writer_pdf_Export doc_file.doc or swriter for LibreOffice.
Present them using Mozilla's cross browser PDF.js library.
Figure out the PDFFindController how to trigger the highlighting. Take a look at this demo and next at this source file. In there they are definitely triggering the highlighting (search for the object I named before), but as it is not directly addressing this question I am not going to figure that one out for you.
I'm writing code (right now it's a Chrome extension, though I may make it cross-browser, or try to get the site owners to include the enhancement) that works with the contents of a particular <div> on a webpage that the user is viewing, and any pages that are part of the same discussion thread. So I find links to the other pages of the thread, and get them with XMLHttpRequest. What I want to do is just be able to use .getElementsByClassName('foo') on the resulting page.
I know I can do that by loading the results of the request into a div (i.e. Optimal way to extract a URL from web page loaded via XMLHTTPRequest?). However, while figuring out the best way to do this, I read that there are security concerns (MDN - Safely Parsing Simple HTML to DOM).
In this case, I'm not sure that matters much, since the extension would just load a page from the same comment thread that the user was already looking at, but I'd still like to do this the right way.
So what's the right way to work with HTML from an XMLHttpRequest?
P.S. If the best answer is jQuery, then tell me that, but I've yet to start using jQuery, and would also like to know the fundamentals here.
Edit: I don't know why I phrased things the way I did, but let me be clearer that I'm really hoping for a non-JQuery answer. I've been trying to learn the basics of javascript before learning JQuery and I'd prefer not to import a whole framework to call one function when I don't understand what I'm doing. That may seem irrational, but it's what I'm doing for the moment.
Since you say you're not opposed to using jQuery, you should look at the load function. It loads html from the address you specify, then places it into the matched elements. So for example
$("#formDiv").load("../AjaxContent/AdvSearchForm.aspx?ItemType=" + ItemType);
Would load the html from ../AjaxContent/AdvSearchForm.aspx then place it in the div with the id of formDiv
Optional parameters exist for passing a data to the server with the request, and also a callback function.
Specifically, what I'm trying to do is create a mobile version of a site I don't have access to. The best approach I can think of is this:
My site executes their php search file and then displays the results page, but first modifies its DOM to use my CSS. Is it technically possible?
Your site can definitely access web content from another site, filter/transform it however it wants, and then forward the result wherever it wants. It is not a simple problem, potentially, as so much web content is dynamic. For example, if the source site has content that's formatted with CSS that's dynamically built by JavaScript, it'd be fairly difficult to come up with an automated transformation.
Whether the original site's owners will be happy about your site doing that is a separate issue.
I'm looking for a FOSS Javascript widget which allows you to add/remove search criteria using a GUI.
My basis is the search criteria in Mac OS X Finder, but I know I've seen similar systems elsewhere:
alt text http://img714.imageshack.us/img714/579/screenshot20100429at805.png
The basic idea is that each row corresponds to one field in your database, and depending on the type of that field you would get different search options when you select it. You click the + and - buttons to add or remove fields.
Anybody aware of something like this that's already out there? Preferably written to work with YUI, but I don't mind transliterating from a JQuery or Dojo widget.
#lukecyca asked me to post a link to my implementation. This was written for an open source (GPL) project sponsored by a company that I no longer work for, so I can't guarantee that these links will stay up, but here goes.
The source code is currently on BitBucket. There's a client side (Javascript) library that is probably what you're most interested in, but there's also a server side (PHP) component that may be useful. It's pretty messy code (tightly coupled and really rushed), so I'm not sure it will even be useful, but there is a bit of documentation to help explain it. It's also been modified quite a bit since I left.
There's a demo server that's usually running if you want to see it in action. Please note that the username and password for the demo are listed on that page.