views:

685

answers:

5

Hi there,

I want to have a smooth background music on my page. I thought of using some kind of footer which does not refresh when I click on a subpage so that the music does not start again.

I am using php-include for my subpages, e.g.

include-tag for header

content

include-tag for footer

I don't want to use frames or sth like that. Is there a possiblity - maybe with ajax or so? I just want to keep the music fluid in my footerbar although I'm going from subpage to subpage!

Thanks for helping me :)

A: 

You have two options:

  1. Put the main content in an iframe and the music player in the HTML outside.

  2. Put the main content into a div id="content" and replace the contents of this div with AJAX or JavaScript. Note that replacing the content of a DIV is slow on IE < 7.0.

Solution #1 is more simple but you must add target="_self" to all external links or they will be captured in your iframe and your visitors will hate that.

PS: I hate sites that play music and I rarely visit a page a second time that annoys me like that.

Aaron Digulla
Hi there, thanks for responding so fast. I know that frames aren't that great for websites. So I am searching for another oportunity. I want to handle it like the flash pages do. I want to place a tiny icon in that footer-bar and if you click on it the music starts...Can you maybe tell me how exactly solution 2 works or provide some links?:)
A: 

You can change the content of the page via ajax instead of physical subpages. That way the header and footer are constant and do not change, but just the content is dynamic.

stefita
Ah, I see! So I just have one page, e.g. "index.php" and put all of my contents in there, e.g. vita, profile, portfolio, ... ? Hm... that's hard to handle I think.
that's not what I ment. You have many options to handle this kind of situation. E.g. you can request via ajax a page called requests.php with a specific argument like content: "portfolio" and the request.php can that return the content of portfolio.php.
stefita
+1  A: 

First: as an experienced web user, I beg you to at the very least offer an on/off button for the music. I am very much of the opinion that any multimedia should be in the user's control and preferably turned off unless the user requests it on. I hate going to a site and being scared out my brains when music starts out of nowhere (or videos with sound, etc).

You will need to use ajax, yes. You would create a navigation header, your music bar footer (with off button!) and a content area. Any navigation in the site would trigger an ajax function to retrieve that content and replace the current content.

Something like:

    ===================================================================
         home | about | content | more content | contact
    -------------------------------------------------------------------



                           content of page



     -------------------------------------------------------------------
                       MusicPlayer [off/on]
     ===================================================================

Where each of the navbar links is tied to a js function that requests the content from the server (based on the link id or href) and returns false (so the link doesn't actually load), and then replaces the current content with the requested content.

In jquery:

$("#navbar a").click(function(() {
       $("#content").load("somescript.php", content = $("this").attr("id"));
});

One last thing:

If you go this route, the page URL will not change, so this can affect bookmarking and people forwarding specific pages to each other.


Since you asked, here's a simple model for the PHP that the ajax talks to:

<?php

$home_page = (!($_GET)) ? true : false;

$content = (!($home_page)) ? $_GET['content'] : 'home';

if ($home_page) {
include("header.php"); //some script that has your header content above the content div.
}

//This part always gets output. So you don't have to worry about the method that requests it.

include($content.".php"); //some script or html of that content. 
//Notice that it always defaults to home in case there is no $_GET.
// Be careful, though. Now someone could put in "www.yoursite.org/index.php?content="blah"
// and they would get the content but no header or footer!

if($home_page) {
   include("footer.php"); // Just like the header.
}

?>
Anthony
Thank you for responding! So I have 3 divs (header, content, music-footer). When I have a link "Example page" I just need to use your code and it will transfer the contents of my example-page.php to the div with id="content"? That sounds nice, at least I have different pages = easier to handle. So I also don't need to include header and footer in example-page.php, but just the content?
You would make it so that example-page.php would return only the relevant (and well-marked up) content that goes in the content div when it receives a request with a $_GET variable. I usually use something like "if !($_GET)...load normal page" and then have a bit that returns only what is tied to the GET variable when there is one. And I wrote that code really quickly, so double-check my work at:http://docs.jquery.com/Ajax/load#urldatacallback
Anthony
A: 

Hm... maybe another idea: an automatically pop up when I enter index.php which looks similar to lightbox = no real new window, e.g. just a white box with image icon. Is that possible or won't it stay when I go to a subpage?

If you mean a pop-up window, it might get blocked. Even if it doesn't look like a popup, it will still be one (if I understand the idea right) and so it would still be there when the user went to google or whathaveyou.
Anthony
A: 

Thank you guys for giving me such good advice! Maybe it is just a bad idea to use music, because it is inconvenient.

http://www.larajade.co.uk/high/

That's what I am thinking about - but there are only difficult ways to get it, flash / ajax. Iframes are bad...

Thank you :)