CODEWITHSUNDEEP
javascriptjquerytoggle
Maurice
Maurice

Reputation: 1157

Toggle between two functions

Currently I have a button which changes its text from Pause to Resume when clicking on it. I use jQuery and toggle for this:

$(document).ready(function() {
    $("#pause").click(function() {
      $("td").toggle();
      $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
    });
});

This all works. I also have 2 functions:

function pauseTimer() 
function startTimer()

How do I "integrate" these two functions into my toggle code? So when I hit Pause it will toggle the text to Resume AND also use the function pauseTimer() and if I hit the button again, the text will change back to Pause and also use StartTimer()?

Thanks

Upvotes: 1

Views: 243

Answers (9)

user2550165
user2550165

Reputation: 25

$(document).ready(function() {
$("#pause").click(function(pauseTimer(),StartTimer()) {
  $("td").toggle();
  $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
});
});

Upvotes: 1

Danny
Danny

Reputation: 7518

Another option would be to do the following.

//jQuery 1.8 toggle replacement
$.fn.toggleClick = function(){
    var methods = arguments,
        count = methods.length;
    return this.each(function(i, item){
        var index = 0;
        $(item).click(function(){
            return methods[index++ % count].apply(this,arguments);
        });
    });
};

function startTime() {
    $("td").toggle();
    $(this).val("Start");
}

function pauseTime() {
    $("td").toggle();
    $(this).val("Pause");
}

$("#clickme").toggleClick(startTime,pauseTime);

JSFiddle

Upvotes: 1

Dan Brown
Dan Brown

Reputation: 1525

You can use the jQuery is visible method:

if ($('td').is(":visible"))
{
pauseTimer();
}
else
{
startTimer()
}

Dan

Upvotes: 1

Marikkani Chelladurai
Marikkani Chelladurai

Reputation: 1430

$(this).html() == "Pause" ? pauseTimer() : startTimer();

Will work. You have to change the html content of the element to Start or Pause in the functions so that the function will run alternatively according to the html of the element.

Upvotes: 2

palaѕн
palaѕн

Reputation: 73906

You can use the window method here like:

$("#pause").click(function () {
    $("td").toggle();
    $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
    window[$(this).html() === "Resume" ? "pauseTimer" : "startTimer"]();
});

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Try this

$('selector').click(function () { // on click event
  var song = $('theaudiotag');
  if(song.paused) { // if song is paused
     $(this).play(); // play it
     $(this).html('Pause'); // change text
  } else { // otherwise
     $(this).pause(); // pause it
     $(this).html('Play'); // change text
  }
}

This uses jQuery API to check for the current status of the audio tag, and then toggle its state to play or pause and at the same time. It will work cross-browser.

Upvotes: 1

Plato
Plato

Reputation: 11052

var globalTimerPaused = false;
$(document).ready(function() {
    $("#pause").click(function() {
      $("td").toggle();
      $(this).html($(this).html() == "Pause" ? "Resume" : "Pause");
      if(!globalTimerPaused){ pauseTimer() } else { startTimer() };
      globalTimerPaused = !globalTimerPaused;
    });
});

Upvotes: 1

pax162
pax162

Reputation: 4735

Something like this ?

var doStuff = function(callback, text){
    callback();
    return text;
}
$(this).html($(this).html() == "Pause" ? doStuff(startTimer, "Resume") : doStuff(StartTimer, "Pause"));

Upvotes: 1

Mike Dinescu
Mike Dinescu

Reputation: 55720

Unless I completely misinterpreted your question this should do it:

$("#pause").click(function() {
  $("td").toggle();
  if($(this).html() == "Pause")
  {
      $(this).html("Resume");
      pauseTimer();
  }else{
      $(this).html("Pause");
      startTimer();
  }
});

Upvotes: 1

Related Questions