WHS Resources Endless Scrolling Bar

Size
4,274 Kb
Views
16,192

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 Previews

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 &amp; Safety</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(2)Hazards%20and%20Risks_1.html">Hazards &amp; Risks</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(4)%20WHS%20Alerts_1.html">Work Health &amp; 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 &amp; Development</a> <a href="https://www.education.tas.gov.au/documentcentre/Documents/(9)%20WHS%20Management%20System_1.html">Work Health &amp; 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">&#9874</span>WHS Resources <span id = "span"> A &ndash; 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">&#9874</font></span>WHS Resources <span id = "span"> E &ndash; 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">&#9874</font></span>WHS Resources <span id = "span"> U &ndash; 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;
WHS Resources Endless Scrolling Bar - Script Codes
WHS Resources Endless Scrolling Bar - Script Codes
Home Page Home
Developer Marcus Macmillan
Username Marcus666
Uploaded September 23, 2022
Rating 3
Size 4,274 Kb
Views 16,192
Do you need developer help for WHS Resources Endless Scrolling Bar?

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!

Marcus Macmillan (Marcus666) Script Codes
Create amazing SEO content with AI!

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!