Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts

    Javascript Not Working in FF2

    OK, I'm relatively unskilled at implementing javascript so I'm in need of assistance. The page code is a little cluttered with the vestiges of old WMPlayer embeds and some other commented out junk so please pardon my dust.

    My work-in-progress site is here:
    http://rowsdower.webs.com/ssrp/home.html

    The scripts involved in the problem are located here:
    http://rowsdower.webs.com/ssrp/scrip...aming_radio.js

    I know that in HTML/CSS this is the battle cry of beginners everywhere and there is probably a parallel in the javascript world, but I have to say it... The page has full functionality in IE7 (it behaves exactly as I understand javascript to behave) but in FF2 I get problems with 2 items in particular.

    Through trial and error removing one function call at a time until things worked I have found that my "radionowplaying" and "highlight" functions are the culprits. In FF2 the links using these functions (all of the links to radio streams on the left hand side of the page -- the video section is not up and running yet) will ignore the javascript completely and try to navigate to a page that doesn't exist, so freewebs throws up the default "not found" page.

    Because of my menu <a> links right now I am using <a href="#" onclick="<code stuff>;return false;"> to prevent the browser from actually trying to load the href "#" which works in IE7, but FF2 isn't paying attention to this. I previously used <a href="#nogo" onclick="<code stuff>;"> and the "not found" page was never called in FF2, however the javascript was still ignored when these two problem functions were involved (presumably due to an error that I can't locate) so this can't be the full solution. If I need to go back to the days of #nogo that's fine, but the functions still need some love in one way or another.

    Can anyone tell me why these functions would be causing a problem in FF (and not in IE)?

    Here is the <a> link system I am using for my onclick (the <a> links have their style altered by the "highlight" function based on their ID):
    Code:
              <li><h3>Oldies >></h3>
                <ul>
                  <li><a href="#" id="oldies1" onclick="highlight(oldies1);radionowplaying(oldies1);radioswitch('http://live.cumulusstreaming.com/WGRR-FM');return false;">103.5 WGRR (Oldies)</a></li>
                  <li><a href="#" id="oldies2" onclick="highlight(oldies2);radionowplaying(oldies2);radioswitch('http://live.cumulusstreaming.com/WRQN-FM');return false;">93.5 WRQN (Oldies)</a></li>
                  <li><a href="#" id="oldies3" onclick="highlight(oldies3);radionowplaying(oldies3);radioswitch('http://live.cumulusstreaming.com/KPUR-FM');return false;">107.1 KPUR-FM (Oldies)</a></li>
                  <li><a href="#" id="oldies4" onclick="highlight(oldies4);radionowplaying(oldies4);radioswitch('http://live.cumulusstreaming.com/KBKL-FM');return false;">107.9 KBKL-FM (Oldies)</a></li>
                  <li><a href="#" id="oldies5" onclick="highlight(oldies5);radionowplaying(oldies5);radioswitch('http://live.cumulusstreaming.com/KCMO-FM');return false;">94.9 KCMO-FM (Oldies)</a></li>
                  <li><a href="#" id="oldies6" onclick="highlight(oldies6);radionowplaying(oldies6);radioswitch('http://live.cumulusstreaming.com/WVBO-FM');return false;">103.9 WVBO-FM (Oldies)</a></li>
                  <li><a href="#" id="oldies7" onclick="highlight(oldies7);radionowplaying(oldies7);radioswitch('http://live.cumulusstreaming.com/WOGB-FM');return false;">103.1 WOGB-FM (Oldies)</a></li>
                  <li><a href="#" id="oldies8" onclick="highlight(oldies8);radionowplaying(oldies8);radioswitch('http://live.cumulusstreaming.com/WAYS-AM');return false;">1500 WAYS-AM (Oldies)</a></li>
                  <li><a href="#" id="oldies9" onclick="highlight(oldies9);radionowplaying(oldies9);radioswitch('http://live.cumulusstreaming.com/WFVL-FM');return false;">106.9 WFVL-FM (Oldies)</a></li>
                  <li><a href="#" id="oldies10" onclick="highlight(oldies10);radionowplaying(oldies10);radioswitch('http://live.cumulusstreaming.com/WDBQ-FM');return false;">107.5 WDBQ-FM (Oldies)</a></li>
                </ul>
              </li>
    This is where the "radioplayer" and the "radionowplaying" elements reside:
    Code:
          <div style="width:350px;margin:0 auto;text-align:center;"> <!-- Open Player -->
            <div id="radioplayer">the player will be placed here</div>
            <script type="text/javascript">
              var elm3 = document.getElementById("radioplayer");
              var src = 'embed/wmvplayer.xaml';
              var cfg = {
                file:'',
                width:'250',
                height:'20',
                volume:'10'
              };
              var ply = new jeroenwijering.Player(elm3,src,cfg);
            </script>
            <br />Now Playing: <span id="radionowplaying"><br />--</span>
          </div> <!-- Close Player -->
    The player responds just fine when that function is isolated, but when the "now playing" function is added in everything breaks.

    Last but not least here are the pertinent functions involved in this entire process:
    Code:
    var lastElm = null;
    function highlight(elm){
        if (lastElm) {
          lastElm.style.backgroundColor = "#fff";
          lastElm.style.color = "#000";
          lastElm.onmouseover = function() {
              this.style.backgroundColor = "#123456";
              this.style.color = "#fff";
          }
          lastElm.onmouseout = function() {
              this.style.backgroundColor = "#fff";
              this.style.color = "#000";
          }
        }
        elm.style.backgroundColor = "#F5FF57";
        elm.style.color = "#000";
        elm.onmouseover = null;
        elm.onmouseout = null;
        lastElm = elm;
      }
    
    function radionowplaying(station){
      document.getElementById('radionowplaying').innerHTML="<br>"+station.innerHTML;
      }
    
    function radioswitch(station){
      var elm1 = document.getElementById('radioplayer');
      var src = 'embed/wmvplayer.xaml';
      var cfg = {
        file: station,
        width:'250',
        height:'20',
        autostart:'true', 
        volume:'25' 
      }; 
      var ply = new jeroenwijering.Player(elm1,src,cfg); 
    }
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    id="oldies1" onclick="highlight(oldies1);radionowplaying(oldies1);
    They must be in quotes, I believe, to avoid errors like
    'oldies1' is undefined
    If you are passing a string(which is the id value of an element) you'd need to use the document.getElementById() function to refer that element.

    Wait....
    Try them like
    Code:
    <li><a href="#" id="oldies1" onclick="highlight(this);radionowplaying(this);radioswitch('http://live.cumulusstreaming.com/WGRR-FM');return false;">103.5 WGRR (Oldies)</a></li>
    Here, in your case, the this reference will take care of that.
    Last edited by abduraooft; 03-24-2009 at 05:00 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Well, adding single quotes didn't make any difference but the "this" fix seems to be working nicely. I'll celebrate a little more once I have a chance to test it more fully.

    Thanks, ab!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Well, adding single quotes didn't make any difference [...]
    Code:
    onclick="highlight('oldies1');radionowplaying('oldies1');..........
    Code:
    function highlight(id){
        elm=document.getElementById(id);
        if (lastElm) {
          lastElm.style.backgroundColor = "#fff";
          lastElm.style.color = "#000";
            ...............
    The above should also work, though using this is obviously the easy choice.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by abduraooft View Post
    Code:
    onclick="highlight('oldies1');radionowplaying('oldies1');..........
    Code:
    function highlight(id){
        elm=document.getElementById(id);
        if (lastElm) {
          lastElm.style.backgroundColor = "#fff";
          lastElm.style.color = "#000";
            ...............
    The above should also work, though using this is obviously the easy choice.
    Oh, I see! It looks like too much of an attempt at short-hand was shooting me in the foot at the same time. I wrecked my syntax trying to be lazy.

    That explains the problem a little better. Thanks!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Oh.. and btw, you could avoid all that inline event handlers and adopt some progressive enhancements to your markup, by invoking a function in the onload of your window and then dynamically add all other onclick even handlers.

    Take a look at http://www.codingforums.com/showthread.php?t=132274 to see a basic example.
    Last edited by abduraooft; 03-25-2009 at 08:55 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    That's funny, I was just reading up on something similar posted by VIPStephan in another thread. It's a bit intimidating for my current level of javascript experience (next-to-none) but it's going to be my next goal.

    I like clean code.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •