I am currently having an issue with parallax scrolling. I am using a custom JavaScript solution which moves the content over the initial background image. It works totally fine, however, the initial background photo is still visible underneath the content. Here are some code snippets.
#home {
position: relative;
width: 100vw;
height: auto;
}
#home_img {
min-width: 100vw;
width: 100vw;
height:auto;
position: relative;
z-index: -1;
}
#content {
position: relative;
z-index: 1;
}
And here is my html
<section class="section"id="home">
<img id="home_img"src="images/homepagenew2.png">
<!-- <i class="fa fa-home"></i> -->
</section> <!-- End Home Div -->
<div id="content">
.....
</div>
Related
I am trying to have a menu that takes up 100vh when the menu button is clicked. However, I also have a header at the top so the menu content is lower than it. How do I make the menu go on top of the header? I'm trying to do this without making the header display: none because I want it to be shown on the side - in the left over space from making the menu have a view width of 80vw.
header {
height: 3.4rem;
display: grid;
align-items: center;
z-index: 1;
}
.menu {
z-index: 2;
position: relative;
background-color: #000;
margin-left: 4rem;
}
.menu-container {
width: 80vw;
height: 100vh;
margin-left: 2.5rem;
margin-top: 2rem;
}
<header>
<div class="header-container">
<div class="left">
<img src="img/logo.jpg" alt="">
</div>
<div class="right">
<img src="img/user.png" alt="">
<i class="fa-solid fa-bars fa-xl"></i>
</div>
</div>
</header>
<nav class="menu">
<div class="menu-container">
<div class="top-menu">
Premium
Support
Download
<div class="menu-line"></div>
</div>
<div class="bottom-menu">
Account
Log out
</div>
<img src="img/logo.jpg" alt="">
</div>
</nav>
(I did not add all the CSS to do with the menu and header because the rest of it is irrelevant.)
How do I move the menu to go on top?
I think position: relative is not set properly, it should only be on a parent that contains both header and nav. And then set the following css :
.menu {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 80vw;
}
Add margin and background if you want.
Now nav should be above header.
I believe the issue lies in the position and z-index of your .menu and header css. Try making the position: absolute for both absolute and change the z-index of menu to 1 and header to 2 so that it shows menu on top of header.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I have a scrollable container - a div with overflow-y: scroll and position: relative.
I have a div inside it.
I have a second div, underneath the first, with position: absolute.
I would like the second div to extend beyond the bottom of the container div, but instead it increases the container's size.
If I remove the container's position: relative, then the second div does extend beyond the container, but it's positioned too far below (at the spot where it would have been positioned if there were no scrollbar).
I thought to give the second div position: fixed, but it's a problem, because the entire page may have a scrollbar, and when scrolled - I would like the second div to move together with its container.
The code:
<!-- container -->
<div style="position: relative; overflow-y: scroll; width: 400px; height: 400px; background-color: pink;">
<!-- first div -->
<div style="width: 20px; height: 800px; background-color: grey;">
</div>
<!-- second div -->
<div style="display: block; position: absolute; width: 100px; height: 200px; background-color: red;">
</div>
</div>
JSFiddle: https://jsfiddle.net/x341yvdn/
I prefer a CSS-only solution, but if it's not possible - then Javascript is also acceptable (vanilla or JQuery are both fine).
This might be what you're looking for
<html>
<body>
<!-- container -->
<div style="overflow-y: scroll; width: 400px; height: 400px; background-color: pink;">
<!-- first div -->
<div style="width: 20px; height: 800px; background-color: grey;">
</div>
<!-- second div -->
<div style="display: block; position: absolute; width: 100px; height: 200px; background-color: red; top:400px;">
</div>
</div>
</body>
</html>
I have been reading about fixed div's within relative and absolute div's here:
Fix position of div with respect to another div
Fixed positioned div within a relative parent div
Fixed position but relative to container
And many other but none can help me to achive a behavior I have seen in few pages (blogs). I can not remember one at the moment, but here are some images to explain
View 1 & View 2
After scrolling down, the contextual menu sticks to the side of the view and moves down with the scrolling until reach the end of the section in which it stops. If there is more content after it, you can keep scrolling down but the contextual menu no longer follow your view. The same going up, you reach the section, the contextual menu follows you up until the start of the section, then stops and you can keep scrolling up.
Is this posible with only HTML and CSS or do I need a plugin?
Here is a jsFiddle piece of code, perphaps incomplete. Forgot to mention, I'm doing this in Angular 6+ as a component, so I don't have full access to the index.html file with the body tag. The jsFiddle shows what I can work with.
There were a few things going on:
You can set body { position: relative } in your CSS
position: sticky needs a full height column to work. Because your col-6 that was holding your menu was only as tall as it needed to be, it won't scroll.
I moved the p-sticky class to your column.
sticky also needs a top value to know where the element should stick to once it becomes sticky.
.p-sticky {
position: sticky;
top: 60px;
}
body {
position: relative;
}
/*some attemps*/
.p-relative {
position: relative;
}
.p-absolute {
position: absolute;
}
.p-sticky {
position: sticky;
top: 60px;
}
.p-fixed {
position: fixed;
}
/* Standar CSS*/
.navbar {
background-color: blue;
width: 100%;
}
.nav-fixed {
top: 0px;
z-index: 1;
position: fixed;
}
.content-ex1 {
height: 200px;
background-color: green;
}
.content-ex2 {
height: 500px;
background-color: #aaaaaa;
}
.menu {
height: 50px;
background-color: red;
}
<div class="navbar">
some navbar things
</div>
<div class="navbar nav-fixed">
some navbar things
</div>
<div class="content-ex1"> Some content here</div>
<div class="container">
<div class="row">
<div class="col-sm-6 p-sticky">
<div class="menu">menu or something</div>
</div>
<div class="col-sm-6 content-ex2"> Some content here</div>
</div>
</div>
<div class="content-ex1"> Some content here</div>
Here's the fiddle to play around with (which includes your bootstrap):
http://jsfiddle.net/w4mz9dte/
Note: you appear to be using an old version of BootStrap. You may want to update to the newest version. In that case, only a few things will change - namely, you move the p-sticky class to the menu.
Here's the newest version of BS 4.4: http://jsfiddle.net/kamr0bjw/
body {
position: relative;
}
/*some attemps*/
.p-relative{
position:relative;
}
.p-absolute{
position:absolute;
}
.p-sticky{
position:sticky;
top: 60px;
}
.p-fixed{
position:fixed;
}
/* Standar CSS*/
.navbar{
background-color: blue;
width:100%;
}
.nav-fixed{
top: 0px;
z-index:1;
position:fixed;
}
.content-ex1{
height:200px;
background-color: green;
}
.content-ex2{
height:500px;
background-color: #aaaaaa;
}
.menu{
height:50px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<div class="navbar">
some navbar things
</div>
<div class="navbar nav-fixed">
some navbar things
</div>
<div class="content-ex1"> Some content here</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="menu p-sticky">menu or something</div>
</div>
<div class="col-sm-6 content-ex2"> Some content here</div>
</div>
</div>
<div class="content-ex1"> Some content here</div>
I want to create a vertical slider using jQuery and CSS. Here is my code:
HTML & JavaScript
<script>
$.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
<div class="slideshow vertical" data-cycle-fx=carousel data-cycle-timeout=0 data-cycle-next="#next3" data-cycle-prev="#prev3" data-cycle-carousel-visible=2 data-cycle-carousel-vertical=true>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
<img src="http://malsup.github.io/images/beach3.jpg">
<img src="http://malsup.github.io/images/beach4.jpg">
<img src="http://malsup.github.io/images/beach5.jpg">
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class="center">
<button id="prev3">∧ Prev</button>
<button id="next3">∨ Next</button>
</div>
CSS
.slideshow {
margin: auto;
position: relative;
overflow: hidden;
height: 200px;
}
.slideshow img {
width: 100px;
height: 100px;
padding: 2px;
}
div.responsive img {
width: auto;
height: auto
}
.cycle-pager {
position: static;
margin-top: 5px
}
JSFiddle
However, it's showing only two images. I want to show 3 or four images.
I also have a CodePen, but it's showing only one slider text.
How can I change and make it 2 to 3?
If you set the height of .slideshow to 312px this should do the job.
See here.
Or even easier, set the data-cycle-carousel-visible=X to the desired amount X of pictures shown. For example data-cycle-carousel-visible=3
I'm having a problem trying to get both a fixed top navigation and a sticky footer to work, without hiding the footer 40px off the bottom. The jquery script i'm using is meant to fix this, but it doesn't. I can't use bootstrap or anything similar. So this is my only option.
The HTML
<div id="container">
<nav role="navigation" id="cssmenu">
<ul>
<li class="active">Home</li>
<li class="has-sub">Courses
<ul>
<li><span>Digital Media</span></li>
<li><span>Web Development</span></li>
<li><span>Journalism</span></li>
<li class="last"><span>Information & Communications</span></li>
</ul>
</li>
</ul>
<div id="wrapper">
<header role="banner" id="banner">
<div class="not-fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg');" data-img-width="1600" data-img-height="1064">
<div class="content-a">
<div class="content-b">
<h1>header1</h1>
<h2>header 2</h2>
</div>
</div>
</div>
</header>
<div class="content">
<main role="main" id="skipnav">
<p>Intro paragraph</p>
</main>
</div>
</div>
<footer class="footer" id="footer">
<div class="container2">
<p>footer</p>
</div>
</footer>
</div>
The Jquery script -
$(document).ready(function(){
var footer_height=$("#footer").height();
$("#wrapper").css({
'padding-bottom' : footer_height
});
});
Css can be found here
The full website can be found here
Thanks in advance.
you can do using css only no need to use jquery
#footer {
bottom: 0;
position: fixed;
}
nav {
top : 0;
position: fixed;
}
You need to place footer inside wrapper and use position fixed for the footer instead of position absolute; Furthermore, the only reason to use jQuery to calculate the padding is if your footer does not have fixed height (now you use height: 40px). You also need to give to your wrapper padding top = height of your header.
Try this:
#footer {
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
height: auto;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
/* padding: calculated 0 calculated; */
#container {
position: relative;
width: 100%;
height: 100%;
}
Few things to change:
body was having padding-top:40px; which is making the body to overflow. So remove that padding from body.
and #wrapper need to be:
#wrapper {
position: absolute;
width: 100%;
height: 100%;
}
remove that jquery part and padding-bottom line from wrapper.
and make footer to be position: fixed;