JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div id="container" class="showignoredoff">
        
    <div id="innercontainer">

    
       

        

</div>
</div>


<div class="rightclickmenu">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>  
</div>

CSS

body { font-family: Arial; font-size: 14px; }
h3#title { font-size: 24px; margin-bottom: 12px; }
h4#category { font-size: 11px; margin-top: 20px; color:#999; font-weight: bold; }
img { padding: 0; margin: 0; }
emph { font-weight:bold; }
.clearfloats { clear:both; }
a { text-decoration: none; }
a.nolink { color: black; }
label { display:none; margin-left: 4px; font-size 8px;  }
input[type="checkbox"] { display:none; }

#container { width: 800px; height: 910px; /*overflow-x:hidden; overflow-y:auto;*/  margin: 20px auto; border: 1px solid #000; }
#innercontainer { width: 600px; margin: 80px auto; }

#headlinewrapper { width: 440px; margin-top:-7px; float:left; }

#mainbuttonwrapper { height: 50px; float:right; }

#runanalysisbutton { float:right; margin: 16px 0 0 0; position:relative; width: 150px; }
.mainbutton { position:relative; border: 2px solid #408C40; background-color: #408C40; border-radius: 3px;  /* box-shadow: 0 1px 3px #2A5B2A; */ cursor:default;  }
.mainbutton.inprogress, .mainbutton.inprogress:hover { background-color: White; }

/*.buttonhairline { display:none; position:relative; width:inherit; border-radius: 3px; background-color: #3FA63F; height:1px;  }
.buttonhairline.top { top: 0; left: 0; }
.buttonhairline.bottom { bottom: 0; left: 0; }*/

.mainbutton .mainbuttoncontentwrapper { width: 130px; margin: 7px auto;}
.mainbutton .mainbuttoncontentwrapper img { position:relative; margin: 0 5px -4px 0;  }
.mainbutton .mainbuttoncontentwrapper p { position:relative; display:inline-block; color:#FFF;  text-transform:uppercase; font-weight:bold; /*background-color: #408C40;*/ font-size: 12px;
    /* text-shadow:
   -1px -1px 0 #2A5B2A,
    1px -1px 0 #2A5B2A,
    -1px 1px 0 #2A5B2A,
     1px 1px 0 #2A5B2A;*/ 
    line-height:16px; z-index:1000; border-radius: 3px; padding: 1px 3px 0 3px; } 


#mainbuttonwrapper .mainbutton .progressindicator { display:none; position:absolute; z-index: 2; left:0; top: 0; height:100%; width:100%; background-color: #408C40;...

JavaScript

$('#container').click(function() {
    $(".rightclickmenu").hide();
});

$('body').scroll(function() {
    $(".rightclickmenu").hide();
});






(function($) {
    $.fn.rightClick = function(method) {

        $(this).bind('contextmenu rightclick', function(e) {
            e.preventDefault();
            method();
            return false;
        });

    };
})(jQuery);







$("#container").rightClick(function(e) {


    var vertiPos = event.pageY + 10;
    var horizPos = event.pageX;
    $(".rightclickmenu").css("top", vertiPos);
    $(".rightclickmenu").css("left", horizPos);
    $(".rightclickmenu").fadeIn("fast");


});