Safe Work Procedures

Developer
Marcus Macmillan
Size
5,275 Kb
Views
28,336
  1. Safe Work Procedures Previews
  2. Safe Work Procedures HTML Codes
  3. Safe Work Procedures CSS Codes
  4. Safe Work Procedures JS Codes

How do I make an safe work procedures?

What is a safe work procedures? How do you make a safe work procedures? This script and codes were developed by Marcus Macmillan on 23 September 2022, Friday.

Safe Work Procedures Previews
IQ Test

Safe Work Procedures - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Safe Work Procedures</title> <link rel='stylesheet prefetch' href='https://www.education.tas.gov.au/documentcentre/Documents/MainStyle2.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body> <div id="Container"> <div id="PageMargin"> <!-- DoE CHECKLISTS HEADER!--> <img id="Header" src="https://www.education.tas.gov.au/documentcentre/Documents/New%20WHS%20Banner.PNG" /> <!--ACCORDION MENUS FOR SAFE WORK PROCEDURES--> <div id="ButtonContainer"> <button class="accordion"><img class = "image" src = "https://www.education.tas.gov.au/documentcentre/Documents/Clipboard2_Icon.png"</img>Safe Work Procedures<span class = "span"> A - B</span></button> <div class="panel"> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Abrasive%20Cut%20Off%20Saw.doc">Abrasive Cut Off Saw</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Angle%20Grinder.doc">Angle Grinder</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Automotive%20Parts%20Washer.doc">Automotive Parts Washer</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Bandsaw_SOP.doc">Bandsaw</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Sander_Belt_Disc_SOP.doc">Belt Disc Sander</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Bench%20Grinder.doc">Bench Grinder</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Bench%20Shears.doc">Bench Shears</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Blower%20Vacuum%20-%20Electric.doc">Blower Vacuum &amp; Electric</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Brush%20Cutter-Line%20Trimmer%20-%20Petrol%20operated.doc">Brush Cutter / Lime Trimmer &ndash; Petrol Operated</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Buffing%20Machine.doc">Buffing Machine</a></p> <!--END OF PANEL DIV--> </div> <button class="accordion"><img class = "image" src = "https://www.education.tas.gov.au/documentcentre/Documents/Clipboard2_Icon.png"</img>Safe Work Procedures<span class = "span"> C - D</span></button> <div class="panel"> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Chainsaw%20-%20Electric.doc">Chainsaw &ndash; Electric</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Chainsaw%20-%20Petrol%20Operated.doc">Chainsaw &ndash; Petrol Operated</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Chipper-Shredder.doc">Chipper &ndash; Shredder</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Circular%20Bench%20Saw.doc">Circular Bench Saw</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Cold%20Saw.doc">Cold Saw</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Compound%20Mitre%20Saw.doc">Compound Mitre Saw</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Cultivator%20-%203%20Point%20Linkage%20Attached.doc">Cultivator &ndash; 3 Point Linkage Attached</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Disc%20Sander.doc">Disc Sander</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Dowelling%20Machine_SOP.docx">Dowelling Machine</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Drill_Press_SOP.doc">Drill Press</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Drill%20Seeder%20-%20Tractor%20Operated.doc">Drill Seeder &ndash; Tractor Operated</a></p> <!--END OF PANEL DIV--> </div> <button class="accordion"><img class = "image" src = "https://www.education.tas.gov.au/documentcentre/Documents/Clipboard2_Icon.png"</img>Safe Work Procedures<span class = "span"> E - H</span></button> <div class="panel"> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Edger%20-%20Petrol%20operated.doc">Edger &ndash; Petrol Operated</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Fertiliser%20Spreader%20-%20Tractor%20operator.doc">Fertiliser Spreader &ndash; Tractor Operated</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Fixed%20Air%20Compressor.doc">Fixed Air Compressor</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Flying%20Fox.doc">Flying Fox</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Forklift%20Truck.doc">Forklift Truck</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Gas%20Metal%20Arc%20Welder.doc">Gas Metal Arc Welder</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Gas%20Tungsten%20Arc%20Welder.doc">Gas Tungsten Arc Welder</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Gear%20Headed%20Drill.doc">Gear Headed Drill</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Handheld%20Edger%20-%20Petrol%20operated.doc">Handheld Edger &ndash; Petrol Operated</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Horizontal%20Metal%20Bandsaw.doc">Horizontal Metal Bandsaw</a></p> <!--END OF PANEL DIV--> </div> <button class="accordion"><img class = "image" src = "https://www.education.tas.gov.au/documentcentre/Documents/Clipboard2_Icon.png"</img>Safe Work Procedures<span class = "span"> I - M</span></button> <div class="panel"> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Injection%20Moulder.doc">Injection Moulder</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Ladder%20SWP.docx">Ladders</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Lawn%20Mower.docx">Lawn Mower</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Line%20Trimmer%20-%20Electric.doc">Line Trimmer &ndash; Electric</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Mail%20Sorting.doc">Mail Sorting</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Manual%20Bending%20Rolls.doc">Manual Bending Rolls</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Metal%20Cutting%20Guillotine.doc">Metal Cutting Guillotine</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Metal%20Lathe.doc">Metal Lathe</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Mill%20Drill.doc">Mill Drill</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Milling_Machine_SOP.doc">Milling Machine</a></p> <!--END OF PANEL DIV--> </div> <button class="accordion"><img class = "image" src = "https://www.education.tas.gov.au/documentcentre/Documents/Clipboard2_Icon.png"</img>Safe Work Procedures<span class = "span"> O - P</span></button> <div class="panel"> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Oven.doc">Oven</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Oxy-Fuel%20Gas%20Welding.doc">Oxy&ndash;Fuel Gas Welding</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Pan%20Brake.doc">Pan Brake</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Pedestal%20Grinder.doc">Pedestal Grinder</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Plasma%20Cutter.doc">Plasma Cutter</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Portable%20Air%20Compressor.doc">Portable Air Compressor</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Portable%20Grain%20Auger.doc">Portable Grain Auger</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Post%20Hole%20Digger%20-%20Tractor%20Operated.doc">Post Hole Digger &ndash; Tractor Operated</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Power%20Blower%20-%20Petrol%20Operated.doc">Power Blower &ndash; Petrol Operated</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Power%20Hack%20Saw.doc">Power Hack Saw</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Power%20Take%20Off.doc">Power Take Off</a></p> <!--END OF PANEL DIV--> </div> <button class="accordion"><img class = "image" src = "https://www.education.tas.gov.au/documentcentre/Documents/Clipboard2_Icon.png"</img>Safe Work Procedures<span class = "span"> R - S</span></button> <div class="panel"> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Radial%20Arm%20Saw.doc">Radial Arm Saw</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Rear%20Tine%20Tiller%20-%20Self%20Propelled.doc">Rear Tine Tiller &ndash; Self Propelled</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Ride%20On%20Mower.doc">Ride On Mower</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Rotary%20Cultivator%20-%20Tractor%20Operated.doc">Rotary Cultivator &ndash; Tractor Operated</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Rotary%20Slasher%20-%20Tractor%20Operated.doc">Rotary Slasher &ndash; Tractor Operated</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Round%20Hay%20Baler.doc">Round Hay Baler</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Router_table_SOP.doc">Router Table</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Scroll%20Saw.doc">Scroll Saw</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Shaping%20Machine.doc">Shaping Machine</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Spot%20Welder.doc">Spot Welder</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Spray%20Painting%20Plant.doc">Spray Painting Plant</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Stationary%20Engine.doc">Stationary Engine</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Surface_Planer_SOP.doc">Surface Planer</a></p> <!--END OF PANEL DIV--> </div> <button class="accordion"><img class = "image" src = "https://www.education.tas.gov.au/documentcentre/Documents/Clipboard2_Icon.png"</img>Safe Work Procedures<span class = "span"> T - Z</span></button> <div class="panel"> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Thicknesser_SOP.doc">Thicknesser</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Tractor.doc">Tractor</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Vehicle%20Hoist.doc">Vehicle Hoist</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Walk%20Behind%20Mower.doc">Walk Behind Mower</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/Documents/Walk%20Behind%20Rotary%20Cultivator%20(Petrol).doc">Walk Behind Rotary Cultivator &#40;Petrol&#41;</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Welding_Arc_SOP.doc">Welder &ndash; Metal Arc</a></p> <p><a href="https://www.education.tas.gov.au/documentcentre/_layouts/WordViewer.aspx?id=/documentcentre/Documents/Lathe_Wood_SOP.doc">Wood Lathe</a></p> <!--END OF PANEL DIV--> </div> <!--END OF BUTTON CONTAINER DIV--> </div> <!--END OF DIV FOR PAGE MARGIN - NO MARGIN FOR FOOTER--> </div> <img id="Footer" src="https://www.education.tas.gov.au/documentcentre/Documents/WHS%20Footer.PNG" /> <!--END OF CONTAINER DIV FOR SCREENSIZING--> </div> <!--JAVASCRIPT FOR ACCORDIONS SAME AS CHECKLISTS CODE--> <script src="SafeWorkProcedures.js"></script>
</body> <script src="js/index.js"></script>
</body>
</html>

Safe Work Procedures - Script Codes CSS Codes

/*CSS FOR SAFE WORK PROCEDURES WEBPAGE*/
/*Container for button menu*/
#ButtonContainer { margin: auto; width: 65%; margin-top: 70px;
}
/* Style the buttons that are used to open and close the accordion panel */
button.accordion { font-size: 24px; font-weight: bold; background-color: #cccccc; color: white; cursor: pointer; padding: 18px; width: 100%; text-align: left; border-radius: 20px; border-style: none; outline: none; transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active,
button.accordion:hover { background-color: #bfbfbf;
}
/* Style the accordion panel. Note: hidden by default */
div.panel { padding: 1%; background-color: #d9d9d9; text-indent: 60px; line-height: 20px; max-height: 0; overflow: hidden; /*Reduce transition from 0.6 to 0.2 seconds due to length of each list*/ transition: 0.2s ease-in-out; opacity: 0; font-weight: bold; border-radius: 20px;
}
div.panel p:nth-child(even) { background-color: white; padding-top: 20px; padding-bottom: 20px; line-height: 20px;
}
/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show { opacity: 1; max-height: 820px;
}
/*Button symbols to indicate whether the collapsable content is open or closed*/
button.accordion:after { content: '\02795'; /* Unicode character for "plus" sign (+) */ font-size: 16px; color: white; float: right; margin-left: 5px; margin-top: 5px;
}
button.accordion.active:after { content: "\2796"; /* Unicode character for "minus" sign (-) */
}
.span { padding-left: 20px; font-size: 26px; font-weight: 900; color: white;
}
.image { padding-right: 10px; margin-bottom: -5px; height: 35px; width: 45px;
}
/*FIRST MEDIA SCREEN SIZE SET CONTAINER WIDTH TO 100% FOR SIZING */
/*MEDIA SCREEN SIZE FOR LARGE SCREENS*/
@media screen and (max-width: 1820px) { #Container { width: 100%; } #Header { width: 100%; height: 200px; } #Footer { width: 100%; height: 120px; }
}
/*MEDIA SCREEN SIZE FOR MINIMIZED LARGE SCREEN DESKTOPS AND LAPTOPS*/
@media screen and (max-width: 1500px) { #Container { width: 100%; } p { font-size: 22px; } #Header { width: 100%; height: 150px; } #Footer { width: 100%; height: 75px; } #PageMargin { margin-left: 20px; } /*Container for button menu*/ #ButtonContainer { margin: auto; width: 65%; margin-top: 60px; } /* Style the buttons that are used to open and close the accordion panel */ button.accordion { font-size: 22px; padding: 16px; border-radius: 18px; } /* Style the accordion panel. Note: hidden by default */ div.panel { text-indent: 50px; line-height: 16px; border-radius: 18px; } div.panel p:nth-child(even) { padding-top: 16px; padding-bottom: 16px; line-height: 16px; } /* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ div.panel.show { opacity: 1; max-height: 720px; } /*Button symbols to indicate whether the collapsable content is open or closed*/ button.accordion:after { font-size: 14px; margin-left: 5px; margin-top: 10px; }
}
/*MEDIA SCREEN SIZE FOR IPADS - LANDSCAPE*/
@media screen and (max-width: 1024px) { #Container { width: 100%; } p { font-size: 18px; } #Header { width: 100%; height: 120px; } #Footer { width: 100%; height: 75px; } #PageMargin { margin-left: 15px; } /*Container for button menu*/ #ButtonContainer { margin: auto; width: 65%; margin-top: 50px; } /* Style the buttons that are used to open and close the accordion panel */ button.accordion { font-size: 20px; padding: 14px; border-radius: 16px; } /* Style the accordion panel. Note: hidden by default */ div.panel { text-indent: 30px; line-height: 14px; border-radius: 16px; } div.panel p:nth-child(even) { padding-top: 14px; padding-bottom: 14px; line-height: 14px; } /* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ div.panel.show { opacity: 1; max-height: 620px; } /*Button symbols to indicate whether the collapsable content is open or closed*/ button.accordion:after { font-size: 12px; margin-left: 5px; } .span { padding-left: 16px; font-size: 22px; } .image { padding-right: 10px; margin-bottom: -4px; height: 30px; width: 40px; }
}
/*MEDIA SCREEN SIZE FOR IPADS - PORTRAIT* - TO 1 COLUMNS*/
@media screen and (max-width: 768px) { #Container { width: 100%; } p { font-size: 14px; } #Footer { width: 100%; height: 50px; } #PageMargin { margin-left: 10px; } /*Container for button menu*/ #ButtonContainer { margin: auto; width: 70%; margin-top: 40px; border-radius: 14px; } /* Style the buttons that are used to open and close the accordion panel */ button.accordion { font-size: 18px; padding: 12px; border-radius: 14px; } /* Style the accordion panel. Note: hidden by default */ div.panel { text-indent: 20px; line-height: 12px; border-radius: 14px; } div.panel p:nth-child(even) { padding-top: 12px; padding-bottom: 12px; line-height: 12px; } /* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ div.panel.show { opacity: 1; max-height: 500px; } /*Button symbols to indicate whether the collapsable content is open or closed*/ button.accordion:after { font-size: 10px; margin-left: 5px; } .span { padding-left: 14px; font-size: 20px; } .image { padding-right: 8px; margin-bottom: -3px; height: 25px; width: 35px; }
}
/*SET SMALLEST SCREEN SIZE ALLOWABLE*/
@media screen and (max-width: 550px) { #Container { width: 100%; } p { font-size: 11px; } #PageMargin { margin-left: 0px; } #Header { width: 100%; height: 50px; } #Footer { width: 100%; height: 25px; } /*Container for button menu*/ #ButtonContainer { margin: auto; width: 75%; margin-top: 20px; } /* Style the buttons that are used to open and close the accordion panel */ button.accordion { font-size: 12px; padding: 8px; border-radius: 12px; } /* Style the accordion panel. Note: hidden by default */ div.panel { text-indent: 8px; line-height: 8px; border-radius: 12px; } div.panel p:nth-child(even) { padding-top: 8px; padding-bottom: 8px; line-height: 8px; } /* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ div.panel.show { opacity: 1; max-height: 360px; } /*Button symbols to indicate whether the collapsable content is open or closed*/ button.accordion:after { font-size: 10px; margin-left: 5px; margin-top: 7px; } .span { padding-left: 8px; font-size: 14px; } .image { padding-right: 2px; margin-bottom: -1px; height: 20px; width: 30px; }
}
/*SET SMALLEST SCREEN SIZE ALLOWABLE */
@media screen and (max-width: 360px) { #Container { width: 320px; }
}

Safe Work Procedures - Script Codes JS Codes

//SCRIPT TO OPEN PANELS ON ACCORDION
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) { acc[i].onclick = function() { //Make accordion class active and show open (-) this.classList.toggle("active"); //show div.panel this.nextElementSibling.classList.toggle("show"); }
}
//SCRIPT TO OPEN FIRST PANEL ONLY ON SCREEN LOAD
//myClick Function to insitgate panel click for
//Add Event Listener
function myClick() { var x = document.querySelectorAll("button.accordion"); var y = document.querySelectorAll("div.panel"); //Make 1st accordion class active and show open (-) x[0].classList.toggle("active"); //show 1st div.psnel y[0].classList.toggle("show"); //perform click of div panel y[0].classList.click();
}
//Add Event Listener for myClickFunction
window.addEventListener("load", myClick);
Safe Work Procedures - Script Codes
Safe Work Procedures - Script Codes
Home Page Home
Developer Marcus Macmillan
Username Marcus666
Uploaded September 23, 2022
Rating 3
Size 5,275 Kb
Views 28,336
Do you need developer help for Safe Work Procedures?

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
Name
Work Related Stress
Home Economics
The Work Environment and Facilities
WHS Resources Endless Scrolling Bar
Mail Monitoring
Chemicals and Hazardous Substances
Workplace Bullying
Managing HS
Manual Handling
WHS Resources
Create amazing Facebook ads 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!