#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0

    How do I make an image appear when a music player starts?


    I have a fixed image on my blog, the code for which is:

    Code:
    <html>
    <head>
    <style type="text/css">
    
    #img1{
      position: fixed;
      right: 10px;
      bottom: 100px;
      z-index: 10;
    }
    
    </style>
    </head>
    
    <body>
      <img src="IMAGE1.png" id="img1">
    </body>
    </html>
    And I'd like it to appear ONLY WHEN my music player begins playing. The code for that is:
    Code:
      <!--SCM Music Player by Adrian C Shum - http://scmplayer.net-->
    <script type="text/javascript" src="http://scmplayer.net/script.js" ></script>
    <script type="text/javascript">
    SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'true','shuffle':'true','volume':'40'},'playlist':[{'title':'2Spooky Battle','url':'http://a.tumblr.com/tumblr_mbdoptQ5LT1rte8jio1.mp3'}], 'onplay': function() {alert('playing');},'placement':'bottom','showplaylist':'false'}");
    </script>
    <!--End of SCM Music Player script-->
    I also need the image to remain fixed where it is even when someone goes to the next page on my blog. (As in, not have it reload.)
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    4
    Rep Power
    0

    How do I change CSS properties when a music player starts using JavaScript?


    I have a music player on my page, the code for which is this:
    Code:
    <!--SCM Music Player by Adrian C Shum - http://scmplayer.net-->  
    <script type="text/javascript" src="http://scmplayer.net/script.js" ></script>  
    <script type="text/javascript">  
    SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'true','shuffle':'true','volume':'40'},'playlist':[{'title':'2Spooky Battle','url':'http://a.tumblr.com/tumblr_mbdoptQ5LT1rte8jio1.mp3'}], 'onplay': function() {alert('playing');},'placement':'bottom','showplaylist':'false'}");  
    </script>  
    <!--End of SCM Music Player script-->
    I also have two images, the codes for which look like this:
    Code:
    <html>
    <head>
    <style type="text/css">
    
    #img1{
      position: fixed;
      right: 10px;
      bottom: 100px;
      z-index: 10;
      visibility:hidden;
    }
    
    #img2{
      position: fixed;
      left: 10px;
      top: 10px;
      z-index: 10;
      visibility:hidden;
    }
    
    </style>
    </head>
    
    <body>
      <img src="IMAGE1.png" id="img1">
      <img src="IMAGE2.png" id="img2">
    </body>
    </html>
    I would like to work it so both of those become "visible" when the player starts. What would I need to add/take out/replace for this to work?
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Welcome to DevShed Forums, ted.johnson0988.

    In the future, please don't start multiple threads for the same question.

    In your code, there is this:
    Code:
    'onplay': function() {alert('playing');},
    Try changing it to this:
    Code:
    'onplay': function() {
      document.getElementById('img1').style.visibility='visible';
      document.getElementById('img2').style.visibility='visible';
      alert('playing');
    },
    If that doesn't work, you may need to contact the script's author.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo