I have multiple div-containers all containing an image and some text. I want to make modals for all of the images, but I'm stuck getting them to work and I don't know what else I need to change. I'm struggling especially since I also have a settings modal inside of my off canvas menu.
How do I make all of the images work as a modal without losing the Settings off canvas menu? I know I have to change the JS for it to work for class instead of id, but it still doesn't work and I don't know what I'm missing.
<!-- OFF MENU CANVAS JS-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
<!-- END OFF MENU CANVAS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Begin settings page popup-->
<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 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>
<!-- End settings page popup-->
<!-- Begin img enlargen-->
<script>
// Get the modal
var modal =
this.getAttribute("rel"); document.getElementById('myModal2');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = this.getAttribute("rel"); document.getElementById('myImg');
var modalImg = document.getElementsByClassName("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
<!--End img enlargen-->
#charset "UTF-8";
/* CSS Document */
header {
z-index: 1000;
width: 100%;
background-color: #5BC2FF;
margin: 0 auto;
position: relative;
box-shadow: 0px 0.5px 2px 0.2px black;
}
/* HEADER */
#airplane {
margin-left: 5px;
display: inline-block;
}
.headertext2 {
z-index: 100;
text-align: center;
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
display: inline;
margin-left: 8px;
font-size: 30px;
}
/* OFF CANVAS MENU BEGINS*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #5BC2FF;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #586166;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: .5s;
padding: 16px;
display: inline-block;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* OFF CANVAS MENU END*/
body {
background-color: #586166;
height: 1000px;
}
p.div-container {
font-family: 'annie-use-your-telescope', "Arial";
margin-top: 5%;
font-size: 4vw;
}
.pic {
margin-bottom: 10%;
margin-left: 10px;
margin-right: 10px;
padding:1px;
border:1px solid #021a40;
background-color: #FF5B5F;
float: left;
width: 50%;
height: 50%;
}
#FirstPic {
margin-top: 100px;
}
#LastPic {
margin-bottom: 100px;
}
#FirstDesc {
margin-top: 100px;
}
.div-container {
display: flex;
overflow: hidden;
}
.Description {
float: left;
width: 50%;
height: 100px;
color: white;
padding-right: 5px;
}
/*SIGN UP FORM BEGIN*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 8px 12px 5px 3px;
display: inline-block;
}
input[type=submit] {
background-color: #D29E95;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
margin-bottom: 40px;
}
input[type=submit]:hover {
background-color: #FF5B5F;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
margin-top: 30px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
/*SIGN UP FORM END*/
.section {
background-color: #5ECCBA;
width: 97%;
white-space: nowrap;
height: 375px;
margin: 85px 1.5% 20px;
padding-bottom: 5px;
float: left;
display: block;
box-shadow: 0px 2px 2px 0.2px black;
}
#ProfilePic {
padding-top: 10px;
padding-left: 10px;
}
h2 {
display: inline;
margin-left: 8%;
text-decoration: underline;
font-weight: 400;
color: white;
}
.ages {
float: left;
display: inline;
margin-top: -30px;
margin-left: 50%;
text-align: center;
padding-left:120px;
padding-top: -600px;
font-weight:lighter;
color: white;
}
.col-6 {
text-align: center;
}
.col-3 {
display: inline-block;
padding: 2px 2% 0.5% 2%;
margin: 0% 7%;
width: auto;
height: 30px;
text-align: center;
float: left;
box-shadow: 1px 1px 2px 0.2px white;
}
.inline-block {
display:inline-block;
float:left;
margin-left:5%;
margin-top: 1%;
}
.titles {
margin-left: 25%;
padding-top: 25px;
color: white;
}
.kmtravel {
text-align: center;
margin-left: 25%;
margin-top: -15px;
color: white;
}
.myworld {
background-color: #5ECCBA;
display: inline-block;
width: 97%;
height: 50px;
text-align: center;
margin: 0% 1.5% 0px;
box-shadow: 0px -1px 2px 0.2px black;
color: white;
padding-top: 10px;
border-bottom: medium;
}
#MyMapColours {
background-color: white;
width: 97%;
margin-left: 1.5%;
margin-right: 1.5%;
margin-bottom: 10px;
margin-top: 2px;
display: inline-block;
}
.lefttodiscover {
background-color: #5ECCBA;
display: inline-block;
width: 97%;
height: 50px;
text-align: center;
margin: 10px 1.5% 0px;
box-shadow: 0px -1px 2px 0.2px black;
color: white;
padding-top: 10px;
}
#map {
width:97%;
height:400px;
background:white;
margin: 2px 1.5% 70px;
box-shadow: 1px 1px 2px 0.2px black;
}
/* SETTINGS PAGE BEGINS */
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* 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: white;
box-shadow: 0px -0.5px 2px 0.2px black;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
margin-left:90%;
font-size: 28px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* SETTINGS PAGE END*/
/* ENLARGEN IMAGE BEGIN*/
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* 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.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal2-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal2-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close2 {
top: 15px;
right: 35px;
margin-bottom: 20px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
margin-right: 10%;
}
.close2:hover,
.close2:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal2-content {
width: 100%;
}
}
/* ENLARGEN IMAGE END*/
footer {
background: #5BC2FF;
color:white;
height:50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-top: 12px;
text-align: center;
box-shadow: 0px -0.5px 2px 0.2px black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>My Journey</title>
<link href="css/mystyles.css" rel="stylesheet" type="text/css">
</head>
<body><!-- BEGIN BODY-->
<div class="jumbotron-fluid">
<header class="fixed-top">
<!-- OFF CANVAS MENU START -->
<div id="mySidenav" class="sidenav">
×
My Journey
My Account
New Account
My Friends
<br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<button id="myBtn">Contact</button>
Settings
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Are you having trouble using the app?</h3>
<p>Visit our website www.MyJourney.com<br>
Or contact us at +31 6 12510336</p>
<p>For more information.</p>
</div>
</div>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
<!-- OFF CANVAS MENU END -->
<div id="airplane"> <img src="img/Airplane logo.png" alt="logoheader" width="40px"> </div>
<h1 class="headertext2">My Trips</h1>
</header>
<div class="div-container">
<div class="pic" id="FirstPic"><img src="img/Kenya elephants.jpg" alt="TravelPic" width="100%" height="100%"></div>
<div class="Description" id="FirstDesc">
<p>KENYA <br>
<i>What:</i> The Big 5 <br>
<i>With:</i> Tom <br>
<i>When:</i> Jan. 2018 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic">
<img id="myImg" src="img/Mirror Lakes.jpg" alt="Mirror Lakes" width="100%" height="100%">
</div>
<div class="Description">
<p>NEW ZEALAND <br>
<i>What:</i> Mirror Lakes <br>
<i>With:</i> Robyn <br>
<i>When:</i> Feb. 2014 <br>
</p>
</div>
</div>
<!-- The Modal -->
<div id="myModal2" class="modal2">
<span class="close">×</span>
<img class="modal-content2" alt="img01"><img class="img01" alt="img01">
<div id="caption"></div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Brazil rock dedo de deus.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BRAZIL <br>
<i>What:</i> Dedo de Deus <br>
<i>With:</i> Barbara & Paul <br>
<i>When:</i> May. 2017 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Sunset orange.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BELGIUM <br>
<i>What:</i> Sunset <br>
<i>With:</i> Maya <br>
<i>When:</i> Nov. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Amsterdam.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>NETHERLANDS <br>
<i>What:</i> Canals <br>
<i>With:</i> Vera <br>
<i>When:</i> Sep. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Lake Bled Slovenia.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>SLOVENIA <br>
<i>What:</i> Lake Bled <br>
<i>With:</i> Silvia & Mark <br>
<i>When:</i> Apr. 2016 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Table Mountain.jpeg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>SOUTH AFRICA <br>
<i>What:</i> Table Mountain <br>
<i>With:</i> Pauline <br>
<i>When:</i> Aug. 2015 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic"><img src="img/Mirror Lakes.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>NEW ZEALAND <br>
<i>What:</i> Mirror Lakes <br>
<i>With:</i> Robyn <br>
<i>When:</i> Feb. 2014 <br>
</p>
</div>
</div>
<div class="div-container">
<div class="pic" id="LastPic"><img src="img/Caye Caulker Belize.jpg" alt="TravelPicture" width="100%" height="100%"></div>
<div class="Description">
<p>BELIZE <br>
<i>What:</i> Caye Caulker <br>
<i>With:</i> Romy <br>
<i>When:</i> Oct. 2013 <br>
</p>
</div>
</div>
<footer><!--BEGIN FOOTER-->
Adventure may hurt you but monotony will kill you.
</footer><!--END FOOTER-->
</div><!-- END CONTAINER -->
</body><!--END BODY-->
</html>
Related
My friend told me about bootstrap to fix my previous issue (still unsolved) for scaling my images to fit the screen // I need a responsive layout.
Oh my 27 inch monitor the website looks clean like so:
However, that is, until I decide to zoom in:
So basically the website decides to completely cut off the edges of every image I've implemented. Now I heard that bootstrap would be useful in this case however when I implemented it and through the tutorials to install it - after every stepped, it looked like this:
So basically, my code decides to spaz out. This is a horrible thing as when I hand in the assignment to my teacher, he will be viewing the website on a much smaller screen which means the website will be zoomed in and everything will be cut off or just look really ugly. How do I fix the bootstrap issue? I tried putting the linking code to the bootstrap css file way before the style.css and index.css file, however the error continued to occur. Here is the code:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jared's Workshop | Homepage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
</head>
<header>
<div class="number2">
</div>
<div class="navbar">
<div class="navlinks">
<ul>
<li>H o m e</li>
<li>G a m i n g</li>
<li>O f f i c e</li>
<li>C o n t a c t s</li>
<li>C h e c k o u t</li>
</div>
</div>
</header>
<body>
<div class="container">
<div class="containimage">
<div class="logo1">
<img src="./assets/logos/logoreal2.png">
</div>
</div>
<div class="parallax" data-parallax="scroll" data-z-index="1" data-image-src="./assets/background/back.jpg"></div>
<div class="text-justify">
<div class="abovepic">
<img src="pc.png"/>
</div>
<div class="slide">
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<a href="gaming.html"/><img src="./assets/banners/easter.png">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<a href='#geforce'/><img src="./assets/banners/easter.jpg">
<div class="text"></div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<a href="gaming.html"/><img src="./assets/banners/whiteout.png">
<div class="text"></div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!--
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
-->
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000); // Change image every 2 seconds
}
</script>
</div>
<div class="pie">
<div class="text2">
<h1>HOT BUILDS</h1>
<p>Recommended builds with hot prices from our <b>gaming builds.</b></p>
</div>
<section id="tickets">
<div id="tickets container">
<div class="ticketsbottom">
<div class="ticketsitem" style="background-image: url(./assets/background/helios2.jpg)">
<div class="icon">
<img src="./assets/icons/bhov/helios.png"/>
<div class="iconinside">
<img src="./assets/icons/ahov/insidehelios.png"/>
</div>
</div>
<h2>HELIOS</h2>
<p><b style="font-size: 1.8rem">$3355</b><br>- Intel Core i7 10700K 3.8GHz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- WD 500GB SSD OS Drive<br>- ASUS RTX 3070 8GB Graphics<br>- eVGA 750W Power Supply</p>
<a href="#music" type="button" class="superbutton" >Add to cart</a>
</div>
<div class="ticketsitem" style="background-image: url(./assets/background/coal2.png)">
<div class="icon">
<img src="./assets/icons/bhov/hot1.png"/>
<div class="iconinside">
<img src="./assets/icons/ahov/insidecoal.png"/>
</div>
</div>
<h2>COAL</h2>
<p><b style="font-size: 1.8rem">$3360</b><br>- Intel Core i7 10700KF 3.8Ghz<br>- 16GB Gigabyte Memory<br>- Gigabyte Z490 Motherboard<br>- Samsung 500GB SSD OS Drive<br>- Gigabyte RTX 3070 8GB Graphics<br>- Gigabyte 750W Power Supply</p>
<a href="#music" type="button" class="superbutton" >Add to cart</a>
</div>
<div class="ticketsitem" style="background-image: url(./assets/background/remix2.png">
<div class="icon">
<img src="./assets/icons/bhov/remix.png"/>
<div class="iconinside">
<img src="./assets/icons/ahov/insideremix.png"/>
</div>
</div>
<h2>REMIX</h2>
<p><b style="font-size: 1.8rem">$6270</b><br>- Intel Core i9 10850K 3.6Ghz<br>- 32GB Corsair Memory<br>- Gigabyte Z490 Motherboard<br>- Samsung 2TB SSD OS Drive<br>- Gigabyte RTX 3090 24GB Graphics<br>- eVGA 1000W Power Supply</p>
<a href="#music" type="button" class="superbutton" >Add to cart</a>
</div>
</div>
</div>
</section>
</div>
<div class="between">
<div id="geforce">
<div class="glogo">
<img src="./assets/icons/geforce 3.png"/>
</div>
<iframe width="900" height="506.25" src="https://www.youtube.com/embed/casgtX_HMTQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--SEE VIDEO </div>--->
<div class="img1">
<div class="frames">
<hr>
<br>
<br>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/oQH1dP13O3s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/5k7UPag-9x4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/T3lopR0XpOE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<p>
All Rights Reserved. Copyright 1991-2020 PLE Computers Pty Ltd (ABN: 48 051 046 596). The PLE Computer Logo & Mouse Pointer in Circles are registered Trademarks of PLE Computers Pty Ltd. All other trademarks and copyrights are the property of their respective owners. For further information on terms of service & conditions please see Terms & Conditions. Ultrabook, Celeron, Celeron Inside, Core Inside, Intel, Intel Logo, Intel Atom, Intel Atom Inside, Intel Core, Intel Inside, Intel Inside Logo, Intel vPro, Itanium, Itanium Inside, Pentium, Pentium Inside, vPro Inside, Xeon, Xeon Phi, and Xeon Inside are trademarks of Intel Corporation in the U.S. and/or other countries.
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
</p>
</div>
</div>
</body>
</html>
css:
html {
font-size: 10px;
font-family: 'Roboto', sans-serif;
scroll-behavior: smooth;
}
body{
margin: 0;
padding: 0;
}
body, body::after, body::before{
box-sizing: border-box;
}
.container{
background: #f9f9f9;
}
.parallax {
padding: 500px;
background: transparent;
margin: 0;
position: relative;
}
.text-justify{
z-index: 2;
position: relative;
background: repeat;
background-color: #111111;
}
.text-justify p{
z-index: 7;
margin-left: 200px;
margin-right: 200px;
color: white;
}
.container .containimage .logo1{
text-align: center;
position: absolute;
padding-bottom: 0;
z-index: +200;
margin:0 auto;
margin-top: 900px;
}
.container .containimage .logo1 img{
width: 1920px;
}
.navlinks{
}
.navlinks ul li:hover{
transition: .5s;
opacity: 100%;
}
.navlinks ul li{
transition: .5s;
opacity: 20%;
font-size: 2rem;
}
body { padding: 0; margin: 0; }
.navlinks li a{
padding-top: 20px;
padding-bottom: 20px;
text-transform: uppercase;
}
.navlinks a{
color: white;
z-index: 2000;
text-decoration: none;
text-align: center;
display:inline-block;
}
.navbar li{
display:inline;
}
.navbar{
list-style:none;
margin:0;
padding:0;
text-align:center;
}
header {
background-color: #16161e;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color:#16161e;
}
li {
}
li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
transition: 0.5s;
}
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
*, ::after, ::before {
box-sizing: border-box;
}
element.style {
}
p {
margin-top: 0;
margin-bottom: 0rem;
}
.text-justify {
text-align: justify!important;
margin-top: 0;
}
.text2 h1{
text-align: block;
font-size: 6rem;
color: white;
margin-top: auto;
margin-bottom: 20px;
margin-right: 400px;
margin-left: 400px;
text-align: center;
font-weight: 300;
}
.text2 p{
display: block;
font-size: 2rem;
color: white;
text-align: center;
margin-top: auto;
margin-bottom: 20px;
margin-right: 400px;
margin-left: 400px;
font-weight: 100;
letter-spacing: .1rem;
line-height: 1.6;
}
.text2 {
background-color: #111111;
padding: 100px;
transform: translate(0,-70%);
}
.img1 a img{
text-align: center;
width: 100%;
}
.between img{
padding: 20px;
}
.between{
text-align: center;
}
img {
vertical-align: middle;
border-style: none;
}
.website:hover{
color: gold;
transition: .5s;
}
.website{
text-decoration: none;
color: white;
}
.img1{
text-align: center;
}
.img1 .frames{
display: inline-block;
padding: 20px;
}
.between a{
text-decoration: none;
}
.between img{
position: relative;
vertical-align: center;
float: none;
top: -80px;
}
.between{
text-align: center;
}
.superbutton{
opacity: 100;
display: flex;
padding: 10px 30px;
color: #294f65;
background-color: #fba174;
border: 2px solid #294f65;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .1rem;
transition: .6s ease background-color;
z-index: +99;
transition: .5s;
margin-bottom: 40px;
margin-top: 1px;
transform: translate(0,40%);
position: relative;
text-decoration: none;
flex-wrap: wrap;
}
.superbutton:hover{
color: white;
background-color: #ff8b52;
padding: 15px 35px;
transition: 0.5s;
}
.super{
max-width: 1200px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
.superbutton:active{
color: white;
background-color: #294f65;
padding: 12px 32px;
transition: 0.1s;
}
/* GEFORCE VIDEO */
#geforce{
text-align: center;
background-image: url(https://plecom.imgix.net/bo-557053-geforce-rtx-outriders-bundle-video-bkgd-2560x770-d.jpg?auto=format);
padding: 70px;
padding-top: 20px;
}
#geforce .glogo {
text-align: center;
}
#geforce .glogo img{
padding: 0px;
width: 400px;
top: -190px;
transform: translate(0,100%);
}
/* GEFORCE VIDEO END*/
#keyframes text_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes text_reveal{
100%{
color: white;
}
}
#keyframes box{
100%{
opacity: 100%;
font-size: 2rem;
}
}
#keyframes items_reveal{
100%{
flex-basis: 20%;
opacity: 1;
}
}
#keyframes title_reveal{
100%{
font-size: 4rem;
opacity: 1;
}
}
/*Tickets Section*/
.pie {
background-color: #0d0d0d;
}
#tickets {
flex-direction: column;
text-align: center;
max-width: 1500px;
margin: 0 auto;
padding: 20px 0;
}
#ticketstop .sectiontitle h1{
font-size: 2rem;
font-weight: 300;
color: black;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
text-align: center;
opacity: 100;
}
.sectiontitle span{
color: #347f7d;
}
#tickets .sectiontitle{
font-size: 2rem;
font-weight: 300;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: .2rem;
text-align: center;
opacity: 100;
}
#tickets .sectiontitle span{
color: #347f7d;
}
#tickets p {
text-align: justify;
}
#tickets .ticketsbottom{
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
transform: translate(0,-30%);
}
#tickets .ticketsitem {
flex-basis: 15%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0px;
border-radius: 10px;
background-size: cover;
margin: 10px 6px;
position: relative;
z-index: +1;
transition: .2s;
box-sizing: border-box;
}
#tickets .ticketsitem::after{
content: '';
position: absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(60deg, #26323c 0%, #485563 100%);
opacity: .8;
z-index: -1;
border-radius: 10px;
}
#tickets .ticketsbottom .icon{
height: 80px;
width: 20px;
margin-bottom: 25px;
}
#tickets .ticketsbottom .icon img{
margin-left: auto;
margin-right: auto;
transform: translate(-50%,-70%);
width: 350px;
position: absolute;
opacity: 100;
}
#tickets .ticketsbottom .icon:hover img{
opacity: 0
}
#tickets .ticketsbottom .icon .iconinside img{
margin-left: auto;
margin-right: auto;
transform: translate(-50%,-70%);
width: 350px;
position: absolute;
opacity: 0;
}
#tickets .ticketsbottom .icon .iconinside img:hover{
opacity: 100;
}
#tickets .ticketsitem h2{
font-size: 3rem;
color: white;
margin-bottom: 10px;
text-transform: uppercase;
}
#tickets .ticketsitem p{
color: white;
text-align: left;
font-size: 1.4rem;
line-height: 1.9rem;
white-space: nowrap;
}
#tickets .ticketsitem:hover{
position: relative;
transition: 0.1s;
}
/* END TICKETS Section */
/*above tickets*/
.abovepic{
text-align: center;
transform: translate(0,-35%);
padding-bottom: 0;
}
/*below tickets*/
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 900px;
position: relative;
margin: auto;
margin-top: 100px;
}
/* Hide the images by default */
.mySlides {
display: none;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: -500px;
transform: translate(0,-380%);
border-radius: 3px 0 0 3px;
}
.prev{
left: -500px;
transform: translate(0,-380%);
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
opacity: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
transform: translate(0,-40%);
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.mySlides{
transform: translate(-50%,-55%);
text-align: center;
display: flex;
}
.mySlides img{
width: 200%;
left: auto;
right: auto;
}
.slide{
background-image: url(./assets/background/back1.png);
padding:50px;
padding-top: 115px;
margin:0 auto;
margin-top: -200px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
.col-75 {
-ms-flex: 75%; /* IE10 */
flex: 75%;
}
.col-25,
.col-50,
.col-75 {
padding: 0 16px;
}
.container .containimage {
display: flex;
justify-content: center;
align-items: center;
box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.3);
z-index: +10000;
}
input[type=text] {
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
margin-bottom: 10px;
display: block;
}
.icon-container {
margin-bottom: 20px;
padding: 7px 0;
font-size: 24px;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius: 3px;
cursor: pointer;
font-size: 17px;
}
.btn:hover {
background-color: #45a049;
}
span.price {
float: right;
color: grey;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */
#media (max-width: 800px) {
.row {
flex-direction: column-reverse;
}
.col-25 {
margin-bottom: 20px;
}
}
I see you did not use any of Bootstrap's grid classes, to make a responsive layout that matches every screen and resize images and content smoothly, here is an example:
in html
<section class="tickets">
<div class="row">
<div class="tickets_item col-sm-12 col-md-4">
<img src="./images/image.jpg" alt="">
</div>
<div class="tickets_item col-sm-12 col-md-4">
<img src="./images/image.jpg" alt="">
</div>
<div class="tickets_item col-sm-12 col-md-4">
<img src="./images/image.jpg" alt="">
</div>
</div>
</section>
to establish a responsive layout using Bootstrap, you need to use bootstrap .row class, In Bootstrap, the .row class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. please read Bootstrap's Grid system Documentation page
so inside the <div class="row"></div> there is by default a virtual 12 columns, you can can give every ticket_item a custom width in small/medium/large/xlarge screens by adding .col- + screen size + column count to be:
.col-sm-12 gives full width in small screens.
.col-md-6 gives half width i.e. 6 columns in medium screens.
.col-lg-4 gives 33.333 % width, i.e. 4/12 columns in large screens.
I'm looking for a functionality where, on arriving at page, the animation of modal window popping occurs without the button actually being pressed :
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 30%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 20%;
border-radius: 10%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* 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 */
padding-top: 60px;
text-align : centre
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body style = "background-color : blue">
<h2 style = "text-align: center;">Let's Start</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto; -webkit-box-align: center; ">Describe</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
Name :
<input type="text" name="name" placeholder="Enter name"><br>
Age :
<input type="text" name="age" placeholder="Enter age"><br>
Gender :
<input type="text" name="gender" placeholder="Enter gender"><br>
Symptoms :
<input type="text" name="symptoms" placeholder="Enter symptoms"><br>
Diagnosis :
<input type="text" name="diagnosis" placeholder="Enter diagnosis"><br>
Prescription :
<input type="text" name="prescription" placeholder="Enter prescription"><br>
Advice :
<input type="text" name="advice" placeholder="Enter advice"><br>
<input type="submit" value="Submit">
</div></centre>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
What happens is that we arrive at this page by redirecting from another page. On reaching here, the page should be blank for a moment, and then the modal would pop up. Please tell me how to do
try this instead,
wait 2 sec(2000ms) to view popup.
setTimeout(function(){
if($(".modal").css("display")=="none"){
$(".modal").css("display","block") ;
}
}, 2000);
setTimeout(function(){
if($(".modal").css("display")=="none"){
$(".modal").css("display","block") ;
}
}, 2000);
body {font-family: Arial, Helvetica, sans-serif;}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 30%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 20%;
border-radius: 10%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* 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 */
padding-top: 60px;
text-align : centre
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
p{color:white;text-align:center;}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</head>
<body style = "background-color : blue">
<h2 style = "text-align: center;">Let's Start</h2>
<p>Wait 2seconds to popup show</p>
<div id="id01" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="doctor.jpg" alt="Avatar" class="avatar">
</div>
<div class="container"><centre>
Name :
<input type="text" name="name" placeholder="Enter name"><br>
Age :
<input type="text" name="age" placeholder="Enter age"><br>
Gender :
<input type="text" name="gender" placeholder="Enter gender"><br>
Symptoms :
<input type="text" name="symptoms" placeholder="Enter symptoms"><br>
Diagnosis :
<input type="text" name="diagnosis" placeholder="Enter diagnosis"><br>
Prescription :
<input type="text" name="prescription" placeholder="Enter prescription"><br>
Advice :
<input type="text" name="advice" placeholder="Enter advice"><br>
<input type="submit" value="Submit">
</div></centre>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
I have integrated the google signin button on my html page. but the sign in button doesn't fits into the exact space provided. How can i design custom button for google singin like the above given buttons like Facebook and twitter in the screen shot.
tried placing different button then google singin links doesn't works.
My html and CSS code:
<div class="container">
<form action="/action_page.php">
<div class="row">
<h2 style="text-align:center">Login with Social Media</h2>
<div class="col">
<a href="javascript:void(0);" onclick="fbLogin()" id="fbLink" class="fb btn" scope="public_profile,email" onlogin="checkLoginState();">
<i class="fa fa-facebook fa-fw"></i> Login with Facebook
</a>
<a href="javascript:void(0);" class="twitter btn">
<i class="fa fa-twitter fa-fw"></i> Login with Twitter
</a>
<a class="google btn">
<div class="g-signin2" data-width="570" data-height="30" data-longtitle="true"></div>
</a>
</div>
</div>
<div class="data">
<p>Profile Details</p>
<img id="pic" class="img-circle" width="100" height="100"/>
<p>EMail Address</p>
<p id="email" class="alert alert-danger"></p>
<p id="name">
<button onclick="signOut()" class="btn btn-danger">SignOut</button>
</div>
CSS:
* {box-sizing: border-box}
/* style the container */
.container {
position: relative;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px 0 30px 0;
}
/* style inputs and link buttons */
input,
.btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 4px;
margin: 5px 0;
opacity: 0.85;
display: inline-block;
font-size: 17px;
line-height: 20px;
text-decoration: none; /* remove underline from anchors */
}
input:hover,
.btn:hover {
opacity: 1;
}
/* add appropriate colors to fb, twitter and google buttons */
.fb {
background-color: #3B5998;
color: white;
}
.twitter {
background-color: #55ACEE;
color: white;
}
.google {
background-color: #dd4b39;
color: white;
}
.data {
display: none;
}
/* style the submit button */
input[type=submit] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
/* Two-column layout */
.col {
float: center;
width: 50%;
margin: auto;
padding: 0 0px;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* vertical line */
.vl {
position: absolute;
left: 50%;
transform: translate(-50%);
border: 2px solid #ddd;
height: 175px;
}
/* text inside the vertical line */
.inner {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 50%;
padding: 8px 10px;
}
/* hide some text on medium and large screens */
.hide-md-lg {
display: none;
}
/* bottom container */
.bottom-container {
text-align: center;
background-color: #666;
border-radius: 0px 0px 4px 4px;
}
/* Responsive layout - when the screen is less than 650px wide, make the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 650px) {
.col {
width: 100%;
margin-top: 0;
}
/* hide the vertical line */
.vl {
display: none;
}
/* show the hidden text on small screens */
.hide-md-lg {
display: block;
text-align: center;
}
}
Add text-align: center; to the div containing the google sign in button.
My first dropdown button "Content" works correctly but when I click on the second dropdown button "Dropdown", the contents from the first dropdown button show up instead???
I have no idea why it is doing this??? Maybe I am overlooking a small detail, but I can't seem to find where I am going wrong with this.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
Ummm.... because you call the same function from both buttons.
Essentially, you run the same piece of code, myFunction, despite which navigation item is clicked. Therefore, of course both items will always do the same thing.
Give each menu a different ID (remember that IDs need to be unique - i.e. you can't have two items with the same ID), and make myFunction take the ID of the element to show / hide, as shown below.
This means that there is a way for the function to determine which menu open, and thus it will open the correct one.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onmouseup = function(e) {
var dropdown = document.querySelector(".dropdown-content.show"); //Get any shown dropdown element (i.e. any element on the page with both the dropdown-content class and the show class
if (dropdown) { //If such an element exists, a dropdown needs to be closed
dropdown.classList.remove("show"); //So remove the show class
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownOne')">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownOne">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownTwo')">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownTwo">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
How does this work?
myFunction('dropdownOne') means that the id variable in myFunction is given the value dropdownOne - therefore when we call document.getElementById(id) it will interpret as document.getElementById('dropdownOne') instead, and hence the first dropdown is targeted.
Likewise, if we call myFunction('dropdownTwo'), then it will interpret as document.getElementById('dropdownTwo'), and thus target the second dropdown.
Therefore, you can add as many menu items like this as you want, assuming each has a unique identifier, and myFunction is given the unique ID each time.
I am working on a personal website.
In this site I would like to have the navigation links become active when I scroll to the part of the page relating to that navigation link, all other active links should then have the nav-active class removed.
I have it working partially, the navigation links are highlighting correctly. I do not understand why the active highlighting is not removed when the scrolling moves into the links that are under a div dropdown button.
Can anyone point me in the right direction and also point me to some tutorials/reading (not too advanced) on the relevant information about this issue?
My pen is here:
https://codepen.io/pjsmyth/pen/ZvaZBO/
Thanks in advance
Pete
Code below:
$(document).ready(function() {
var scrollLink = $('.scroll');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
if ( sectionOffset <= scrollbarLocation ) {
$(this).addClass('nav-active');
$(this).siblings().removeClass('nav-active');
$(this).children().removeClass('nav-active');
}
})
})
});
/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/
/* CSS custom properties (variables) */
:root {
--orange: #F9A828;
--lightGrey: #ECECEB;
--teal: #07617D;
--darkGreyBlue: #2E383F;
--darkGreyBlueTint: #718A9B;
}
* {
margin: 0px;
padding: 0;
border: none;
font-size: 1em;
/*border: 1px red solid;*/
}
.hidden {
display: none;
}
/*--------- Navigation Area ---------*/
body nav {
height: 5vh;
width: 100%;
font-family: 'Raleway', sans-serif;
position: fixed;
background-color: var(--darkGreyBlue);
color: var(--lightGrey);
z-index: 10;
}
.nav-active {
color: var(--orange) !important;
height: 5vh;
/*border-width: 0;
padding: 0 10px;
float: right;*/
}
/*--------- Navigation Branding Area ---------*/
.branding {
line-height: 5vh;
float: left;
height: 5vh;
padding-left: 5%;
}
.branding i {
float: left;
padding-top: 1.6vh;
color: var(--orange);
}
.branding div {
display: inline;
padding-left: 5px;
}
/*--------- Navigation Links Area ---------*/
.navLinks {
padding-right: 5%;
float: right;
}
.navLinks a {
line-height: 5vh;
float: none;
color: var(--lightGrey);
padding: 0px 10px;
text-decoration: none;
display: inline-block;
text-align: left;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: var(--lightGrey);
line-height: 5vh;
text-align: left;
background-color: inherit;
min-width: 75px;
padding: 0 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: var(--orange);
padding: 0px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: var(--darkGreyBlue);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown a {
float: none;
height: 5vh;
line-height: 5vh;
text-decoration: none;
background-color: var(--darkGreyBlue);
border-width: 0;
color: var(--lightGrey);
padding: 0 10px;
}
.navLinks a:hover, .dropdown:hover .dropbtn {
color: var(--orange);
/*color: var(--darkGreyBlue);*/
}
/*--------- Splashscreen Area ---------*/
body div.splashScreen {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Raleway', sans-serif;
color: var(--lightGrey);
text-align: center;
}
body div.splashScreen div.splashText {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body div.splashScreen div.splashText h1 {
font-family: 'Oleo Script', cursive;
font-size: 7em;
padding-bottom: 10px;
}
body div.splashScreen div.splashText a button {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
border: 1px solid var(--lightGrey);
color: var(--lightGrey);
transition: all 0.5s ease-in;
}
body div.splashScreen div.splashText a button:hover {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--lightGrey);
border-radius: 20px;
border: 1px solid var(--darkGreyBlueTint);
color: var(--darkGreyBlueTint);
}
body div.splashScreen div.splashText a button:active {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
color: var(--lightGrey);
}
/*--------- About Area ---------*/
body div.aboutPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.aboutPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Experience Area ---------*/
body div.experiencePage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.experiencePage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Skills Area ---------*/
body div.skillsPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.skillsPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Portfolio Area ---------*/
body div.portfolioPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.portfolioPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Photography Area ---------*/
body div.photographyPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.photographyPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Favourites Area ---------*/
body div.favouritesPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.favouritesPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Personal Website of Pete</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="https://use.fontawesome.com/71da83f6b4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!-- Start Navigation Section -->
<nav>
<span class="branding">
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
<div>Pete Smyth</div>
</span>
<div class="navLinks">
<div class="dropdown">
<button class="dropbtn">Interests <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-photography">Photography</a>
<a class="scroll" href="#bk-favourites">Favourites</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resume <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-resume-experience">Experience</a>
<a class="scroll" href="#bk-resume-skills">Skills</a>
<a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
</div>
</div>
<a class="scroll nav-active" href="#bk-splash">Home</a>
<a class="scroll" href="#bk-about">About</a>
</div>
</nav>
<!-- End Navigation Section -->
<!-- Start Splashscreen Section -->
<div id="bk-splash" class="splashScreen">
<div class="splashText">
<h1>
Pete Smyth
</h1>
<button>Learn More</button>
</div>
<!-- end of splashText class -->
</div>
<!-- End Splashscreen Section -->
<!-- Start About Section -->
<div id="bk-about" class="aboutPage">
<header>
<h1>Here's the Goss</h1>
</header>
</div>
<!-- End About Section -->
<!-- Start Resume Experience Section -->
<div id="bk-resume-experience" class="experiencePage">
<header>
<h1>Pete's Experiences</h1>
</header>
</div>
<!-- End Resume Experience Section -->
<!-- Start Resume Skills Section -->
<div id="bk-resume-skills" class="skillsPage">
<header>
<h1>Pete's Skills</h1>
</header>
</div>
<!-- End Resume Skills Section -->
<!-- Start Portfolio Section -->
<div id="bk-resume-portfolio" class="portfolioPage">
<header>
<h1>Pete's Portfolio</h1>
</header>
</div>
<!-- End Portfolio Section -->
<!-- Start Photography Section -->
<div id="bk-photography" class="photographyPage">
<header>
<h1>Pete's Photography</h1>
</header>
</div>
<!-- End Photography Section -->
<!-- Start Favourites Section -->
<div id="bk-favourites" class="favouritesPage">
<header>
<h1>Pete's Favourites</h1>
</header>
</div>
<!-- End Favourites Section -->
</body>
I think you wish the .dropbtn to highlight when a .scroll under it is highlighted...
There could be a couple ways to do it.
But since the sections (div) have fixed offsets, you can get them all in an array, on load... And then compare them with the scrolled position.
When we have a "match", get its id from another array holding the ids and quit that loop right away.
Here is the script:
$(document).ready(function() {
var scrollLink = $('.scroll');
var dropbtn = $(".dropbtn");
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Get all section position and id
var sectionArr = [];
var sectionId = [];
$("body>div").each(function(){
console.log($(this).attr("id") + " " + $(this).offset().top);
sectionArr.push($(this).offset().top-20);
sectionId.push($(this).attr("id"));
});
// Add the full page height to the array for the comparison of the last section
sectionArr.push($("body").height());
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
// Remove the class everywhere
scrollLink.removeClass('nav-active');
dropbtn.removeClass('nav-active');
// Compare the scrolled position with the offsets stored in array until we find.
for(i=0;i<sectionArr.length;i++){
var target = $(".scroll[href='#"+sectionId[i]+"']");
// if the scrolled position is more than a section position, BUT less than the next
if(scrollbarLocation>sectionArr[i] && scrollbarLocation<sectionArr[i+1]){
// add the highlight class
target.addClass("nav-active");
if(target.parent().is(".dropdown-content")){
// add the highlight class to the dropdown button
target.closest(".dropdown").find(".dropbtn").addClass('nav-active');
}
break; // Exit the loop on match
}
} // End for loop
}); // End on scroll
}); // End ready
CodePen
Note that you could adjust the "trigger point" so the menu highlighting occurs when more than the half of the section is displayed, which I really think would be nicer!
Just update this line:
sectionArr.push($(this).offset().top-20 - ($(this).height()/2));
That's because your DOM is in the incorrect order. In your DOM, "About" is the last DOM element with .scroll, and since About is also valid for sectionOffset <= scrollbarLocation and is the last item to be processed it overwrites the class manipulation for the other navigation elements that are on screen.
I partially fixed it in this demo here.
Your conditional selection logic is a little confused. The way you have it set up now, if the sectionOffset is less than the scrollbarLocation then you try to set the nav-active class on the current link and remove it from the siblings, children and parent links.
The problem is that if the current link is itself a child link, then the links you want to unset are going to be siblings of the link, siblings of the parent of the link or children of the siblings of the parent link.
You could cover all of those cases manually, but then your code becomes convoluted and brittle. What if, at some point in the future, you want to add additional layers of link nesting? You'd have to manually account for that.
Luckily, since you're already looping through all of your links on a scroll event, there's an easier way. Just check to see if a section has scrolled off of the screen and remove the nav-active class of it's associated link by changing your each callback:
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
var sectionBottom = sectionOffset + $(this.hash).height();
if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
$(this).addClass('nav-active');
} else {
$(this).removeClass('nav-active');
}
})
Updated CodePen
Here it is as a snippet:
$(document).ready(function() {
var scrollLink = $('.scroll');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
var sectionBottom = sectionOffset + $(this.hash).height();
if ( sectionOffset <= scrollbarLocation && sectionBottom >= scrollbarLocation) {
$(this).addClass('nav-active');
} else {
$(this).removeClass('nav-active');
}
})
})
});
/*
Fonts used in this site
font-family: 'Indie Flower', cursive;
font-family: 'Petit Formal Script', cursive;
font-family: 'Raleway', sans-serif;
font-family: 'Farsan', cursive;
font-family: 'Oleo Script', cursive;
font-family: 'Yeseva One', cursive;
*/
/* CSS custom properties (variables) */
:root {
--orange: #F9A828;
--lightGrey: #ECECEB;
--teal: #07617D;
--darkGreyBlue: #2E383F;
--darkGreyBlueTint: #718A9B;
}
* {
margin: 0px;
padding: 0;
border: none;
font-size: 1em;
/*border: 1px red solid;*/
}
.hidden {
display: none;
}
/*--------- Navigation Area ---------*/
body nav {
height: 5vh;
width: 100%;
font-family: 'Raleway', sans-serif;
position: fixed;
background-color: var(--darkGreyBlue);
color: var(--lightGrey);
z-index: 10;
}
.nav-active {
color: var(--orange) !important;
height: 5vh;
/*border-width: 0;
padding: 0 10px;
float: right;*/
}
/*--------- Navigation Branding Area ---------*/
.branding {
line-height: 5vh;
float: left;
height: 5vh;
padding-left: 5%;
}
.branding i {
float: left;
padding-top: 1.6vh;
color: var(--orange);
}
.branding div {
display: inline;
padding-left: 5px;
}
/*--------- Navigation Links Area ---------*/
.navLinks {
padding-right: 5%;
float: right;
}
.navLinks a {
line-height: 5vh;
float: none;
color: var(--lightGrey);
padding: 0px 10px;
text-decoration: none;
display: inline-block;
text-align: left;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
border: none;
outline: none;
color: var(--lightGrey);
line-height: 5vh;
text-align: left;
background-color: inherit;
min-width: 75px;
padding: 0 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: var(--orange);
padding: 0px 10px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: var(--darkGreyBlue);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown a {
float: none;
height: 5vh;
line-height: 5vh;
text-decoration: none;
background-color: var(--darkGreyBlue);
border-width: 0;
color: var(--lightGrey);
padding: 0 10px;
}
.navLinks a:hover, .dropdown:hover .dropbtn {
color: var(--orange);
/*color: var(--darkGreyBlue);*/
}
/*--------- Splashscreen Area ---------*/
body div.splashScreen {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Raleway', sans-serif;
color: var(--lightGrey);
text-align: center;
}
body div.splashScreen div.splashText {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body div.splashScreen div.splashText h1 {
font-family: 'Oleo Script', cursive;
font-size: 7em;
padding-bottom: 10px;
}
body div.splashScreen div.splashText a button {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
border: 1px solid var(--lightGrey);
color: var(--lightGrey);
transition: all 0.5s ease-in;
}
body div.splashScreen div.splashText a button:hover {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--lightGrey);
border-radius: 20px;
border: 1px solid var(--darkGreyBlueTint);
color: var(--darkGreyBlueTint);
}
body div.splashScreen div.splashText a button:active {
font-size: 2em;
font-family: 'Raleway', sans-serif;
padding: 5px 10px;
background-color: var(--darkGreyBlueTint);
border-radius: 20px;
color: var(--lightGrey);
}
/*--------- About Area ---------*/
body div.aboutPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.aboutPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Experience Area ---------*/
body div.experiencePage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.experiencePage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Skills Area ---------*/
body div.skillsPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.skillsPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Portfolio Area ---------*/
body div.portfolioPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.portfolioPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Photography Area ---------*/
body div.photographyPage {
height: 100vh;
background-color: var(--lightGrey);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--darkGreyBlue);
}
body div.photographyPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
/*--------- Favourites Area ---------*/
body div.favouritesPage {
height: 100vh;
background-color: var(--darkGreyBlueTint);
font-family: 'Indie Flower', cursive;
font-size: 300;
color: var(--lightGrey);
}
body div.favouritesPage header {
padding-top: 7vh;
width: 90%;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Personal Website of Pete</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Farsan|Indie+Flower|Oleo+Script:700|Petit+Formal+Script|Raleway|Yeseva+One" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<script src="https://use.fontawesome.com/71da83f6b4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>
</head>
<body>
<!-- Start Navigation Section -->
<nav>
<span class="branding">
<i class="fa fa-hand-peace-o" aria-hidden="true"></i>
<div>Pete Smyth</div>
</span>
<div class="navLinks">
<div class="dropdown">
<button class="dropbtn">Interests <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-photography">Photography</a>
<a class="scroll" href="#bk-favourites">Favourites</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Resume <i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
<div class="dropdown-content">
<a class="scroll" href="#bk-resume-experience">Experience</a>
<a class="scroll" href="#bk-resume-skills">Skills</a>
<a class="scroll" href="#bk-resume-portfolio">Portfolio</a>
</div>
</div>
<a class="scroll nav-active" href="#bk-splash">Home</a>
<a class="scroll" href="#bk-about">About</a>
</div>
</nav>
<!-- End Navigation Section -->
<!-- Start Splashscreen Section -->
<div id="bk-splash" class="splashScreen">
<div class="splashText">
<h1>
Pete Smyth
</h1>
<button>Learn More</button>
</div>
<!-- end of splashText class -->
</div>
<!-- End Splashscreen Section -->
<!-- Start About Section -->
<div id="bk-about" class="aboutPage">
<header>
<h1>Here's the Goss</h1>
</header>
</div>
<!-- End About Section -->
<!-- Start Resume Experience Section -->
<div id="bk-resume-experience" class="experiencePage">
<header>
<h1>Pete's Experiences</h1>
</header>
</div>
<!-- End Resume Experience Section -->
<!-- Start Resume Skills Section -->
<div id="bk-resume-skills" class="skillsPage">
<header>
<h1>Pete's Skills</h1>
</header>
</div>
<!-- End Resume Skills Section -->
<!-- Start Portfolio Section -->
<div id="bk-resume-portfolio" class="portfolioPage">
<header>
<h1>Pete's Portfolio</h1>
</header>
</div>
<!-- End Portfolio Section -->
<!-- Start Photography Section -->
<div id="bk-photography" class="photographyPage">
<header>
<h1>Pete's Photography</h1>
</header>
</div>
<!-- End Photography Section -->
<!-- Start Favourites Section -->
<div id="bk-favourites" class="favouritesPage">
<header>
<h1>Pete's Favourites</h1>
</header>
</div>
<!-- End Favourites Section -->
</body>