Loading A Web Page Seamlessly - javascript

I have seen some websites that include nice transitions between pages, such as sliding or fading, etc. Most of these I have seen are actually one page that just transitions various sections. Then I came across a website that does it differently.
If you view this site and click the various pages the pages transition smoothly but the URLs are different and it doesn't appear to be one page site with hidden sections.
How is this done? I looked for explanations on how to do this but never found a good answer. Any help in determining how this is done would be great.
Note: I am looking to replicate this feature for websites I build so I am looking for an answer that will explain the idea or process of how this is coded.

The technique you're talking about is using history.pushState() which is quite new feature of html5. More info you can find on MDN - Manipulating the browser history

The trick this page does to move from page A --> page B involves 3 main steps:
Load the whole page B or only the content that is different from
page A (probably using XMLHttpRequest).
Swap in the changed content (e.g. updating the body,..)
Update the browser location bar with the URL of page B without
refreshing the page, using a particular HTML5 history method called
pushState.

Related

Techniques for loading page with several thumbnail images (laravel 5.3)

I have a web site with a section with several small images (about 24) per page. When I visit the page I can see the page being enlarged, text is shown before the associated image and etc. That's not a problem for me, because I know that the web was designed to work this way so that web site visitors could see something before the page is fully loaded. The problem is that, today, people are fighting against this principle to achieve beauty, hiding sections of the page until it is completely loaded is common if not required. I cannot fight this (If I could I would). When I show my website to some developer I can see that he completely embranced this idea of beauty in favor of "old principles".
I never really tried to design a page that has a "smart image loading" so I don't know where to start and that's why I'm here. If you can list me some techniques, plugin and etc that can be used to perform progressive image loads in pages would be helpful.
My page is being loaded by simply returning a view with all the images. I assume that to achieve the smart image loading I will have to get the images and associanted text by returning json from the controller, is that correct? If so, I will have to make a major change in my system. I briefly saw a technique that it sets all the images on the page to an animated gif image and then when the data is fetch from the server (using ajax/json) it substitutes the src atribute of the image, is that a good technique. Again, what the best tecniques are?
You can use jquery and css to display a loading animation before the page completely loads
Tutorial: http://smallenvelop.com/display-loading-icon-page-loads-completely/
Working example : http://smallenvelop.com/demo/simple-pre-loader/
Big Company's website who uses loading animation : https://club.ubisoft.com/
Just a warning: website who uses this technique will look slower, user might even leave the website before the page loads, I personally think the default behaviour of showing text first is still the best.

How to keep audio playing while navigating through pages?

I am making a website for my friends band. I would like to know if its possible (apart from using Ajax) to keep audio playing after clicking on a link to another page on the site?
I currently have it set up using Ajax to reload the content, but I am having a few issues with it, and I'd rather not deal with the bother unless I really have to.
If not possible, is there a way to minimise the disruption (pausing then playing again) while navigating? It would be possible for the new page to continue playing the track from where the last page stopped, but I would like to minimise the pause. Or, on this subject, is it possible to keep certain page elements loaded after changing the URL (without using # urls), like facebook does (as in, you click on it, but the banner never disappears during loading)
Thanks for any help :)
Use Ajax to load content and History API’s pushState() to alter URL without page reload.
For consistent behavior across browsers, consider using a wrapper library like History.js.
Sites like Facebook use JavaScript/AJAX for these kind of things. If you don't want to use it, you can use frames (not recommended). Divide the page in two frames: the player and the website itself. This way you can easily turn it off too, just open the site without frames.
Good luck!
Of course you could also pop up the player in another window/tab.
(For now) It won't be possible without frames or javascript.
It might be troublesome to implement it differently than via AJAX, however you can either use IFrames, where the music would be played in the main one and the content is displayed in the child on or you can always make it a Flash webpage.
Build it in Wordpress and use the AnythingSlider plugin to have the pages shift within the main page. This way you can have tabbed navigation and never leave the actual page. No need to write too much code. The AnythingSlider uses html for the slides.
You can also not use wordpress and just use the AnythingSlider code.
http://css-tricks.com/anythingslider-jquery-plugin/
and
http://wordpress.org/extend/plugins/anythingslider-for-wordpress/
and
http://css-tricks.com/examples/AnythingSlider/

Do links with javascript slow down a page?

Due to an issue that came up with a website I have to use javascript for all of the links on the page.
like so...
<img src="image.png"/>
Will having many links with javascript on the webpage slow it down significantly?
Does the Javascript run when the page initially loads or only when a link is clicked?
EDIT: For those asking why I'm doing this. I'm creating an iPad site, when you use the 'add to home page' button to add the site as an icon, it allows users to view the site with no address bar.
However everytime a link is clicked it reopens Safari in a new window with the address bar back.
The only solution I could find was using javascript instead of an html based link to open the page.
For further reference see...
iPad WebApp Full Screen in Safari
2nd answer
"It only opens the first (bookmarked) page full screen. Any next page will be opened WITH the address bar visible again. Whatever meta tag you put into your page header..."
3rd answer down
"If you want to stay in a browser without launching a new window use this HTML code:
a href="javascript:this.location = 'index.php?page=1'"
"
I can see this adding to the bandwidth needs of a site marginally (very marginally), but the render time and the response time on clicking shouldn't be noticeable.
If it is a large concern I would recommend benchmarking the two different approaches to compare the real impact.
What do you mean by slow it down?
Page load time? Depends on the number of links on your page. It would have to be a LOT to be noticeable. Execution time? Again, not noticeable.
The better question to ask is are you o.k. with effectively deleting your website for those without javascript?
Also, if you are worried about SEO, you will need to take additional measures to ensure your site can still be indexed. (I doubt Google follows those kinds of URLs... could be wrong I guess).
EDIT: Now that you explained your situation above, you could easily just "hide" the address bar. See this SO question.

Change browser URL and page content without reload and without using fragments

I'm well aware of the technique of using URL fragments to track state on an AJAX powered webpage, but lately I've noticed a lot of sites that are doing something similar but without fragments.
The picture viewer in the latest version of Facebook for example operates this way. The left and right navigation buttons are simple links with no fragments that when clicked change the browsers URL without doing a full page load.
Another example is GitHub's repository browser, each of the files/folders is a simple link that changes the page state and browser URL without reloading or using page fragments.
Can anyone explain, or point me to an explanation of how this works? I've done some searching, but there is so much content on using fragments that I haven't been able to find anything.
I believe this is due to the new History pushState HTML5 feature
They are using new HTML5 History API. I think this is what you want. check the menu items in this page http://tinywall.info/demos/html5-history-api/menu1.php
The tutorial to implement is right here : http://t.co/M4RvnvoQ

playing audio on a web page without interruption by page reload

I want to create a web page that contains an (Flex/Flash) audio player that doesnt get reloaded when the page reloads. Currently, i am popping out the player in a new window. Please check http://www.paadal.com to see it in action.
What i want to achieve is to have the player in the same window, but it shouldnt reload. I am sure many of you will say use AJAX to prevent reloading of page like songza.fm. But the problem is search engines cannot index AJAX applications. This is true for a full fledged Flex app as well.
Is there any way to have the player in the same window? but not reload.
Thanks
Just add Ajax to existing page hierarchy, change each link to ajax call after page load (with javascript) and only reload content of some container. If you do it that way, search engines (and users without JS, with mobile phones for example) can access your page, and users with JS enabled can get bonus as music player
No, you cannot have a single element exempt from a page-reload, not without loading portions of the page via asynchronous calls to the server. When a window refreshes, it flushes the DOM out, including your mp3 player.
saying "searching engines cannot index AJAX apps" is totally dependent on how the application is written, there are plenty of ways to write an application that is still spider-able and plenty of other techniques for indexing (like www.sitemaps.org implimented by most major search vendors)
You can not maintain anything in a browsers memory after leaving the page (which is implied by a page reload)
For your use, it sounds like using old HTML frames/framesets could easily solve your issue, with a hidden frame containing your audio and the rest of your site in the main frame window.
It depends on the design of your website. You can us a standard html background sound, embedded media player or flash player on your main web page. The others pages will have to be used as a single pop up layered into each other. this will cause your music from the main page to play and allow you to navigate throughout your website because you linked the popup pages. To return to the main page use a close window script .

Categories