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 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    79
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Question Strange issue with an external JS file's interference?

    I don't know one blessed thing about Javascript, except, perhaps, how to spell it. That being said...


    I recently installed a simple JS audio player "mooTunes". It relies on the following external js files:

    AudioCheck-nc.js
    IdleTimer.js
    mootools-1.2.4-core.js
    mootools-cnet-debug.js
    mtAudioPlayer-nc.js
    mtAudioPlayer.js
    mtAudioPlayerUI-nc.js
    mtAudioPlaylist-nc.js

    and one external CSS file:

    mooTunes-nc.css

    This the the inline head information:

    Code:
     <script type="text/javascript" src="player/js/mootools-1.2.4-core.js "></script>
        <script type="text/javascript" src="player/js/mootools-cnet-debug.js"></script> 
        <script type="text/javascript" src="player/js/IdleTimer.js"></script>
            
        <script type="text/javascript" src="player/js/AudioCheck-nc.js"></script>
        <script type="text/javascript" src="player/js/mtAudioPlayer-nc.js"></script>
        <script type="text/javascript" src="player/js/mtAudioPlayerUI-nc.js"></script>
        <script type="text/javascript" src="player/js/mtAudioPlaylist-nc.js"></script>
    
        <style type="text/css" media="screen">
            #mooTunes{
                margin:0 auto 100px;
                width:300px;
            }
        </style>
            
        <link rel="stylesheet" href="player/css/mooTunes-nc.css" type="text/css" media="screen" title="mtAudio Player Style Sheet" charset="utf-8" />
        
        <script type="text/javascript" charset="utf-8">
            var mooTunes, playlist, mtPlayer, tinyToggle, tinyToggleTimer;
    
            tinyToggle = function(){
                this.name.fade("toggle");
                this.artist.fade("toggle");
            }
            
            
    
            window.addEvent("domready", function(){
                if(! new AudioCheck().check()){
                    document.body.adopt(new Element("p", { html : "Your browser does not support HTML5 audio"}));
                    return;
                }
                
               playlist = [ {artist : "Artist One", mp3:"player/media/1.mp3",ogg:"player/media/1.ogg"}, 
                            {artist : "Artist Two", mp3:"player/media/2.mp3",ogg:"player/media/2.ogg"}, 
                            {artist : "Artist Three", mp3:"player/media/3.mp3",ogg:"player/media/3.ogg"}
                            ];        
         
    
                
               playlist = new mtAudioPlaylist( { tracks : playlist, parent : $("mooTunes") });
               $(playlist).store("shrink", new Fx.Tween($(playlist), { onComplete: function(){ dbug.log("complete"); $(playlist).setStyle("display", "none"); } } ));
               
               mtPlayer = new mtAudioPlayer({ auto : true, volume : 10, tracks : playlist })
                    playlist.setPlayer(mtPlayer);
              
               mooTunes = new mtAudioPlayerUI( mtPlayer, { player : mtPlayer, parent : $('mooTunes'), noShrinker : $('mooTunes'), shrinkable : true, 
                                                onShrink : function(){ 
                                                        $(playlist).retrieve("shrink").start("opacity",0);
                                                        mooTunes.readoutElems.artist.fade("hide");
                                                        tinyToggleTimer = tinyToggle.periodical(2500, mooTunes.readoutElems);
                                                }, 
                                                onGrow : function(){ 
                                                    $(playlist).fade("in").setStyle("display", ""); 
                                                    tinyToggleTimer = $clear(tinyToggleTimer); 
                                                     mooTunes.readoutElems.name.fade("show");
                                                     mooTunes.readoutElems.artist.fade("show");
                                                } 
                                                }).inject();
               playlist.inject();
    
            });
        </script>
    (As you can see, it includes a snippet of CSS for the player's div ID.) All these JS files are in their own folder, within the player's own unique directory, so "player/js/js_filename.js"

    Now, we come to the head-scratcher:

    I have a plain, simple testing page and the player works fine. HERE IT IS. The only external js files called for in this page's head are the ones that came with the player. Check out what happens when you click the Play button. Nothing out of the ordinary. It works as intended.

    I have a designed page (well, not finished, but enough for today). THE PLAYER appears but check out what happens when you click the Play button. What is that about? My URL is appearing twice?

    Here's the rub... there is a file in the header of the designed page:
    Code:
      <script src="js/jquery-1.js" type="text/javascript"></script>
    There was also a js file
    Code:
    <script src="js/mootools-core.js" type="text/javascript"></script>
    but, even though it's a mootools file, it did not come with the player. It was there for something else I no longer have. I'd forgotten it was still in the head and the audio player would not appear until I deleted its link. As soon as I did, the player finally appeared (which is odd, since the player sources from "player/js/file" and the file I deleted sourced from "js/file", which is where the overall page design and function sources from. I kept the player in its own directory, hoping to avoid conflicts, but it doesn't seem to have helped and here is why: the file jquery-1.js. If I remove the link for it from the header of the design page, the player disappears. Not just delete it but if I even move it. But if I add it to the header of the simple testing page, that player disappears. (You see, I had added its link to the simple testing page's head to determine if the play button's function was negatively affected as it is in the design page. I was pretty surprised when adding it made the whole thing disappear! So... to recap, remove it from my designed page's head and the player disappears. Add it to the test page's head and that player disappears.

    The jquery-1.js file is part of the site's overall design (other elements have not yet been added to the page I'm designing). Since the player disappears when I remove its link, do you think this file is what's messing up the play button?

    I can see all of you rolling your eyes. I guess I deserve it.



    Just editing to say that I upgraded from jquery-1.js to jquery-1.11.1.js. I was then able to remove it from the designed page's head without the player disappearing. so the jquery file seems to have nothing to do with the button. (Of course, I'll add it back later, when I need it.) This all seems to be about coding, then, since the simple testing page and the designed page share the same external resource files and the same path to those files. Very odd. I'll try not to change too much before anyone has the time to look at it, but I do have to slog on. Thanks for any help.
    Last edited by IAmGrammy; 07-08-2014 at 01:06 PM. Reason: Removed links.

  • #2
    New Coder
    Join Date
    Apr 2012
    Posts
    79
    Thanks
    18
    Thanked 0 Times in 0 Posts
    You guys may delete this thread, if you like. I sorted it by removing the base href.

  • #3
    New to the CF scene
    Join Date
    Dec 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am worse at this Javascript and CSS then you.. I can't even get my stuff to show up on a test page... I've moved the CSS and JS folders into my website directory. So to get this audio player to work you put all of those scripts in the <head> and </head> tags, in the <link> tag you removed the href="player/css/mooTunes-nc.css" and made sure that both the <script src="js/jquery-1.js" type="text/javascript"></script> and mootools-core.js script wasn't in the source code..? I can't get the audio player to show up at all in any browser...


  •  

    Posting Permissions

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