I've created a framework in javascript for my personal single page applications, and I'm trying to add the stacking page feature to it.
if you have ever worked with android, you have seen that every new activity or page that is created in android, pushes the previous one back in a stack that can be accessed once the user presses the back button, just like the history in a browser.
the only difference is that in android the page that has been pushed to stack, stays there until the OS runs out of ram or something, but in browser the page gets destroyed no matter what.
now, in my framework, I have come up with a very simple soloution to keep pages in memory so that when user presses the back button, instead of loading data from server, I just find the page in the stack and if it exists, I just bring it to the front and push the current page back to the stack.
but there are some issues with this method:
if you keep the stacked page in a javascript variable or you keep it in the DOM and just make the display: none; style applied to it, bringing it to the front and make it visible requires painting the whole page again and if the page is too large, this means a lot of process and makes the transition between pages extremely slow, specially if you have some animation going on while page transition.
and if the stacked page is visible, and just pushed back using z-index, then the scrolling will cause problem, as the scroll for the previous pages are still available. and if you make the pages overflow: hidden; then still if you stack multiple pages, the scrolling becomes very slow and choppy because the browser has to scroll over multiple layers of painted pages.
and so my question is, is it even a good idea to stack pages with these problems?
or is it just not meant to happen in browsers yet?
Depending on your SPA I don't think it is a good idea to keep all pages in the DOM and hide them with display: none; or a different z-index. What you could try to do is to keep the state / the information of the page in a variable and remove all related elements from the DOM. When the user is going back one page you recreated the elements with the information you previously stored in a variable. This way you prevent to load information from the server and you don't have any problems with going back to any state.
You might be able to optimize it even further by keeping the last page in the DOM and simply hide it and keep the state of the pages before in a variable.
Related
Question: With Javascript, can you tell the web browser to begin loading a page, but don't begin rendering it yet?
Issue: A client wants his web page to show listings like a book. When you click on the next button, he doesn't want the next page to immediately load. He wants the book to close (a closing animation) and then load the next page.
Current status: All links go to Javascript. I show the closing animation. Then, I replace the window location. The issue is that there is a clear wait for the next page to load. It would be nice if I could load the following page into cache while the closing animation runs. In other words, I want to make that three-second animation useful time by loading all the HTML, CSS, Javascript, and images for the following page and then all that happens when I set the new location is that it renders.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and is used to load the next page. After the animation, I flip which iframs is visible and which isn't. This is good except that the back button doesn't work properly. If you click back, you go to wherever you were before you went to the website. You don't hide the current iframe and show the one you just hid. If you click back twice, flipping iframes doesn't work. I have to keep a log of your history. Further, I have to hack the back button, which I don't like. So, I'd like to use a built-in cache method if I can.
Possible solution: I have the main page that had two full-screen iframes in it. One iframe is the current page. The other is hidden and
is used to load the next page. After the animation, I flip which iframes is visible and which isn't.
Yes, this sounds like a good approach.
This is good except that the back button doesn't work properly. [...]
I have to hack the back button, which I don't like.
Single Page Applications (SPAs) can't use the back button as originally intended because the entire application exists within a single document.
Partly in response to this, we have
history.pushState()
which is a really good extension to the History API, enabling new "artificial" entries (describing new states) to be added to the browser's history, which, in turn, enables the back button to work exactly as the user might expect it to.
Further Reading:
http://html5doctor.com/history-api/
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
Is this even possible? To have an mp3 play where it left off when you navigate to a different page on the same website? I seriously don't even know where to begin. Kind of new to HTML, CSS, etc.
Any Ideas? Thanks.
Not across multiple page loads. But you can have a single page which plays audio and provides navigation therein for the user. A couple overarching structural options would include:
Create a Single Page Application (SPA). Here your one "page" would play the audio, and the site navigation would happen within this single page instance with JavaScript/AJAX. The browser would only ever load one "page", but the overall application would dynamically load/unload as elements of that page as you see fit.
(A very old method, but still works) Create a parent page with frames for navigation. The parent (frame) page would contain the audio, and the rest of the navigation through the application would be done in frames within that page.
I'd recommend the first approach, but either would work.
If you reload the entire page (and therefore the audio source), there is no way to provide a seamless playback. There will always be a very noticeable gap due to page load times, even if you try to keep track of the position within the audio track. Slow internet connections will make it worse.
Instead, you can embrace one of those four options:
Single Page App:
As also pointed out by David, my suggestion would be to create a single page application, i.e. a page that loads once, then loads/replaces all additional content dynamically. One the user clicks a navigation link, instead of loading a new page (or reloading the current page), you just replace the main content, using AJAX. The part that provides the audio stays in place.
Additional tab/popup/window
You could create an additional tab, popup window or window just for the sake of playing the audio. One example of this is the German radio station "radioeins". At the time of writing, their website provides an orange button in the top right that will open a popup window for their live stream, allowing the user to continue browsing their website with the music continuing to play uninterruptedly from the popup. I would only go down this route if the single page app is not an option, as popups or additional tabs are bad UX and popups might be blocked by browsers.
iframe
You could provide the main content of your page within an iframe, or the other way round, provide the audio from within an iframe. I would recommend against this, as there are several disadvantages to this approach.
Frames
Frames would provide a similar approach to iframes, but they are deprecated, so I strongly recommend against this one as well.
tl;dr
Make it a single page application if you can, otherwise resort to a popup-solution.
This is going to sound pretty generic but I don't know how else to ask this question.
I am using Selenium Webdriver (on python) to automate the download of some images. I can access a list of links to those images after a search. The full list of links is of known length, but gets loaded after successive scroll downs.
For example, after launching the search, I may know there are 210 results, but only 20 of them get loaded. Scrolling down multiple times will load the other ones. Workflow example:
Insert search details, click search button
Read total number of elements
Scroll down until the number of displayed elements is the same as the total
Download stuff
Close download page, go back to point 3.
The scroll down is really painful because the image download is on a different page, and closing the new page will reload the original search results without all the scroll-downs. Meaning I need to scroll again.
In order to speed up this process, I tried using PhantomJS and upping the vertical resolution of the page. However, this does NOT load all elements and the process fails, probably because the vertical resolution is enough to load all 20 elements and cannot trigger the scroll-function to load the others.
So I'm guessing there is some function that gets triggered when scrolling down. But I can't find it in the page source.
What I know is that it loads a <div id="loader"> that I see every time new items are getting fetched (and every time the page hangs because of connection problems).
My question n.1 is whether calling the function directly without scrolling, (i.e. d.execute_script("some_magic_function") would save some time compared to d.execute_script("window.scrollTo(0, 1000);")). Perhaps not, so I should just use the actual scrolling behavior as I'm doing now.
But if there could be an advantage, then my question n.2 is how I can find the function that triggered the loading of new elements (and of the <div id="loader">). I've tried looking for onscroll or just scroll but got nowhere.
I have seen a method on Youtube and various other sites, which, upon changing to another page on the same server make the browser not directly redirect the user to the new page, but
stays on the same page until the new one is loaded
dynamically loads the new pages content seemingly without any idle time inbetween page changes
shows a progess bar on the top of the screen
leaves any html headers or other fixed content unchanged
In this gif you can see the animation on top of the page, upon changing the page, there is a progress bar and the new page is displayed seamless.
Here is where I am a little helpless, my attempts of finding something useful in this manner brought me practically nowhere, i do not know if there is a library/framework for this use that i simply cannot find or there is some messing around with dynamical page loading i do not know about.
How is such an effect achieved and what techonolgies are requiered?
You need a single page application framework. For example look at AngularJS
If you want, you can do it with pure JS code using AJAX.
Most of the WebSocket examples out there are centered around a single web page, where the content updates with chat, financial or some other live metrics - makes sense for a single page.
However, given a news feed scroller, where that feed needs to exist on every page of the site, I would like to open the conversation up to some possibilities for this.
Currently the site is a classic ASP site, but will be eventually migrated to MVC/MVP.
Since we don't want to open/close the web socket every time a link is clicked on (currently loads a new page), I was thinking about an IFrame type of UI, which can be done with updatable DIV's and jQuery.
Given a simple containerized UI template with a header (c1) and footer (c2), content in the center (c3) with left (c4) and right (c5) bars, when clicking on a link on the header, where the main menu would reside, instead of updating the entire page, I could load a page into one of the containers (updatable div), preserving the WebSocket container's connection - avoiding needing to re-establish the connection.
What are some other options to consider to accomplish this?
Thanks.
UPDATE
If you take a look at FB's implementation, their status bar on the right and even chat, stay on the page across link clicks. How is that accomplished?
Using IFrames or otherwise modifying your page state (rather than full page loads) is probably the best direction right now but shared Workers may also do what you want. The idea is to allow multiple pages loaded simultaneously from the same origin to share a web worker. I suspect that the shared worker will persist even for page navigation within the same site. However, I have not actually tried it and the W3C spec is not clear to me on this issue. I would be interested to know if this is in fact true.
Note that Shared Workers are in Chrome, Safari and Opera but IE and Firefox have not committed to supporting shared workers yet:
http://dev.w3.org/html5/workers/#shared-workers-introduction
http://caniuse.com/#feat=sharedworkers