Develop Reference

how to store large files (pdfs) into the browser file system

Background:
I have built an offline HTML5 application that stores some data into the local browser db using pouchdb.
Now the requirements have changed and I have to store large pdf documents(around 200 of them, each with 5mb - 8mb size) into the local browser so the user can view it offline when required.
Issue:
I don't think that it is a good idea to put these large documents received from server into my in browser database using pouchdb.
I would like to know if there is a way to put these documents into my device some how and then get a url reference pointing to the location within the local device ?.

Include the PDFs in your offline manifest, so that they're cached with the rest of the application. Then you just use your normal URL to refer to it, and it's satisfied from the offline app cache.
Re your question below:
When the application is loaded in the browser then i store the details of the associated pages into the browser via a manifest file. And when the user clicks on a 'SYNC' button then I communicate with the server and fetches all the pdfs associated with the user. If I have to persist these pdfs using the manifest then how can I do it ?.....the manifest is already stored
The way we do something similar is this: We have separate pages for the things that the user has taken offline (a day's worth of appointments, for instance), and a list page driven entirely by client-side data that lists those pages. Here's how it works:
When the user wants to take something they're looking at offline, they click a button which opens a URL with the information telling the server what they want (say, example.com/offline/stuff-saying-what-they-want-here/), and the server generates a page with that data embedded in it along with a manifest for the page and any assets it requires. So at that point, that information is available offline on that URL. When it loads, the page registers itself in a list in localStorage, giving a description of the page and its URL.
The list page (say, example.com/offline/list/) has its own manifest and assets, which don't change often because it's driven entirely by that localStorage information. It shows the list of things they have offline with links to them. It's primarily a convenience for users, in case they forget to bookmark the individual things they take offline; e.g., the idea is that they'll bookmark the list once, and never have to worry about bookmarking individual pages. (They could go hunting through their history, but it's a pain.) The list page keeps itself up-to-date by getting the list of known pages from localStorage when it loads, and subscribing to the storage event so if you load other pages in other tabs while the list is open, it sees them arrive and updates its list.
So without knowing anything about your app, it sounds like perhaps your main page could be like or list page, and clicking "sync" could open a page for the PDF, generating the manifest on the fly, and that page could register the PDF in localStorage the way we do with our offline pages so the main page can show their status correctly.
Obviously, there's potential there for the actual appcache and our localStorage list to get out of sync; we can't help it if a user clears appcache (which would make us list things that can't really be viewed offline) or clears localStorage (which would make is not list things they could view offline), but there we are. Users mostly don't do that, all that often.
In the future, you'll get much more granularity and control with service workers, but for now since service worker support is very thin on the ground so far, we're stuck with appcache and its fairly stodgy way of defining offline assets.

T.J. Crowder is right: if your PDFs are static and known in advance, then AppCache is the way to go. Unfortunately it does mean that each and every PDF will be saved in the user's browser when they first load the site, but maybe that's what you want.
Else if the PDFs are dynamic and not known in advance, then yeah, you may see performance problems from PouchDB with 5MB attachments. But if you want to try it out, then check out PouchDB attachments and blob-util. blobUtil.createObjectURL() is exactly what you're looking for in terms of a "local URL."

Javascript cookie to distinguish between the page hits/views?

Here's the thing, I have created a mobile web-app having 6 pages only (main.html, venue.html, program.html... , aboutus.html). Ss you guys can see main.html is the main landing page. We also have native mobile apps for Blackberry and iPhone and these native apps use some of my pages in their widgets. Now the issue is I need to distinguish between the page views or hits in such a way so that I could get a clear idea about from where my page is being requested or viewed and then hide/show some stuff depending upon from where the page is being requested. One interesting thing, as mentioned above main.html is the main landing page of web-version so we never use this page in our native apps. So I need to create a cookie on main.html and wanna check that cookie value on each of 6 pages. By following this approach what I want to do is e.g.
Let us say: If I got a hit from native app for venue.html, then in this case I will not get any cookie value as this user has not visited the main.html and reverse of this if some user has used my web-app/version then he/she has to go through the main.html (user is forced by us to view the main.html page first then others).
So after exploring everything I need you guys help to: 1. How to create such kind of cookie in javascript on main.html? 2. how to check that cookie value on rest of pages to know from where that page is being accessed?
Note: I don't want to store any expiry date/time in cookie and in setcookie method I want to set some constant value instead asking user to set some dynamic stuff through some alert dialog.
Any code snippet will highly be appreciated

Doesn't sound like you are doing any pre-processing on the serving side of the equation. Meaning all your pages are static pages, you might want to look into pre-processing your pages using ASP, PHP, Perl or whatever other programming your server allows. By doing so, you open up the option of tracking movement of the user within your application.

Javascript file modifying an html file that it is not called from? Jquery Selectors

Is its possible to have a javascript file that is aware of two different HTML files? And how would I do this?
I would like to be able to have two pages. index.html and pictures.html. I have an index.js that changes the display properties of index.html (it puts data based on people into tables and makes it look nice). I would like this current index.js file also to be able to edit the pictures.html file and change information there. index.html would link to pictures.html to display pictures of a person (based on the persons name I have them saved smith1.jpg, smith2.jpg, reagan2.jpg, ect). Is there anyway that this javascript file could get DOM elements based on their id or class of the second file (pictures.html) even though it "lives in" index.html? When i say lives in it is called at the top of the index.html page.
thanks

A script can access elements on another page if it was loaded in some way of connection.
For example, if you make a popup using var popup = window.open(), the return value will contain a reference to the opened popup and this allows access to elements within the popup. E.g. popup.document.getElementById('something'). Pages loaded within frames, iframes and such have similar ways of access.
So yes, if your page loads the second page its script can work there as well. I suggest avoiding this beyond opening and closing popups from a script though; a script should stay inside the box of its page and if it needs to do larger operations on another page, that usually means that you need to change your code architecture a bit.

You'll need to explore server-side programming to accomplish your goal.
http://en.wikipedia.org/wiki/Server-side_scripting
...Or you could write a client-side application in which "pages" are separate views of one actual page or are generated from backing data structures. If you want persistance of what is created/edited, you'll still need server-side programming.

You can use the html5 (group of technologies) postmessage api as well.. This allows you to send messages to another page, and in that page you define an event handler that knows how to handle the message.
This also works across domains.
Here is a blog with an example I just randomly found via google:
http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/

Not possible on the client side if editing the actual HTML file is your goal. If getting pictures to show up depending on stuff a user does on another page is all you care about then there are lots of options.
You can pass small sets of data like stuff the user entered into tables via cookies for accessing the right sets of image files in a pre-established scheme. This would actually persist until a user cleared out cookies.
You could wrap both pages in same-domain iframe elements with the parent element containing just the JS. This would allow you to persist data between pages and react to iframe load events but like everything in client-side JS, it's all gone when you reload the page.
Newer browsers have working file access objects that aren't total security nightmares. These are new and non-standard enough that it would take some doing to make it work for multiple browsers. This could be used to save files containing info that the user would probably have to be prompted to upload when they return to the site.
If the data's not sensitive you could get creative and use another service to stash collections of data. Use a twitter API to tweet data to some publicly visible page of a twitter account (check the Terms of Service if you're doing anything more than an isolated class project here). Then do an Ajax get request on whatever URL it's publicly visible at and parse the HTML for your twitter data.
Other stuff I'd look into: dataURIs, html5 local storage.
Note: None of these are approaches I would seriously consider for a professional site where the data was expected to be persistent or in any way secure regardless of where a user accesses it from.

Show all bookmarks using javascript

I'm trying to list all of my bookmarks using Javascript. Is there any way that I can accomplish this? Thanks in advance for any help.

In web design, there are some limitations due to security. Such as this, javascript would have to read your web folder on your computer and display the information from your computer. That would be bad security wise.
Use social bookmarking, and update it when you need to.

The only way to show your bookmarks is though xul aka an extension if this is what you want then look up places api. Places is a sqlite database located n ur profile folder.It's name is places.sqlite

If you use Firefox, there is a file called bookmarks.html in the profile folder. You can open this file and insert some JavaScript.
But as mentioned before, you can't (for good reasons) not access the bookmarks directly using JavaScript from any page.

How can I get HTML to link to a browser (or system) specified URL?

I'd like to be able to create a "HTML link" that the user can click on and be taken to an URL (location) specified either in the browser (preferences?) or system environment.
Is this possible? Any suggestions on how to do it please?
For example, it may look something like this (or alternatively it could be a clickable image or even a submit button):
"Click here to go to your preferred news site."
When the user clicks on "here" the browser would go to a location specified not in the HTML but somehow in the browser (preferences?) or some system environment variable (OS specific etc.)
Of course, the user would have to set up this preference or environment variable (or have some local application or better Web page that could set it - when approved by the user).
This is sort of like most OS these days allow you to set "preferred app" for image processing or playing media. I would like to set preferred Web sites for certain tasks.
Thanks for any suggestions. Hopefully with Javascript and modern browsers and perhaps HTML 5 something like this is possible.
Update: I would like the user to be able to set this once for themselves (e.g. in the browser or the OS) and then for this to work on any site they go to that includes the same "abstract link".
So Web site A and web site B could both an "abstract link" to go to the user's preferred news site and when clicked on the browser would go to the site specified in the browser or the OS). So it cannot be site-specific (like a cookie?).
Cheers,
Ashley.

The general process would be something like this:
Set a cookie using js. Then create a function that retrieves the cookie and redirects. Then trigger an onclick or an onmousedown even like onmousedown='retriveAndRedirect()'
Check out there resources.
QuircksMode's JavaScript Cookies Reference.
W3School's JavaScript Cookies Reference.
UPDATE:
I see what you're trying to do here. In order for your redirection to work from any site, that site has to host your redirection and preference method somehow using js, html, serverside script, etc...
Your other option would be to build a plugin which the user would have to download, that way you wouln'd need any site host your redirection and preference methods for you.
As far as your link retrieval methods go you can either use cookies, or store the links in a database and then call on trigger.

You can store the preferred web site in a cookie. Simple version using the readCookie function from there:
Click to go to your preferred news site