Vote count:
0
I'm looking for some help to combine ddaccordion.js with some other script code.
I started out with making an audioplayer that works like a charm as long as all of the html and script code are on the same page. I have an example of it on jsfiddle.net (don't mind the audio samples and control buttons).
html:
<body>
<div class="music">
<section>
<p>Artist 1</p>
<table>
<tr>
<th>Genre</th>
<td>Rock</td>
</tr>
<tr>
<th>Year</th>
<td>2000</td>
</tr>
<tr>
<th>Format</th>
<td>mp3</td>
</tr>
<tr>
<th>Bitrate</th>
<td>128 kbit/s</td>
</tr>
</table>
<div class="music_wrap">
<div class="musicplayer">
<div class="musiccontrols">
<div class="hidemusicplayer"></div>
<div class="showmusicplayer"></div>
<div class="musiccontrolsinner">
<div class="musiccover"></div>
<div class="musicartist"></div>
<div class="musictitle"></div>
<div class="musicplay"></div>
<div class="musicpause"></div>
<div class="musicprev"></div>
<div class="musicnext"></div>
</div>
</div>
<ul class="musicplaylist">
<li musicurl="http://ift.tt/1w6Q8EH" musiccover="http://ift.tt/1w6Q8EL" musicartist="Artist 1" musiccaption="Song 1">Song 1
</li>
<li musicurl="http://ift.tt/1megBcG" musiccover="http://ift.tt/1w6Q8EL" musicartist="Artist 1" musiccaption="Song 2">Song 2
</li>
</ul>
</div>
</div>
<p>Artist 2</p>
<table>
<tr>
<th>Genre</th>
<td>Soul</td>
</tr>
<tr>
<th>Year</th>
<td>2005</td>
</tr>
<tr>
<th>Format</th>
<td>mp3</td>
</tr>
<tr>
<th>Bitrate</th>
<td>128 kbit/s</td>
</tr>
</table>
<div class="music_wrap">
<div class="musicplayer">
<div class="musiccontrols">
<div class="hidemusicplayer"></div>
<div class="showmusicplayer"></div>
<div class="musiccontrolsinner">
<div class="musiccover"></div>
<div class="musicartist"></div>
<div class="musictitle"></div>
<div class="musicplay"></div>
<div class="musicpause"></div>
<div class="musicprev"></div>
<div class="musicnext"></div>
</div>
</div>
<ul class="musicplaylist">
<li musicurl="http://ift.tt/1w6Q8EP" musiccover="http://ift.tt/1megBsZ" musicartist="Artist 2" musiccaption="Song 1">Song 1
</li>
<li musicurl="http://ift.tt/1w6Q8V7" musiccover="http://ift.tt/1megBsZ" musicartist="Artist 2" musiccaption="Song 2">Song 2
</li>
</ul>
</div>
</div>
</section>
</div>
</body>
code:
$('.music_wrap').each(function(){
var musiccontainer = $(this);
var musicplayer = musiccontainer.find('.musicplayer');
// initialization - first element in playlist
initAudio(musiccontainer.find('.musicplaylist li:first-child'));
function initAudio(elem) {
var musicurl = elem.attr('musicurl');
var musiccaption = elem.attr('musiccaption');
var musicartist = elem.attr('musicartist');
var musiccover = elem.attr('musiccover');
$('.musicplayer .musictitle').text(musiccaption);
$('.musicplayer .musicartist').text(musicartist);
$('.musicplayer .musiccover').css('background-image','url(' + musiccover+')');;
musicsong = new Audio(musicurl);
musicsong.addEventListener('ended', function() {
var musicnext = musiccontainer.find('.musicplaylist li.musicactive').next();
if (musicnext.length == 0) {
musicnext = musiccontainer.find('.musicplaylist li:first-child');
}
initAudio(musicnext);
playAudio();
});
$('.musicplaylist li').removeClass('musicactive');
elem.addClass('musicactive');
}
function playAudio() {
$('.musicplaylist li').removeClass('musicplaying');
musicsong.play();
$('.musicplay').addClass('musichidden');
$('.musicpause').addClass('musicvisible');
$('.musiccontrols').removeClass('musicshow');
musiccontainer.find('.musiccontrols').addClass('musicshow');
$('.musicplaylist li.musicactive').addClass('musicplaying');
}
function stopAudio() {
musicsong.pause();
$('.musicplay').removeClass('musichidden');
$('.musicpause').removeClass('musicvisible');
}
// Play click
musiccontainer.find('.musicplay').click(function (e) {
e.preventDefault();
playAudio();
});
// Pause click
musiccontainer.find('.musicpause').click(function (e) {
e.preventDefault();
stopAudio();
});
// Next click
musiccontainer.find('.musicnext').click(function (e) {
e.preventDefault();
stopAudio();
var musicnext = musiccontainer.find('.musicplaylist li.musicactive').next();
if (musicnext.length == 0) {
musicnext = musiccontainer.find('.musicplaylist li:first-child');
}
initAudio(musicnext);
playAudio();
});
// Prev click
musiccontainer.find('.musicprev').click(function (e) {
e.preventDefault();
stopAudio();
var musicprev = musiccontainer.find('.musicplaylist li.musicactive').prev();
if (musicprev.length == 0) {
musicprev = musiccontainer.find('.musicplaylist li:last-child');
}
initAudio(musicprev);
playAudio();
});
// Playlist elements - click
musiccontainer.find('.musicplaylist li').click(function () {
stopAudio();
initAudio($(this));
playAudio();
});
});
<!-- Hide player with button-->
$(document).ready(function(){
$('.hidemusicplayer').click(function() {
$('.musiccontrolsinner').toggleClass( "musichidden" );
$('.musiccontrols').toggleClass( "musicclear" );
$('.hidemusicplayer').addClass( "musichidden" );
$('.showmusicplayer').addClass('musicvisible');
});
});
<!-- Show player with button -->
$(document).ready(function(){
$('.showmusicplayer').click(function() {
$('.musiccontrolsinner').toggleClass( "musichidden" );
$('.musiccontrols').toggleClass( "musicclear" );
$('.hidemusicplayer').removeClass( "musichidden" );
$('.showmusicplayer').removeClass('musicvisible');
});
});
<!-- Hide player and button at page bottom -->
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 0) {
$('.musiccontrols').addClass( "musichidden" );
}
else {
$('.musiccontrols').removeClass( "musichidden" );
}
});
What I want to do now is put each div with the class music_wrap (so each artist) in a separate html file and display/hide the contents of each artist on a "main" webpage by using ddaccordion.js.
So the html for 2 artists on my main page looks like:
<p class="mediatitle">Artist 1</p>
<div class="mediacontent">
<a class="hiddenajaxlink" href="some_path_to_artist1_folder/index.html"></a>
</div>
<br>
<p class="mediatitle">Artist 2</p>
<div class="mediacontent">
<a class="hiddenajaxlink" href="some_path_to_artist2_folder/index.html"></a>
</div>
and the code for ddaccordion.js on my main page looks like:
ddaccordion.init({
headerclass: "mediatitle", //Shared CSS class name of headers group
contentclass: "mediacontent", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
scrolltoheader: false, //scroll to header each time after it's been expanded by the user?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["closedmediatitle", "openmediatitle"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //no additional HTML added to header
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers,expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://ift.tt/L2SPkf for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
The accordions work just fine but I have no idea how to make my audioplayer code work on my main page for the accordion content in exactly the same way as it does when the html and script code are on one page. I have spent the last three days searching the internet for a solution and because I have very little knowledge of how script code really works I rely heavily on copy/paste and trial and error but after trying out a couple of hundred possibilities without success I realize that there is no way that I'm going to solve this on my own.
I have no idea what to change in the script code and I don't know if I can put all the script code on the main page or that I have to put (some of) it in the seperate htmls of the artists.
Could someone help me out?
grtz
asked 1 min ago
Aucun commentaire:
Enregistrer un commentaire