Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <style type="text/css">
- body {
- margin: 0;
- padding: 0;
- overflow: hidden;
- height: 100%;
- max-height: 100%;
- font-family:Sans-serif;
- line-height: 1.5em;
- }
- #nav {
- position: absolute;
- top: 100px;
- left: 0;
- bottom: 0;
- width: 220px;
- overflow: hidden;
- background: gray;
- }
- main {
- position: fixed;
- top: 100px;
- left: 220px;
- right: 0;
- bottom: 0;
- overflow: auto;
- background-color: white;
- }
- .innertube {
- margin-top: 15px;
- padding-top: 0px;
- }
- nav ul {
- list-style-type: none;
- margin: 0;
- padding: 0;
- text-align: center;
- }
- nav ul a {
- color: white;
- text-decoration: none;
- font-size: 35px;
- line-height: 70px;
- }
- a {
- color: blue;
- text-decoration: none;
- font-size: 25px;
- }
- a:hover {
- /* glow effect on hover */
- font-weight:bold;
- text-shadow: -5px 5px 40px #fff, 5px -5px 40px #fff;
- transition: text-shadow 250ms linear 0s;
- }
- </style>
- </head>
- <body>
- <main>
- <div id="content" class="innertube">
- <div id="fires" style="display: block;">
- <h1 class='large'><center>Firesβ</center></h1><br>
- </div>
- <div id="safety" style="display: none;">
- <h1>Safety</h1>
- </div>
- <div id="daily" style="display: none;">
- <div style="margin-left: 60px;">
- <h1>daily</h1>
- </div>
- </div>
- <div id="monday" style="display: none;">
- <div style="margin-left: 60px;">
- <h1>Monday</h1>
- </div>
- </div>
- <div id="tuesday" style="display: none;">
- <div style="margin-left: 60px;">
- <h1>Tuesday</h1>
- </div>
- </div>
- </div>
- </main>
- <nav id="nav">
- <div class="innertube">
- <center><button id="btn" type="button" onclick="toggleInterval()">Start Loop</button></center>
- <center><br>
- <ul>
- <li><a onclick="fires()" href="#">Fires</a></li>
- <li><a onclick="safety()" href="#">Safety</a></li>
- <li><a onclick="daily()" href="#">Daily</a></li>
- <li><a onclick="monday()" href="#">Monday</a></li>
- <li><a onclick="tuesday()" href="#">Tuesday</a></li>
- </ul>
- </center>
- </div>
- </nav>
- </body>
- <script type="text/javascript">
- //Autoclick links
- function links() {
- safety()
- daily()
- monday()
- tuesday()
- fires()
- }
- var intervalId;
- function toggleInterval() {
- var btn = document.getElementById("btn");
- if (btn.innerHTML == "Start Loop") {
- btn.innerHTML = "End Loop";
- } else {
- btn.innerHTML = "Start Loop";
- }
- if (!intervalId) {
- intervalId = setInterval(links, 2000);
- } else {
- clearInterval(intervalId);
- intervalId = null;
- btn.innerHTML = "Start Loop"
- }
- }
- function fires(){
- document.getElementById("fires").style.display = 'block';
- document.getElementById("safety").style.display = 'none';
- document.getElementById("daily").style.display = 'none';
- document.getElementById("monday").style.display = 'none';
- document.getElementById("tuesday").style.display = 'none';
- document.getElementById("wednesday").style.display = 'none';
- document.getElementById("thursday").style.display = 'none';
- document.getElementById("extra").style.display = 'none';
- }
- function safety(){
- document.getElementById("fires").style.display = 'none';
- document.getElementById("safety").style.display = 'block';
- document.getElementById("daily").style.display = 'none';
- document.getElementById("monday").style.display = 'none';
- document.getElementById("tuesday").style.display = 'none';
- document.getElementById("wednesday").style.display = 'none';
- document.getElementById("thursday").style.display = 'none';
- document.getElementById("extra").style.display = 'none';
- }
- function daily(){
- document.getElementById("fires").style.display = 'none';
- document.getElementById("safety").style.display = 'none';
- document.getElementById("daily").style.display = 'block';
- document.getElementById("monday").style.display = 'none';
- document.getElementById("tuesday").style.display = 'none';
- document.getElementById("wednesday").style.display = 'none';
- document.getElementById("thursday").style.display = 'none';
- document.getElementById("extra").style.display = 'none';
- }
- function monday(){
- document.getElementById("fires").style.display = 'none';
- document.getElementById("safety").style.display = 'none';
- document.getElementById("daily").style.display = 'none';
- document.getElementById("monday").style.display = 'block';
- document.getElementById("tuesday").style.display = 'none';
- document.getElementById("wednesday").style.display = 'none';
- document.getElementById("thursday").style.display = 'none';
- document.getElementById("extra").style.display = 'none';
- }
- function tuesday(){
- document.getElementById("fires").style.display = 'none';
- document.getElementById("safety").style.display = 'none';
- document.getElementById("daily").style.display = 'none';
- document.getElementById("monday").style.display = 'none';
- document.getElementById("tuesday").style.display = 'block';
- document.getElementById("wednesday").style.display = 'none';
- document.getElementById("thursday").style.display = 'none';
- document.getElementById("extra").style.display = 'none';
- }
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement