WHS Resources Endless Scrolling Bar
How do I make an whs resources endless scrolling bar?
What is a whs resources endless scrolling bar? How do you make a whs resources endless scrolling bar? This script and codes were developed by Marcus Macmillan on 23 September 2022, Friday.
WHS Resources Endless Scrolling Bar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WHS Resources Endless Scrolling Bar</title> <link rel='stylesheet prefetch' href='https://www.education.tas.gov.au/documentcentre/Documents/MainStyle2.css'>
<link rel='stylesheet prefetch' href='https://www.education.tas.gov.au/documentcentre/Documents/Menu.css'>
<link rel='stylesheet prefetch' href='https://www.education.tas.gov.au/documentcentre/Documents/WHSResources.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <!--SET CONTAINER FOR MEDIA QUERY FOR SCREENSIZING--> <div id="Container"> <!--Div left padding for web page!--> <div id="PageMargin"> <!--WHS Resources Page Header!--> <img id="Header" src="https://www.education.tas.gov.au/documentcentre/Documents/(4)%20WHS%20Resources%20Page.PNG" /> <!--Menu Container--> <div id="MenuContainer" onclick="openNav()"> <div class="Menu1"></div> <div class="Menu2"></div> <div class="Menu3"></div> </div> <!--End of div Menu Container--> <!--Side Navigation Bar Menu--> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a> <a href="https://www.education.tas.gov.au/intranet/CSD/HR/whs/SitePages/Home.aspx">Home</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(1)%20Managing%20Health%20and%20Safety_1.html">Managing Health & Safety</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(2)Hazards%20and%20Risks_1.html">Hazards & Risks</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(4)%20WHS%20Alerts_1.html">Work Health & Safety Alerts</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(6)%20WHS%20Events_1.html">WHS Events</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(7)Emergency%20Management_1.html">Emergency Management</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(8)Training%20and%20Development_1.html">Training & Development</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(9)%20WHS%20Management%20System_1.html">Work Health & Safety Management System</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(10)%20Incident%20Notification%20Procedures_1.html">Incident Notification Procedures</a> </div> <!-- End of SideNav div--> <div id="ButtonContainer"> <button class="accordion"><span id = "resources">⚒</span>WHS Resources <span id = "span"> A – D</span></button> <div class="panel"> <p><a href="http://jr.chemwatch.net/chemwatch.web/account/login?ReturnUrl=%2fchemwatch.web">Chemwatch Website</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Chemwatch%20Live%20Help.pdf">Chemwatch Live Help</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Chemwatch%20Bulletins.html">Chemwatch Bulletins</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/DoE%20-%20Checklists.html">DoE Checklists</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/DoE%20-%20Safe%20Operating%20Procedures.html">DoE Safe Work Procedures</a></p> </div> <button class="accordion"><span id = "resources">⚒</font></span>WHS Resources <span id = "span"> E – T</span></button> <div class="panel"> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Employee-Assistance-Program.pdf">Employee Assistance Program</a></p> <p><a href="https://www.education.tas.gov.au/intranet/H@W/Pages/[email protected]">Healthy@Work</a></p> <p><a href="https://www.safeworkaustralia.gov.au/sites/swa/australian-strategy/resources/pages/resources">Safe Work Australia</a></p> <p><a href="https://infostream-general.education.tas.gov.au/2015/02/school-bus-safety.html">School Bus Safety</a></p> </div> <button class="accordion"><span id = "resources">⚒</font></span>WHS Resources <span id = "span"> U – Z</span></button> <div class="panel"> <p><a href="https://www.aigroup.com.au/images/industry_full/whs_at_a_glance_insert_web.pdf">WHS at a glance</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/SAI%20Global%20Standards%20Guide.pdf">WHS Australian Standards Guide <span id = "textspan"> - SAI Global</span></a></p> <p><a href="https://www.workcover.tas.gov.au/">WorkCover Tasmania</a></p> <p><a href="https://worksafe.tas.gov.au/home">WorkSafe Tasmania</a></p> <p><a href="https://worksafe.tas.gov.au/safety/safety_advisors">WorkSafe Tasmania - Advisory Service</a></p> <p><a href="https://worksafe.tas.gov.au/laws/codes_of_practice">WorkSafe Tasmania - Codes of Practice</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Workplace%20Issues%20Magazine.html">WorkSafe Tasmania - Workplace Issues</a></p> </div> <!--End of Button Container Div--> </div> <!--End of Container2--> <br></br>
<span id = "js"></span> <!--MODAL WINDOW FOR WORKPLACE ISSUES--> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <p> <a href="https://worksafe.tas.gov.au/__data/assets/pdf_file/0008/356462/Sep_16.pdf"> <img id="WorkSafe" src="https://www.education.tas.gov.au/documentcentre/Documents/Workplace_Issues_Banner.png"></img> </p> </div> <!--End of div Modal Content--> </div> <!--End of div myModal--> </div> <!--END OF DIV FOR PAGE MARGIN - NO MARGIN FOR FOOTER--> <!--No padding for footer!--> </div> <img id="Footer" src="https://www.education.tas.gov.au/documentcentre/Documents/WHS%20Footer.PNG" /></img> <!--END OF CONTAINER DIV FOR SCREENSIZING--> </div> <!--SCRIPT SOURCE FOR JAVASCRIPT--> <script src="WHSResources.js"></script> <script src="Menu.js"></script>
</body> <script src='https://www.education.tas.gov.au/documentcentre/Documents/Menu.js'></script>
<script src='https://www.education.tas.gov.au/documentcentre/Documents/WHSResources.js'></script> <script src="js/index.js"></script>
</body>
</html>
WHS Resources Endless Scrolling Bar - Script Codes CSS Codes
/***MODAL BOX FORMATTING**/
/* The Modal (background) */
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ /* -webkit-animation-name: fadeIn; /* Fade in the background */ /* -webkit-animation-duration: 0.4s; animation-name: fadeIn; animation-duration: 0.4s*/
}
#WorkSafe{ position: absolute; width: 450px; height: 60px; border: 6px solid gold; margin-top: 40%;
}
/*MEDIA SCREEN SIZE FOR MINIMIZED LARGE SCREEN DESKTOPS AND LAPTOPS*/
@media screen and (max-width: 1500px) { #Container { width: 100%; }
}
/*MEDIA SCREEN SIZE FOR IPADS - LANDSCAPE*/
@media screen and (max-width: 1024px) { #Container { width: 100%; }
}
/*MEDIA SCREEN SIZE FOR IPADS - PORTRAIT*/
@media screen and (max-width: 768px) { #Container { width: 100%; } /* Modal Content */
}
/*ADJUST ACCORDION FOR SCREEN SIZE*/
@media screen and (max-width: 520px) { #Container { width: 100%; }
}
/*SET SMALLEST SCREEN SIZE ALLOWABLE*/
/**MEDIA SCREEN SIZES**/
@media screen and (max-width: 360px) { #Container { width: 320px; } /* Modal Content */
}
WHS Resources Endless Scrolling Bar - Script Codes JS Codes
/*MODAL BOX JAVASCRIPT*/
// Get the modal
var modal = document.getElementById('myModal');
function display() { modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; }
}
//media window query for javascript1
var mq = window.matchMedia("(min-width: 1500px)");
if (mq.matches) { // window width is at least 1500px var x = 1800;
} else { // window width is less than 1500px var x = 1500;
}
/*Function to make banner move*/
function myMove() { var elem = document.getElementById("WorkSafe"); var pos = 0; var vwidth = x; var banner = 462; var id = setInterval(frame, 15); function frame() { /*if position is width of available browser screen then resset Inteval id and start scrolling from position 0 again*/ if (pos == vwidth - banner) { setInterval(id)(pos = 0); } else { pos++; elem.style.left = pos + 'px'; } }
}
//window.alert("Fuck this");
window.onload = function() { display(); mediaqueryresponse(mqls); myMove();
}
/*window.alert("The variable named x has value: " + x);*/
/*work out how to run clientwidth on window resize*/
document.getElementById("js").innerHTML = document.body.clientWidth;
Developer | Marcus Macmillan |
Username | Marcus666 |
Uploaded | September 23, 2022 |
Rating | 3 |
Size | 4,274 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Asbsestos Management | 3,338 Kb |
Hazards and Risks | 5,058 Kb |
MDT WHS Considerations | 7,016 Kb |
WHS Resources | 4,501 Kb |
Endless Scrolling Bar | 2,127 Kb |
Mail Monitoring | 4,077 Kb |
School Practical Work | 2,754 Kb |
Work Related Stress | 4,549 Kb |
Incident Notification | 4,425 Kb |
Managing HS | 6,166 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A cube | KyleDavidE | 18,627 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Apple website | Jds317 | 1,835 Kb |
Bubble animation | Ftabor | 6,565 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Scifi-style Radio-based Tab | Aaronchuo | 4,427 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Background Images | Jooonebug | 2,100 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!