Member Avatar for ablitz

Hi I can't get my toggle button to work so once again I'm here hoping for some good soul to help me. Below is my jQuery code. I have 2 css clasess 1st is play with a referenace to jpg play and the 2nd one has reference to pause.jpg. All i want is simply to toggle between the two.

html

<span id="play"></span>

css

#play
{
	width:100px;
	height:60px;
	background-image: url(../images/play.jpg);
	float:left;
}
#pause
{
	width:100px;
	height:60px;
	background-image: url(../images/pause.jpg);
	float:left;
}

jQuery

$(document).ready(function(){
    $('#play').click(function(){
							 
        $(this).toggleClass("#pause");
    });
});
  • 3 Contributors
  • 5 Replies
  • 4K Views
  • 8 Months Discussion Span
  • Latest Post Latest Post by amko
Member Avatar for pritaeas

1. The reason I use div's is because span's often give me trouble.
2. toggleClass toggles a specific class on and off, so you can't use it like you do now
3. I gave my div the id #toggle, so I could bind the click to.
4. In the click event I check the class of the toggle div, and set the other one.
5. Since I'm changing the classes now, I had to replace the # in the CSS with a dot.

<html>
  <head>
    <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
    <style>
      .play {
        width:100px;
        height:60px;
        background-image: url(play.png);
        float:left;
      }
      .pause {
        width:100px;
        height:60px;
        background-image: url(pause.png);
        float:left;
      }
    </style>
  </head>
  <body>
    <div id="toggle" class="play"></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#toggle').bind("click", function() {
          if ($(this).attr("class") == "play")
             $(this).attr("class", "pause");
          else
             $(this).attr("class", "play");
        });
      });
    </script>
  </body>
</html>
commented: Great helper! Very dedicated person!A+++++ +1
Member Avatar for ablitz

1. The reason I use div's is because span's often give me trouble.
2. toggleClass toggles a specific class on and off, so you can't use it like you do now
3. I gave my div the id #toggle, so I could bind the click to.
4. In the click event I check the class of the toggle div, and set the other one.
5. Since I'm changing the classes now, I had to replace the # in the CSS with a dot.

<html>
  <head>
    <script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
    <style>
      .play {
        width:100px;
        height:60px;
        background-image: url(play.png);
        float:left;
      }
      .pause {
        width:100px;
        height:60px;
        background-image: url(pause.png);
        float:left;
      }
    </style>
  </head>
  <body>
    <div id="toggle" class="play"></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#toggle').bind("click", function() {
          if ($(this).attr("class") == "play")
             $(this).attr("class", "pause");
          else
             $(this).attr("class", "play");
        });
      });
    </script>
  </body>
</html>

Thank you very much for your post!!! Very informative and straight to the point! I admire your dedication helping others like you do! Superb!!!!

Member Avatar for pritaeas

Thanks. I had a lot of help too while learning jQuery. Glad to return the favour.

If it solved your problem, would you please mark this thread solved.

Member Avatar for ablitz

Thanks. I had a lot of help too while learning jQuery. Glad to return the favour.

If it solved your problem, would you please mark this thread solved.

done!

Member Avatar for amko

This was a great solution, but is there a way to add a "play" and "pause" function to this script?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.