I wish to create a local (offline) HTML5 page containing various sized rectangles containing a paragraph of text (and links) that can be repositioned by being dragged by the user. It's not necessary to drop them into any target; simply to drag them. But the page has to remember their final locations and show them there when it is reopened.
I did think of using Canvas to do this but drawing the text in the rectangles is very slow. Better to create a div (with a border) for each paragraph. The closest solution I have found so far is this one, where one drags the "aside". The original page is here.
What code would I need to write to store these locations locally (offline), preferably by self-modifying the HTML page itself? I understand there are localStorage and sessionStorage objects in HTML5 but have not tried using them.
PS This page is for my own use and as I use Firefox I am not interested in other browsers. I would prefer using Javascript to jQuery, but all suggestions will be most welcome.
PS While waiting for a reply, I stumbled across this site:
built with HTML5, CSS3 and JavaScript, the diagrams are created with canvas and offline usage is possible, thanks to ApplicationCache.
Would this be the way to go?
You could save the div information (positions and width, (eventually height too)) into the localstorage. When you are reloading the page you just need to get them back out of the localstorage to rerender the whole thing.
jStorage is a simple plugin where you can "speak" to your local storage. You could store an object (serialized) into this and then loop it out on your page load.
Related
I am having trouble using Nightmare js to access elements within a specific frame on a webpage that gets its elements from a different html file. These are frames, not iframes, so plugins such as iframe-manager do not work.
I also cannot go to the src page of the frame as what I am attempting to do opens another window when clicked on the frames html.
On the original webpage clicking the button on the frame reveals information within another frame on the webpage. It would be easier (and potentially possible, unlike other options) to navigate within frames on the original webpage.
Any guidance would be appreciated thanks.
Decided to cut my losses and switch to puppeteerJS
Unlike Nightmare, it supports switching to normal frames via their contentFrame() method and $
No shade on Nightmare though, its a good API, just lost support for this frankly archaic web design choice
I'm trying to make a window based application for web browsers. The number of windows is considerably high, so I'm storing them as HTML files (one per window) that I asynchronously retrieve from the server according to user interaction.
To add a window to the main page, I first add the link elements (CSS) of the downloaded document to its head section, and then I append the content of the body section to a certain div. When a window is closed, I just remove these elements.
This approach seems to be working nicely, but I can see that sometimes when I add a window, its elements are visible out of position with no style, and after a brief moment they are correctly painted.
I don't have a strong background in web programming, but I suspect this might be related to what it is called "browser reflow". Does it mean that it is taking too much time to repaint everything? Is it possible to just hide these "unstyled" elements until it is safe to show them?
Any guidance would be appreciated.
Some time away from the computer seems to have relaxed my mind. I was erroneously assuming that adding new link elements to the head section would load the CSS files immediately. Obviously, the browser needs to retrieve them from the server first. So, the DOM elements I'm adding don't show their style because the CSS files have not been downloaded yet. I think this is the right answer.
I have a page with a series of divs. Each div represents a slide in a slide deck. I need a series of thumbnails, one for each slide. Ideally these thumbnails would be rasterized versions of the slides: a PNG data: url would be perfect. I'd like the work to be done in the browser, and I'm okay with things that only work in one of the modern browsers (e.g. chrome, or firefox). I suspect this is impossible, but would love to hear otherwise.
The method toDataURL() on the canvas object is essentially what I want, but the divs in question aren't instances of canvas, so that won't work.
One solution can be to render HTML to a canvas by embedding the HTML into an SVG image as a <foreignObject> and then drawing the resulting image via ctx.drawImage().
Read the article on MDN here, or take a look at rasterizeHTML.js which is an implementation of said approach.
The limitations are that your content should all be same-origin clean (i.e. accessible by AJAX).
Disclaimer: I am the author of rasterizeHTML.js.
It isn't possible on the client side as this is forbidden to protect from potential frauds like for ie script that would take a screenshot of your page with some private data and send it god one knows where.
Although...
it is possible to copy whole HTML to use it as a thumb preview/whatever and use CSS3 transformations (scaling) + add overlay over it to prevent interactions/text selection etc to mimic a thumbnail of a div.
and there was an option in firefox/chrome extensions to save page to an image - though not sure if it was possible to take only part of the page as an image
or you can always do like google does on its search results page with their page preview (click the magnifying lens near the result title) - have a robot machine which enters the page and takes a screenshot of whatever to produce the preview of the page using this data - don't know how much you WANT to do that but if you wanted it that bad... :)
I'm afraid there is no easy way to do what you want and the CSS3 trick one seems to be the easiest one to pull of.
you can rasterize html to a <canvas> element in javascript with the rasterizeHTML library:
http://cburgmer.github.io/rasterizeHTML.js/
Here's my problem:
I have a Flash object on my page.
The user can change views within the Flash. [Not directly relevant but possibly useful: when this happens, the Flash creates a JavaScript event.]
I'd like to create separate Disqus comment threads for each Flash view, and according to Disqus's customer support, this needs a unique URL (not just hash fragment) for each comment thread.
It's not possible to write to the URL (as opposed to the hash fragment) without reloading the page (except in newer Webkit browsers).
However, I'd really like to avoid reloading the page, and having to reload the whole Flash object, each time the user changes views. But I'd really like to offer unique Disqus threads on each Flash view.
Can anyone think of a smart way I can get round this?
Could I put the Flash in an iFrame and not reload it when the rest of the page reloaded... or is that impossible?
You could put the cart before the horse and make an AJAX call to replace your main page content elements, so long as the <iframe> is a direct child of the <body> and the main content is a sibling (not a parent) of it.
That is impossible as the iFrame is part of the loaded page. The only, but very ugly, way to implement this is using a frameset..
Why not make two iframes? One as big as your body, the other one smaller, centered, and with a higher z-index.
Then just navigate the bigger iframe and leave the rest of the page alone.
Yes, it's ugly. But ugly questions ask for ugly answers :)
Here's the thing: I have a Google Map with a lot of markers in it.
The problem is that the map loads, stays empty for a little while and only then markers are displayed. The markers are customized PNGs.
My idea is to "preload" them (not sure it's the right word) so they appear almost at the same time as the map.
What I did so far is to add the same images I use on my map, outside of the map, earlier in the page in display:none;
I'm not sure but it seems like the time between the map and the images are displayed has been reduced.
Is it the best way to do it, and is it a good practice?
You could use "sprites" i.e. a collection of separate images on 1 single png. This bears the advantage of requiring only 1 load i.e. less separate loads. Google GWT pushes this technique a lot (i.e. Image bundles).
The value of this technique increases with the number of discrete images that require loading: the more separate images, the longer it takes to load them.
Don't use display:none for preloading. Because an element set to display:none doesn't render any of its physical attributes, the browser doesn't bother downloading it until it's made visible.
An alternative is to use visibility:hidden, but you run the risk of running into a user agent that does pretty much the same thing. visibility:hidden requires that the browser compute the box model for the image, which requires that image is loaded (to get the dimensions). I don't believe this works in IE6, though.
The last technique (and my favorite) is to create a div directly before your </body> tag. Position it absolute with left: -99999999px; top: -99999999px. The browser is forced to render the images (and consequently load them) and there's no messy Javascript to deal with.
Now, to integrate this with your issue, put the code for your Google map after your "preload div". Your browser will be forced to load the images before it runs the code to create the map. This should solve your problem.
Hope this helps!
From what I recall of most modern browsers, images are always loaded once (given the src of the image is the same). I guess you mean loading them before the maps load.
In my opinion in does not really matter that much. Markers should be relatively light compared to the map image itself and I can't really use them without the map anyway.
If you think it improve you user experience then I think it is a good practice, but I'd try to get them on a more cleaner way, probably an ajax call early in the page load?
Take a look at Ajax In Action: Preloading Images