Load around video

[hackalive]

Hi Guys I have a perhaps odd question

on a website I want to play a video (mainly SWF stuff, so Flash in other words) now I want the remained of the website to load around that video, that is to say if you goto another page of the same site using a link in the top navigation bar the page will load but the video will continue to play (non stop) so from the starting of the video the site will load "around the video"

 

any ideas how this could be achieved?

 

thanks in advance

and PS Adobe CS5 is here :-D

[JonnoTheDev]

As HTTP is static any url that is requested will result in a refresh of the browser window (after the webserver has received the request and sent the response). Therefore the answer lies within the client side, i.e the web browser. Javascript can use the DOM (document object model) to change the output of a page from an event, say a mouse click. Building a site around Javascript has massive drawbacks however it is the only method I can think of, except creating the site entirely in flash.

[hackalive]

hmm the whole site is powered by a custom PHP CMS so I can make necessary modifications, just need a good idea of how I could go about this as I really would like to achieve it, I understand it would have to do with the browser more than the server side of programming so just need a viable option really and any ideas on where and how to get started, could AJAX work?

[hackalive]

so any other ideas? somehow I basically (maybe) need to make the video not part  (not literally of course) of the rest of the loading page in some way

[JonnoTheDev]

could AJAX work

Ajax is javascript, however this gives you the ability to run server side scripts and receive a response usually in xml, json or plain text. If you need to change the layout without a refresh then this can only be achieved using the DOM and Javascript. I think what you are trying to acheive is highly unorthodox in terms of web development using server/client side scriping and HTML.

I think most sites that have video running and animation with text content changing from users actions are built entirely in flash. However if you can provide any example sites that have achieved what you are after I would be happy to look at the method that they have used.

[hackalive]

Yes what I am trying to do is highly unorthodox, and I cant find any example, which is why I am asking for Ideas on how this can be done. If HTML only offered a paye layers function and the individual layers could be reloaded or refreshed then I could do this easily :-D but that is not the case :-(

[optikalefx]

Yea this is easy.

Just catch your Nav links via javascript, and use ajax to get the result of the link and replace the main content. Which of course would be behind the video.

 

Or even easier than worrying about layering, have your ajax call return a json object of 4 pieces of content. data.top data.left data.right and data.bottom.

 

if your page is layed out like

-------------------------

 

-------------------------

|        | video |        |

|        |          |        |

-------------------------

 

-------------------------

 

then just leave the div with your video alone, and just use javascript to replace the contents of the 4 surrounding divs.  And again the easiest way to return 4 things from ajax is using json.

 

in php that would look like

 

$data['top'] = "html code here";
$data['left'] = "html code here";
etc...

 

then echo json_encode($data);

 

and then on the client, lets say ur using jquery

$("a").click(function() {
  var url = $(this).attr("href");
  $.get(url,function(data) {
    $("#topDiv").html(data.top);
   $("#leftDiv").html(data.left);
   etc...
},"json");
});

[JonnoTheDev]

Yea this is easy.

Just catch your Nav links via javascript, and use ajax to get the result of the link and replace the main content. Which of course would be behind the video.

I already suggested this, and AJAX is only required if you need access to server side scripts to pull data from your database, etc, but it is such a two-bit solution I would never build a website in this way for 2 massive reasons:

1. Users will not be able to bookmark pages on your website. If you use the DOM to change the layout the url will not change. This also has a massive impact on search engine ranking.

2. If users do not run Javascript then your site is inaccessible.

[optikalefx]

1. Users will not be able to bookmark pages on your website. If you use the DOM to change the layout the url will not change. This also has a massive impact on search engine ranking.

2. If users do not run Javascript then your site is inaccessible.

 

lol

 

1) Use hashes to allow dom changing bookmarks.  like if you click on a link that does a dom change site.com/#alink

2) If there is no js, then the links will just execute the link instead of load the content, its seamless.