Hey there :) I'm trying to make a video fit the browser window size plus adding an image at the bottom of the browser window height. So you get the video and the image to be the only thing that is showed when you load the page. When you scroll dowm the content of the website should appear.
I've made something to illustrate the idea: http://instagib.dk/JS-test/
The problem is when I start adding the content of the site, it appears under video and image. The problem seems to be I've made it absolute and out of the documents context.
Is there any JS, Jquery solution that reads the height of the absolute content and places content after the video?
Cheers:)
<body>
<!-- Header -->
<header class="header">
<div class="header-bg">
<div class="logo-top"></div>
</div>
<nav>
<div class="menu">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<ul class="nav-list">
<li>Projects</li>
<li>Services</li>
<li>Advantages</li>
<li>Who are we</li>
<li>Work with us</li>
</ul>
</div>
</nav>
</header>
<video class="intro" autoplay loop>
<source src="video/black_clouds.mp4" type="video/mp4">
<source src="video/black_clouds.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="intro-seperator"></div>
<!-- Main content -->
<main class="content">
</main>
<!-- Footer -->
<footer>
<small>© Crafthouse 2014</small>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
divFade = $(".header-bg");
var toggleHeader = function(noAnimate) {
var threshold = 400,
fadeLength = 300,
opacity,
scrollTop = $(document).scrollTop();
if (scrollTop < threshold) {
opacity = 0;
} else if (scrollTop > threshold + fadeLength) {
opacity = 1;
} else {
if (noAnimate) {
opacity = 1;
} else {
opacity = (scrollTop - threshold) / fadeLength;
}
}
divFade.css("opacity", opacity);
};
toggleHeader(true);
$(window).scroll(function() {
toggleHeader();
});
});
</script>
The CSS:
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/*
========================================
Layout: Header
========================================
*/
.header {
width: 100%;
height: 60px;
position: fixed;
top: 0px;
color: #fff;
z-index: 9999;
}
.header-bg {
width: 100%;
height: 60px;
line-height: 60px;
vertical-align: middle;
background: #212121;
position: absolute;
opacity: 0;
font-size: 25px;
}
.logo-top {
background: url(../images/crafthouse-top-logo.png) no-repeat;
width: 171px;
height: 60px;
margin: 0 auto;
}
.menu {
width: 70px;
height: 60px;
padding-top: 20px;
position: absolute;
left: 8%;
}
.menu:hover {
background: #000;
}
.hamburger {
width: 30px;
height: 3px;
background: #fff;
margin: 0 auto;
margin-bottom: 5px;
}
.menu:hover .hamburger {
background: #00ff91;
}
.nav-list {
width: 150px;
margin-top:20px;
background: #000;
display: none;
padding: 20px 0 10px 18px;
text-transform: uppercase;
}
.nav-list li {
margin-bottom: 10px;
}
.nav-list li a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
.nav-list li a:hover {
color: #00ff91;
}
.menu:hover .nav-list {
display: block;
}
.intro {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size: cover;
}
.intro-seperator {
background: url(../images/seperator-brush-top.png);
height: 164px;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
}
.test {
width: 100%;
height: 100%;
background: #fff;
}
/*
========================================
Layout: Content
========================================
*/
.content {
height: 2000px;
}
Use the following for your content:
main{
position:absolute;
top:100%;
}
That moves the actual content below the video (assuming main is your content-element)
Related
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
}
.active {
opacity: 1;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
How can I get the FadeInLeft effect when changing content from .opacity=0 to .opacity=1 on the left side.
I tried to solve this problem with the given script, but it did not work for me.
P.S. See this layout in fullscreen.
Here is a very ruff first draft
Since you already have the .active class being added to your .subtitle class to change opacity, you can just tack on CSS Animation to those classes.
In my example I have .subtitle > div set to right: 100%; and .active > div set to right: 0%; with a transition: 300ms;
Which will animate the block from the left side of the screen over to the right side in 300ms. You can play around with this until you get the animation where you'd like.
Here's a great article from MDN with more information about Using CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Examples
div {
transition: <property> <duration> <timing-function> <delay>;
}
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
transition:300ms;
}
.subtitle > div {
transition:300ms;
right:100%;
}
.subtitle > div h1 {
opacity:0;
position:relative;
top:2em;
transition:300ms;
transition-delay:1s;
}
.active {
opacity: 1;
}
.active > div {
right:0;
}
.active > div h1 {
opacity:1;
top: 0;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
You can see my carousel on my Github page.
https://ionianthales.github.io/playground.github.io/
I set .carousel to position: absolute; which is ul tag.
and when I click the .right-btn, the slide effect works. But I use the dual monitor and when I expanded the web browser window horizontally over the full width of a monitor, I could see other images are shown in a slide too.
( To check this issue, I should decrease the size of web browser horizontally and then refresh the page and then expand the web browser horizontally )
I tried to fix it on my own. But It didn't work well.
also, I will include my codes here.
html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Bowlby+One+SC|PT+Sans+Narrow&display=swap" rel="stylesheet">
</head>
<body>
<nav class="nav-container">
<div class="logo">
LogoShop
</div>
<ul class="menu-container">
<li class="menu-item">shirt</li>
<li class="menu-item">pants</li>
<li class="menu-item">uniform</li>
<li class="menu-item">contact</li>
</ul>
</nav>
<div class="carousel-container">
<div class="carousel-wrapper">
<ul class="carousel">
<li class="slide active"><img src="images/freestocks-org-_3Q3tsJ01nc-unsplash.jpg" alt=""></li>
<li class="slide"><img src="images/jonathan-francisca-HY-Nr7GQs3k-unsplash.jpg" alt=""></li>
<li class="slide"><img src="images/tamara-bellis-0C2qrwkR1dI-unsplash.jpg" alt=""></li>
</ul>
</div>
<button class="btn left-btn"><img src="images/left-arrow.svg" alt=""></button>
<button class="btn right-btn"><img src="images/right-arrow.svg" alt=""></button>
<div class="carousel-nav">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
css
html{
/* border: 1px red solid; */
height: 100%;
}
body{
height: 100%;
margin: 0;
}
nav{
/* border: 1px red solid; */
width: 70%;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
ul{
list-style: none;
}
.logo{
/* border: 1px blue solid; */
font-family: 'Anton', sans-serif;
font-size: 30px;
}
.menu-container{
/* border: 1px red solid; */
display: flex;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 25px;
padding: 0;
}
.menu-item{
/* border: 1px red solid; */
margin: 0 15px;
}
li a{
text-decoration: none;
color: black;
}
/* carousel */
.carousel-container{
position: relative;
/* border: 1px red solid; */
width: 100%;
height: 500px;
}
.carousel-wrapper{
/* border: 1px red solid; */
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel{
/* border: 1px red solid; */
height: 100%;
margin: 0;
padding: 0;
list-style: none;
transition: 300ms transform ease-in;
}
.slide{
position: absolute;
/* border: 1px red solid; */
margin: 0;
width: 100%;
height: 100%;
}
.slide img{
width: 100%;
height: 100%;
object-fit: cover;
/* opacity: 0; */
}
.btn{
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 100px;
width: 40px;
background-color: transparent;
border: none;
cursor: pointer;
}
.left-btn{
left: 0;
}
.right-btn{
right: 0;
}
.carousel-nav{
position: absolute;
/* background-color: dodgerblue; */
width: 100%;
height: 50px;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.dot{
border-radius: 50%;
width: 20px;
height: 20px;
background-color: grey;
opacity: 0.5;
margin: 0 20px;
cursor: pointer;
}
.dot.active{
background-color: grey;
opacity: 1;
}
javascript
const carousel = document.querySelector('.carousel');
const slides = [...carousel.children];
const nextBtn = document.querySelector('.right-btn');
const previousBtn = document.querySelector('.left-btn');
const slideWidth = slides[0].getBoundingClientRect().width;
console.log(slideWidth);
function positionSlides(slides){
for (let i=0; i<slides.length; i++){
slides[i].style.left = slideWidth * i + 'px';
};
};
nextBtn.addEventListener('click', function(){
const currentSlide = carousel.querySelector('.active');
const nextSlide = currentSlide.nextElementSibling;
const position = nextSlide.style.left;
carousel.style.transform = `translateX(-${position})`;
currentSlide.classList.remove('active');
nextSlide.classList.add('active');
});
previousBtn.addEventListener('click', function(){
const currentSlide = carousel.querySelector('.active');
const previousSlide = currentSlide.previousElementSibling;
const position = previousSlide.style.left;
carousel.style.transform = `translateX(-${position})`;
currentSlide.classList.remove('active');
previousSlide.classList.add('active');
});
positionSlides(slides);
Thanks for reading my question. : )
You can modify the CSS rule as below:
.slide {
position: absolute;
border: 1px solid red;
margin: 0;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
or
.slide {
width: 100vw;
}
I created a navigation bar with java script and the problem is that my first scrolling make the
navigation bar to disappear with out the nice animation.
The nice animation fade up just after the first scrolling.
CSS:
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
}
javaScript:
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
You can watch it "live" here: https://jsfiddle.net/Benjamn89/rgxtb7en/345/
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
body {
margin: 0;
}
/* ################## First Section ################## */
.first_section {
background-image: url('https://cdn1.imggmi.com/uploads/2019/10/17/133545e7537a1782b5722a3359f8e935-full.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 800px;
}
.title_section_1 {
position: relative;
top: 30%;
font-size: 4em;
margin: 0;
font-family: 'Modak', cursive;
font-weight: lighter;
color: #ffffe6;
}
.first_section h1 {
color: #ffffe6;
text-align: center;
}
.wrap_h_sec1 {
text-align: center;
position: relative;
top: 40%;
}
.sec_1 {
display: inline;
font-size: 1.3em;
margin: 0;
border: solid 0.5px;
padding: 1%;
border-radius: 5%;
transition: 0.8s;
}
.sec_1:hover {
cursor: pointer;
background-color: #22dbd6;
}
/* ############### All about the navigation BAR #################### */
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
}
.navig p {
margin: 0;
color: white;
display: inline-block;
padding: 1.5%;
font-family: 'Ubuntu Condensed', sans-serif;
}
.navig p:hover {
border: solid 0.5px;
cursor: pointer;
border-color: #22dbd6;
}
.navig p {
margin-left: 5%;
}
#n-three {
border-top: none;
background-color: #22dbd6;
border-radius: 5%;
color: #ffffe6;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.navig img {
max-height: 80%;
border-radius: 50%;
margin: 0 0 0 5%;
vertical-align: middle;
}
/* ##################### All about the navigation BAR ################### */
/* ################## Second Section and so on ################## */
.second_section {
height: 500px;
width: 100%;
background-color: red;
}
.third_section {
height: 500px;
width: 100%;
background-color: green;
}
.four_section {
height: 500px;
width: 100%;
background-color: black;
}
/* The end of the regular screen style */
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Modak|Ubuntu+Condensed&display=swap" rel="stylesheet">
<!-- The Sticky navigation -->
<div class='navig'>
<span class="helper"></span><img class='profile_img' src='https://cdn1.imggmi.com/uploads/2019/9/23/60e84f9d819b525f1a979e6e4c996ea0-full.jpg'>
<p id='n-one'>Projects</p>
<p id='n-two'>About</p>
<p id='n-three'>Contact</p>
</div>
<!-- ################## navig ####################-->
<!-- First Section with the background image of the office -->
<div class='first_section'>
<h1 class='title_section_1'>Web Designer</h1>
<!-- Wraping the h1 element for centering -->
<div class='wrap_h_sec1'>
<h1 class='btn1 sec_1'>Projects</h1>
<h1 class='btn2 sec_1'>Contact</h1>
</div>
</div>
<!-- ################## END OF first_section ##################-->
<div class='second_section'>
</div>
<!-- second_section -->
<div class='third_section'>
</div>
<!-- third_section -->
<div class='four_section'>
</div>
<!-- four_section -->
Thanks:)
Because of your default top value not defined. Adding after top:0 to .nav it will be fixed.
var prevS = window.pageYOffset;
window.onscroll = function() {
var currentScroll = window.pageYOffset
if (prevS > currentScroll) {
document.querySelector('.navig').style.top = '0'
} else {
document.querySelector('.navig').style.top = '-100px'
}
prevS = currentScroll
}
body {
margin: 0;
}
/* ################## First Section ################## */
.first_section {
background-image: url('https://cdn1.imggmi.com/uploads/2019/10/17/133545e7537a1782b5722a3359f8e935-full.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
width: 100%;
height: 800px;
}
.title_section_1 {
position: relative;
top: 30%;
font-size: 4em;
margin: 0;
font-family: 'Modak', cursive;
font-weight: lighter;
color: #ffffe6;
}
.first_section h1 {
color: #ffffe6;
text-align: center;
}
.wrap_h_sec1 {
text-align: center;
position: relative;
top: 40%;
}
.sec_1 {
display: inline;
font-size: 1.3em;
margin: 0;
border: solid 0.5px;
padding: 1%;
border-radius: 5%;
transition: 0.8s;
}
.sec_1:hover {
cursor: pointer;
background-color: #22dbd6;
}
/* ############### All about the navigation BAR #################### */
.navig {
width: 100%;
height: 75px;
position: fixed;
max-width: 100%;
z-index: 50;
transition: top 0.8s;
top:0
}
.navig p {
margin: 0;
color: white;
display: inline-block;
padding: 1.5%;
font-family: 'Ubuntu Condensed', sans-serif;
}
.navig p:hover {
border: solid 0.5px;
cursor: pointer;
border-color: #22dbd6;
}
.navig p {
margin-left: 5%;
}
#n-three {
border-top: none;
background-color: #22dbd6;
border-radius: 5%;
color: #ffffe6;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.navig img {
max-height: 80%;
border-radius: 50%;
margin: 0 0 0 5%;
vertical-align: middle;
}
/* ##################### All about the navigation BAR ################### */
/* ################## Second Section and so on ################## */
.second_section {
height: 500px;
width: 100%;
background-color: red;
}
.third_section {
height: 500px;
width: 100%;
background-color: green;
}
.four_section {
height: 500px;
width: 100%;
background-color: black;
}
/* The end of the regular screen style */
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Load fonts -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Modak|Ubuntu+Condensed&display=swap" rel="stylesheet">
<title>
My portFolio
</title>
</head>
<body>
<!-- The Sticky navigation -->
<div class='navig'>
<span class="helper"></span><img class='profile_img' src='https://cdn1.imggmi.com/uploads/2019/9/23/60e84f9d819b525f1a979e6e4c996ea0-full.jpg'>
<p id='n-one'>Projects</p>
<p id='n-two'>About</p>
<p id='n-three'>Contact</p>
</div> <!-- ################## navig ####################-->
<!-- First Section with the background image of the office -->
<div class='first_section'>
<h1 class='title_section_1'>Web Designer</h1>
<!-- Wraping the h1 element for centering -->
<div class='wrap_h_sec1'>
<h1 class='btn1 sec_1'>Projects</h1>
<h1 class='btn2 sec_1'>Contact</h1>
</div>
</div> <!-- ################## END OF first_section ##################-->
<div class='second_section'>
</div> <!-- second_section -->
<div class='third_section'>
</div> <!-- third_section -->
<div class='four_section'>
</div><!-- four_section -->
</body>
So I'm trying to make my website as responsive as possible but for some weird reason, I cannot apply an alternative stylesheet to my homepage via media queries for a different screen resolution.
let me explain, my homepage consists of a slideshow done in javascript however when a smaller resolution is used, the images are too big so I want to put some alternative content there using a different css sheet. I tried doing it on my other pages and it worked like a charm (note that there is no javascript within the other pages). I assume that maybe the javascript code is preventing the alternative stylesheet from loading. More specifically, I want the slideshow to show up only on 1920x1080 resolutions, on other resolutions I want other content. Sorry for the long question, I hope I'm making sense. Here is the html from my homepage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Affordable and professional web design">
<meta name="keywords" content="web design, affordable web design,
professional web design">
<meta name="author" content="#">
<title>Light Designs | Welcome</title>
<link rel="stylesheet" href="index/index.css">
<link rel="stylesheet" media="screen and (max-width: 1366px)"
href="index/res.css"/>
<script src="jquery-3.2.1.js"></script>
<!--<script type="text/javascript">
$('body,html').css("overflow","hidden");-->
</script>
</head>
<body>
<header>
<div class="container">
<h1 id="logo"><a href="index.html"><img src="index/logo.png" alt="logo"/>
</a></h1>
<nav>
<ul>
<li class="current">home |</li>
<li>services |</li>
<li>about</li>
</ul>
</nav>
</div>
</header>
<div class="slider">
<ul class="slides">
<li class="slide"><img src="index/showcase.png" alt="#"/></li>
<li class="slide"><img src="index/pic4.png" alt="#"/></li>
<li class="slide"><img src="index/pic3.png" alt="#"/></li>
<li class="slide"><img src="index/pic5.png" alt="#"/></li>
<li class="slide"><img src="index/pic4.png" alt="#"/></li>
</ul>
</div>
<script type="text/javascript">
var myInterval = setInterval(function() {
console.log(new Date());
}, 1000);
</script>
<script type="text/javascript">
$(function() {
//configuration
var width = 1920
var animationSpeed = 1000;
var pause = 4000;
var currentSlide = 1;
//cache DOM
var $slider = $('.slider');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed,
function(){
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
});
</script>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form>
<input class="emailBox_1" type="email" placeholder="Enter Email...">
<button class="button_1" type="submit" class="button_1">
<span>Subscribe</span></button>
</form>
</div>
</section>
<footer>
<p>Light designs, Copyright © 2017</p>
</footer>
</body>
</html>
And here's the css
body {
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding: 0;
margin: 0;
background-color: #0099ff;
width: 100%;
}
/* Global */
div.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: #35424a;
color: #ffffff;
padding-top: 0px;
max-height: 70px;
height: 50%;
border-bottom: #0099ff 4.5px solid;
color: white;
}
#logo {
float: left;
position: relative;
bottom: 30px;
}
nav {
float: right;
position: relative;
top: 10px;
right: 60px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
nav li {
display: inline;
}
a {
color: #ffffff;
text-decoration: none;
}
a:hover {
color: #0099ff;
}
header .current a{
color: #0099ff;
font-weight:bold;
}
.slider {
width: 1920px;
height: 780px;
overflow: hidden;
}
.slider .slides {
display: block;
width: 9600px;
height: 780px;
margin: 0;
padding: 0;
}
.slider .slide {
float: left;
list-style-type: none;
width: 1920px;
height: 780px;
}
#newsletter{
position: relative;
bottom: 10px;
color: #ffffff;
background: #35424a;
}
#newsletter form {
float:right;
margin-top: 7px;
position: relative;
bottom: 8px;
}
#newsletter h1{
margin-bottom: 0px;
float:left;
position: relative;
bottom: 5px;
}
#newsletter input[type="email"]{
padding:4px;
height:25px;
width:250px;
}
.button_1 {
display: inline-block;
border-radius: 4px;
background-color: #0099ff;
border: none;
color: #FFFFFF;
line-height: 4px;
font-size: 20px;
padding: 20px;
padding-top: 18px;
padding-bottom: -2;
width: 150px;
height: 30px;
transition: all 1s;
cursor: pointer;
margin: 5px;
position: relative;
top: 4px;
}
.button_1 span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button_1 span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button_1:hover span {
padding-right: 25px;
}
.button_1:hover span:after {
opacity: 1;
right: 0;
}
footer{
background-color:#0099ff;
color: #ffffff;
text-align: center;
padding: 10px;
margin-top: 0;
position: relative;
bottom: 10px;
height: 20px;
}
footer p {
position: relative;
bottom: 6px;
}
You could use a media query (placing it after .slider) to hide the slider container:
#media (max-width: 1919px) {
.slider {
display:none;
}
}
Hey so I'm working on this website and I learned how to do this thing with the Navbar so the color fades in, I can't get any of the links to work after it starts to work. From what I understand it has to do with e.preventDefault(), but I'm not sure how to fix this.
here is my code
$(window).scroll(function() {
// 100 = The point you would like to fade the nav in.
if ($(window).scrollTop() > 100 ){
$('.bg').stop().animate({
opacity : 0.5
}, 10 );
} else {
$('.bg').stop().animate({
opacity : 0.0
}, 200 );
};
});
$('.scroll').on('click', function(e){
e.preventDefault()
$('html, body,').animate({
scrollTop : $(this.hash).offset().top
}, 1500);
});
/****NAV*****/
body{
background-color: #000;
font-family: 'Trebuchet Ms';
}
.container {
width: 100%;
height: 2000px;
position: relative;
/* font-family: 'Trebuchet Ms';*/
}
.bg {
background: #777;
width: 100%;
height: 100px;
opacity: 1;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
ul {
height: 100px;
margin: -70px auto 0 auto;
width: 500px;
}
li {
float: left;
list-style: none;
margin: 10px 20px;
text-transform: uppercase;
/* letter-spacing: 0px;*/
color: wheat;
}
li a {
/* height: 100px;*/
text-transform: uppercase;
color: wheat;
font-family: 'Trebuchet Ms';
font-size:
}
/*
a {
text-align: center;
font-size: 50px;
color: #bdbdbd;
font-weight: bold;
text-decoration: none;
letter-spacing: 5px;
text-shadow: 1px 1px 1px #949494;
position: relative;
z-index: 1;
margin: 0 auto;
display: block;
}
a:hover {
color: #a6a6a6;
text-shadow: 1px 1px 1px #C9C9C9;
}
*/
a {
border-style: none;
}
a:link {
text-decoration: none;
}
a:hover {
color:wheat;
}
a:active {
color: #2c9d91;
text-decoration: inherit;
}
.down {
top: 150px;
}
.up {
top: 1800px;
}
/*******OVERLAY*******/
#writingoverlay {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
opacity: .5;
/* background: radial-gradient( coral, gray, darkslategray);*/
/* background: radial-gradien( coral,darkslategray, gray);*/
/* background: radial-gradient(darkslategray 35%, dimgray, gray);*/
background: radial-gradient(lightgray, gray, dimgray);
color: crimson
}
/*
#video-overlay {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
background: linear-gradient(to bottom left, crimson, coral);
opacity: 0.2;
}
*/
/*****VIDEO FULL SCREEN*****/
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
/*****FOOTER******/
footer {
color: wheat;
text-align: center;
font-size: 20px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="top" class="container">
<div class="fixed">
<div class="bg"></div>
<ul class="navBar">
<li>home
</li>
<li>photography
</li>
<li>film
</li>
<li>contact
</li>
</ul>
</div>
</div>
<footer>Contact info.</footer>
<div id="writingoverlay"></div>
<!-- <div id="video-overlay"></div> -->
<div class="vidOverlay">
<video id="video" autoplay controls loop muted>
<source src="/Img/8.mp4" type="video/mp4">
<source src="/Img/8.webm" type="video/webm">
</video>
</div>
</body>
</html>
This is actually not related to your e.preventDefault, it's related to your opacity animation. Basically, you are bringing an opacity tag to the div which is covering your link. If you want to test this, you can run your entire code and just use a different animation instead of opacity, such as
height: '150px'
You can also see this effect if you just edit the css style tag to remove opacity in the developer console.
I think if you change this logic to use navbar instead of bg, you will get it to work. I believe the problem is that you have a div covering another div, so you can't click the div underneath.
This works for me, but obviously you'll have to change your css to match what you need:
if ($(window).scrollTop() > 100 ){
$('.navBar').stop().animate({
opacity : 0.5
}, 10);
} else {
$('.navBar').stop().animate({
opacity : 0.0
}, 200 );
};
i think your missed a /, try to put /index.html , the / is for your to redirect your path.
<ul class="navBar">
<li>home
</li>
<li>photography
</li>
<li>film
</li>
<li>contact
</li>
</ul>
</div>