HTML wird an der falschen Stelle erzeugt

[Bluesonic]

Hallo zusammen,

vorab: Ich bräuchte dringend eure Hilfe weil ich bei meiner Seite nicht mehr weiter komme. Allerdings kenne ich mich mit Javascript kaum aus. Ich hoffe ihr könnt euch den Quellcode mal anschauen und rausfinden was schief läuft. Leider ist die Webseite nicht online. Ich entwickle alles erst noch lokal.

Ich möchte auf meiner Webseite einen mp3 Player einbauen. Dazu nutze ich folgendes Skript: Codebase Hero | HTML5 Music Player (Updated)

Die Webseite basiert auf Wordpress. Dort binde ich mit per Widget alle notwendigen Dateien (css, javascript) in die Webseite ein. Diesen Code finde ich im Quelltext auch an der richtigen Stelle.
Das ist quasi mein Ziel-DIV wo später mein Interface des Players sein soll.

Im JS was das Interface erzeugt, finde ich folgenden Code:

function buildInterface() {
                var markup, $interface;

                //I would normally use the templating plugin for something like this, but I wanted to keep this plugin's footprint as small as possible
                markup = '<div class="ttw-music-player">' +
                        '<div class="player jp-interface" style="height:100%;">' +
                        '<div class="album-cover">' +
                        '<span class="img"></span>' +
                        '            <span class="highlight"></span>' +
                        '        </div>' +
                        '        <div class="track-info">' +
                        '            <p class="title"></p>' +
                        '            <p class="artist-outer">By <span class="artist"></span></p>' +
                        '            <div class="rating">' +
                        '                <span class="rating-level rating-star on"></span>' +
                        '                <span class="rating-level rating-star on"></span>' +
                        '                <span class="rating-level rating-star on"></span>' +
                        '                <span class="rating-level rating-star on"></span>' +
                        '                <span class="rating-level rating-star"></span>' +
                        '            </div>' +
                        '        </div>' +
                        '        <div class="player-controls">' +
                        '            <div class="main">' +
                        '                <div class="previous jp-previous"></div>' +
                        '                <div class="play jp-play"></div>' +
                        '                <div class="pause jp-pause"></div>' +
                        '                <div class="next jp-next"></div>' +
                        '<!-- These controls aren\'t used by this plugin, but jPlayer seems to require that they exist -->' +
                        '                <span class="unused-controls">' +
                        '                    <span class="jp-video-play"></span>' +
                        '                    <span class="jp-stop"></span>' +
                        '                    <span class="jp-mute"></span>' +
                        '                    <span class="jp-unmute"></span>' +
                        '                    <span class="jp-volume-bar"></span>' +
                        '                    <span class="jp-volume-bar-value"></span>' +
                        '                    <span class="jp-volume-max"></span>' +
                        '                    <span class="jp-current-time"></span>' +
                        '                    <span class="jp-duration"></span>' +
                        '                    <span class="jp-full-screen"></span>' +
                        '                    <span class="jp-restore-screen"></span>' +
                        '                    <span class="jp-repeat"></span>' +
                        '                    <span class="jp-repeat-off"></span>' +
                        '                    <span class="jp-gui"></span>' +
                        '                </span>' +
                        '            </div>' +
                        '            <div class="progress-wrapper">' +
                        '                <div class="progress jp-seek-bar">' +
                        '                    <div class="elapsed jp-play-bar"></div>' +
                        '                </div>' +
                        '            </div>' +
                        '        </div>' +
                        '    </div>' +
                        '    <p class="description"></p>' +
                        '    <div class="tracklist">' +
                        '        <ol class="tracks"> </ol>' +
                        '        <div class="more">View More...</div>' +
                        '    </div>' +
                        '    <div class="jPlayer-container"></div>' +
                        '</div>';

                $interface = $(markup).css({display:'none', opacity:0}).appendTo($self).slideDown('slow', function() {
                    $interface.animate({opacity:1});

                    $self.trigger('mbInterfaceBuilt');
                });
            }

Im Moment verdächtige ich die folgende Zeile:

$interface = $(markup).css({display:'none', opacity:0}).appendTo($self).slideDown('slow', function() {
$interface.animate({opacity:1});
$self.trigger('mbInterfaceBuilt');}

Die Funktion appendTo bindet das komplette Markup ja an $self. Damit ist ja das Eltern-Element gemeint. Ich habe jetzt schon verschiedene Angaben (CSS Klassen) versucht um mein Ziel-DIV zu adressieren aber es hat nichts geholfen. Das Interface wird immer komplett am Seitenende (Ende vom Body-Tag) angefügt.

Ich hoffe ihr habt eine Lösung für mich! Wäre euch sehr dankbar!!!

 

[Sempervivum]

Wo und wie wird dieses $self denn definiert?
Edit: Habe mir das Javascript mal angesehen. $self ist "this" und bei dem Aufruf

$('body').ttwMusicPlayer(myPlaylist, {options});

eben body. Wenn Du das beim DOM ready aufrufst, wird der Code am Ende des Body eingefügt. Wenn Du ihn woanders haben willst, musst Du einen Container im HTML einfügen und dessen ID verwenden:

$('#id_deines_containers').ttwMusicPlayer(myPlaylist, {options});

 

[kkapsner]

Kannst du mal zeigen, wo und wie die Variable $self definiert ist?

- - - Aktualisiert - - -

Mist - zu langsam...

 

[Bluesonic]

Vielen Dank für die sehr schnelle Antwort!

Wenn ich das richtig verstehe kann ich doch ein <div> als Container verwenden und mit appendTo den Container befüllen?

Also im HTML steht folgendes:

<div id="mp3player"></div>

Und im Javascript würde an meiner verdächtigten Stelle folgendes Stehen:

$interface = $(markup).css({display:'none', opacity:0}).appendTo('#mp3player').slideDown('slow', function() {
$interface.animate({opacity:1});
$self.trigger('mbInterfaceBuilt');}

Ich hatte das so getestet aber hat nicht funktioniert. Oder muss der ganze Code dann anders aussehen?

Danke schonmal!

Edit:
Achso, bei der Initialisierung des Players gebe ich der Funktion mit was $self ist?

$('mp3player').ttwMusicPlayer(myPlaylist, {
                autoPlay:false, 
                description:description,
                jPlayer:{
                    swfPath:'../plugin/jquery-jplayer' //You need to override the default swf path any time the directory structure changes
                }
            });

So müsste es also funktionieren?

 

[Sempervivum]

Ja, Du musst der ID nur ein '#' voranstellen, so wie Du es bei dem ersten Versuch auch getan hast:

$('#mp3player').ttwMusicPlayer(myPlaylist, {
autoPlay:false,
descriptionescription,
jPlayer:{
swfPath:'../plugin/jquery-jplayer' //You need to override the default swf path any time the directory structure changes
}
});

 

[Bluesonic]

Vielen Dank an alle! Ihr seid Weltklasse!

 

[dbarthel]

Zum Thema MP3-Player möchte ich nur vorsichtshalber an das Urheberrecht erinnern.

 

[mikdoe]

Bluesonic, bitte verwende nächstes mal die Tags für Code, HTML oder inline.