So I have an iFrame which I am using to load the other pages for my website. To make the website seem like it has no load time and very smooth I have made a main page, with an iFrame in the middle to load the actual pages of the website that contain all the information. I have buttons using JS to change the SRC of the iFrame so that it acts like a normal nav bar.
I am curious to know if it is possible to make the URL on the browser, the same as the URL in the iFrame. Because right now when a user is on the website, they aren't switching to different pages, meaning they can't go back or forward in history because they never left the page in the first place. This can be troubling to most users if they want to link their friends to something, or just go back a bit.
Is there a way to do this in jQuery or JavaScript? Or even better, purely in HTML or CSS?
Thanks in advance.
EDIT: After googling a bit of what charlietfl has said, I am now wondering if it is possible to save a website into states, which I can then give web URLs to? I just skimmed through a few pages without reading them thoroughly so I'm not exactly sure what it was talking about when it mentioned states, but maybe there is something else out there that is capable?
You can try url hash like the gmail uses #inbox . It has the same functionality as you wish. It serves you the browser back and forward actions. You have to add more Javascript to handle those hashes. But i am not sure about its effect on seo (if you are only concerning about it).
For more details please go through these links
Gmail like URL scheme
Browser History Manager
Related
I am newer to JavaScript and I am working on a website where I want to be able to switch the URL when I click on certain elements of the site without reloading the page.
I want it to work like http://www.itemcycle.com when you click on the link to sell your iPad or iPhone and then select your model. It shows different boxes, and when you click on them, it changes the URL but I know it's not loading a new page because it doesn't scroll me back to the top.
Thanks in advance for your help!
what you are seeing is a single page application
A single-page application (SPA), also known as single-page interface
(SPI), is a web application or web site that fits on a single web page
with the goal of providing a more fluid user experience akin to a
desktop application.
It will be achieved by using certain JS frameworks. AngularJS is the popular one.
Try this:
window.location.href="/yourUrl";
HTML5 introduced the history.pushState() which allows you to add and modify history entries.
window.history.pushState('page1', 'Title', '/page1.php');
This might worth looking.
There's 2 main ways to redirect a user, each with it's tradeoffs:
You can redirect a user to a new page by changing the value of window.location.href. So for instance window.location.href='https://example.com'; will redirect a user to https://example.com. Note this will do a hard page reload, so the page will actually reload.
To change the url path without redirecting the user to a new page you can do use history.pushState. Doing something like:
history.pushState({}, "page 2", "/page2");
will change the url from https://example.com to https://example.com/page2 and the scroll position won't change. You can then listen to changes from history.pushState and update the page accordingly giving you effect you're looking for. Note you cannot change the domain (i.e. you can't go from https://example1.com to https://example2.com), but on the plus side the page will not actually be reloaded.
As others have pointed out there are various frameworks which allow you to do this type of thing, but those frameworks are making use of the techniques I've described above.
I have a site that is similar in layout and function to the app of any streaming music service (Spotify/Rhapsody/iTunes/). I've got a persistent play control at the bottom, persistent navigation on the left, and the center/bulk of the page is used to pick what you want to play, read more about what you are going to play, etc.
I've implemented it in the most logical (for a programmer) way using an iframe for the center content. But is there a better way, a way more conformant with SEO?
I suspect the current approach is terrible for SEO (even with sitemaps) and might violate some cardinal rule because I would need to add some code on each page to check if it is being viewed through the proper iframed interface and if it is not then the page would need to redirect to load up the full interface with the desired content in the center iframe of that interface (that's how I would and have solved similar problems ten years ago).
Rather than redirect on landing I could simply add the interface elements but unless some unknown magic happens when they explore content the page will reload and anything they were playing would stop playing as the page unloads. I do not want to interrupt play, even to resume it at the right spot.
Is the old and reliable reloading mechanism the only real solution? Can you get do it and not be SEO penalized?
Any ideas?
In your case the UX is the most important thing to consider and to work on it, then the other things come like SEO.
You have to focus only on the most important pages like singers pages, geners and playlists, other pages no need to index them, you can avoid indexing them by adding canonical links or from robots.txt or by adding meta tags noindex.
Other thing is the URLs and advanced techniques, when the user click on link you should get the results without refreshing the page using JS, but here Google will not be able to crawl these pages.
Here you need to use advanced techniques like "Progressive Web Enhancements) and the best example to see is Tumblr.
All the pages are done by using this technique which allow them to add a great user experience and at the same time Google can index all the pages.
Example for the links:
Singer Page
You have to read more about it, also the old technique "graceful degration" for old browsers can help you a lot.
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/
Okay, so this may sound confusing, so let me explain. I'm working with a theme in wordpress that has a single page layout and standalone page layouts. In the single page layout, every navbar link you click on scrolls you to a section of the page. In the standalone pages, when you click on a navbar link that contains content for the home page, it links you to a standalone page of that content rather than going to the home page and scrolling to the content.
Now before I get many answers saying just do url/#content block, it doesn't work as the theme creator decided to use multiple ids all named content. Horrible I know. I've tried a lot of things actually. So the idea I have now, is to store a cookie when the user clicks a link in the #header navbar and store a cookie in the browser. When the user reaches the homepage, the homepage checks that cookie and scrolls the to the proper area.
I've never worked with cookies to know how to write the code, I just understand how they work from php, I figure javascript is somewhat similar. If something is unclear, please ask.
You have 2 types of cookies, Http only and regular (you have more, but for this question the others are non relevant). Since here you are talking about creating cookies in JavaScript, the Http only cookies are non existent.
This javascript basic library will give you the tools to do what you want.
Now, from my own view of this problem, I would recommend using local storage only if your viewers are using new browsers (old IE won't work). This javascript library will explain how to use it.
Hope I helped, Cheers!
I have been trying to solve this problem for a while now and have looked on numerous forums to find a solution. Here is my setup. Any help would be greatly appreciated!
I currently have a index page that loads a JavaScript header and footer above and below my "content" section. I also have a list of navigation links inside of the header. My music player is located in the footer. It does not load automatically (for those that are bothered by that), and i don't want it to reload every time someone clicks on one of the navigation links on the side. I don't want to use frames for this; I have read that frames will allow me to only refresh the "content" section of my page, but that when indexing a site, most search engines will not work well with a site that has frames. I also do not want to use a pop-up for my music as most browsers and users have pop-ups blocked.
Basically i am looking for a code or something that will allow for a header and footer (doesn't have to be a JS header and footer) to not refresh when someone clicks on the navigation links located in my header. Thanks again to anyone that has a solution to this problem.
Do it like Facebook - use JavaScript to intercept link navigation, load the content using XMLHttpResponse, and then update the portions of the page that need to change.
This keeps the static integrity of the page for search engines, allows most of the site to still work just fine for users with scripting disabled, and avoids resetting the music for everyone else.
What Shog9 said, but also make sure to change location.hash whenever you change the content and make it so that visiting the website with that hash will redirect you to the correct page.
Here's another example of a band that uses the AJAX method to reload the page content, while keeping the player going...
http://jonandroy.ca/
The URL hashtag gets updates each time you click on something, and if you copy that URL, when you visit it, you'll see the homepage load for a split second, and then it loads the content of the page specified by the hashtag. Not perfect, but an overall good solution to this age-old problem.
You might want to look at how thesixtyone.com works. They have non-interrupted music by using AJAX to rebuild the page when a link is clicked rather than load a new one. This is achieved by having all links be anchors for the current page (i.e. all links are relative and start with a hash character).