Implement Ajax to keep background animation at same place throughout all pages - ajax

I was wondering what the best way to keep my background.asp file playing throughout all of my web pages.
My website www.marioplanet.com uses ASP #includes in order to keep certain parts of my website the same. So, if I want to change a link in my header, I just need to update 1 file.
Now, I was wondering how to keep my background.asp file loaded throughout my entire site, which has all of my music functionality, even when changing pages.
Therefore, the music and backgrounds are continuous throughout the entire site.
How can I most easily do this without restructuring my entire site? Or would I have to completely redo my site?

From what I understand, you're looking for a way to keep track of the state of e.g. a music player while your visitor is navigating around on your site.
The following ideas might help:
Make your entire website an AJAX application where state is given through hash identifiers (take a look at Facebook and the jQuery History Forward plugin). With this you could start playing music and the user would navigate around the site without reloading the entire page (hence, without stopping the music).
Set a cookie with the timestamp of when the music player starts (via Javascript). Now, when a page loads, check for the existence of such a cookie and, if returned, calculate the offset between cookie timestamp and current timestamp. Setting the player to that offset will pick up the music approximately where it stopped on the last page.
Control the music in a separate pop-up window. Old fashioned and not really nice in terms of usability.
Control the music in an invisible frame that doesn't reload. Very old fashioned and with major backlashes for the user (there is a reason why traditional frames are out-dated).
Hope this helps. :)

If I understand you correctly, you are essentially wanting to have the background and music (which can be loaded in the background) never reload once the user visits the site. THe best way to do this is to make the site a completely AJAX based application, and use jQuery to load pages into divs when the user is navigating through the site.
Essentially you will want to create an index page which holds your backgound, and also contains a 'content' div. When a user clicks on a navigation button using the jQuery .load() method to load the requested page into the content div.
Another option is to go with jQuery UI, and have an element like their tabs component where you define all of the different pages of the site, and then it takes care of all the heavy lifting for you.
There are a few tutorials around for using jQuery with ASP.Net. I would definately go with it while trying to do something like this.

Related

Custom title and image for Facebook share button on AJAX result

This question exists in different flavors, but not for AJAX pages.
I use AJAX to pull a single video into my page and I want a custom FB share button for it. Everything I've read so far says that FB pulls the required title and image from meta-tags in the page's < head> section (og:image and og:title).
I've tried to change the meta properties when the AJAX call returns, before rendering the share button. This hasn't worked. It uses the values that were present upon initial page load. I have yet to encounter a single answer to this question.
Are there data attributes I can add to the 'fb-like' div to specify a custom title and image (similar to data-href)?
Danke!
You need an individual URL for each individual piece of content that you want to share. Open Graph objects (and simple shared links “become” such, automatically) are identified by their URL (og:url).
Now if your whole page is built on AJAX, you still need to create such individual URLs somehow – the Facebook scraper tool does not “speak” JavaScript, and relies solely on the OG meta information that the server delivers for any URL it requests.
Since the hash part of an URL is only of relevance client-side (and does not even get send to the server), “typical” AJAX URLs that rely on those to tell the client which piece of content to load in the background are no good here.
So if you want to share two pieces of content (videos) as http://www.example.com/?v=vid1 and http://www.example.com/?v=vid2, then you have to make sure that your server delivers the meta data for each video under its respective URL.

Load Wordpress page in a div without reloading page and while changing url

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

Animation when user go into site, but not when he travels

I have a website, where i wanna use some simple animations when the page is loaded. The animation code is not a problem. This animation is some fading in of menu and other elements. I will call this an intro of my page. I want the end-user to see this animation ONLY when he visit a site, and dont see when he clicks some links in menu and travel around my website. I worked it out for now by putting the animation code only on fron page, but for example: what if someone gives a link to mywebsite.com/news to someone. He will go into site and he will not see the animation cause its only on the front page. Any solutions? I think about some session & cookies "if" statements with php maybe, but I'm a begginer and I dont know how to work it out.
Make your home page always the same, and just load the code of the other pages. I mean, you can use frames, or php code with include('file.php'); for example. Then your animation will be always on the same page, or just load a frame in every page of your site, and the anim in that frame.
You are asking your system (as a whole) to remember information between HTTP requests (page fetches). HTTP is by design a stateless system, so you will have to use one of the mechanisms which have been developed for remembering information: cookies or (server-side) sessions. (Actually, sessions are usually implemented using cookies, but you can think of them as separate technologies).
Sessions in PHP are quite easy to use: you'll just fire the animation when you create a new session. But you will have to work out how you are going to decide when a session is continuing, and when it has expired and you need a new one.
To destroy one php session you can do session_destroy();

Ajax generated content, crawling and black listing

My website uses ajax.
I've got a user list page which list users in an ajax table (with paging and more information stuff...).
The url of this page is :
/user-list
User list is created by ajax. When the user click on one user, he is redirected to a page which url is : /member/memberName
So we can see here that ajax is used to generate content and not to manage navigation (with the # character).
I want to detect bot to index all pages.
So, in ajax I want to display an ajax table with paging and cool ajax effetcs (more info...) and when I detect a bot I want to display all users (without paging) with a link to the member page like this :
JohnBob...
Do you think I can be black listed with this technique ? If you think so, could you please provide an alternative solution by keeping these clean urls and without redeveloping the user-list (without ajax) ?
Google support a specification to make AJAX crawlable:
http://code.google.com/web/ajaxcrawling/docs/specification.html
I did an experiment and it works:
http://seo-website-designer.com/SEO-Ajax-Google-Solution
As this is a Google specification, you won't get penalised (unless you abuse it).
Saying that, only Google support it at the moment (AFAIK).
Also, I believe following the concept of Progressive Enhancement is a better approach. That is, create a working html website then make the JavaScript enhance it
Maybe use the urls with an onclick to trigger your AJAX scripting? Like
Some URL
I don't think Google would punish you for this, you primarily use JScript, but you do provide a fall back for their bot, so your site doesn't get any less accessible.
EDIT
Ok, I misunderstood. Then my guess would be you basically have two options:
1. Write a different part of your site where bots end up, or,
2. Rewrite your current site to for example always give a 'full' page, with an option to only get, say, the content div. Then you can get only the content with JavaScript, but bots will always get a nice page.

Is it possible to prevent a base template reloading using django's template inheritance?

In the header region of my base template (main.html), I've placed an HTML5 media player which pulls in content uploaded through my admin interface.
What I'm attempting to do is, when the tracks have been loaded once, have the media player remain unaffected by internal site navigation. In other words, the media player keeps playing but the user can browse the site without interrupting playback/ re-loading the tracks.
It's a fairly simple setup. There's one main template and each of the other sections (say, blog, contact and about) are all content blocks loaded within that same template using:
{% extends 'main.html' %}
As I understand it, when the template system evaluates a child template, first it loads the parent then fills in the child blocks as defined. I logically, and perhaps incorrectly, assumed that child block regions would be 'pulled into' the parent. However, having read the django docs on template inheritance, it would appear that what actually happens is some sort of reverse lookup: find parent > load parent > find blocks > populate blocks. As I have it set up at the moment, each time a link is clicked, the media stops playing and is reloaded.
So my question is whether I've missed something fundamental in the way the django's template engine works and it is possible to achieve what I'm after just using the template engine, or whether it's impossible and I need to do it some other way (e.g. via AJAX). It's the first time I've attempted to do anything like this in django so I wouldn't be at all surprised if it's the former.
What I'm attempting to do is, when the tracks have been loaded once, have the media player remain unaffected by internal site navigation. In other words, the media player keeps playing but the user can browse the site without interrupting playback/ re-loading the tracks.
This is not something specific to Django-templates, but rather to how your HTML page is structured. The media player is not replaced within Django, but replaced in the browser by reloading the page.
Things you can do:
Have everything running via Ajax.
Have every other page running in an <iframe>
Have every other page running in a <frameset> tag.
Eiter way, the URL in your address bar won't change anymore while the user is navigating through the site. Requiring Ajax will also affect how good Google can index your site.
A good HTML book will get you started on setting up the frameset / iframe based page.

Resources