943,673 Members | Top Members by Rank

Ad:
Dec 10th, 2008
0

Audio Pop Up Window

Expand Post »
I used a wonderful resource at oreillynet to grab a pretty nice script to open up mp2's in a little .js pop up window. I'm just having a little issue trying to get the link color to change. I see where the code is and have tried several reditions. Just not accomplishing getting the link customized to match rest of site.

Here is site for example test audio pop up

Only first audio link "All Right" is working right now to test...

disclaimer: I know the site is graphic heavy and not perfect by any means, but i'm learning here :0)

Down the line i would like to actually get rid of the fact that this opens the default player for system and actually really have more control over look and feel, but this will work for now.

This is the external file as a .js

// Pop-Up Embedder Script by David Battino, www.batmosphere.com
// Version 2006-05-31  
// OK to use if this notice is included
   
function BatmoAudioPop(filedesc,filepath,WindowNumber) 
{

// Get Operating System 
var isWin = navigator.userAgent.toLowerCase().indexOf("windows") != -1
if (isWin) {
    // Use MIME type = "application/x-mplayer2";
	visitorOS="Windows";
} else {
    // Use MIME type = "audio/mpeg"; // or audio/x-wav or audio/x-ms-wma, etc.
	visitorOS="Other";
}

// Get the MIME type of the audio file from its extension (for non-Windows browsers)
var mimeType = "audio/mpeg"; // assume MP3/M3U
var objTypeTag = "application/x-mplayer2"; // The Windows MIME type to load the WMP plug-in in Firefox, etc.

var theExtension = filepath.substr(filepath.lastIndexOf('.')+1, 3); // truncates .aiff to aif
if (theExtension.toLowerCase() == "wav") { mimeType = "audio/x-wav"};
if (theExtension.toLowerCase() == "aif") { mimeType = "audio/x-aiff"}; 
if (theExtension.toLowerCase() == "wma") { mimeType = "audio/x-ms-wma"};
if (theExtension.toLowerCase() == "mid") { mimeType = "audio/mid"};
// Add additional MIME types as desired

if (visitorOS != "Windows") { 
objTypeTag = mimeType; // audio/mpeg, audio/x-wav, audio/x-ms-wma, etc.
};

    PlayerWin = window.open('',WindowNumber,'width=320,height=217,top=0, left=0,screenX=0,screenY=0,resizable=0,scrollbars=0,titlebar=0,toolbar=0,menubar=0,status=0,directories=0');

    PlayerWin.focus();
    PlayerWin.document.writeln("<html><head><title>" + filedesc + "</title></head>");
    PlayerWin.document.writeln("<body bgcolor='#333333'; text='#FFFFFF'; font-family='verdana, geneva, san-serif'; 			 background='images/player_background.jpg'>"); // specify background img if desired
    PlayerWin.document.writeln("<div align='center'>");
    PlayerWin.document.writeln("<b style ='font-size:14px;font-family:verdana, geneva, san-serif;line-height:1.6;background:#333333'>" + filedesc + "</b><br />");
    PlayerWin.document.writeln("<object width='280' height='69'>");
    PlayerWin.document.writeln("<param name='src' value='" +  filepath + "'>");
    PlayerWin.document.writeln("<param name='type' value='" + objTypeTag + "'>");
    PlayerWin.document.writeln("<param name='autostart' value='1'>");
    PlayerWin.document.writeln("<param name='showcontrols' value='1'>"); 
    PlayerWin.document.writeln("<param name='showstatusbar' value='1'>");
    PlayerWin.document.writeln("<embed src ='" + filepath + "' type='" + objTypeTag + "' autoplay='true' width='280' height='69' controller='1' showstatusbar='1' bgcolor='#7e7243' kioskmode='true'>");
    PlayerWin.document.writeln("</embed></object></div>");
    PlayerWin.document.writeln("<p style='font-size:12px;color:#FFFFFF;  font-family:Verdana, Geneva, sans-serif; text-align:center'><a href='" + filepath +"'>download</a> <span style='font-size:10px'>(right-click or Control-click)</span></p>");
    PlayerWin.document.writeln("<form><div align='center'><input type='button' value='close' onclick='javascript:window.close();'></div></form>");
    PlayerWin.document.writeln("</body></html>");

    PlayerWin.document.close(); // "Finalizes" new window
}

Highlighted in red is link area, not sure what to put in to get change from default link color and hover instances.

TIA - Johnny
Last edited by jproducer; Dec 10th, 2008 at 2:12 am.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
jproducer is offline Offline
18 posts
since Sep 2008
Dec 11th, 2008
0

Re: Audio Pop Up Window

Use css with the following example:

<style type="text/css">
<!--
a:link.mp3 {
color:YourColorHere;
text-decoration:underline;
font-weight:bold;
font-size:12px;
}
a:active.mp3 {
color:YourColorHere;
text-decoration:underline;
font-weight:bold;
font-size:12px;
}
a:visited.mp3 {
color:#YourColorHere;
text-decoration:underline;
font-weight:bold;
font-size:12px;
}
a:hover.mp3 {
color:white;
background-color:YourColorHere;
text-decoration:underline;
font-weight:bold;
font-size:12px;
}
-->
</style>

Change appropriate params above, ie, text-decoration, font-weight, font-size, etc.

Then call your js with a link like
<a class="mp3" href="javascript:YourJSName">NameofLink</a>

Good luck,
cmc
Reputation Points: 10
Solved Threads: 1
Newbie Poster
SavyCat is offline Offline
5 posts
since Dec 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: how to get all the folder names in a directory.
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Removing <p> elements with a certain className





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC