JavaScript and HTML - Help Please!

JohnathanAmber

JohnathanAmber

JavaScript and HTML - Help Please!

Hey everyone,

I am wokring on a new feature on the site. But it is very simular to another object already working on the site.

I already have a button, in the upper right, for navigation purposes. I also am making an available MP3 player that will sit next to the navigation button.

I know it isn't needed but hey, it is for fun.

Anyway...

I used the same code of HTML and JavaScript from the nav button. I got the MP3 player to open when I click the show player button, and hide again when I click the hide player button. But, if the player is hidden and I click on the show menu button, the player opens and the menu does not. Also, the Hide Player button shows up and the Show Menu button is still active and does nothing.

For an example go here:

http://www.tsgcomputers.net/index.php?pid=20

I renamed the labels but I can't figure this out.

Here is the code from the original HTML:

Code: 
<!-- BUTTON POP-UP LINKS MENU START -->
<script type="text/javascript" src="[URL="http://www.tsgcomputers.net/scripts/fixed.js%22%3E%3C/script"]http://www.tsgcomputers.net/scripts/fixed.js"></script[/URL]>
<script language="JavaScript" type="text/javascript">
<!-- Copyright 2001, Sandeep Gangadharan -->
<!-- For more free scripts go to [URL]http://www.sivamdesign.com/scripts/[/URL] -->
<!--
(document.getElementById) ? dom = true : dom = false;
function showIt() {
  if (dom) {document.getElementById('layer1').style.visibility='hidden';}
  if (document.layers) {document.layers["layer1"].visibility='hide';}
  }
function hideIt() {
  if (dom) {document.getElementById('layer1').style.visibility='visible';}
  if (document.layers) {document.layers["layer1"].visibility='show';}
}
// -->
</script>
<span id="layer" style="position:fixed; top:0px; right:85px; width:250; height:90; visibility:show">
<script language="JavaScript" type="text/javascript">
<!--
function buttonText(type) {
  if (type=="Hide Menu ") {document.menu.button.value="Show Menu";}
  else {document.menu.button.value="Hide Menu ";}
   showIt();
  if (document.menu.button.value=="Hide Menu ") {hideIt();}
}
// -->
</script>
<form name="menu">
<input type="button" name="button" onClick="buttonText(value);" value="Show Menu" alt="Shows the navigation menu for the site." />
</form>
</span>
<div id="layer1" style="position:fixed; top:20px; right:85px; width:250; height:90; visibility:hidden">
<table bgcolor="#ececec" border="0" cellpadding="2" cellspacing="0">
<tr><td align="left"><a href="[URL="http://www.tsgcomputers.net/"]http://www.tsgcomputers.net[/URL]" style="text-decoration: none"><img src="[URL="http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_home.gif%22%3E%3Cfont"]http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_home.gif"><font[/URL] face="verdana, arial, helvetica, sans-serif" size="1"><b>Home</b></font></a></td></tr>
<tr><td align="left"><a href="[URL]http://www.tsgcomputers.net/forum/index.php[/URL]" style="text-decoration: none"><img src="[URL="http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_forum.gif%22%3E%3Cfont"]http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_forum.gif"><font[/URL] face="verdana, arial, helvetica, sans-serif" size="1"><b>Forum</b></font></a></td></tr>
<tr><td align="left"><a href="[URL]http://www.tsgcomputers.net/index.php?pid=15[/URL]" style="text-decoration: none"><img src="[URL="http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_chat.gif%22%3E%3Cfont"]http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_chat.gif"><font[/URL] face="verdana, arial, helvetica, sans-serif" size="1"><b>IRC Chatroom</b></font></a></td></tr>
<tr><td align="left"><a href="[URL]http://www.tsgcomputers.net/index.php?ind=downloads[/URL]" style="text-decoration: none"><img src="[URL="http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_down.gif%22%3E%3Cfont"]http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_down.gif"><font[/URL] face="verdana, arial, helvetica, sans-serif" size="1"><b>Downloads</b></font></a></td></tr>
<tr><td align="left"><a href="[URL]http://www.tsgcomputers.net/forum/index.php?action=links[/URL]" style="text-decoration: none"><img src="[URL="http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_toplist.gif%22%3E%3Cfont"]http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_toplist.gif"><font[/URL] face="verdana, arial, helvetica, sans-serif" size="1"><b>Links</b></font></a></td></tr>
<tr><td align="left"><a href="[URL]http://www.tsgcomputers.net/eyeos[/URL]" style="text-decoration: none"><img src="[URL="http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_cpaf.gif%22%3E%3Cfont"]http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_cpaf.gif"><font[/URL] face="verdana, arial, helvetica, sans-serif" size="1"><b>TSGC eyeOS</b></font></a></td></tr>
<tr><td align="left"><a href="[URL]http://www.tsgcomputers.net/forum/index.php?action=invite[/URL]" style="text-decoration: none"><img src="[URL="http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_members.gif%22%3E%3Cfont"]http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_members.gif"><font[/URL] face="verdana, arial, helvetica, sans-serif" size="1"><b>Invite</b></font></a></td></tr>
<tr><td align="left"><a href="[URL]http://www.tsgcomputers.net/forum/index.php?action=register[/URL]" style="text-decoration: none"><img src="[URL="http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_blog.gif%22%3E%3Cfont"]http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_blog.gif"><font[/URL] face="verdana, arial, helvetica, sans-serif" size="1"><b>Register</b></font></a></td></tr>
<tr><td align="left"><a href="[URL]http://www.tsgcomputers.net/index.php?pid=17[/URL]" style="text-decoration: none"><img src="[URL="http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_racconti.gif%22%3E%3Cfont"]http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_racconti.gif"><font[/URL] face="verdana, arial, helvetica, sans-serif" size="1"><b>Suggestions Form</b></font></a></td></tr>
<tr><td align="left"><a href="[URL]http://www.tsgcomputers.net/index.php?pid=2[/URL]" style="text-decoration: none"><font face="verdana, arial, helvetica, sans-serif" size="1"><b>Christian Resources</b></font></a></td></tr>
<tr><td align="left"><a href="[URL]http://www.tsgcomputers.net/index.php?pid=1[/URL]" style="text-decoration: none"><img src="[URL="http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_cpap.gif%22%3E%3Cfont"]http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_cpap.gif"><font[/URL] face="verdana, arial, helvetica, sans-serif" size="1"><b>Tools and Utilities</b></font></a></td></tr>
<tr><td align="left"><a href="[URL]http://www.tsgcomputers.net/index.php?ind=news[/URL]" style="text-decoration: none"><img src="[URL="http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_foto.gif%22%3E%3Cfont"]http://www.tsgcomputers.net/mkportal/templates/Forum/images/atb_foto.gif"><font[/URL] face="verdana, arial, helvetica, sans-serif" size="1"><b>Website news</b></font></a></td></tr>
</table>
</div>
<!-- BUTTON POP-UP LINKS MENU END -->

Continues below...
 
Here is the modified code for the MP3 Player:

Code: 
<!-- BUTTON POP-UP MP3 PLAYER  START -->
<script type="text/javascript" src="[URL="http://www.tsgcomputers.net/scripts/fixed.js%22%3E%3C/script"]http://www.tsgcomputers.net/scripts/fixed.js"></script[/URL]>
<script language="JavaScript" type="text/javascript">
<!-- Copyright 2001, Sandeep Gangadharan -->
<!-- For more free scripts go to [URL]http://www.sivamdesign.com/scripts/[/URL] -->
<!--
(document.getElementById) ? dom = true : dom = false;
function showIt() {
  if (dom) {document.getElementById('mp3').style.visibility='hidden';}
  if (document.layers) {document.layers["mp3"].visibility='hide';}
  }
function hideIt() {
  if (dom) {document.getElementById('mp3').style.visibility='visible';}
  if (document.layers) {document.layers["mp3"].visibility='show';}
}
// -->
</script>
<span id="player1" style="position:fixed; top:0px; right:200px; width:250; height:90; visibility:show">
<script language="JavaScript" type="text/javascript">
<!--
function buttonText(type) {
  if (type=="Hide Player ") {document.playerform.pbutton.value="Show Player";}
  else {document.playerform.pbutton.value="Hide Player ";}
   showIt();
  if (document.playerform.pbutton.value=="Hide Player ") {hideIt();}
}
// -->
</script>
<form name="playerform">
<input type="button" name="pbutton" onClick="buttonText(value);" value="Show Player " alt="Shows the MP3 Player." />
</form>
</span>
<div id="mp3" style="position:fixed; top:25px; right:100px; width:250; height:90; visibility:hidden">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
 codebase="[URL]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0[/URL]"
 width="300" 
 height="315">
  <param name=movie value="[URL]http://www.tsgcomputers.net/player/flam-player.swf[/URL]">
  <param name=flashVars 
value="fp_root_url=http://www.tsgcomputers.net/player/&ovr_color=0x003388&ovr_langage=en&ovr_playlist=all&ovr_author=all&o
vr_order=filename_music&ovr_order_direction=ASC&ovr_autoplay=0&ovr_loop_playlist=1&ovr_loop_tracks=0&ovr_shuffle=1">
  <param name=menu value=false>
  <param name=quality value=best>
  <param name=wmode value=transparent>
  <param name=bgcolor value=#383838>
               
 <embed src="[URL]http://www.tsgcomputers.net/player/flam-player.swf[/URL]"
  
flashVars="fp_root_url=http://www.tsgcomputers.net/player/&ovr_color=0x003388&ovr_langage=en&ovr_playlist=all&ovr_author=
all&ovr_order=filename_music&ovr_order_direction=ASC&ovr_autoplay=0&ovr_loop_playlist=1&ovr_loop_tracks=0&ovr_shuffle=1"
  menu=false
  quality=best
  wmode=transparent
  bgcolor=#383838
  width="300"
  height="315"
  type="application/x-shockwave-flash"
  pluginspage="[URL]http://www.macromedia.com/go/getflashplayer[/URL]">
 </embed>
</object>
</div>
<!-- BUTTON POP-UP MP3 PLAYER END -->

What am I missing?

God bless and Thank you,
Johnathan
 
Basically, since there is a lot of code...

I removed the table from the 1st amoutn of code and replaced it with the embedded object.

Renames the button, the form and the layer, yet they still collide with each other.

Oh and the javascript... fixed.js, is nothing more than a file to allow this to work correctly in IE 6 and below.
 
Waiting on activation from the site admins...

Thanks for the resource.

Also, I spoke with a programmer from work who knows HTML... a great guy.

Anyway, something that I didn't know was that the function 'buttonText' had to also be renamed as well as the 'showIt' and 'hideIt' statements.

It is wokring now but I have to figure out how to make it not reload every time you go to another page within the site.

Thanks for the help.
 
You must log in or register to reply here.
Back
Top