CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
stset
stset

Reputation: 39

hiding an html section with angularjs on right button click

with angularjs or jquery, how can i hide the html section "sec1" whenever the user right clicks with the mouse inside the canvas area? and show it back again when the user clicks with the left mouse button and viceversa? i know i can use $event.which but im alittle confused thanks

<body
         ng-app="appMyExample" 
         ng-controller="MainCtrl" background="images.jpe">
        
    <h2>title</h2>
    
        <canvas 
            ng-mousedown="defineSquare($event)"
            oncontextmenu="return false"
            id="GLCanvas" width="300" height="200" style="border:2px solid #e3d3d3;">
            Your browser does not support the HTML5 canvas.
        </canvas>
    <br>
    <b>Total on screen:</b><input type="text" value="0" id="total">
    <b>Erase<input type="radio" value="Erase"></b><input type="text" value="0" id="erase">
    <br>
    <section id="sec1">
        <css-timer id="idMainControllerTimer"
               interval="40"
               timeron="true"
               callback="mainTimerHandler"></css-timer>
    </section>
        <div ng-controller="MainCtrl">
            <input type="radio" ng-model="mSelection" name="shape" value="Square" ng-change="swap(1)" checked="checked">Square
            <input type="radio" ng-model="mSelection" name="shape" value="Circle" ng-change="swap(2)">Circle
        </div> 
        
    </body>

Upvotes: 1

Views: 73

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Use ng-hide on the section that you want to hide:

<section id="sec1" ng-hide="hideSec1">
    <css-timer id="idMainControllerTimer"
           interval="40"
           timeron="true"
           callback="mainTimerHandler"></css-timer>
</section>

Use the $event.button property in the mousedown handler:

$scope.defineSquare =  function (event) {
    if (event.button == 2) {
        $scope.hideSec1 = true;
    } else {
        $scope.hideSec1 = false;
    };
};

Avoid the ng-if directive because it destroys/creates the DOM element (unless you really want to destroy the css-timer).

Also be aware that ng-click only fires on clicks of the main mouse button. It does not detect clicks on the other mouse buttons. Instead use ng-mousedown or ng-mouseup.

The DEMO on JSFiddle

Upvotes: 1

Ben Bracha
Ben Bracha

Reputation: 1397

You should be able to define an ng-click on the "sec1" section, and act if there was a right-click.

e.g. - on the section add:

ng-click="handleClick($event)"

And on your controller check if $event.which === 3 and act accordingly (for example, you can set some var $scope.hidden = true and use "ng-if" on that var to remove the "sec1" from the DOM).

Hope that helps.

Upvotes: 3

Related Questions