Commit 40bcb309 authored by Porter Libby's avatar Porter Libby
Browse files

fix modal, move some things

parent 69f9d4f2
......@@ -27,17 +27,35 @@
<link rel="stylesheet" href="publiic/css/fonts.css">
<link rel="stylesheet" href="public/css/keyb.css">
<link rel="stylesheet" href="public/css/input.css">
<link rel="stylesheet" href="public/css/modal.css">
<link rel="stylesheet" href="public/css/main.css">
<!-- LOCAL JS -->
<script src="public/js/index.js"></script>
<script src="public/js/searchBar.js"></script>
<script src="public/js/modal.js"></script>
<!-- LOCAL DATA -->
<script src="public/data/data.js"></script>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id='close_btn' class="close">&times;</span>
<p id='modal_text'>Some text in the Modal..</p>
<iframe id='modal-video' allow_embedding=true width="560" height="315" src="https://www.youtube.com/embed/vjsbZiBVFRM"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- NAV BAR -->
<nav class="navbar navbar-expand-lg navbar-dark navbar-ec justify-content-betweenu">
<a class="navbar-brand" href="https://earlham.edu/">
......@@ -159,16 +177,17 @@
}); // create virtual keyboard if touchscreen is detected
}
</script>
<iframe style='' width="560" height="315" src="https://www.youtube.com/embed/vjsbZiBVFRM"
<iframe width="560" height="315"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
</div>
<!-- Block 2 -->
<div class='block' id="block2">
<div style='position:absolute;'>
<span class='section-prompt'>2. Pursue a passion project</span>
<form">
<span class='section-prompt'>2. Pursue a passion project</span>
<div id='radio-form-container' style='position:absolute;'>
<form id='radio-form'>
<input type="radio" id="1" name="gender" value="entrepreneurship_innovation" onchange="section_two(this.value)">
<label for="1">Center for Entrepreneurship & Innovation</label><br>
......@@ -182,9 +201,6 @@
<label for="4">Center for Social Justice</label>
</form>
</div>
<iframe id='block-2-frame' allow_embedding=true width="560" height="315" src="https://www.youtube.com/embed/vjsbZiBVFRM"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
</div>
<!-- Block 3 -->
......
......@@ -54,4 +54,12 @@ input {
.fa-rss {
background: #ff6600;
color: white;
}
\ No newline at end of file
}
#radio-form{
margin: 0 auto;
}
#radio-form-container{
width: 100%;
text-align: center;
}
\ No newline at end of file
......@@ -176,4 +176,5 @@ iframe{
margin:5%;
position: absolute;
z-index: 2;
}
\ No newline at end of file
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 10; /* Sit on top */
padding-top: 100px; /* Location of the box */
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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
z-index: 11; /* Sit on top */
width: 40px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
\ No newline at end of file
......@@ -15,19 +15,27 @@ var dictionary = {
"career_community": "This is placeholder information for the CAREER COMMUNITY block.",
"passion project": {
'entrepreneurship_innovation' : [
"url",
"The Center for Entrepreneurship and Innovation helps students connect business to the social good. Join the EPIC Grand Challenge, where you’ll build a plan to impact 25,000 people in the Richmond area in the areas of neighborhood development, employability, and community development. Or get involved with our campus chapter of Net Impact, a student organization that serves as a leadership accelerator for future changemakers.",
"Entrepreneurship Innovation",
"https://www.youtube.com/embed/OFXvx_QAbX4?list=PLLskAD3RU43XcMiIvtAEOnTHh0Zdp33N1"
],
'environmental_leadership' : [
"url",
"The Center for Environmental Leadership is for students interested in being outside, getting their hands dirty, or tackling environmental challenges on campus. Join the Student Sustainability Corps, learn about sustainable agriculture on Miller Farm, or take trips into nature and gain invaluable leadership skills through Outdoor Education.",
"Environmental Leadership",
"https://www.youtube.com/embed/OFXvx_QAbX4?list=PLLskAD3RU43XcMiIvtAEOnTHh0Zdp33N1"
],
'global_health' : [
"url",
"The Center for Global Health is for students interested in health careers. Get hands-on experience in the healthcare field through the CGH health externship program, study public health issues in the Dominican Republic alongside your faculty, and join our campus chapter of HOSA (Health Occupations Students of America).",
"Gobal Health",
"https://www.youtube.com/embed/a4vlCzImZVs?list=PLLskAD3RU43XcMiIvtAEOnTHh0Zdp33N1"
],
'social_justice' : [
"url",
"The Center for Social Justice is for students interested in activism and advocacy. Apply for the Earlham Peace Prize, which provides students with $10,000 to do a peace project anywhere in the world, or participate in Spring Lobby Weekend in Washington, D.C., where you’ll advocate for social justice with our federal lawmakers.",
"Social Justice",
"https://www.youtube.com/embed/oYhn3XP1NmA"
]
},
......@@ -66,7 +74,9 @@ var dictionary = {
"major_selection": {
"African and African American Studies": [
"www.sample-link.com",
"sample major description"
"sample major description",
"African and African American Studies",
"video url"
],
"Ancient and Classical Studies": [
"www.sample-link.com",
......
var popup_nav = '<button onclick="close_frame()" >X</button>'
function section_two(val){ // load info for section two based on value
var desc = dictionary["passion project"][val][0];
var video = dictionary["passion project"][val][1];
document.getElementById('block-2-frame').src = video;
}
var url = dictionary["passion project"][val][0];
var desc = dictionary["passion project"][val][1];
var title = dictionary["passion project"][val][2];
var video = dictionary["passion project"][val][3];
function create_frame(text){ // use array of strings to create an iframe popup with content
var frame = document.createElement('div');
frame.id = 'detail-popup'
var html = '<div id="detail-container">'
html += popup_nav;
html += text;
html +='</div>';
html += '<div id="close-detect" onclick="close_frame()"></div>';
popup_nav;
frame.innerHTML = html
document.body.appendChild(frame);
console.log(dictionary["passion project"])
open_modal()
set_modal_text(url,desc,title,video)
}
function close_frame(){
console.log('test')
$('#detail-popup').remove();
}
\ No newline at end of file
$(document).ready(function() {
var modal = document.getElementById("myModal");
var close_btn = document.getElementById("close_btn")
window.onclick = function(event) {
console.log("close")
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == close_btn) {
modal.style.display = "none";
}
}
});
function open_modal() {
var modal = document.getElementById("myModal");
modal.style.display = "block";
}
function set_modal_text(url, description, title, video_url) {
var text_obj = document.getElementById('modal_text');
var video_obj = document.getElementById('modal-video');
text_obj.innerText = title;
if (video_url == ""){
video_obj.style.display = "none";
}else{
video_obj.style.display = "block";
video_obj.src = video_url;
}
}
\ No newline at end of file
......@@ -95,15 +95,18 @@ function autocomplete(inp, arr, sub_dict) {
document.addEventListener("click", function (e) {
closeAllLists(e.target);
if (arr.includes(inp.value)){
createInfo(sub_dict[inp.value])
createInfo(sub_dict[inp.value], inp.value)
}else{
destroyInfo()
}
});
}
function createInfo(info_arr){
create_frame()
function createInfo(info_arr, title){
url = info_arr[0];
desc = info_arr[1];
open_modal();
set_modal_text(url, desc, title, "");
}
function destroyInfo(){
console.log('No info')
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment