seitenübergreifende Hintergrundmusik

[Nicmare]

Ich hasse solche Musikplayer aber für ein spezielles Projekt mache ich mich zZ schlau, wie weit die Webtechnologie vorangeschritten ist. Was ich suche, ist eine elegante Möglichkeit einen Player in eine normale HTML Seite einzubetten. Am besten ohne Frames und seitenübergreifend. Normalerweise geht das nicht. Das ist mir klar. Sobald ich die Seite wechsle, fängt der Player von vorne an. Das ist ja bekannt. Nun bin ich auf die seite djtunes.de - Informationen zum Thema dj tunes. Diese Website steht zum Verkauf! gestoßen und da wird unten ein Player angezeigt, sobald man einen Track probehören möchte.
interessant ist dass das auch eine ganz normale flashfreie Seite ist bei der die Links so aussehen:

http://de.djtunes.com/music/home?view=releases&sort=release_date

Sobald aber der Player startet sehen die URLs so aus:

http://de.djtunes.com/#/music/home?view=releases&sort=release_date

Und das ganze läuft dann über AJAX. Leider konnte ich im Quelltext nicht das Script ausfindig machen das dafür verantwortlich ist. Kennt jemand diese technik? Gibt es da gar ein out-of-the box plugin für jquery was mir träumerischerweise jede beliebige Website per Klick "umwandelt"? der player ist dann ja nebensächlich. der kann dann ganz simpel sein. da wird sich schon was finden.

[Nicmare]

ich habe schon ein sehr gutes code beispiel für diesen ajax effekt gefunden. bessere beispiele sind natürlich noch gern gesehen.

[michey]

Hi

nage am gleichen Problem...
Gibt es ausser der Ajax-Lösung, was zZ für mich noch zu hochstehend ist, andere Lösungen?
Wäre ein in jeder Seite mit einem iframe eingebetteten Player nicht auch seitenübergreifend?
Oder in einem seitenübergreifenden modalen Fenster (à la Greybox zB.) mit einer festen Grösse u. Position?

[Nicmare]

mit nem iframe hast du nichts gewonnen. die aktuelle seite "drumherum" wird ja immer neu geladen. die ajaxlösung mit dem hash ist nach wie vor die eleganteste aber macht probleme sobald du andere scripte verwenden möchtest. die muss man dann ein wenig umschreiben

[Nightflyer]

AJAX ist überhaupt nicht hochstehend. Du hast ein Div in das dein Content geladen werden soll ( <div id="content"></div> ) und Links:

<div id="menu"> 
	<a href="#" title="seite1.php">Seite 1</a> 
	<a href="#" title="seite2.php">Seite 2</a> 
	<a href="#" title="seite3.php">Seite 3</a> 
	<a href="#" title="seite4.php">Seite 4</a> 
	<a href="#" title="seite5.php">Seite 5</a> 
	<a href="#" title="seite6.php">Seite 6</a> 
</div>

Mit dem Code

$(document).ready(function() {
   
	$('#menu a').each( function(){
                
		$(this).click( function( event ){
       
			$('#content').load( $(this).attr('title'), function(){
                            
				//Callback
                            
			});
                    
		});
                
	});
            
});

werden nun die Links dazu aufgefordert bei Klick die geforderte Seite ( im Title-Attribut ) in den Content zu laden.


.load() – jQuery API

[Nicmare]

nightflyer, warum so kompliziert?
das geht doch auch so

$(document).ready(function() {
	$('#menu a').click( function(e){
		e.preventDefault();
		$('#content').load( $(this).attr('href'), function(){    
			//Callback                       
		});     
	});       
});

oder hab ich was verpasst?

dann hat man auch "fallback" links

<div id="menu"> 
	<a href="seite1.php">Seite 1</a> 
	<a href="seite2.php">Seite 2</a> 
	<a href="seite3.php">Seite 3</a> 
	<a href="seite4.php">Seite 4</a> 
	<a href="seite5.php">Seite 5</a> 
	<a href="seite6.php">Seite 6</a> 
</div> 

[michey]

Vielen Dank euch beiden.
So wie ihr das darstellt, sieht es wirklich nicht allzu kompliziert aus und
macht Mut sich näher damit zu beschäftigen.

[Nightflyer]

@Nicmare: Ja hast recht, hab das so aus einem alten Projekt zusammengeschustert und noch zu wenig gekürzt

[Nightflyer]

Ich hab hierzu noch ne Frage, wie kann ich Besucher, welche nun per Suchmaschine nach seite1.php gelangen auf die Hauptseite weiterleiten und dort seite1.php laden?

Ich scheitere irgendwie an der htaccess...

[Nicmare]

jetzt mal laut gedacht…
wenn alle "ausgelagerten" seiten nen header und nen body haben und du beim ajax call nur den <body> der seiten lädst, könntest du ja dann im head eine meta redirection packen. der header wird ja dann nur ausgeführt wenn man die ausgelagerte seite irgendwie über umwege (zB google) öffnet.

[Nightflyer]

<script type="text/javascript">

	$(document).ready(function() {

		$('#menu a').click( function(e){
			e.preventDefault();

			$.post( $(this).attr('href'), function( data ){    
				
				data = data.replace( /<meta [\w\d.=";-\s\?]+\">/g, "" );
				$('#content').html( data );
                
			});     
		});       
	});

	</script>

Und dann auf jeder Unterseite

<meta http-equiv="refresh" content="1; url=test.html?from=seite1.html">

funktioniert

[michey]

Vielen Dank!
Die Frage nach einem konkreten Beispiel wäre nämlich meine nächste gewesen.
Bin dabei das >>hier mit eurem Vorschlag mit den PHP-Seiten einzubauen.

Weiss vielleicht jemand, womit das "Öffnen der Seite abgebrochen" in der Browserleiste zu tun haben könnte?
Wird ja alles trotz Fehlermeldung richtig angezeigt.

[Nightflyer]

Möchte noch anmerken das obige RegEx unter einigen Browsern zu einem "Runtime error" führen kann. Grund dafür ist das nicht escapte Minus-Zeichen. So geht es einwandfrei:

data = data.replace( /<meta [\w\d.=";\-\s\?]+\">/g, "" );

[michey]

Habe in einem jQuery Ui Dialog Container einen Musikplayer so eingebaut dass er immer im Vordergrund ist und nahtlos weiterspielt, auch wenn andere Inhalte in die Seite geladen werden.
Wenn ich aber eine LightBox-Galerie(oder ähnliche) lade, spielt die Musik zwar weiter, der Musikplayer selbst aber verschwindet während das ganze Dialogzeug (Rahmen und Schliessschaltfläche)weiterhin sichtbar ist.
Hat jemand von euch eine Ahnung warum dies so ist und wie es zu beheben wäre?

[Nicmare]

na die lightbox ist doch einfach nur im vordergrund oder? wenn du sie schließt, siehst du den player wieder?! musst du dem player nen ganz hohen z-index geben