Skip to content

Instantly share code, notes, and snippets.

@holaymolay

holaymolay/index.html

Created September 5, 2017 07:44
Show Gist options
  • Save holaymolay/2b15ec190604fbbed2d093a0bb3ab083 to your computer and use it in GitHub Desktop.
Save holaymolay/2b15ec190604fbbed2d093a0bb3ab083 to your computer and use it in GitHub Desktop.
Download ZIP
toggle chat via navbar
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light bg-faded">
<a id="chatLink" class="navbar-brand" onclick="toggleDisplay()" href="#">Chat</a>
</nav>
<div class="container">
<div id="bodyContents" style="display: block;">
body content
</div>
</div>
<div id="chatApp" style="margin: 0 auto; width:100vw; height:91vh; display: none;">
<object type="text/html" data="https://codeclub-chat.herokuapp.com/channel/Lobby"
style="width:100vw; height: 100%;">
</object>
</div>
<script>
function toggleDisplay(){
var chatDiv = document.getElementById('chatApp');
var bodyDiv = document.getElementById('bodyContents');
if (chatDiv.style.display === 'none'){
chatDiv.style.display="block";
bodyDiv.style.display="none";
}
else {
chatDiv.style.display="none";
bodyDiv.style.display="block";
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment