Hide DIV when click outside of the specific div with jQuery
<html>
<head>
<title>GETTYPES</title>
</head>
<script src="\JSFiles\jquery-1.11.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var imageClicked = 0;
document.onclick = function () {
var menuList = document.getElementById("divMenuListContainer");
if (imageClicked == 1) {
//do nothing
imageClicked = 0;
}
// Click was outside the box, hide it.
else {
//hide specific div
html = '<p></p>';
document.getElementById("divMenuListContainer").innerHTML = html;
}
}
function getCommunitiesByType(type) {
imageClicked = 1;
var html = '<table width="100%">';
html = html + '</table>';
document.getElementById("divMenuListContainer").innerHTML = html;
}
function getCommunitiesChoices() {
var html="<table onclick='getCommunitiesByType(this.innerText)'>";
html = html + "</table>";
document.getElementById("divContainer").innerHTML = html;
}
</script>
<body>
<button onclick="getCommunitiesChoices();" type="button" value="button">Click ME to Get PC types</button>
<table id="tableID">
<tbody><tr>
<td valign="top"><div id="divContainer" style="border-top: cadetblue 1px solid; border-right: 1px solid; border-bottom: 1px solid; border-left: 1px solid"></div></td>
<td valign="top"><div id="divMenuListContainer"></div></td>
</tr></tbody></table>
</body>
</html>
No comments:
Post a Comment