In the process of developing a web application feature using JavaScript, I have come up with a simple plan:
- Place a button in the bottom left corner.
- The button should only become visible after scrolling begins.
- Upon clicking the button, a new window will open to display a PDF file.
Currently, I have managed to implement this on individual pages, but it's becoming too burdensome. The code snippet below shows how it works:
// JavaScript Document
$(document).ready(function(){
//added this for DW
'use strict';
$('#ap1').append('<div id="formInstructions" class="btn btn-aprs"><span class="fa fa-question-circle"></span> Form Instructions</div>');
$(window).scroll(function () {
//the original funtion was != 0
if ($(this).scrollTop() !== 0) {
$('#formInstructions').fadeIn();
} else {
$('#formInstructions').fadeOut();
}
});
$('#formInstructions').click(function(){
window.open("../static/instructions/ap2_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
return false;
});
});#formInstructions {
position: fixed;
bottom: 10px;
left: 10px;
cursor: pointer;
display: none;
}<!-- this is in element in the HMTL file -->
<div id="ap1"> </div>This is an example screenshot from an individual page:
My ultimate aim is to create a single script to automate this process throughout the entire application. Below is my initial attempt at making this happen:
<script type="text/javascript">
var arr = [ "#ap1", "#ap2", "#ap3", "#ap4", "#ap5", "#ap6", "#ap7", "#ap8", "#ap9", "#ap10", "#ap11", "#ap12", "#ap13", "#ap14", "#ap15", "#ap17", "#apa", "#apb", "#apc", "#apd", "#ape", "#apf, "#apg", "#aph", "#api", "#apj", "#apk", "#apl", "#apm", "#apn", "#apo", "#app, "#apq" ];
$(document).ready(function(){
jQuery.each( arr, function( i, val ) {
$(arr).append('<div id="formInstructions" class="btn btn-aprs"><span class="fa fa-question-circle"></span> Form Instructions</div>');
$(window).scroll(function () {
//the original function was != 0
if ($(this).scrollTop() !== 0) {
$('#formInstructions').fadeIn();
} else {
$('#formInstructions').fadeOut();
}
});
if (arr == '#ap1') {
$('#formInstructions').click(function(){
window.open("../static/instructions/ap1_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
return false;
} else if (arr == '#ap2'){
$('#formInstructions').click(function(){
window.open("../static/instructions/ap2_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
return false;
} else if (arr == '#ap3') {
$('#formInstructions').click(function(){
window.open("../static/instructions/ap3_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
return false;
} else if (arr == '#ap4') {
$('#formInstructions').click(function(){
window.open("../static/instructions/ap4_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
return false;
} else if (arr == '#ap5'){
$('#formInstructions').click(function(){
window.open("../static/instructions/ap5_instrns.pdf", "_blank", "toolbar=no,menubar=no,scrollbars=no, statusbar=no,resizable=yes,top=500,left=500,width=600,height=600");
return false;
} else {
return ("Oops! Something seems to be wrong.");
}
});
});
</script>
I am facing issues getting it to work as intended. Is there a way to simplify this?