1. Hello Guest! You are browsing the forums as a guest; you will have limited permissions as a guest so we advise registering to enjoy the forums fully. Remember: we are a Christian ONLY site - any user who is not Christian will not be approved. Blessings, Christian Forum Site Staff
    Dismiss Notice

JavaScript and HTML - Help Please!

Discussion in 'Technology and Internet' started by JohnathanAmber, Nov 8, 2007.

  1. 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...
     
  2. 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
     
  3. 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.
     
  4. 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.
     
  5. No problem. I have been helped there in the past myself.
     

Share This Page