I'm creating a website in wordpress. I have a music player in it as its for a music artist. But I want the player to continue playing while the users move through the website. I dont want to use iframe as i want the url updated so the page can be bookmarked. Or is there any way to update the url and use iframe?
Somebody on the Wordpress forum asked the same question.
The best way (technically) to do this is indeed to use a CMS that supports surfing the site without page-refreshes, so using AJAX, as #jonny suggested.
jango.com seems to do this as does another site I can't remember.
If you load every page via AJAX, there's probably gonna be a drawback if you care about search-ranking .
any way to update the url and use iframe
maybe you need something like this
main.html
<script type="text/javascript">
function change_parent_url(url)
{
document.location=url;
}
</script>
player.html
after each click (how?): parent.change_parent_url (new_url_here);
I am not sure, but I've seen similar, iframe approach on weborama.ru:
look for window.location=, maybe it helps
If you change the URL fragment (the part after the #) on each page change, the URL in the address bar can always be bookmarked. If you do this with a frame (probably the easiest way), every page load would update the URL fragment of the parent document. If an incoming link has this fragment set you open the frame not with the homepage, but with the requested content page.
Related
I have music application in which I have simple player in footer. User can choose songs from main page list and play it in footer. Now requirement is even if user moves fro home page to other pages(profile, bookmarks) in application the footer player should not get reloaded and should keep playing audio selected on home page initially.
How do I do that? DO I need to load pages through ajax?
Edit:
I forgot to mention that development is 80% completed and footer reloads on every page load. How much of rework is needed if I have to use Ajax now?
Use PJAX. Reload just the parts of the page that you want: https://github.com/rails/pjax_rails
It's already integrated with Rails and everything you put outside of this block will not be reloaded:
<div data-pjax-container>
<!-- PJAX updates will go here -->
</div>
Here's another solution similar to PJAX and Turbolinks
https://github.com/igor-alexandrov/wiselinks
Some very good answers already, but i just wanted to explain your problem better.
HTTP requests is "stateless", which means that each request are fully independent and their is no way you can know anything about how the page was before you requested a new page. This makes it impossible not to reload the footer on each request, using only HTTP.
You can use cookies to keep information between request, so you could start the player where it stopped before the request, but it will still reload (and stop for a short duration).
You can also have the rest of the page in a iframe, and only change the content of the iframe.
However these solutions is not very good for various reasons, so i would strongly recommend the last and best solution: ajax.
The simples solution is properly pjax as #aledalgrande suggested (or wiselink as suggested by #adbeel). This will i practice make your site a "one-site-application" where you use ajax to replace specific parts of the page instead of the whole page. It should however be fairly simple to integrate, even in a existing rails application.
Since you put jQuery as a tag I suggest you either look at http://api.jquery.com/load/.
You can using plain old HTML and making it easier & faster to deploy since the app is almost 'done'. Later you should implement a better (ajax) option.
Simplified: index.html
<iframe id="mainframe" src="other.html"></iframe>
<footer>
Don't reload me pls :D
</footer>
on page navigation (links) you act only on the mainframe, leaving the footer not reloaded.
NOTE: This is ugly and may will give you problems but might serve you to do minimal modification and having your site live asap.
Then rewriting the whole thing to using ajax could be 'some work required' to 'heavy work required' depending on how the app is already implemented. note that will never be 'few or no work required'.
I have tried to set my site up ( http://www.diablo3values.com )according to the guidelines set out here : https://developers.google.com/webmasters/ajax-crawling/ However, it appears that Google has updated their indexes (because I see the revisions to the meta description tags) but the ajax content does not show up in the index.
I am trying to use the “Handle pages without hash fragments” option.
If you view either of the following:
http://www.diablo3values.com/?_escaped_fragment_=
http://www.diablo3values.com/about?_escaped_fragment_=
you will correctly see the HTML snap shot with my content. (those are the two pages I an most concerned about).
Any Ideas? Am I doing something wrong? How do you get google to correclty recognize the tag.
I'm typing this as an answer, since it got a little to long to be a comment.
First of all, your links seems to point to localhost:8080/about, and not /about, which probably is why google doesn't index it in the first place.
Second, here's my experience with pushstate urls and Google AJAX crawling:
My experience is that ajax crawling with pushstate urls is handled a little differently by google than with hashbang urls. Since google won't know that your url is a pushstate url (since it looks just like a regular url), you need to add <meta name="fragment" content="!"> to all your pages, not only the "root" page. And google doesn't seem to know that the pages are part of the same application, so it treats every page as a separate Ajax application. So the Google bot will never actually create a navigation structure inside _escaped_fragment_, like _escaped_fragment_=/about, as it would with a hashbang url (#!/about). Instead, it will request /about?_escaped_fragment_= (which you aparently already have set up). This goes for all your "deep links". Instead of /?_escaped_fragment_=/thelink, google will always request /thelink?_escaped_fragment_=.
But as said initially, the reason it doesn't work for you is probably because you have localhost:8080 urls in your _escaped_fragment_ generated html.
Googlebot only knows to crawl the escaped fragment if your urls conform to the hash bang standard. As users navigate your site, your urls need to be:
http://www.diablo3values.com/
http://www.diablo3values.com/#!contact
http://www.diablo3values.com/#!about
Googlebot actually needs to see these urls in the source code so that it can follow them. Then it knows to download the following urls:
http://www.diablo3values.com/?_escaped_fragment=contact
http://www.diablo3values.com/?_escaped_fragment=about
On your site you appear to be loading a new page on each click, and then loading the content of each page via AJAX too. This is not how I would expect an AJAX site to work. Usually the purpose of using AJAX is so that the user never has to load a whole new page. When the user clicks, the new content section is loaded and inserted into the page. You serve the navigation once and then you only serve escaped fragments of the content.
I am coding a website for a client and they requested that because they have so many sidebar pages under one parent, that when the page link is clicked, it loads in the same area every time without the page reloading. They also requested that the URL changes on reload and that you can visit each page by going to that specific url. Unfortunately, I don't know how to do this. I have found a lot of tutorials and snippets that are half way there but they don't offer the exact functionality.
For example, if you go here: http://lookseewatch.com/independentinsurance/commercial-insurance/
You'll see a long sidebar of different types of commercial insurance they offer. When you click on "Automobile," or any link for that matter, the page should be loaded into the div area on the right of the sidebar. The url then should change to reflect this change to http://lookseewatch.com/independentinsurance/commercial-insurance/automobile/. All of these pages are separate and dynamic in Wordpress.
Can anyone offer me some assistance? This is currently how the sidebar is being generated:
wp_list_pages('title_li=&child_of='.$post->ID.'');
Let me know if you need any other code from me or have any questions about the functionality.
Thank you!
This is kinda complicated. There are a lot of ways of catching user events, stopping default behavior and running custom code over it. For exemple, you can listen to anchor clicks and return 0 to not load their links.
But if you change URL in browser address bar, as long as I know, a JS can't control it, because it's outside of a webpage domain, and controling browser components from an external webpage would open a lot of security flaws.
This looks like they wanna avoid banners loading to count less hits :P If performance is the issue, first of all you can use a cache plugin, that will store in HD all DB queries, and use those files in future pageloads instead of making new queries.
You can also build a full sidebar into a PHP variable, cache it in HD and read from there, instead of building the whole code everytime. It will be like adding static HTML snippet.
This can be done with a technique called pushstate combined with AJAX. There's a great jQuery plugin that's called PJAX that implements this. http://pjax.heroku.com/
I have just published a plugin called WP-PJAX that makes to whole wordpress site PJAX driven. I'm not sure if this solves your problem, but it might be something for you.
https://github.com/pelmered/wp-pjax
I am using a script for Ajax from Dynamic Drive on my site to load content into my div. It has worked great for me until I created a page where I want links. For some reason I am finding that if I create a page with a single link, the page will not load. I can click on it all I want and the page still will not load. If I have a page that is just purely text content, it loads. Is this a flaw with Ajax, or am I not doing something right? My intention with my site is to have a "Store" section so I can use Amazon Affiliates. I can't even get my page to load even if I have a simple link say pointing to Amazon.com. Unfortunately this Ajax script has been the only successful way I've been able to get my content to load into my main div. For some odd reason links in the links section on my site will appear and that page will load, but not for my "store" page.
My site is: http://veterinarycare.atspace.cc
I'm not asking for a direct code, but just a step in the right direction.
'store.html' gives a 404 Not found... Does this file exist? That is probably your problem... Your links.html page for example has a link to ASPCA and that works fine.
You may also want to look into jQuery, as this is a bit neater for doing ajax and other javascript effects. You could probably get all that javascript mumbo jumbo down to 5 lines or so...
Also remember that your site isn't going to be particularly google friendly with all the content being loaded in via javascript.
I am looking at the Gawker blogs (http://io9.com, http://lifehacker.com/) and I'm curious about how they are made.
When I click for on a link only the article part of the page reloads displaying a loading icon while it does.
But what I can't figure out is that links point to new URLs like io9.com/something/something and its not something like I see on ajax pages that they put a site.com/#something tag at the end of the url from javascript to mark the page after an ajax request.
Can I change the full blown URL from javascript or what is happening?
When it happens, the website is using the HTML5 History API. This API can change the url (via JavaScript) without changing the page.
See caniuse.com for browser support.
If you would like to implement it in yout website, backbonejs.org would be very useful.