Home/ Questions/Q 8007647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T17:53:58+00:00

The following code sample adds a semi transparent 100% overlay when a button is

  • 0

The following code sample adds a semi transparent 100% overlay when a button is clicked. The overlay remains until the mouse button is released. Here’s what is supposed to happen:

  • Click on the button and hold the mouse down.

  • While the mouse is down press and release the shift key.

  • When it’s pressed, a div area
    indicates this with the text “horizontal” and the cursor changes to
    e-resize. When shift is released, the div indicates “vertical” and
    the cursor changes to n-resize.

In IE9/10, the text changes but the cursor remains the same. I’ve tried changing the key bind to the body level and to the overlay level but to no avail.

Here’s the code: (I tried putting it into jsfiddle and jsbin but for some reason they ignore the key presses completely).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <style type="text/css">
        .overlay {
            background-color: rgba(0, 0, 0, 0.3);
            top: 0; bottom: 0; left: 0; right: 0; position: fixed;
            z-index: 999;
        }
        .vertical { cursor: n-resize !important; }
        .horizontal { cursor: e-resize !important; }
    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {

            $("#button1").mousedown(onButtonMouseDown);

            function onButtonMouseDown(e) {

                var overlay;

                overlay = $("body").after("<div class=\"overlay\"></div>").next();
                overlay.addClass((e.shiftKey) ? "horizontal" : "vertical");

                $(document).bind("keydown.ntextbox", function (e) {
                    if (e.which === 16) {
                        overlay.removeClass("vertical").addClass("horizontal");
                        $("#div1").html("horizontal");
                    }
                });

                $(document).bind("keyup.ntextbox", function (e) {
                    if (e.which === 16) {
                        overlay.removeClass("horizontal").addClass("vertical");
                        $("#div1").html("vertical");
                    }
                });

                overlay.mouseup(function (e) {
                    overlay.remove();
                    $(document).unbind(".ntextbox");
                    return false;
                });

                return false;
            }

        });
    </script>

</head>

<body>
    <div id="div1">...</div>
    <button id="button1">Click me</button>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Adding the following jQuery statements seems to fix it.

    $(".overlay").css("cursor", "e-resize");
$(".overlay").css("cursor", "n-resize");

    So, maybe something like this?

      $(document).bind("keydown.ntextbox", function (e) {
       if (e.which === 16) {
           overlay.removeClass("vertical").addClass("horizontal").css("cursor", "e-resize");
           $("#div1").html("horizontal");
       }
  });

  $(document).bind("keyup.ntextbox", function (e) {
       if (e.which === 16) {
           overlay.removeClass("horizontal").addClass("vertical").css("cursor", "n-resize");
           $("#div1").html("vertical");
       } 
  });
    • 0