Question

In: Computer Science

javascript 9. “User Info”, submenu of “Setting”. 9.1 _____ (10 pts) A submenu is under “setting”....

javascript

9. “User Info”, submenu of “Setting”.
9.1 _____ (10 pts) A submenu is under “setting”. When the user clicks on “User Info”, a pop up window
should display the user information (name, gender).

index.html

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="navbar">

<div class="subnav">

<button class="subnavbtn">File <i class="fa fa-caret-down"></i></button>

<div class="subnav-content">

<input id="csvfile" type="file" style="display:none" />

<a href="#" id="loadCSV">Load CSV file</a>

<a href="#" id='navLoginDB' onclick="return loginDB('show');">Login to DB</a>

<a href="#" id='navLogoutDB' onclick="return logoutDB();">Logout DB</a>

<a href="#">Exit</a>

</div>

</div>

<div class="subnav">

<button class="subnavbtn">View <i class="fa fa-caret-down"></i></button>

<div class="subnav-content">

<a href="#">Line</a>

<a href="#">Pie</a>

<a href="#">Bar</a>

<a href="#">Map</a>

</div>

</div>

<div class="subnav">

<button class="subnavbtn">Setting <i class="fa fa-caret-down"></i></button>

<div class="subnav-content">

<a href="#link1">User Info</a>

</div>

</div>

<div class="subnav">

<button class="subnavbtn">Help <i class="fa fa-caret-down"></i></button>

<div class="subnav-content">

<a href="#">Info</a>

<a href="#">Client</a>

</div>

</div>

</div>

<div id="dvCSV">

</div>

<script>

$(document).ready(function () {

var browserSupportFileUpload = function () {

var isCompatible = false;

if (window.File && window.FileReader && window.FileList && window.Blob) {

isCompatible = true;

}

return isCompatible;

};

if (browserSupportFileUpload()) {

document.getElementById('csvfile').addEventListener('change', uploadFile, false);

} else {

$("#message").html('The File APIs is not fully supported in thie browser. please use another browser.');

}

$(function () {

$("#loadCSV").click(function(e){

//$("#loadCSV").on('click', function (e) {

e.preventDefault();

$("#csvfile:hidden").trigger('click');

});

});

var uploadFile = function (event) {

var file = event.target.files[0];

var fileformat;

if (file.name.indexOf("csv") != -1) {

fileformat = true;

}

else {

fileformat = false;

}

var reader = new FileReader();

reader.readAsText(file);

reader.onload = function (event) {

if ((file.size / Math.pow(1024, 3)) > navigator.deviceMemory) {

document.getElementById("message").innerHTML = "The data requires more memory than the client can offer";

}

else if (!fileformat) {

document.getElementById("message").innerHTML = "The data is in wrong format. Only CSV file can be loaded!";

}

else {

createArray($.csv.toArrays(event.target.result));

}

};

};

function createArray(data) {

if (data !== null && data !== "" && data.length > 1) {

this.CSVdata = data;

document.getElementById("message").innerHTML = " File upload successful with" + ((CSVdata.length) - 1) + " records! lower threshold is:" + highlight('OutlierL') + " upper threshold is: " + highlight('OutlierU');

var wage = findAvg('Avg');

var pop = findAvg('Pop');

if (getCookie("p1UserName") != "") {

var uname = getCookie("p1UserName");

$.ajax({

url: "",

type: 'POST',

async: false,

data: {

uname: uname

},

success: function (response) {

var dd = JSON.parse(response);

console.log(dd);

wage = parseFloat(dd[0][0]);

pop = parseFloat(dd[0][1]);

}

});

}

}

}

}

);

</script>

</body>

</html>

style.css

body {

font-family: Arial, Helvetica, sans-serif;

margin: 0;

}

.navbar {

overflow: hidden;

background-color: #333;

}

.navbar a {

float: left;

font-size: 16px;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

.subnav {

float: left;

overflow: hidden;

}

.subnav .subnavbtn {

font-size: 16px;

border: none;

outline: none;

color: white;

padding: 14px 16px;

background-color: inherit;

font-family: inherit;

margin: 0;

}

.navbar a:hover, .subnav:hover .subnavbtn {

background-color: red;

}

.subnav-content {

display: none;

position: absolute;

left: 0;

background-color: red;

width: 100%;

z-index: 1;

}

.subnav-content a {

float: left;

color: white;

text-decoration: none;

}

.subnav-content a:hover {

background-color: #eee;

color: black;

}

.subnav:hover .subnav-content {

display: block;

}

#upload {

display: block;

visibility: hidden;

width: 0;

height: 0;

}

table {

border-collapse: collapse;

}

table, th, td {

border: 1px solid black;

}

Solutions

Expert Solution

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">File <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<input id="csvfile" type="file" style="display:none" />
<a href="#" id="loadCSV">Load CSV file</a>
<a href="#" id='navLoginDB' onclick="return loginDB('show');">Login to DB</a>
<a href="#" id='navLogoutDB' onclick="return logoutDB();">Logout DB</a>
<a href="#">Exit</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">View <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Line</a>
<a href="#">Pie</a>
<a href="#">Bar</a>
<a href="#">Map</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Setting <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#link1" id="myBtn">User Info</a>
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Help <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
<a href="#">Info</a>
<a href="#">Client</a>
</div>
</div>
</div>
<div id="dvCSV">
</div>

<div id="myModal" class="modal">

<div class="modal-content">
<span class="close">&times;</span>
<p>Username : Sobi</p>
<p>Gender : Female</p>
</div>
</div>

<script>

$(document).ready(function () {

var browserSupportFileUpload = function () {

var isCompatible = false;

if (window.File && window.FileReader && window.FileList && window.Blob) {

isCompatible = true;

}

return isCompatible;

};

if (browserSupportFileUpload()) {

document.getElementById('csvfile').addEventListener('change', uploadFile, false);

} else {

$("#message").html('The File APIs is not fully supported in thie browser. please use another browser.');

}

$(function () {

$("#loadCSV").click(function(e){

//$("#loadCSV").on('click', function (e) {

e.preventDefault();

$("#csvfile:hidden").trigger('click');

});

});

var uploadFile = function (event) {

var file = event.target.files[0];

var fileformat;

if (file.name.indexOf("csv") != -1) {

fileformat = true;

}

else {

fileformat = false;

}

var reader = new FileReader();

reader.readAsText(file);

reader.onload = function (event) {

if ((file.size / Math.pow(1024, 3)) > navigator.deviceMemory) {

document.getElementById("message").innerHTML = "The data requires more memory than the client can offer";

}

else if (!fileformat) {

document.getElementById("message").innerHTML = "The data is in wrong format. Only CSV file can be loaded!";

}

else {

createArray($.csv.toArrays(event.target.result));

}

};

};

function createArray(data) {

if (data !== null && data !== "" && data.length > 1) {

this.CSVdata = data;

document.getElementById("message").innerHTML = " File upload successful with" + ((CSVdata.length) - 1) + " records! lower threshold is:" + highlight('OutlierL') + " upper threshold is: " + highlight('OutlierU');

var wage = findAvg('Avg');

var pop = findAvg('Pop');

if (getCookie("p1UserName") != "") {

var uname = getCookie("p1UserName");

$.ajax({

url: "",

type: 'POST',

async: false,

data: {

uname: uname

},

success: function (response) {

var dd = JSON.parse(response);

console.log(dd);

wage = parseFloat(dd[0][0]);

pop = parseFloat(dd[0][1]);

}

});

}

}

}

}

);

</script>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

<style type="text/css">
        body {

font-family: Arial, Helvetica, sans-serif;

margin: 0;

}

.navbar {

overflow: hidden;

background-color: #333;

}

.navbar a {

float: left;

font-size: 16px;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

.subnav {

float: left;

overflow: hidden;

}

.subnav .subnavbtn {

font-size: 16px;

border: none;

outline: none;

color: white;

padding: 14px 16px;

background-color: inherit;

font-family: inherit;

margin: 0;

}

.navbar a:hover, .subnav:hover .subnavbtn {

background-color: red;

}

.subnav-content {

display: none;

position: absolute;

left: 0;

background-color: red;

width: 100%;

z-index: 1;

}

.subnav-content a {

float: left;

color: white;

text-decoration: none;

}

.subnav-content a:hover {

background-color: #eee;

color: black;

}

.subnav:hover .subnav-content {

display: block;

}

#upload {

display: block;

visibility: hidden;

width: 0;

height: 0;

}

table {

border-collapse: collapse;

}

table, th, td {

border: 1px solid black;

}


/* pop div style */

/* 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 */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 25%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* ends */

</style>
</body>
</html>

venereology answered 5 months ago
Next > < Previous

Related Solutions

Python 10 - (10 pts) - Implement a program that starts by asking the user to...
Python 10 - (10 pts) - Implement a program that starts by asking the user to enter a userID (i.e., a string). The program then checks whether the id entered by the user is in the list of valid users. The current user list is: ['joe', 'sue', jamal, 'sophie'] Depending on the outcome, an appropriate message should be printed. Regardless of the outcome, your function should print 'Done.' before terminating. Here is an example of a successful login: >>> Login:...
Write a javascript program that asks the user to enter up to 10 golf scores, which...
Write a javascript program that asks the user to enter up to 10 golf scores, which are to be stored in an array. You should provide a means for the user to terminate input prior to entering 10 scores. The program should display all the scores on one line and report the average score. Handle input, display, and the average calculation with three separate array processing functions.
a) (10 pts) Suppose that the stock price is $31, the risk-free interest rate is 9%...
a) (10 pts) Suppose that the stock price is $31, the risk-free interest rate is 9% per year, the price of a three-month European call option is $2.69, and the price of a 3-month European put option is $2.25. Both options have the strike price $29. Assume monthly compounding. Describe an arbitrage strategy and justify it with appropriate calculations. Please write your solution in complete sentences. b) (10 pts) Use the same data as in part (a), but suppose now...
9. A bank is operating under a required reserve ratio of 10%. If this bank has...
9. A bank is operating under a required reserve ratio of 10%. If this bank has excess reserves of $1,000, it can loan out up to a maximum of: A. $0. B. $1,000. C. $1,100. D. $10,000. E. None of these 10. The money supply will grow faster through deposit creation when the legal reserve requirement is: A. high, and banks hold excess reserves. B. high, and banks cannot find good customers to lend to. C. low, and banks are...
(10 pts) For the following data: Group 1 Group 2 3 5 2 9 1 8...
(10 pts) For the following data: Group 1 Group 2 3 5 2 9 1 8 8 12 4 9 Calculate the following: SS1 SS2 SSD SD Sx1-x2
QUESTION 9 A nutritionist claims that children under the age of 10 years are consuming more...
QUESTION 9 A nutritionist claims that children under the age of 10 years are consuming more than the U.S. Food and Drug Administration’s recommended daily allowance of sodium, which is 2400 mg. To test this claim, she obtains a random sample of 75 children under the age of 10 and measures their daily consumption of sodium. This sample has a mean of 2610 mg and leads to a p -value of .124. Claim: The mean level of sodium consumption for...
Problem 12-10 Recording lessor sales-type lease under ASU 2016-02 (ASC 842) (LO 12-9) Railcar Leasing Inc....
Problem 12-10 Recording lessor sales-type lease under ASU 2016-02 (ASC 842) (LO 12-9) Railcar Leasing Inc. early adopts ASU 2016-02 on January 1, 2017. Also, on January 1, 2017, Railcar Leasing Inc. (the lessor) purchased 10 used boxcars from Railroad Equipment Consolidators at a price of $8,749,520. Railcar leased the boxcars to the Reading Railroad Company (the lessee) on the same date. The lease calls for eight annual payments of $1,500,000 to be made at the beginning of each year...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT