CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Wajahat
Wajahat

Reputation: 13

jQuery - Maintaining focus on button when clicked outside of it

So I've been able to create 2 buttons. Here: http://jsfiddle.net/0y940r11/2/

I really can't figure out how I can keep the focus on the clicked button after I have click somewhere outside the buttons.

Can some one point me in the direction?

$(document).ready(function() {
  $(".button-off").on("click", function() {
    $(".corner-off").show();
    $(".corner-on").hide();
  });
  $(".button-on").on("click", function() {
    $(".corner-on").show();
    $(".corner-off").hide();
  });
});
.button-on,
.button-off {
  border: 1px solid #ccc;
  height: 120px;
  width: 160px;
  position: relative;
  background: white;
  border-radius: 8%;
}
.button-on:active,
.button-on:focus,
.button-off:active,
.button-off:focus {
  border: 4px solid #FFCC00;
}
.active {
  border: 4px solid #FFCC00;
}
button:active,
button:focus {
  outline: 0;
}
.corner-off,
.corner-on {
  width: 0px;
  height: 0px;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #FFCC00;
  position: absolute;
  top: 0;
  left: 0;
}
.tick:after {
  content: "\2713";
  position: absolute;
  top: -1px;
  left: 5px;
  color: white;
}
<button class="button-on">
  <div class="corner-on" style="display:none"></div>
  <span class="tick"></span>
  ON
</button>

<button class="button-off">
  <span class="corner-off" style="display:none"></span>
  <span class="tick"></span>
  OFF
</button>

Upvotes: 1

Views: 601

Answers (1)

Kishore Sahasranaman
Kishore Sahasranaman

Reputation: 4230

use $(document).on("click" and focus() to achieve this 

var lastClickedButton = $(".button-on")[0];
$(document).ready(function () {
    $(".button-off").on("click", function () {
        lastClickedButton = this;
        $(".corner-off").show();
        $(".corner-on").hide();
    });
    $(".button-on").on("click", function () {
        lastClickedButton = this;
        $(".corner-on").show();
        $(".corner-off").hide();
    });
});

$(document).on("click", function (e) {$(lastClickedButton).focus();});
    .button-on, .button-off {
    border: 1px solid #ccc;
    height: 120px;
    width: 160px;
    position: relative;
    background: white;
    border-radius: 8%;
}
.button-on:active, .button-on:focus, .button-off:active, .button-off:focus {
    border: 4px solid #FFCC00;
}
.active {
    border: 4px solid #FFCC00;
}
button:active, button:focus {
    outline:0;
}
.corner-off, .corner-on {
    width: 0px;
    height: 0px;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #FFCC00;
    position: absolute;
    top: 0;
    left: 0;
}
.tick:after {
    content:"\2713";
    position: absolute;
    top: -1px;
    left: 5px;
    color: white;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button-on">
    <div class="corner-on" style="display:none"></div> <span class="tick"></span>
ON</button>
<button class="button-off"> <span class="corner-off" style="display:none"></span>
 <span class="tick"></span>
OFF</button>

Demo : http://jsfiddle.net/kishoresahas/0y940r11/4/

Upvotes: 1

Related Questions