desired result: green section scrolls in opposite direction of page at certain scroll speed (for example -50% of page scroll speed) until top of green section reaches bottom of red section at which the green section should 'stick' to the bottom of the red section and continue scrolling with the rest of the page if user scrolls down further. I got the sticky part to work but for some reason when i add the JS code for the scroll in different direction/speed..the sticky section doesnt work anymore (green section) and just keeps scrolling...
Perhaps i should add an extra condition to the JS to check if top of green section has already reached bottom of red section? Or perhaps use a different approach alltogether.
What am i doing wrong? Thank you for any input!
My code:
<!DOCTYPE html>
<html>
<head>
<!-- <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'> -->
<link rel="stylesheet" href="https://use.typekit.net/oov2wcw.css">
<style>
html {
font-family: century-gothic, sans-serif;
font-weight: 400;
font-style: normal;
}
body {
background-color:#323233;
scroll-behavior: smooth;
color:white;
}
.main-container{
padding-top:15vh;
margin-right: 10vh;
margin-left: 10vh;
}
.main-section {
height: auto;
background-color:#000000;
margin: 0 auto;
position: relative;
}
.top-section {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 800px;
background-color: red;
}
.left-section,
.right-section {
padding:0;
width: 50%;
float: left;
}
.left-section {
color:white;
}
.right-section {
color:white;
}
img {
width: 100%;
margin: 0 auto;
display: block;
}
p {
padding: 20px;
}
.sub-section{
background-color: rgba(0,255,0, 0.3);
position: -webkit-sticky;
position: sticky;
bottom: 14.5vh;
display:flex;
z-index: 1;
width:100%;
display:flex;
flex-direction:row;
height:100%;
/* backdrop-filter: brightness(40%); */
}
.slow-scroll {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="main-container">
<div class="main-section">
<div class="top-section">
<!-- Add content here -->
<img id="image" src="img/ijsselmuiden1_na2astelkaar.png" />
</div> <!-- end top section -->
<div id="slow-scroll" class="sub-section" style="font-size:150%;">
<div class="left-section">
<h3 style="color :#999999;padding-left:65px;">Co2 neutrale Woning aan het water</h3>
<ul class="points-list">
<li>Klimaat-neutrale recreatiewoning aan het water</li>
<li style="color :#999999;">Afwerking met Douglas Schaaldelen</li>
<li>Prachtig uitzicht door groot glasoppervlak</li>
<li style="color :#999999;">Warmtepomp en vloerverwarming</li>
</ul>
<div>
</div>
</div> <!-- end left section -->
<div class="right-section">
<p>Vestibulum commodo mauris vel purus bibendum, vel malesuada sapien fringilla. Integer vestibulum lectus vel enim bibendum, vel mollis dolor ullamcorper.</p>
<p>Vestibulum </p>
<p>Vestibulum </p>
<p>Vestibulum </p>
</div> <!-- end right section -->
</div> <!-- end sub section -->
<p>Vestibulum commodo mauris vel purus bibendum, vel malesuada sapien fringilla. Integer vestibulum lectus vel enim bibendum, vel mollis dolor ullamcorper.</p>
<p>Vestibulum </p>
<p>Vestibulum </p>
<p>Vestibulum </p>
<p>Vestibulum </p>
<p>Vestibulum </p>
<p>Vestibulum </p>
<p>Vestibulum </p>
<p>Vestibulum </p>
<p>Vestibulum </p>
<p>Vestibulum </p>
<p>Vestibulum </p>
<p>Vestibulum </p>
</div> <!-- end main section -->
</div> <!-- end main container -->
</body>
<script>
// Select the slow-scroll element
const slowScroll = document.querySelector('#slow-scroll');
// Listen for the scroll event on the window
window.addEventListener('scroll', function () {
// Get the scroll position of the page
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Set the scroll position of the slow-scroll element based on the scroll position of the page
slowScroll.style.transform = `translateY(${scrollTop / 2}px)`;
});
</script>
</html>
Initial situation on page load:
When scrolling down, at the point shown in the image the green section should 'become sticky':
Instead the green section keeps moving down when scrolling further..:
Related
I've recently gotten back into coding, and continuing off where I left, trying to create a mobile-first site for a hypothetical apartment website.
With that being said, I've noticed that bottom border of a different , with the class ".description_section", is visible through the one containing the element.
The is within the tag with the id "sidebar". Not the most aesthecally-pleasing side nav (as fonts is my weak point).
Picture
HTML:
<div class="container">
<div id="sidebar">
<ul>
<li>Home</li>
<li>Amenities</li>
<li>Floor Plans</li>
<li>About Us</li>
</ul>
</div><!--close #sidebar-->
<div class="row" id="big_picture">
<div class="row" id="social_media">
<div class="col-4" id="facebook">
<img src="images/fb.svg">
</div><!-- close .social_media_icon-->
<div class="col-4" id="twitter">
<img src="images/twitter.svg">
</div><!-- close .social_media_icon-->
<div class="col-4" id="google_plus">
<img src="images/google_plus.svg">
</div><!-- close .social_media_icon-->
</div><!--close #social_media-->
</div><!--close #big_picture-->
<div class="row description_section">
<hr>
<h2>Directions</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur tristique tortor feugiat dictum. Duis placerat orci vel massa interdum dapibus eu id risus. Curabitur tempor placerat congue. Curabitur ut augue sit amet arcu volutpat rutrum ut sit amet turpis.</p>
<div class="desc_image" id="one"></div><!--close .desc_image-->
</div><!--.description_section-->
CSS:
#sidebar {
left: 0px;
width: 50%;
border-top-right-radius: 1.5em;
border-bottom-right-radius: 1.5em;
background-color: black;
color: white;
/*border: 1px solid white;*/
text-align: center;
position: absolute;
display: none;
}
#big_picture {
height: 13.4em;
background: url("../images/apt_lobby.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.description_section {
background-color: #1d2f5c;
color: white;
}
.description_section h2 {
padding-top: 0;
padding-bottom: 2%;
text-align: center;
font-style: bold;
}
.description_section p {
font-size: 0.8em;
padding: 1% 5% 5% 5%;
}
jQuery:
$("#hamburger_menu").click(function() {
$("#sidebar").toggle(1000);
});
If people would like more code snippets, including the one with id of the whose borders is bleeding through, please let me know!
My guess is that it's because of the
position: absolute
Try playing around with this and also height of the sidebar.
try to make the ul higher z-index
ul {
position: absolute;
z-index:9;
}
______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
I would like to make this UI, and each is a div. The header height is 30px. And the footer is 30px. But I don't know the content height. I need to use the user frame to calculate.
The total height should be 100%.
Can I do it in pure CSS?
Using flexbox, this is easy to achieve.
Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.
Example markup:
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
And CSS to accompany it:
.wrapper {
height: 100vh;
display: flex;
/* Direction of the items, can be row or column */
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left
You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/
Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
--[Old answer below]--
Here you go: http://jsfiddle.net/pKvxN/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header {
height: 30px;
background: green;
}
footer {
height: 30px;
background: red;
}
</style>
</head>
<body>
<header>
<h1>I am a header</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
</p>
</article>
<footer>
<h4>I am a footer</h4>
</footer>
</body>
</html>
That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)
Here is how to to that:
The header and footer are 30px height.
The footer is stuck to the bottom of the page.
HTML:
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSS:
#header {
height: 30px;
}
#footer {
height: 30px;
position: absolute;
bottom: 0;
}
body {
height: 100%;
margin-bottom: 30px;
}
Try it on jsfiddle: http://jsfiddle.net/Usbuw/
Try This
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header and Footer</title>
<style type="text/css">
/* Reset body padding and margins */
body {
margin:0;
padding:0;
}
/* Make Header Sticky */
#header_container {
background:#eee;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
}
#header {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0 auto;
overflow:auto;
padding:80px 0;
width:940px;
}
#content {
}
/* Make Footer Sticky */
#footer_container {
background:#eee;
border:1px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
content
<br /><br />
blah blah blah..
...
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
After fiddling around a while I found a solution that works in >IE7, Chrome, Firefox:
http://jsfiddle.net/xfXaw/
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#wrap {
min-height:100%;
}
#header {
background: red;
}
#content {
padding-bottom: 50px;
}
#footer {
height:50px;
margin-top:-50px;
background: green;
}
HTML:
<div id="wrap">
<div id="header">header</div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div>
</div>
<div id="footer">footer</div>
with Grid
<div class='container'>
<header>header</header>
<div>content</div>
<footer>footer</footer>
</div>
.container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
Below is the sample code and you can run a snippet to see the result.
html,body {
display: flex;
flex-direction: column;
height: 100%;
}
sidenav{
border:1px solid black;
flex: .3;
}
container{
border:1px solid black;
flex: 1;
}
header{
border:1px solid black;
flex:.1;
}
content{
display:flex;
flex:1;
border:1px solid black;
}
footer{
border:1px solid black;
flex:.1;
}
<body>
<header >header</header>
<content>
<sidenav>sidenav</sidenav>
<container>container</container>
</content>
<footer>footer</footer>
</body>
Try this
CSS
.header{
height:30px;
}
.Content{
height: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 40px;
}
.Footer{
position: relative;
margin-top: -30px; /* negative value of footer height */
height: 30px;
clear:both;
}
HTML
<body>
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</body>
My current nav menu covers my website content when I shrink my screen to mobile. Also, it has scrollable links with each menu item, so whenever I click an option, it will scroll down to that section on the website.
My problem is that my heading for example "Section 1" gets covered by my menu.
here is my current code for my #media and it stacks each menu item on top of each other.
#media only screen and (max-width: 850px) {
.menu-items {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
height: 5px;
}
}
Here is the HTML for the first section
<body>
<header class="page__header">
<nav class="navbar__menu">
<!-- Navigation starts as empty UL that will be populated with JS -->
<ul id="navbar__list"></ul>
</nav>
</header>
<main>
<header class="main__hero">
<h1>Landing Page</h1>
</header>
I
<section id="section1" data-nav="Section 1" class="active">
<div class="landing__container">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
fermentum metus faucibus
</p>
<p>
Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar
gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam.
Cras eu tincidunt arcu,
</p>
</div>
</section>
Is there a simple fix to make sure my menu pushes any HTML content below it?
Here is how I created my nav menu with Javascript
const navMenu = document.querySelectorAll("section");
const navList = document.getElementById("navbar__list");
const items = ["Section 1", "Section 2", "Section 3", "Section 4"];
items.forEach((item, i) => {
const el = document.createElement("a");
el.innerText = item;
el.classList.add("menu-items");
el.setAttribute("id", `menu-${i + 1}`);
el.href = `#section${i + 1}`;
navList.appendChild(el);
});
Here's the CSS for navbar and page header
.navbar__menu ul {
padding-left: 0;
margin: 0;
text-align: right;
}
.navbar__menu li {
display: inline-block;
}
.navbar__menu .menu__link {
display: block;
padding: 1em;
font-weight: bold;
text-decoration: none;
color: #000;
}
.navbar__menu .menu__link:hover {
background: #333;
color: #fff;
transition: ease 0.3s all;
}
/* Header Styles */
.page__header {
background: #fff;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
The problem is the .page_header. It has a position: fixed. That will cause your div and all contents in it to show above the rest of the page. Why? This is an excellent guide to CSS positioning.
To solve your issue, it really is dependent on how you want your design to look.
You can move your <ul id="navbar__list"></ul> outside of the header.
You can change the .page__header class to be statically positioned under the #media query. That way it is fixed on large screens and normal on smaller ones.
You can consider leaving it as is (I see many mobile apps using that design, its not surprising), but have the menu toggle-able (show/hide based on a button in the nav bar), and when an item in the menu is clicked, the menu is hidden.
I'm trying to create a new section but the tag is overlapping my home page. I tried adding divs, removing divs, and adding more sections but can't get to the solution. Is it because of my styling or because of my HTML?
/* Base Styles -------------------- */
#import url('https://fonts.googleapis.com/css?family=Playfair+Display');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body */
body {
font-family: 'Playfair Display', serif;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/body-image1.jpg") no-repeat center center / cover;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
padding: 0 3rem;
}
h1,
h2 {
font-weight: 200;
margin: 0.4rem;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
color: #fff;
}
/* Navigation Styles */
.row {
float: right;
list-style: none;
margin-top: 40px;
margin-right: 80px;
}
.row li {
display: inline-block;
margin-left: 40px;
text-transform: uppercase;
font-size: 19px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
padding: 8px 0px;
}
.row li:hover,
.row li:active {
border-bottom: 2px solid #48a8ce;
}
/* Media queries for home page */
#media(min-width: 1200px) {
h1 {
font-size: 5rem;
}
}
#media(max-width: 800px) {
.container {
padding: 0 1rem;
}
h1 {
font-size: 3rem;
}
}
#media(max-width: 500px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
}
/* Cursor for Typewriter */
.txt-type>.txt {
border-right: 0.2rem solid #777;
}
/* Aspirations Section */
/* .section-head {
padding-left: 500px;
padding-top: 0px;
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
Home</li>
<li>
Aspirations</li>
<li>
About</li>
<li>
Contact</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
Help Develop ParkingBud Now
</section>
<script src="main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
Home</li>
<li>
Aspirations</li>
<li>
About</li>
<li>
Contact</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
Help Develop ParkingBud Now
</section>
<script src="main.js"></script>
</body>
</html>
I removed the duplicate html and body tags. Then I added the additional sections, each one following the previous, inside the same body. I also noticed you closed your <a> tags before the label in your navigation, fixed that too by moving </a> after the link labels.
I think this is what you were going for? Something like this?
/* Base Styles -------------------- */
#import url('https://fonts.googleapis.com/css?family=Playfair+Display');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body */
body {
font-family: 'Playfair Display', serif;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/body-image1.jpg") no-repeat center center / cover;
color: #fff;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
width: 100%;
padding: 0 3rem;
}
h1,
h2 {
font-weight: 200;
margin: 0.4rem;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2rem;
color: #fff;
}
/* Navigation Styles */
.row {
float: right;
list-style: none;
margin-top: 40px;
margin-right: 80px;
}
.row li {
display: inline-block;
margin-left: 40px;
text-transform: uppercase;
font-size: 19px;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
padding: 8px 0px;
}
.row li:hover,
.row li:active {
border-bottom: 2px solid #48a8ce;
}
/* Media queries for home page */
#media(min-width: 1200px) {
h1 {
font-size: 5rem;
}
}
#media(max-width: 800px) {
.container {
padding: 0 1rem;
}
h1 {
font-size: 3rem;
}
}
#media(max-width: 500px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
}
/* Cursor for Typewriter */
.txt-type>.txt {
border-right: 0.2rem solid #777;
}
/* Aspirations Section */
/* .section-head {
padding-left: 500px;
padding-top: 0px;
} */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlos Gonzales</title>
</head>
<body>
<header>
<nav>
<div class="row">
<ul>
<li>
Home</li>
<li>
Aspirations</li>
<li>
About</li>
<li>
Contact</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<h1>Carlos Gonzales The
<span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
</h1>
<h2>Welcome to my website !</h2>
</div>
<section id="aspirations" class="aspiration-section">
<h2 class="section-head">Aspirations</h2>
<p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
</p>
Help Develop ParkingBud Now
</section>
<section id="about" class="about-section">
<h2 class="section-head">About</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia feugiat pharetra. Cras gravida lobortis pellentesque. Etiam pellentesque maximus tincidunt. Mauris urna nulla, vestibulum vitae euismod sit amet, consectetur ut ante. Ut molestie, nunc non vehicula ullamcorper, sapien lorem vestibulum est, in pulvinar nibh est et dolor. Morbi at posuere eros. Maecenas ornare risus id felis aliquam, quis lacinia mauris faucibus. Nunc ut sagittis neque. Vivamus imperdiet tristique lorem. Suspendisse tellus massa, iaculis in ultricies in, gravida non ex. Phasellus nec dolor magna.
</p>
</section>
<section id="contact" class="contact-section">
<h2 class="section-head">Contact</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia feugiat pharetra. Cras gravida lobortis pellentesque. Etiam pellentesque maximus tincidunt. Mauris urna nulla, vestibulum vitae euismod sit amet, consectetur ut ante. Ut molestie, nunc non vehicula ullamcorper, sapien lorem vestibulum est, in pulvinar nibh est et dolor. Morbi at posuere eros. Maecenas ornare risus id felis aliquam, quis lacinia mauris faucibus. Nunc ut sagittis neque. Vivamus imperdiet tristique lorem. Suspendisse tellus massa, iaculis in ultricies in, gravida non ex. Phasellus nec dolor magna.
</p>
</section>
<script src="main.js"></script>
</body>
</html>
With the help of codepen, I came up with the following :
https://codepen.io/Lancewalker/pen/zepjXr
You can see the mockup version here : https://i.gyazo.com/88a0d6815253cbca8981a276bb937673.png
It works perfectly and has the exact function I need, and the only thing missing is a mobile display which I have mocked up here:
http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/LWD-FinalMockup.png
My problem : WPBakery is a nightmare. I bought this theme a long time ago which includes WPBakery and I cannot for the life of me figure out how to incorporate this codepen (or much of anything custom) into the site.
Plugins I have tried :
• Custom CSS / JS - Lets you add your own css (scss compatible) and javascript to the site
• Header Footer Code Manager - Lets you include scripts in your header without dealing with PHP.
I've tried using the custom HTML element and custom JS elements, including the scripts and html, and then adding the HTML into the stylesheet.
Here is the current working home page:
http://www.lancewalkerdesigns.com/
And here is what happens when I add the code using the custom html / js:
http://www.lancewalkerdesigns.com/home-page/
As you can see when you get to services, the little li elements on the right side of the screen which allow you to navigate from page to page end up randomly inserting themselves into the ul in the codepen I've created.
An uneducated guess : The JS used for the li element on the right side of the screen which allows you to navigate the homepage has conflicts with the JS / classes I've assigned to my codepen UL.
An alternate fix : If someone could help me rework the code to have the on click function without using lists / unordered lists and instead using custom classes there's a chance that it wouldn't conflict with Wordpress / WPbakery
If anyone can help, this is the only complicated thing I really want on the site but it's important to me. I'd be willing to grant access / pay someone to do this, I know it's just a matter of knowing how WPBakery / Wordpress works better than I do. I am pretty well versed in html / css but js / php I am a beginner at.
I would post this on upwork but last time I did that someone quoted me at 25 hours for the project, which even though I am not js / php handy, I knew was a massive overestimate.
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#" + activeTab).fadeIn();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_drawer_heading").removeClass("d_active");
$(".tab_drawer_heading[rel^='" + activeTab + "']").addClass("d_active");
});
/* if in drawer mode */
$(".tab_drawer_heading").click(function() {
$(".tab_content").hide();
var d_activeTab = $(this).attr("rel");
$("#" + d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li").removeClass("active");
$("ul.tabs li[rel^='" + d_activeTab + "']").addClass("active");
});
$('ul.tabs li').last().addClass("tab_last");
/*************New CSS*/
ul.tabs li.active>img.img-inactive {
display: none;
}
ul.tabs li.active>img.img-active {
display: block;
}
ul.tabs li>img.img-active {
display: none;
}
/**********New CSS*/
body {
background-color: #333;
color: #fff;
}
h2 {
text-transform: uppercase;
font-size: 3rem;
}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 232px;
border-bottom: 1px solid #333;
width: 100%;
display: flex;
justify-content: center;
}
ul.tabs img {
width: 200px;
height: 200px;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 0px;
margin: 0 -20px;
height: 232px;
line-height: 31px;
color: #ccc;
overflow: hidden;
position: relative;
}
ul.tabs li.active {
color: #333;
display: block;
}
.tab_container {
padding-top: 75px;
clear: both;
float: left;
width: 100%;
overflow: auto;
display: flex;
justify-content: center;
text-align: center;
}
.tab_content {
padding: 20px;
display: none;
}
.tab_drawer_heading {
display: none;
}
#media screen and (max-width: 480px) {
.tabs {
display: none;
}
.tab_drawer_heading {
background-color: #ccc;
color: #fff;
border-top: 1px solid #333;
margin: 0;
padding: 5px 20px;
display: block;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.d_active {
background-color: #666;
color: #fff;
}
}
#img2 {
margin-top: 90px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active" rel="tab1">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service1-Highlighted.png" class="img-active">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service1-inactive.png" class="img-inactive">
</li>
</li>
<li rel="tab2" id="img2">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service2-Highlighted.png" class="img-active">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service2-inactive.png" class="img-inactive"></li>
<li rel="tab3">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service3-Highlighted.png" class="img-active">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service3-inactive.png" class="img-inactive"></li>
<li rel="tab4" id="img2">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service4-Highlighted.png" class="img-active">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service-4inactive.png" class="img-inactive"></li>
<li rel="tab5">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service5-Highlighted.png" class="img-active">
<img src="http://www.lancewalkerdesigns.com/wp-content/uploads/2019/02/Service5-inactive.png" class="img-inactive"></li>
</ul>
<div class="tab_container">
<h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
<div id="tab1" class="tab_content">
<h2>Tab 1 content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.</p>
</div>
<!-- #tab1 -->
<h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
<div id="tab2" class="tab_content">
<h2>Tab 2 content</h2>
<p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p>
</div>
<!-- #tab2 -->
<h3 class="tab_drawer_heading" rel="tab3">Tab 3</h3>
<div id="tab3" class="tab_content">
<h2>Tab 3 content</h2>
<p>Nulla eleifend felis vitae velit tristique imperdiet. Etiam nec imperdiet elit. Pellentesque sem lorem, scelerisque sed facilisis sed, vestibulum sit amet eros.</p>
</div>
<!-- #tab3 -->
<h3 class="tab_drawer_heading" rel="tab4">Tab 4</h3>
<div id="tab4" class="tab_content">
<h2>Tab 4 content</h2>
<p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros.</p>
</div>
<!-- #tab4 -->
<h3 class="tab_drawer_heading" rel="tab5">Tab 5</h3>
<div id="tab5" class="tab_content">
<h2>Tab 5 content</h2>
<p>Integer ultrices lacus sit amet lorem viverra consequat. Vivamus lacinia interdum sapien non faucibus. Maecenas bibendum, lectus at ultrices viverra, elit magna egestas magna, a adipiscing mauris justo nec eros.</p>
</div>
<!-- #tab5 -->
</div>
<!-- .tab_container -->
</div>
kindly remove the "$" sign and replace with "jQuery" also change the class names to something non-generic so that the code does not get any other style of the theme.