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 2 of 2
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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?

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    You could try:

    'onplay': function() { document.getElementById( 'img1' ).style.visibility = document.getElementById( 'img2' ).style.visibility = 'visible'; },


  •  

    Posting Permissions

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