Why are my images hiding the footer? - javascript

there.
I'm building a web site, and I added a "cycler" that makes the main image in the body fade into other images in a cycle. But, after adding the "cycler," the images hide the footer at the bottom. I don't know how to fix it. (I do use jQuery in this site.) How can I make the images fade into one another without causing the "cycler" to hide the footer at the bottom?
I've attached an image here:
And here's my code:
function cycleImages(){
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index',2);//move the next image up the pile
$active.fadeOut(1500,function(){//fade out the top image
$active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index',3).addClass('active');//make the next image the top one
});
}
$(document).ready(function(){
// run every 7s
setInterval('cycleImages()', 5000);
})
/*Resize the main image.*/
.content img {
width: 100%;
height: 600px;
}
#cycler {
position: relative;
}
#cycler img {
position: absolute;
z-index: 1;
}
#cycler img.active {
z-index: 3;
}
/*Establish the padding for the introduction.*/
#introduction {
padding: 30px 150px 30px 150px;
}
/*Embolden and italicize the h3 in the intro.*/
#introduction h3 {
font-weight: bold;
font-style: italic;
}
/*Increase the font size for p in the intro.*/
#introduction p {
font-size: 20px;
}
/*Style the links in the intro.*/
#introduction a {
color: #F70736;
font-weight: bold;
}
/*Customize the hover action of links in the intro.*/
#introduction a:hover {
color: mediumpurple;
text-decoration: none;
}
/*Style the copyright in the footer.*/
.copyright {
width: 100%;
margin-top: 20px;
margin-bottom: 0;
text-align: center;
color: #F70736;
background-color: #F5F4EF;
}
/*Style the copyright.*/
.copyright p {
margin-top: 30px;
margin-bottom: 0;
padding-top: 30px;
padding-bottom: 30px;
font-size: 16px;
}
/*Embolden the name in copyright.*/
#myName {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="content">
<div id="cycler">
<img class="active" src="Images/1stPic.jpg" alt="Venus Fly Trap" />
<img src="Images/2ndPic.jpg" alt="Croatia" />
<img src="Images/3rdPic.jpg" alt="Ras" />
<img src="Images/4thPic.jpg" alt="Portugal" />
</div>
<div id="introduction">
<h3>Headline.</h3>
<p>Lorem Ipsum bla bla bla
</p>
<p>Learn more about my work and write to me at #gmail.com.</p>
</div>
</div>
<!--BEGIN FOOTER-->
<footer>
<div class="copyright">
<p>© <span id="myName"> Name Here</span> 2017</p>
</div>
</footer>
<!--END FOOTER-->

footer{
display:flex;
position:relative;
z-index:999;
height:20vh;
}

Related

How to make my div(a relative one) in center of a page and another div go below it, not under it(without make it fixed)

Here I have a Div(div1 in figure) that I want it to center in the page(now I used margin-left to forced it at a center place of my own pc, but when other person with different resolution screen open it, it is not at the center.) I have tried make each relative/fixed/absolute/padding/margin, and search online for two days, but either each part in div1 falls apart or it doesn't work.
And At the same time, I added a text div(div2) and want it to below this current div(div1), and it doesn't goes below it, it goes hide under div 1. I searched online and know that it will do this if there is a relative/fixed position div before it, it will be ignored. So i can only use fixed position for div 2 as well. which I don't want it to.And I also want it go to the center of the page.
The main problem here is my page is not fix every screen and at the center.
view example page at http://circleofallnations.ca/
the big circle is the div1, 5 parts in it and form that circle, thats why div1 has to be a relative div
the text under the big circle is div 2.(you can see it is a picture on texting page, and I changed it to a text div in below code.)
Here is the example figure
html code:
<!DOCTYPE html>
<html>
<title>circle of all nations home page</title>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<a href ="http://www.circleofallnations.ca/canhome">
<img onmouseover="circle2()" onmouseout="circle1()" src="pictures/circle.png" alt="centre circle" class="circle" id="circle"></a>
<a href ="http://develop.gcrc.carleton.ca:8053/index.html">
<img onmouseover="above2()" onmouseout="above1()" src="pictures/above.png" alt="above" class="above" id="above"></a>
<a href ="https://www.asinabka.com/">
<img onmouseover="left2()" onmouseout="left1()" src="pictures/left.png" alt="left" class="left" id="left"></a>
<div class="rightCon" onmouseenter="right2()" onmouseleave="right1()">
<img src="pictures/right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text1"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></div>
<div id= "right2" class = "text1"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></div>
</div>
<div class="bottomCon" onmouseenter="bottom2()" onmouseleave="bottom1()">
<img src="pictures/bottom.png" alt="bottom" class="bottom" id = "bottom">
<div id="bottomtext"><center>
<div id= "bottom1" class = "text2">Circle of All Nations</div>
<div id= "bottom2" class = "text2">William Commanda</div>
<div id= "bottom3" class = "text2">William Commanda Legacy - Asinabka</div>
<div id= "bottom4" class = "text2">Romola Vasantha Thumbadoo</div>
<div id= "bottom5" class = "text2">Romola's Nature CAN Photo-Art</div></center>
</div>
</div>
<div class="footer" style="color:#FFFFFF; font-family:Arial black;font-size:13pt; "><center>
<div><center>WILLIAM COMMANDA LEGACY</div>
<div><center>A CIRCLE OF ALL Nations</div>
<div><center>GLOBAL ECO PEACE COMMUNITY</div>
<div><center>All the original material on this website is © 2020</div>
<div><center>Asinabka and Circle of All nations</div>
<div><center>Romola#circleofallnations.ca</div>
<div><center>All rights reserved</div>
</div>
<div class="lastLine">
CIRCLE OF ALL NATIONS (CAN) 2020 HOME PAGE |>
<a id="sites">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>CAN ARCHIVAL SITES |</option>
<option value="http://www.angelfire.com/ns/circleofallnations/page3.html">2000 Archival Site | </option>
<option value="http://www.circleofallnations.ca/http___circleofallnations_2014NEW_Welcome.html/Welcome.html">2012 Archival Site |</option>
</select></a>>
ASINABKA |>
DIGITAL ATLAS |
<a id="facebooks">
<select onChange="window.location.href=this.value">
<option selected disabled hidden>FACEBOOK PAGES</option>
<option value="https://www.facebook.com/circleofallnations/">Circle of All Nations |</option>
<option value="https://www.facebook.com/William-Commanda-124359520927182/">William Commanda |</option>
<option value="https://www.facebook.com/William-Commanda-Legacy-Asinabka-701369829887220/">William Commanda Legacy-Asinabka |</option>
<option value="https://www.facebook.com/romola.thumbadoo">Romola Vasantha Thumbadoo |</option>
<option value="https://www.facebook.com/Romolas-Nature-CAN-TEACH-PhotoArt-Page-937319673008841/">Romola's Nature CAN Photo-Art |</option>
</select></a>
</div>
<div class="under" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<div class="under2" style="color:#FFFF00; font-family:Arial;font-size:13pt; ">(under development)</div>
<script src="landingpage.js"></script>
</body>
</html>
and here is css sheet
body{
background-color: black;
}
img{
padding: 0px;
transition: transform .2s;
}
a{
color:black;
text-decoration: none;
}
pre{
font-family: "Arial black", sans-serif;
font-size: 25px;
}
select {
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
color: #FFFF00;
background-color: transparent;
border-color: transparent;
cursor: pointer;
font-size: 13pt;
}
select option {
margin: 40px;
background: black;
color: #FFFF00;
border-color: black;
font-size: 13pt;
}
/* For IE10 */
select::-ms-expand {
display: none;
}
.text1{
font-family: "Arial black", sans-serif;
}
.text2{
font-family: "Arial black", sans-serif;
font-size: 15px;
}
a:hover {
color: blue;
}
.container{
position:relative;
margin-left:15%;
background-color: black;
}
.circle{
position:absolute;
left:480px;
top: 107px;
}
.above{
position: absolute;
top:10px;
left:437px;
}
.left{
position: absolute;
left:337px;
top:109px;
}
.right{
position: absolute;
left:813px;
top:109px;
}
.bottom{
position: absolute;
top:485px;
left:437px;
}
#first{
font-size: 45px;
}
#second{
font-size: 25px;
}
#last{
font-size: 12px;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:163px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.bottomCon {
position: relative;
}
#bottomtext{
z-index: 10;
position: absolute;
left:520px;
top:545px;
opacity: 0;
}
.lastLine{
position: absolute;
top:930px;
left:450px;
}
.under{
position: absolute;
top:900px;
left:450px;
}
.under2{
position: absolute;
top:900px;
left:1170px;
}
js code(not too important)
if(performance.navigation.type == 2){
location.reload(true);
}
function circle2(){
document.getElementById("circle").src = "pictures/circle1.png";
}
function circle1(){
document.getElementById("circle").src = "pictures/circle.png";
}
function right2(){
document.getElementById("right").src = "pictures/right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "pictures/right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
function bottom2(){
document.getElementById("bottom").src = "pictures/bottom2.png";
document.getElementById("bottomtext").style.opacity=1;
}
function bottom1(){
document.getElementById("bottom").src = "pictures/bottom.png";
document.getElementById("bottomtext").style.opacity=0;
}
function above2(){
document.getElementById("above").src = "pictures/above2.png";
}
function above1(){
document.getElementById("above").src = "pictures/above.png";
}
function left2(){
document.getElementById("left").src = "pictures/left2.png";
}
function left1(){
document.getElementById("left").src = "pictures/left.png";
}
Please help, thank you in advance.
Hello There! I think you should try margin: auto property. First of all, remove the position:relative and margin left properties from your container. And then add a width or height to your container(according to your need), and add margin:auto to it. Here's an example code:
.container {
display: block;
width: 500px;
height: auto;
margin: auto;
background-color: black;
}
This will definitely center align it.
And if you want to make your div go to next line, just add display: block; property to it. And if it gets hide under div1, add z-index: +1 property to it. Try all these edits, and let me know if it fixed your problem.

onClick JS not go to top of the page

I have a page with an initial description, followed by 2 buttons, where the user can choose typeA or typeB. They work by "target": when the user clicks typeA comes the content relative to typeA, bellow the buttons; same to typeB.
typeA is the most common selection, then, when the page loads, a javascript emulates the click to typeA and opens respective content. To avoid hidden the initial description, there is another javascript to put the page at the top. Worked on Chrome and Edge, not on Firefox.
I would like to repeat the same process when the user clicks: opens the respective content, but positioning the page at the top, or, at least, showing the buttons. I thought event onClick calling the same js backToTop would worked - but not.
I put an alert on js and enters there but not execute: always keeps the content of the button selected in its better visibility.
I tried:
window.location.href = '#top';
window.scrollBy(0, -500);
document.html.scrollTop = document.documentElement.scrollTop = 0;
without success.
What am I doing wrong?
<head>
<meta charset="UTF-8">
<title>TOP PAGE TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html {margin-left:auto; margin-right:auto;width:70%; font-family:verdana; font-size:1.2em;}
.menuFAQ {background:#aaa; font-size:2em; width:100%;}
.menuFAQ ul {list-style-type:none; position:relative; margin-left:-40px; /* to avoid user agent chrome */}
.menuFAQ li {display:inline-block; margin-top:10px; margin-bottom:10px; width:49%; background:#fff; text-align:center; box-shadow:2px 3px 4px 0px rgba(170,170,170,1); font-weight:400; line-height:80px;}
.menuFAQ li a {display:block; color:#020062; background:#fff; font-weight:400; text-decoration:none;}
.menuFAQ li .active,.menuFAQ li:hover a {color:#fff; font-weight:400; background-image:linear-gradient(#165686, #0f3a5a); }
:target {color:#fff;font-size:1em;}
div.items>div:not(:target) {display:none}
div.items>div:target {display:block; margin-left:auto; margin-right:auto; color:#000; border:1px solid #aaa;}
</style>
</head>
<body>
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p><p>text2B</p><p>text3B</p>
<br>[...]
</nav>
</div>
</div>
<script>
const allTargetLinks = document.querySelectorAll('.target')
allTargetLinks.forEach(targetLink => {
targetLink.addEventListener('click', () => {
allTargetLinks.forEach(targetLink => {
targetLink.classList.remove('active')
})
targetLink.classList.add('active')
})
})
window.onload = function() {assignPreferedFAQ()};
function assignPreferedFAQ() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
//document.html.scrollTop = document.documentElement.scrollTop = 0;
//document.body.scrollTop = document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
</script>
You had a real mess there regarding how you process click events and href attribute, i.e:
You had onclick attribute on your links, and you were adding yet another listener to them in JS
You didn't event.preventDefault() in your function, and default browser behavior when you click on a link is to get you to its href path
I've cleaned up a bit and changed some things. Since we need to prevent default behavior :target selector will no longer work, so instead I did what you've already been doing with links, and added an active class to your content. clickHandler() will now remove and add class active as necessary. At the end just scroll to the top. Here's the snippet:
document.querySelectorAll('.target').forEach(targetLink => targetLink.addEventListener('click', clickHandler, false));
function clickHandler(ev) {
ev.preventDefault(); // prevent browser from automatically scrolling to href pos
if (!ev.currentTarget.classList.contains('active')) {
// disable active elements
document.querySelector('.target.active').classList.remove('active');
document.querySelector('.items div.active').classList.remove('active');
// add class to the clicked on button and its corresponding content tab
ev.currentTarget.classList.add('active');
// to prevent pointless string slicing below, you'd have to store ids somewhere else i.e in the data-id attribute
const id = ev.currentTarget.href.slice(ev.currentTarget.href.lastIndexOf('#') + 1);
document.getElementById(id).classList.add('active');
}
window.scrollTo(0,0);
}
* {
font-family: verdana;
font-size: 1em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
text-align: center;
padding: 0;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
width: 48%;
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
div.items>div {
display: none;
}
div.items>div.active {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a class="target active" href="#typeA">TypeA</a></li>
<li><a class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div class="active" id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</div>
Note that instead of artificially clicking at the page load, now your content just loads with class active.
Hope this help you.
< script >
window.onload = function() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
//alert("enter backToTop");
var elmnt = document.getElementById("top");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
}; <
/script>
body,
html {
margin-left: auto;
margin-right: auto;
width: 70%;
font-family: verdana;
font-size: 1.2em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
position: relative;
margin-left: -40px;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
width: 49%;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
:target {
color: #fff;
font-size: 1em;
}
div.items>div:not(:target) {
display: none
}
div.items>div:target {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div> <br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5<br>textExp6<br>textExp7<br>textExp8<br>textExp9<br>textExpA<br>textExpB<br>textExpC<br>textExpD
<br>textExpE
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</di

Sticky navbar hides content when scrolling to top

I have a sticky navbar. When the page loads, the first home div displays properly. But, after scrolling down, and then back up, some of the content from the home div is hidden by the sticky nav bar at the top. How can I fix this behavior? Any suggestions are appreciated!
window.onscroll = () => {
myFunction()
};
const navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;
myFunction = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
body {
padding: 0px;
margin: 0px;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.main-section {
height: 45vw;
}
<body>
<header>
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
</header>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>
</body>
The problem is that when you scroll you are adding the position of fixed to the #navbar so you are taking it out of the flow of the page and fixing it to the screen. In doing this you are taking it out of the <nav> and the <header> and these elements are now going to have a height of 0. If you inspect your #navbar with chrome dev tools you can see that it is 31px tall ,in my window at least, it may be different in your window since you coded it to have a padding in vw wich if you ask me is not a very good practice so you may want to rethink that and give it a padding in px, em, or rem so an easy fix would be to just give the parent div, either <header> or <nav> a height of 31px or whatever your navbars height is so when you take the navbar out of the page flow you won't lose the navs height when its gone so something like the following:
header{
height:31px;
}
Here it is in a snippet:
window.onscroll = () => {
myFunction()
};
const navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;
myFunction = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
body {
padding: 0px;
margin: 0px;
}
header{
height:31px;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
section{
height:100vh;
border:5px solid green;
}
<header>
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
</header>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>
But if if you are just going to have your navbar at the top of the page anyway there is no reason to have any of this javascript you can just add padding to the top of the body and give the navbar a position of fixed. There is no reason to have any of these scroll events at all. Adding the javascript scroll events like these are for if you have something above your navbar and you want it to fix after scrolling down the page a ways. Here is a snippet of that:
body {
padding: 0px;
padding-top:31px;
margin: 0px;
}
nav{
position:fixed;
top:0;
width:100%;
}
#navbar {
overflow: hidden;
background-color: #000;
}
#navbar a {
float: right;
display: block;
text-align: center;
padding: 1vw;
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: 2.5vw;
font-weight: 400;
font-style: italic;
}
.color-nav a {
color: white;
}
.active {
background-color: #fff;
color: black !important;
}
section{
height:100vh;
border:5px solid green;
}
<nav>
<div class='color-nav' id="navbar">
<a id='contact-link' href="#contact">Contact</a>
<a id="about-link" href="#about">About</a>
<a id='portfolio-link' href="#portfolio">Portfolio</a>
<a id='home-link' class="active" href="#home">Home</a>
</div>
</nav>
<section>
<div id='home-1' class="home main-section">
</div>
</section>
<section>
<div id="portfolio-1" class="portfolio main-section">
</div>
</section>
<section>
<div id="about-1" class='about main-section'>
</div>
</section>
<section>
<div id='contact-1' class='contact main-section'>
</div>
</section>
position: fixed;
doesn't leaves gap so the space it has cover will be taken by the other elements because of relative behaviour. You need to push the content with margin or padding with same size of the navigation height.
I needed to change window.pageYOffset >= sticky to window.pageYOffset > sticky since the class was not being removed upon scrolling to the top.

Overlay is forcing page to go to start whenever it is closed

i have to used many overlay so
when i close the overlay either right or left my page moves up and comes from start.
it can be easily checked by open the last two overlay.
this is the code.
i dont know where is mistake. or what should i add more in css.
as i selected the position fixed , may be this is the error but if changed it than more errors occur.
$(document).ready(function(){
left side overlay
$("#left-click1").click(function(){
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature1.jpg");
$("#para").text("1111ABCD");
});
$("#left-click2").click(function(){
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature2.jpg");
$("#para").text("2222ABCDEF");
});
right side overlay
$("#right-click1").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature3.jpg");
$("#para1").text("3333ABCDEF");
});
$("#right-click2").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature4.jpg");
$("#para1").text("4444ABCDEF");
});
$("#right-click3").click(function(){
$("#image1").prop("src","C:/Users/Ahsan/Documents/sublime/nature5.jpg");
$("#para1").text("4444ABCDEF");
});
function openAnimeleft(){
document.getElementById("left").style.width = "60%";
}
function closeAnimeleft(){
document.getElementById("left").style.width = "0";
}
right side animation
function openAnimeright(){
document.getElementById("right").style.width = "60%";
}
function closeAnimeright(){
document.getElementById("right").style.width = "0";
}
<div id="left" class="left-styles">
×
<div>
<div>
<img id="image">
</div>
<div>
<p id="para"></p>
</div>
</div>
</div>
left side animation div
<div id="mains"><p>00000001</p>
<span id="left-click1" onclick="openAnimeleft()"> »» left-open1</span>
</div>
<div id="mains"><p>00000002</p>
<span id="left-click2" onclick="openAnimeleft()"> »» left-open2</span>
</div>
right side animation div
<div id="right" class="right-styles">
×
<div>
<div>
<img id="image1">
</div>
<div>
<p id="para1"></p>
</div>
</div>
</div>
<div id="mains"><p>00000003</p>
<span id="right-click1" onclick="openAnimeright()">«« right-open1</span>
</div>
<div id="mains"><p>00000004</p>
<span id="right-click2" onclick="openAnimeright()">«« right-open2</span>
</div>
<div id="mains">
<p>00000005</p>
<span id="right-click3" onclick="openAnimeright()">«« right-open3</span>
</div>
css code
.left-styles {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111000;
overflow: hidden;
transition: 0.5s;
padding-top: 60px;
}
.left-styles a ,.right-styles a{
text-decoration: none;
color: white;
transition: 1s;
}
#right-click1,#right-click2,#right-click3,#left-click1,#left-click2{
font-size: 30px;
cursor: pointer;
}
#media screen and (max-height: 450px)
{
.left-styles {padding-top: 15px;}
.left-styles a {font-size: 18px;}
.right-styles {padding-top: 15px;}
.right-styles a {font-size: 18px;}
}
.right-styles {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111000;
overflow: hidden;
transition: 0.5s;
padding-top: 60px;
}
.right-styles .cross-button, .left-styles .cross-button {
position: absolute;
top: 10px;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.right-styles a:hover, .left-styles a:hover{
color: green;
}
#para,#para1{
color: green;
font-size: 20px;
margin: 5vw;
}
#image,#image1{
width: 50vw;
height: 50vh;
margin-left: 6%;
}
#left,#right{
overflow: scroll;
}
#mains{
height: 200px;
}
If I understand you correctly, when you click the close button the page jumps to the top of the scroll window. If that is the problem, you need to use event.preventDefault();. This will stop the a tag behaving like a link.
$("#left-click1").click(function(event){
event.preventDefault();
$("#image").prop("src","C:/Users/Ahsan/Documents/sublime/nature1.jpg");
$("#para").text("1111ABCD");
});

Why is my jquery code not working or throwing any errors?

You can checkout my project here: http://jsfiddle.net/raj4dev/2o4uapc9/1/
Summary: I am making a jquery image slider. You can change the image in a box by pressing next and previous arrows. Currently, I have added code only for the next arrow.
Issue: Nothing happens when I click the next arrow. I don't see any errors in the chrome developer tools.
Please tell me how I can debug and fix this issue ?
Code here.
HTML:
<!DOCTYPE html>
<body>
<div id="container">
<header>
<h1>jQuery content slider</h1>
</header>
<img src="http://icongal.com/gallery/image/337589/small_arrow_left.png" alt="Prev" id="prev">
<div id="slider">
<div class="slide">
<div class="slide-copy">
<h2>Slide 1</h2>
<p>Dance and slide!</p>
</div>
<img src="http://m.rgbimg.com/cache1ny0NN/users/j/ja/jana_koll/600/mfOAUfa.jpg" alt="an image">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slide 2</h2>
<p>Dance and slide!</p>
</div>
<img src="https://s-media-cache-ak0.pinimg.com/736x/f9/2e/c0/f92ec0238d508e029be8b7163205d24e.jpg" alt="an image">
</div>
<div class="slide">
<div class="slide-copy">
<h2>Slide 3</h2>
<p>Dance and slide!</p>
</div>
<img src="http://www.pptbackgroundstemplates.com/backgrounds/abstract-red-light-wave-ppt-backgrounds-powerpoint.jpg" alt="an image">
</div>
</div>
<img src="http://icons.iconarchive.com/icons/saki/nuoveXT/128/Small-arrow-right-icon.png" alt="Next" id="next">
</div>
</body>
JS:
$(document).ready(function() {
var sliding_speed = 500;
var autoswitch = true;
var autoswitch_speed = 4000;
$('.slide').first().addClass('active');
//Hide all slides, but...
$('.slide').hide();
//...show only the first slide
$('.active').show();
$('#next').on('click', function(){
$('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
if($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
}else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
});
});
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', sans-serif;
font-size: 14px;
color: #fff;
background: #333;
line-height: 1.6em;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#container {
width: 980px;
margin: 40px auto;
overflow: hidden;
}
#slider {
width: 940px;
height: 350px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 2px;
border-radius: 5px;
}
#silder img {
width: 940px;
height: 350px;
}
.slide {
position: absolute;
}
.slide-copy {
position: absolute;
bottom: 0px;
left:0;
padding: 20px;
background: #7f7f7f;
background: rgba(0,0,0,0.5);
width: 100%;
}
#prev, #next {
float: left;
margin-top: 130px;
cursor: pointer;
position: relative;
z-index: 100;
}
#prev {
margin-right: -45px;
}
#next {
margin-left: -45px;
}
You need to again hide all slide and then show only the active one. You are changing the classes to properly set your desired active slide to have the active class, but nothing says that all active slides are shown always and all other slides are hidden always.
http://jsfiddle.net/v1au2d57/
$('#next').on('click', function(){
$('.active').removeClass('active').addClass('oldActive'); /*'Hide the currently active slide and mark it as oldActive so that you can go back to it using the previous button.'*/
if($('.oldActive').is(':last-child')) {
$('.slide').first().addClass('active');
}else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
//Hide all slides, but...
$('.slide').hide();
//...show only the first slide
$('.active').show();
});

Categories