As you can see I have positioned my divs properly position: relative; for slideshow and position: absolute; for containers
I have looked at similar questions that others posted and tried to fix the issue. It is still not working. Everything else works except slideshows. Slideshow shows only the last image. Does not change. My side panels work perfectly.
previously I had not added $(document).ready(function ()... In hopes of fixing issue I tried it but something else seems to be the problem. Any help would be appreciated, Thank you!
here are my files
//jshint esversion:6
$(document).ready(function (){
$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="/images/IMG_E2670.JPG">
</div>
<div class ="container">
<img src="/images/IMG_E2668.JPG">
</div>
<div class="container">
<img src="/images/IMG_E2665.JPG">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
I made some modifications in $(document).ready() and replaced the images with inline data to visualize the fade in / fade out and the images get replaced now.
Looks like the fadeOut function returns immediately and not after the fading is finished. I created a callback function which gets called once fadeOut, see https://api.jquery.com/fadeOut/ which seems to do the trick.
//jshint esversion:6
$(document).ready(function (){
//$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000, "linear", function() { $('#slideshow > div:first').appendTo('#slideshow'); });
$('#slideshow > div:first').next().fadeIn(1000);
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="data:image/png;base64,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">
</div>
<div class ="container">
<img src="data:image/png;base64,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">
</div>
<div class="container">
<img src="data:image/png;base64,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">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
I have a pretty standard navigation bar, with a list containing the links to my sub-sites. I have added a hamburger-menu icon to the website, which should appear on small and mobile screens. Also, I hide the links, by setting their font-size to zero via the css media query. If the menu icon is clicked I fire a javascript function, that will increase/decrease the fontsize of the links accordingly.
All of this works pretty nicely, there is only one issue. As soon as I resize my browser after the font-size of the links has been changed by the script, those values are kept and not updated by the media query for some reason. So, depending on whether the mobile menu was open or closed, the fontsize is either extremely big, or zero. Why aren't these values updated when resizing the browser back to full-screen?
code-snippet containing the necessary code to reproduce:
var open = false;
function openmobilemenu() {
var nav = document.getElementsByTagName("nav");
var links = nav[0].getElementsByTagName("li");
if (!open) {
for (var i = 0; i < links.length; i++) {
links[i].style.transition = "0.5s";
links[i].style.fontSize = "10vw";
}
open = true;
}
else {
for (var i = 0; i < links.length; i++) {
links[i].style.fontSize = "0";
}
open = false;
}
}
header {
position: relative;
width: 100%;
height: 200px;
background-image: url("../img/header.png");
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%;
background-color: #CDCCCA;
}
header img {
position: absolute;
width: 500px;
padding: 0 15%;
bottom: 10px;
}
.mobilemenu {
display: none;
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
height: 100px;
}
nav ul {
position: absolute;
bottom: 0;
width: 70%;
list-style: none;
padding: 0 15%;
display: flex;
margin: 0;
}
nav li {
width: 125px;
text-align: center;
transition: none;
}
.navunderline {
width: 125px;
height: 0;
margin: 5px 0 0 0;
background-color: #DAD9D7;
transition: 500ms;
}
nav a {
color: #DAD9D7;
}
nav a:hover {
text-decoration: none;
}
nav li:hover .navunderline {
height: 5px;
margin: 0;
}
#media screen and (max-width: 800px), (hover:none) {
.mobilemenu {
display: flex;
color: #61625B;
font-size: 100px;
margin: auto 5%;
}
.mobilemenu a, a:hover, a:active {
text-decoration: none;
}
nav {
position: relative;
background-color: #61625B;
width: 100%;
min-height: 10px;
height: auto;
overflow: visible;
padding: 0;
margin: 0;
}
nav ul {
position: relative;
height: auto;
bottom: 0;
width: 100%;
list-style: none;
flex-direction: column;
padding: 0;
}
nav li {
width: 100%;
text-align: center;
margin: 0;
padding: 0;
font-size: 0;
height: auto;
}
nav li:hover {
background-color: #8b131f;
}
.navunderline {
display: none;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<header>
<img src="img/logo.png" alt="some alt" />
<a href="javascript:void(0);" class="mobilemenu" onclick="openmobilemenu()">
<i class="fa fa-bars"></i>
</a>
</header>
<nav>
<ul>
<li>Unternehmen<div class="navunderline"></div></li>
<li>Leistungen<div class="navunderline"></div></li>
<li>Referenzen<div class="navunderline"></div></li>
<li>News<div class="navunderline"></div></li>
<li>Kontakt<div class="navunderline"></div></li>
</ul>
</nav>
This is because your JS is setting inline styles on your elements and inline styles are always more specific than anything in your stylesheet.
There are three ways around this:
Use JS on window resize to remove those styles.
Don't inline styles, but add/remove classes on those elements on resize. Use your stylesheet to control the styles for those elements.
Set the font styles to !important in your stylesheet (the only way around specificity - not recommended)
I am brand new to javascript, but I have a little bit of knowledge in using HTML. The problem I am facing with my website is I created an image gallery, everything works as expected, but I cannot seem to get the content to stay inside the webpage. Here is an image of what my problem looks like: https://imgur.com/RkhF0Ka
I have already tried setting the wrapper and body height to 100%, I have tried editing the CSS file with different display settings (e.x. absolute, relative, etc), I have tried creating a wrapper inside the article itself. None of these worked. I just want to get rid of the blocks in the webpage background and have all my content on the same page. Any help would be greatly appreciated.
My HTML Code:
<!-- Title of website and page -->
<title>....:: Gallery</title>
<!-- Added variable width character encoding -->
<meta charset="utf-8">
<!-- Compatiblility for IE and Chrome -->
<!--[if IE]><meta http-equiv='X-UA-Compatible'
content='IE=edge,chrome=1'><![endif]-->
<!-- Link to external CSS style sheet -->
<link href="pps.css" rel="stylesheet">
<!--Added tablet and mobile scaling-->
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<!-- Added older browser compatibility-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<!-- Script element to link to modernizer -->
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<!-- Added a wrapper to ensure the whole page shares the same CSS style-- >
<div id="wrapper">
<!-- Document header -->
<header>
<h1>....</h1>
<!-- Added a div class to header for image map -->
<div id="header">
<!--Added image map to HTML document-->
<map name="imgmap" id="imgmap">
<area href="https://..../" shape="rect"
coords="30,25,345,174" alt=".... Logo">
<area href="https://...../" shape="rect"
coords="500,25,845,174" alt="....">
</map>
<img src="...." usemap="#imgmap" alt="...." width="1020" height="200">
</div>
</header>
<nav> <!-- Created navigation bar and an unordered list for website
pages -->
<ul> <!-- Created button class for navigation menu-->
<li><a class="button" href="index.html">Home</a></li>
<li><a class="button" href="...s.html">...s</a></li>
<li><a class="button" href=".....html">...</a></li>
<li><a class="button" href="....html">...</a></li>
<li><a class="button" href="....html">....</a></li>
<li><a class="button" href="....html">....</a></li>
<li><a class="button" href="....html">....</a></li>
</ul>
</nav>
<!-- Added a div class for the hero image of Gallery -->
<div id="galleryhero"></div>
<!-- main body of document -->
<main>
<!-- h2 element for webpage -->
<h2>Gallery</h2>
<!-- Added paragraph to document -->
<p><span class=".....">...</span> ....</p> <br>
<h2>Images</h2>
<!-- Create image gallery layout -->
<article>
<div id="leftarrow"> <!-- create id for left arrow -->
<p><</p>
<figure id="fig2"> <!-- create id for figure 2 -->
<img src="images" alt="fig2" width="360" height="202" />
</figure>
<figure id="fig3">
<img src="images" alt="fig3" width="480" height="270" />
</figure>
<figure id="fig4">
<img src="images" alt="fig4" width="360" height="202" />
</figure>
<div id="rightarrow"> <!-- create id for right arrow -->
<p>></p>
<div id="fiveButton"> <!-- create id for fiveButton -->
<p>Show more images</p>
</div>
</article>
<script src="photos.js"></script> <!-- create script src to load the
file photos.js -->
<br> <!-- Break element -->
<!-- Added a footer to document -->
<footer>
<div id="footer">
<!-- Added an unorderedlist for footer element -->
<ul>
<li>.....</li>
<li>.....</li>
<li>.....<li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
<li>.....</li>
</ul>
</div>
<!-- Added a copyright mark and fake e-mail address -->
Copyright © 2019 ..... <br>
....com
</footer>
</main>
</div>
</body>
</html>
My CSS Code:
/* Document body configurations */
body { background-color: #fffff0;
background: url("bg.jpg"); /* Configured background url to a root-
absolute url */
height: 100%;
color: #000000;
font-family: Verdana, Ariel, Helvetica; }
/* Document h1 configurations */
h1 { background-color: #FFFFFF;
color: #000000;
font-size: 0.1px;
font-family: Georgia, "Times New Roman", Palatino;
text-indent: 100%;
white-space: nowrap;
overflow: hidden; }
/* Document header configurations */
header {height: 205px;
background-color: #FFFFFF;
background: url("ppheader.gif");
margin-bottom: 0;
padding-bottom: 50px;
border-style: solid;
border-color: #000000;
color: #000000;
font-family: Georgia, "Times New Roman", Palatino; }
/* Document h2 configurations */
h2 { background-color: #fffff0;
color: #e65c00;
text-align: center;
font-family: Georgia, "Times New Roman", Palatino; }
/* Document h3 configurations */
h3 { color: #000033;
float:left; }
/* Document main body configurations */
main { padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #fffff0;
margin-left: 1px;
padding-bottom: 300px;
padding-top: 1px; }
/* Document configurations for buttons */
.button { display: block;
width: 10em;
padding: 1em;
color: #FFFFFF;
background-color: #000000;
font-family: Verdana, Helvetica, Arial;
font-size: 1em;
font-weight: bold;
border: 1px solid white;
margin: 0;
text-decoration: none; }
/* Document image gallery configurations */
figure { display: inline-block;
list-style-type: none;
width: 269px;
height: 448px; }
/* Added a caption for videos */
figure figcaption {width: 269px;
padding-bottom: 10px;
margin: 0;
background-color: #f4f4f0;
text-align: center;
font-weight: bold;
font-style: italic;
font-family: Helvetica, serif; }
/* Document button configurations */
.button:link { color: #FFFFFF; }
.button:visited { color: #ffe066; }
.button:hover { color: #990000; }
/* Document navigation bar configurations */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
border-right: 1px solid black;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Document header, navigation, main body, and footer display
configurations */
header, nav, main, footer { display: block; }
/* Document table configurations */
table { margin: auto;
border: 1px solid #982e01;
width: 90%;
border-collapse: collapse; }
td { text-align: center; }
th, td { padding: 5px;
border: 1px solid #982e01; }
/* Document paragraph configurations */
#text { text-align: left; }
tr:first-of-type { background-color: #000000;
color: #FFFFFF; }
tr:nth-of-type(even) { background-color: #fffecc; }
dt { color: #000033;
font-weight: bold; }
.paulpaintservice { color: #982e01;
font-size: 1.2em; }
/* Document logo configurations */
.logo { color: #FFFFFF;
font-size: 3em; }
/* Document footer configurations */
footer { font-size: .70em;
font-style: italic;
text-align: center;
padding: 10px;
margin-top: 100px;
background-color: #fffff0;
margin-left: 5px; }
#footer ul { text-align: center; list-style-type: none; }
#footer li { display: inline;
background-color: #fffff0; }
#footer a { padding: 2px 10px; }
/* Document box style configurations */
* { box-sizing: border-box;}
/* Document wrapper configurations that create a box model for the
website */
#wrapper { background-color: #000000;
margin-left: auto;
margin-right: auto;
height: 100%;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px #1e1e1e; }
/* Document hero image configurations for the home, services, gallery,
about, and appointment pages */
#homehero { height: 300px;
background-image: url("hsunset3.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#servicehero { height: 300px;
background-image: url("hsunset2.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#galleryhero { height: 300px;
background-image: url("hsunset.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#abouthero { height: 300px;
background-image: url("hevening.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#projecthero { height: 300px;
background-image: url("hocean.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#securityhero { height: 300px;
background-image: url("hfield.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
#appointmenthero { height: 300px;
background-image: url("hvalley.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 1px; }
/* Configure pc.gif to float to the left on "About" page */
#pc { float: left;
margin: 0 16px 16px 0;
border: 2px ridge black;
border-radius: 5px;
background: #FFFFFF;}
/* Document "About" page paragraph configurations */
p { text-align: left;
font-size: 1.2em; }
/* Document "Gallery" configurations */
#gallery { position: relative; }
#gallery ul { width: fill; list-style-type: none; }
#gallery img { border: 1px solid black;
margin: 10px; }
#gallery a { text-decoration: none; color: #e65c00; font-style: italic;
font-family: Helvetica;
font-weight: bold; }
#gallery span { display: none; }
#gallery li { display: inline-block; }
#gallery a:hover span {display: block;
position: absolute;
left: 300px;
top: 0;
text-align: center;
text-shadow: 2px 2px 3px #000000; }
/* Document navigation configurations */
nav a { text-decoration: none; }
nav a:link { color: #FFFFFF; }
nav a:visited { color: #ffe066; }
nav a:hover { color: #FFFFFF; }
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
nav li {
float: left;
border-right: 1px solid black;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Document header, navigation, main body, and footer display
configurations */
header, nav, main, footer { display: block; }
label { float: left;
width: 8em;
display: block;
padding-right: 1em; }
/* Document contact form configurations */
input, textarea { margin-bottom: 1em;
margin-top: 1.2em;
display: block; }
/* Configure <form> */
#mySubmit { margin-left: 10em; }
#mobile { display: none; }
#desktop { display: inline; }
/* apply a natural box layout model to all elements */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* reset rules */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a:link, a:visited {
text-decoration: none;
color: inherit;
}
a:hover {
text-decoration: none;
color: inherit;
}
a:active {
text-decoration: none;
color: inherit;
}
/* main content */
article {
background: white;
position: relative;
}
article h2 {
font-size: 1.2em;
font-weight: bold;
text-align: left;
margin: 0 0 10px 51px;
}
#leftarrow, #rightarrow {
background: #696565;
color: white;
position: absolute;
z-index: 30;
text-align: center;
height: 135px;
width: 40px;
top: 67px;
}
article div:hover {
cursor: default;
}
#leftarrow {
left: 0;
}
#rightarrow {
right: 0;
}
#fiveButton {
display: block;
width: 100%;
position: absolute;
top: 290px;
color: white;
text-align: center;
}
#fiveButton p {
width: 20%;
margin: 0 auto;
line-height: 2em;
background: #696565;
}
#leftarrow p, #rightarrow p {
position: relative;
top: 50%;
margin-top: -0.5em;
}
figure {
position: absolute;
-webkit-box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
-moz-box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
box-shadow: 10px 0px 5px rgb(50, 50, 50),
-10px 0px 5px rgb(50, 50, 50);
}
#fig2 {
z-index: 10;
left: 13%;
top: 34px;
}
#fig3 {
z-index: 20;
left: 50%;
margin-left: -240px;
top: 0;
}
#fig4 {
z-index: 10;
right: 13%;
top: 34px;
}
/* Document configurations for mobile devices */
#media only screen and (max-width: 1024px)
/* Document body configurations */
{
body { margin: 0;
padding: 0;
background-image: none; }
/* Document wrapper configurations */
#wrapper { min-width: 0;
margin: 0;
box-shadow: none; }
/* Document h1 configurations */
h1 { margin: 0; }
/* Document navigation configurations */
nav { float: none;
width: auto;
padding: 0.5em; }
nav li { display: inline-block; }
nav a { padding: 1em; }
/* Document main body configurations */
main { padding: 1em;
margin-left: 0;
font-size: 90%; }
/* Document footer configurations */
footer { margin: 0; }
/* Document hero image configurations */
#homehero { margin-left: 0; }
#servicehero { margin-left: 0; }
#galleryhero { margin-left: 0; }
#abouthero { margin-left: 0; }
#appointmenthero { margin-left: 0; }
#projecthero { margin-left: 0; }
#securityhero { margin-left: 0; }
/* Document logo configurations */
.logo { margin-left: 0; }
}
/* Document configurations for mobile devices */
#media only screen and (max-width: 768px) {
/* Document h1 configurations */
h1 { height: 100%;
font-size: 1.5em;
padding-left: 0.3em;
background: none; }
/* Document navigation configurations */
nav { padding: 0; }
nav a { display: block;
padding: 0.2em;
font-size: 1.3em;
border-bottom: 1px;
border-color: #330000; }
nav ul { margin : 0;
padding: 0; }
nav li { display: block;
margin: 0;
padding: 0; }
/* Document button configurations */
.button { width: auto; }
/* Document main body configurations */
main { padding-top: 0.1em;
padding-right: 0.6em;
padding-bottom: 0.1em;
padding-left: 0.4em; }
/* Document hero image configurations */
#homehero { display: none; }
#servicehero { display: none; }
#galleryhero { display: none; }
#abouthero { display: none; }
#appointmenthero { display: none; }
#projecthero { display: none; }
#securityhero { display: none; }
/* Document footer configurations */
footer { padding: 0; }
/* Document mobile, desktop, and header display options configurations */
#mobile { display: inline; }
/* Disable desktop mode while on mobile device */
#desktop { display: none; }
/* Disable header image while on mobile device */
#header { display: none; }
}
Here is my image gallery JS code:
"use strict"; // interpret document contents in JavaScript strict mode
/* global variables */
var photoOrder = [1,2,3,4,5];
var figureCount = 3;
/* Add src values to img elements based on order specified in photoOrder
array */
function populateFigures() {
var filename;
var currentFig;
if (figureCount === 3) {
//Add for loop with 3 interations and increments i by 1 after each loop
for (var i = 1; i < 4; i++) {
filename = "images/IMG_0" + photoOrder[i] + "sm.jpg";
currentFig = document.getElementsByTagName("img")[i - 1];
currentFig.src = filename;
}
//Else statement and for loop with 6 iterations
} else {
for (var i = 0; i < 5; i++) {
filename = "images/IMG_0" + photoOrder[i] + "sm.jpg";
currentFig = document.getElementsByTagName("img")[i];
currentFig.src = filename;
}
}
}
/* shift all images one figure to the left, and change values in photoOrder
array to match */
rightArrow() {
for (var i = 0; i < 5; i++) {
after each cycle
if ((photoOrder[i] + 1) === 6) {
photoOrder[i] = 1;
} else {
photoOrder[i] += 1;
}
populateFigures(); //Call populateFigures()
}
}
/* shift all images one figure to the right, and change values in photoOrder
array to match */
function leftArrow() {
for (var i = 0; i < 5; i++) {
if ((photoOrder[i] - 1) === 0) {
with index i minus 1 is equal to the value of 0
photoOrder[i] = 5;
} else {
photoOrder[i] -= 1;
}
populateFigures(); //Call populateFigures()
}
}
/* switch to 3-image layout */
function previewThree() {
var articleEl = document.getElementsByTagName("article")[0];
var numberButton = document.querySelector("#fiveButton p");
/* Remove the 1st and 5th figure elements */
articleEl.removeChild(document.getElementById("fig1"));
articleEl.removeChild(document.getElementById("fig5"));
figureCount = 3;
numberButton.innerHTML = "Show more images";
if (numberButton.addEventListener) {
numberButton.removeEventListener("click", previewThree,
false);
numberButton.addEventListener("click", previewFive, false);
} else if (numberButton.attachEvent) {
numberButton.detachEvent("onclick", previewThree);
numberButton.attachEvent("onclick", previewFive);
}
}
/* switch to 5-image layout */
function previewFive() {
var articleEl = document.getElementsByTagName("article")[0];
//Create figure and img elements for 5th image
var lastFigure = document.createElement("figure");
//Configure settings for 5th figure
lastFigure.id = "fig5";
lastFigure.style.zIndex = "5";
lastFigure.style.position = "absolute";
lastFigure.style.right = "45px";
lastFigure.style.top = "67px";
var lastImage = document.createElement("img");
lastImage.width = "240";
lastImage.height = "135";
lastFigure.appendChild(lastImage);
articleEl.appendChild(lastFigure);
//clone figure element for fifth image and edit to be first image
var firstFigure = lastFigure.cloneNode(true);
/* Change the id value for the firstFigure node from fig5 and the value
cloned from the lastFigure node to fig1, remove cloned value for the right
CSS style and specify a new value for the left CSS style */
firstFigure.id = "fig1";
firstFigure.style.right = "";
string
firstFigure.style.left = "45px";
//Use the appendChild() method to add the firstFigure node to document tree
//articleEl.appendChild(firstFigure);
articleEl.insertBefore(lastFigure,
document.getElementById("rightarrow"));
/* Insert the firstFigure node before the existing element with the id
value
fig2 */
articleEl.insertBefore(firstFigure,
document.getElementById("fig2"));
//Change from 3 images to 5 when user switches to viewing 5 photos
figureCount = 5; //Assign an image for each img element
//Add appropriate src values to two new img elements
document.getElementsByTagName("img")[0].src = "images/IMG_0" + photoOrder[0]
+ "sm.jpg";
document.getElementsByTagName("img")[4].src = "images/IMG_0" + photoOrder[4]
+ "sm.jpg";
//change button to hide extra images
var numberButton = document.querySelector("#fiveButton p"); //Assign var
numberButton value to the selector element with id #fiveButton p
numberButton.innerHTML = "Show fewer images"; //Assign the innerHTML
numberButton to the attribute show fewer images
if (numberButton.addEventListener) {
numberButton.removeEventListener("click", previewFive,
false); //Remove 5-image view
numberButton.addEventListener("click", previewThree,
false);
} else if (numberButton.attachEvent) { /* Add else-if statement to switch
between a preview of 5 or 3 images */
numberButton.detachEvent("onclick", previewFive);
numberButton.attachEvent("onclick", previewThree);
}
}
/* create event listeners for left arrow, right arrow, and
center figure element
*/
function createEventListeners() {
var leftarrow = document.getElementById("leftarrow"); //create var named
leftarrow and assign value to the element with the id value leftarrow
//if/else statement to create the event listener for the left navigation
arrow
if (leftarrow.addEventListener) {
leftarrow.addEventListener("click", leftArrow, false);
} else if (leftarrow.attachEvent) {
leftarrow.attachEvent("onclick", leftArrow);
}
/* create a variable and assign an event listener for the right navigation
arrow */
var rightarrow = document.getElementById("rightarrow"); //create var named
rightarrow and assign value to the element with the id value rightarrow
if (rightarrow.addEventListener) {
rightarrow.addEventListener("click", rightArrow, false);
} else if (rightarrow.attachEvent) {
rightarrow.attachEvent("onclick", rightArrow);
}
//Add event listener for the third img element in the document that has index
value 2
var mainFig = document.getElementsByTagName("img")[1]; //Create var variable
mainFig and assign value to the second image element with the index value of
1
//Add if-else statement to create the event listener to call zoomFig() when
user clicks the center image
if (mainFig.addEventListener) { //Add if statement to not zoom into image
if it is not clicked
mainFig.addEventListener("click", zoomFig, false);
} else if (mainFig.attachEvent) { //Add else-if statement to zoom into image
when clicked
mainFig.attachEvent("onclick", zoomFig);
}
var showAllButton = document.querySelector("#fiveButton p"); //Assign var
showAllButton value to the selector element with id #fiveButton p
if (showAllButton.addEventListener) {
showAllButton.addEventListener("click", previewFive, false);
} else if (showAllButton.attachEvent) {
showAllButton.attachEvent("onclick", previewFive);
}
}
/* open center figure in separate window */
function zoomFig() {
var propertyWidth = 960; //Assign var propertyWidth value to 960px
var propertyHeight = 600; //Assign var propertyHeight value to 600px
var winLeft = ((screen.width - propertyWidth) / 2); // Create var named
winLeft and start with the width of the existing browser window minus the
width of the new browser window, divided by two
var winTop = ((screen.height - propertyHeight) / 2); // Create var named
winTop and start with the height of the existing browser window minus the
width of the new browser window, divided by two
var winOptions = "width=960,height=600"; //Create var named winOptions and
assign to the width of 960px and height of 600px
winOptions += ",left=" + winLeft; //Create an option string for the
window.open() method that incorporates the calculated values for the left of
window
winOptions += ",top=" + winTop; //Create an option string for the
window.open() method that incorporates the calculated values for the top of
window
var zoomWindow = window.open("zoom.htm", "zoomwin", "width=960,height=600");
//Create variable named zoomWindow and assign to the window created by
window.open to display contents of zoom html file
zoomWindow.focus(); //Make the external photo gallery window the active
window
}
/* create event listeners and populate image elements */
function setUpPage() { //Call function
createEventListeners(); //Call function
populateFigures(); //Call function
}
/* run setUpPage() function when page finishes loading */
if (window.addEventListener) {
window.addEventListener("load", setUpPage, false);
} else if (window.attachEvent) {
window.attachEvent("onload", setUpPage);
}
Another bizarre thing that happened was that the logo/header image loads at first, then it immediately switches to one of the image gallery photos. I could not figure out how to fix that...
I got have confusing problem with jquery / css. I'm trying to get my navbar link color to change from white to black, and back again when 'entering' into a new nth-child.
So when going over nth-child(3n+1) and (3n+2), the links need to be white, but (3n+3), the links need to go black, and change back at the next cycle.
I've tried to reuse a script for adding classes, but it just keeps adding .white and .black until I go back to the top.
How would I solve this?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+1)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("white");
} else {
$(".navbar a").removeClass("white");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+2)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("white");
} else {
$(".navbar a").removeClass("white");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+3)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("black");
} else {
$(".navbar a").removeClass("black");
}
});
html {
height: 100%;
font-size: 21px;
}
body {
margin: 0px;
font-family: 'Karla', sans-serif;
width: 100%;
height: 100%;
color: white;
}
* {
box-sizing: border-box;
}
/* DESIGN */
.row::after {
content: "";
clear: both;
display: table;
}
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
padding-right: 20vw;
padding-left: 20vw;
}
[class*="col-"] {
float: left;
height: 90vh;
padding-right: 20vw;
padding-left: 20vw;
padding-top: 25vh;
padding-bottom: 15vh;
background-attachment: scroll;
}
[class*="col-"]:nth-child(3n+1) {
/* The image used */
background-image: url("img/bg2.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
[class*="col-"]:nth-child(3n+2) {
background-color: rgb(238, 114, 3);
}
[class*="col-"]:nth-child(3n+3) {
background-color: white;
color: black;
}
.black {
color: black !important;
}
.white {
color: white !important;
}
/* NAVIGATION */
.navbar {
overflow: hidden;
background-color: transparent;
position: fixed;
/* Set the navbar to fixed position */
top: 5;
/* Position the navbar at the top of the page */
width: 100%;
/* Full width */
font-size: 25px;
font-weight: bold;
line-height: 1.5em;
}
.navbar a {
float: right;
display: block;
color: #f2f2f2;
background-color: transparent;
text-align: center;
margin: 20px;
padding-left: 25px;
padding-right: 25px;
text-decoration: none;
}
.navbar a:hover {
border-bottom: 1px solid;
}
#media screen and (max-width: 1180px) {
.navbar a {
font-size: 16px;
padding-left: 0px;
padding-right: 0px;
}
}
#media screen and (max-width: 700px) {
.navbar a {
display: none !important;
}
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="thumbnail">
<img class="thumbnail" src="img/RF thumbnail.png">
</div>
<div class="navbar" id="myTopnav">
Contact
Adverts
About us
What is this
<a class="signup" href="#welcome">Sign up</a>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fas fa-chevron-up"></i></button>
<!-- CONTENT -->
<div class="row">
<div class="col-4" id="welcome">
</div>
<div class="col-4" id="whatisthis">
<h1>What is this?</h1>
</div>
<div class="col-4" id="adverts">
<h1>Adverts</h1>
</div>
<div class="col-4" id="about">
<h1>About</h1>
</div>
<div class="col-4" id="contact">
<h1>Contact</h1>
</div>
</div>
</body>
</html>
When u scroll down u dont remove a class. You are only adding it.
And the last class is what have the control of the color.
So. You are adding black, then white. After that adding black again will do nothing. There is still
class="black white"
Remove the last class after each section should fix your problem.
And jQuery has also hasClass(className)