CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jldavis76
jldavis76

Reputation: 822

EventHandlers on shown divs only

I am pretty new to all of this, so I may be asking something that may not be able to be done. I have a page that has two divs, but only one div is shown at a time. While the first div is shown, the second is hidden until a button is clicked. At that point, the first div is hidden and the second div shows.

What I would like to have happen is that in addition to the button clicking alternating the divs, I would also like specific key presses to do the same. For example, if the first div is currently shown, the user could either click the button or press the F key for the other view to show. Is this even possible? Is there a better way to go about it?

Thanks for the help!

Upvotes: 1

Views: 64

Answers (4)

Russell Bevan
Russell Bevan

Reputation: 334

This should do what you are looking for. You will need to bind this to something.

var code = e.keyCode || e.which;
if(code == 70) { 
    //alternate divs
}

You can get a full list of key codes at CSS-Tricks

Upvotes: 0

JasonBluefire
JasonBluefire

Reputation: 311

Using jQuery

HTML:

<body onkeypress="myFunction(event)">
    <button onclick="myFunction(event)">Click me</button>
    <div id="1st">Hello</div>
    <div id="2nd">Goodbye</div>
</body>

JS:

<script>
$(document).ready(function () {
    $("#2nd").hide();
});

function myFunction(e) {
    if( e.type == 'click' || (e.keyCode==70 || e.keyCode==102) )
    {
        $("#1st").hide();
        $("#2nd").show();
    }
}

</script>

JSFiddle: https://jsfiddle.net/8bt8au57/

Upvotes: 0

John S
John S

Reputation: 21482

You can bind a keypress event handler to an element to check for the key press. Key press events initially go to the element with the focus, but they will bubble up the DOM tree, so you would probably want to bind the event to the document element.

The following checks for the 'F' key, ignoring whether or not the shift key is pressed:

$(document).keypress(function(e) {
    if (e.which == 70 || e.which == 102) {
        // Toggle the divs here.
    }
});

jsfiddle

Upvotes: 3

Icepickle
Icepickle

Reputation: 12806

I guess you are looking for the $.toggle function, that either adds or removes a class depending on that object already containing the class or not?

An example of doing it with jquery is the following, it registers itself to the click event of the button and to the document keypress event, and then fires the toggleDivs() function that simply takes all the elements in your document that have the css class box and toggles the hidden class.

function toggleDivs() {
  $('.box').each(function() {
    $(this).toggle(250);
  });
}

$(function() {
  // everything should be there
  $('#btnToggle').on('click', toggleDivs);
  $(document).on('keypress', function(e) {
    if ((e.key && e.key.toLowerCase() === 'f') ||
      (e.keyCode || e.which) === 70) {
      toggleDivs();
    }
  });
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="box">
  <p>Div 1</p>
</div>
<div id="div2" class="box hidden">
  <p>Div 2</p>
</div>
<button type="button" id="btnToggle">Toggle divs</button>

Upvotes: 0

Related Questions