Menu
Hey guys, I’m re-doing a website and found this plug-in and an example script that I liked. Well I implemented one section and all was good, or so I thought… Past the first 2 sections, nothing works and it’s the flipping # in the <a href> tag in the slide.js script causing the problems. There is a link that “activates” the slide up or down. Another problem is I’m a java script idiot and don’t know how to fix it. I’ve been looking online all day today. Tried the onclick = “false” and javascript:void(0). The only problem is that it disables the links. oh well, maybe someone can point out what I’m doing wrong. Any help is greatly appreciated!!
Here’s the link
[URL=”http://www.thecatalystchurch.com/messages/index.php”]http://www.thecatalystchurch.com/messages/index.php
Here’s the codes…
Index.php
[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Catalyst Messages</title>
<script type=”text/javascript” src=”../res/js/jquery-1.2.2.pack.js”></script>
<script type=”text/javascript” src=”../res/js/jquery.cycle.pack.js”></script>
<script src=”../Scripts/AC_RunActiveContent.js” type=”text/javascript”></script>
<link rel=”alternate” type=”application/rss+xml”/>
<script type=”text/javascript”><!–
var data = {
“p252”:new Array(“252″,”/messages/08/lo/11-16-08.mp3″,”10.2″,”/messages/08/hi/11-16-08.mp3″,”46.2”),
“p251”:new Array(“251″,”/messages/08/lo/11-09-08.mp3″,”9.1″,”/messages/08/hi/11-09-08.mp3″,”27.3”),
“p250”:new Array(“250″,”/messages/08/lo/11-02-08.mp3″,”10.7″,”/messages/08/hi/11-02-08.mp3″,”33.5”),
“p249”:new Array(“249″,”/messages/08/lo/10-26-08.mp3″,”8.6″,”/messages/08/hi/10-26-08.mp3″,”27.4”),
“p248”:new Array(“248″,”/messages/08/lo/10-19-08.mp3″,”10.3″,”/messages/08/hi/10-19-08.mp3″,”32.5”),
“e”:0};
//–></script>
<script type=”text/javascript” src=”../res/js/slider.js”></script>
<script type=”text/javascript”>
$(document).ready(messagelinks);
</script>
<style type=”text/css”>
<!–
@import URL(“../styleSheet.css”);
body {
background-image: url(‘../images/bg_tile.jpg’);
background-repeat: repeat;
margin-left: 0px;
margin-top: 10px;
text-align:center;
position:absolute;
width:100%;
height:auto;
min-height:100%;
margin: 0 auto;
}
–>
</style>
</head>
<body>
<div id=”container”>
<div id=”Header”><img src=”../images/header.png” width=”1000″ height=”43″ /></div>
<div id=”Menu”>
<script type=”text/javascript”>
AC_FL_RunContent( ‘codebase’,’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0′,’width’,’1000′,’height’,’300′,’src’,’../flash/menu’,’quality’,’high’,’pluginspage’,’http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash’,’wmode’,’transparent’,’movie’,’../flash/menu’ ); //end AC code
</script>
<noscript>
<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0″ width=”1000″ height=”300″>
<param name=”movie” value=”../flash/menu.swf” />
<param name=”quality” value=”high” />
<param name=”wmode” value=”transparent” />
<embed src=”../flash/menu.swf” width=”1000″ height=”300″ quality=”high” pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” wmode=”transparent”></embed>
</object>
</noscript></div>
<div id=”content_sub_head”>
<img src=”../images/page_sub_head.png” />
</div>
<div id=”content_body”>
<!– DO NOT REMOVE –>
<font color=”#ffffff”>
<p align=”center”>——————————————————————————–</p>
<p align=”center”>Content</p>
</font>
<!– END OF DO NOT REMOVE –>
</div>
<div id=”sidebar1″>
<h1>More</h1>
<p><h3>By Series</h3></p>
<p><h3>By Date</h3></p>
<!– end #sidebar1 –></div>
<div id=”mainContent”>
<h1>Messages</h1>
<br />
<br />
<h2>November</h2>
<br />
<p id=”p252″ class=”si”>
<strong>Everyone Matters</strong>
<br />Harvest Principles
<br />Nathan Buck
<br />November 16, 2008
<br />Verse: John 4
<br />Time: 52 minutes, 19 seconds
</p>
<br />
<br />
<p id=”p251″ class=”si”>
<strong>Everyone Can Share</strong>
<br />Harvest Principles
<br />Matt Ginter
<br />November 9, 2008
<br />Verse: Ruth 2
<br />Time: 46 minutes, 33 seconds
</p>
<br />
<br />
<p id=”250″ class=”si”>
<strong>Coping with Election Hangover</strong>
<br />Coping with Election Hangover
<br />Nate Buck
<br />November 02, 2008
<br />Verse:
<br />Time: 57 Minutes, 9 Seconds
</p>
<br />
<br />
<h2>October</h2>
<br />
<p id=”249″ class=”si”>
<strong>Is This All There Is</strong>
<br />3am Thoughts
<br />Nate Buck
<br />October 26, 2008
<br />Verse:
<br />Time: 53 Minutes, 20 Seconds
</p>
<br />
<br />
<p id=”248″ class=”si”>
<strong>What If ___ Happens</strong>
<br />3am Thoughts
<br />Nate Buck
<br />October 19, 2008
<br />Verse:
<br />Time: 1 Hour, 1 Minute, 27 Seconds
</p>
<br />
<br />
<!– end #mainContent –></div>
<!– This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats –><br class=”clearfloat” />
<div id=”Footer”><img src=”../images/footer.png” /></div>
</div>
</body>
</html>
slide.js
[CODE]
var messagelinks = function(){
$(‘p.si’).append(“<br><img src=’http://www.campuschurch.org.nz/res/img/play_icon.png’ width=’11’ height=’9′> <a href=’#’ class=’l’>Listen Online</a> | <img src=’http://www.campuschurch.org.nz/res/img/download_icon.png’ width=’9′ height=’11’> <a href=’#’ class=’d’>Download (Right Click/Save Target As)</a>”);
$(“a.l”).click(function () {
var p = $(this).parents(‘p.si’);
var pid = p.attr(“id”);
var html = “<span class=’dp’ id=’dp_p’ style=’display:none;’><embed width=’300′ height=’20’ flashvars=’&file=”+data[pid][1]+”&autostart=false&showstop=true’ wmode=’opaque’ allowscriptaccess=’always’ allowfullscreen=’true’ quality=’high’ bgcolor=’ffffff’ name=’fplayer_”+pid+”‘ id=’fplayer_”+pid+”‘ src=’http://www.thecatalystchurch.com/mediaplayer/player.swf’ type=’application/x-shockwave-flash’/></span>”;
if(p.children().hasClass(‘dp’)) {
p.children(‘#dp_d’).slideUp(‘slow’);
if(p.children(‘#dp_p’).length > 0) { //if player html already exists
p.children(‘#dp_p’).slideToggle(‘slow’);
} else {
p.append(html);
p.children(‘#dp_p’).slideDown(‘slow’);
}
} else {
p.append(html);
p.children(‘#dp_p’).slideToggle(‘slow’);
}
return false;
});
$(“a.d”).click(function () {
var p = $(this).parents(‘p.si’);
var pid = p.attr(“id”);
if(data[pid][3] != “”) {
var html = “<span class=’dp’ id=’dp_d’ style=’display:none;font-style:italic;’><a href='”+data[pid][1]+”‘>Low Quality (“+data[pid][2]+” MB)</a>, <a href='”+data[pid][3]+”‘>High Quality (“+data[pid][4]+” MB)</a></span>”;
} else {
var html = “<span class=’dp’ id=’dp_d’ style=’display:none;font-style:italic;’><a href='”+data[pid][1]+”‘>Low Quality (“+data[pid][2]+” MB)</a></span>”;
}
if(p.children().hasClass(‘dp’)) {
if(p.children(‘#dp_p’).css(“display”)!=’none’) { //player that is hidden can’t communicate to javascript
var player = getPlayer(‘fplayer_’+pid);
if((player != undefined) && (!$.browser.msie)) {
if(player.getConfig().state == ‘IDLE’) {
p.children(‘#dp_p’).slideUp(‘slow’);
}
} else { p.children(‘#dp_p’).slideUp(‘slow’); }
}
if(p.children(‘#dp_d’).length > 0) { //if download html already exists
p.children(‘#dp_d’).slideToggle(‘slow’);
} else {
p.append(html);
p.children(‘#dp_d’).slideDown(‘slow’);
}
} else {
p.append(html);
p.children(‘#dp_d’).slideDown(‘slow’);
}
return false;
});
};
function getPlayer(gid) {
if(navigator.appName.indexOf(“Microsoft”) != -1) {
return window[gid];
} else {
return document[gid];
}
};