I have to make this div in JSON and I have a problem with background-image, for example. This is how it looks like in HTML and CSS:
HTML:
<div class="bottom-1">
<div class="icons">
<img class="stick" src="images/sticker-white.png" />
<p class="time">2' 22</p>
<img class="play" src="images/play.png" />
</div>
<div class="text">
<h6>XXX</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut...</p>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
</ul>
</div>
<div class="bottom1-hover">
<img class="stick" src="images/sticker-white.png" />
<h6>XXX</h6>
<h5 >Dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor...</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut...</p>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
</ul>
</div>
CSS:
.bottom-1
position: relative
display: inline-block
height: 440px
width: 360px
float: left
margin-right: 20px
.icons
position: relative
background: url("../images/vid-block.jpg")
background-size: cover
background-repeat: no-repeat
background-position: center center
height: 225px
.stick, .time, .play
position: absolute
right: 0%
.stick
margin-top: 20px
margin-right: 20px
.time
margin-top: 130px
margin-right: 23px
color: white
.play
margin-top: 160px
margin-right: 20px
right: 0%
.text
background-color: white
height: 215px
overflow: hidden
h6
margin: 0
font:
size: 15px
weight: 300
padding-top: 32px
padding-left: 40px
p
margin: 0
font:
size: 20px
weight: 900
letter-spacing: -0.2px
padding-top: 3px
padding-left: 40px
padding-bottom: 25px
ul
display: block
margin-bottom: 30px
li
display: inline
list-style: none
a
text-decoration: none
font:
size: 14px
color: #ec3b3a
margin: 0 14px 0 0
border-bottom: 1px solid
padding-bottom: 6px
.bottom1-hover
visibility: hidden
position: absolute
background-image: url(../images/block-hover.jpg)
background-size: cover
background-position: center center
top: 0%
right: 0%
bottom: 0%
left: 0%
.stick
position: absolute
right: 0%
margin: 20px 20px
h6, h5, ul, p
position: absolute
color: white
bottom: 0%
padding: 0 41px
h6
padding: 40px
margin: 0
font:
size: 15px
weight: 300
margin-bottom: 314px
h5
padding: 40px
font:
size: 20px
weight: 700
margin-bottom: 240px
p
line-height: 26px
padding-left: 40px
padding-right: 0
font:
size: 15px
weight: 300
margin-bottom: 190px
ul
display: block
margin: 0
padding: 35px 41px 29px 39px
li
display: inline
list-style: none
margin-right: 9px
a
letter-spacing: -0.3px
text-decoration: none
border-bottom: 1px solid
padding-bottom: 4px
margin: 0
color: #ee5560
&:hover .bottom1-hover
visibility: visible
Could you show me how to make this .bottom1 div in JSON? I have to do this, becouse I want to make filtering news by category and one guy helped me with this: https://fiddle.jshell.net/3bxcjdt7/4/
Related
I'm trying to find a way to have text ellipsis at the point of contact with the righthand side of the green container. My impression at this time is that this might actually be impossible to do in CSS when the text box is part of an absolutely positioned wrapper.
Is there a way of doing this with CSS only? Is this only doable via javascript to dynamically calculate the width of the text box to create the illusion that it is bound by the size of the green container?
The solution cannot involve removing the absolute positioning. This is a simple extrapolation of a more complicated UX.
* {
background-color: white;
}
.container {
border: 3px solid lightgreen;
background: lightgray;
width: 10%;
}
.relative {
position: relative;
height: 100px;
border: 2px black solid;
width: 30%;
}
.absolute {
border: 2px solid blue;
position: absolute;
bottom: 10px;
left: 10px;
}
.text {
border: 2px solid red;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="container">
<div class="relative">
<div class="absolute">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</div>
</div>
</div>
</div>
You could set the absolute container to go to the right of 0. And set the position relative to the parent container which you want it to take as its relative reference, which, as you say, is the green one. –
* { background-color: white; box-sizing: border-box;}
.container {
position: relative;
border: 3px solid lightgreen;
background: lightgray;
width: 10%;
}
.relative {
height: 100px;
border: 2px black solid;
width: 30%;
}
.absolute {
border: 2px solid blue;
position: absolute;
bottom: 10px;
left: 10px;
right: 0;
}
.text {
border: 2px solid red;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<div class="container">
<div class="relative">
<div class="absolute">
<div class="text">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod
</div>
</div>
</div>
</div>
i have a navbar and a sticky header which you can check it out in snippet. Now if i click on my anchors, I get scrolled down to the right position, even the header doesn't overlap the text of the div except in one strange case.
the problem is when i'm in the #Home section, after clicking on any anchors ( no matter #AboutMe or #Skills), it sends me to the right position but the header overlaps the text a little bit which is not what i want.
so when i'm in #AboutMe section and click on #Skills anchor for example, nothing strange happens and everything is alright but the problem is when you are in the #Home section and you wanna get to another sections by clicking on their anchors, it sends you a little bit lower than where it should get you.
to find out what i mean exactly, you need to click on #AboutMe anchor twice when you are in #Home section ( same as #Skills anchor) then you will find out on first attempt, it's not doing the job properly and you need to click on that specific anchor, twice to get the result you're looking for.
NOTE: ignore other styles like texts positioning or images which are not really important here and the snippet i've provided is enough to show you what my issue is.
has anybody ever faced this strange issue?
JS fiddle link: https://jsfiddle.net/f715j3qh/120/
$(document).ready(function () {
var aboveHeight = $('header').height();
$(window).scroll(function () {
if ($(window).scrollTop() > aboveHeight) {
$('nav').addClass('fixed').css('top', '0').next().css('padding-top', '70px');
} else {
$('nav').removeClass('fixed').next().css('padding-top', '0');
}
});
});
.header {
text-align: center;
}
.header-top {
font-size: 3.5rem;
height: 210px;
background: #28223f;
}
.header-top-p {
padding: 40px 0 30px;
}
.header p{
color:#a8c6de;
letter-spacing:1px;
}
#header-nav {
background-color: yellow;
color: black;
justify-content: space-between;
height: 70px;
background-image: yellow;
width: 100%;
margin: 0 auto;
align-items: center;
z-index: 10000;
}
nav .mainMenu {
list-style: none;
display: flex;
}
#header-nav ul li {
position: relative;
margin: 0 auto;
}
#header-nav ul li.active {
opacity: 1;
text-shadow: -3px 3px 7px #4d4d00;
}
nav .mainMenu li a {
font-weight: bold;
color: black;
padding: 21px;
display: inline-block;
text-decoration: none;
font-size: 2rem;
}
.anchor {
display: block;
height: 70px;
margin-top: -70px;
visibility: hidden;
}
.fixed {
position: fixed;
top: 0;
z-index: 1;
}
#Matin-Pic {
background: #28223f;
min-height: 63vh;
}
.Matin-Picture {
margin: 15px auto;
color: #b3b8cd;
width: 380px;
background: brown;
text-align: center;
border-radius: 5px;
box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.75);
}
.cover-photo {
background: lightblue;
height: 130px;
width: 100%;
border-radius: 5px 5px 0 0;
}
.non-profile {
height: 130px;
width: 100%;
}
.non-profile img {
height: 160px;
width: 175px;
margin: auto 150px;
display: flex;
}
.profile {
height: 140px;
width: 105px;
border-radius: 50%;
border: 1px solid #1f1a32;
padding: 7px;
background: #292343;
margin: -70px 0 0 203px;
}
.profile-name {
font-size: 25px;
font-weight: bold;
margin: 25px 0 0 -100px;
}
.about {
margin-top: 35px;
line-height: 25px;
font-size: 1.7rem;
}
#Matin-Pic button {
margin: 15px 10px 30px;
}
.msg-btn, .follow-btn {
border-radius: 3px;
cursor: pointer;
background: lightblue;
color: brown;
border: 1px solid lightblue;
padding: 10px 25px;
}
.follow-btn {
background: transparent;
color: lightblue;
}
#Matin-Pic i {
font-size: 20px;
padding-left: 20px;
margin-bottom: 20px;
cursor: pointer;
color: lightblue !important;
}
.section-1 {
background: #fff;
height: auto;
width: 100%;
}
.section-1 img {
margin-top: 160px;
border-radius: 10px;
width: 100%;
height: auto;
}
#AboutMe-image img:nth-child(1) {
box-shadow: -5px -5px 10px blue;
display: block;
}
#AboutMe-image img:nth-child(2) {
display: none;
box-shadow: -5px 5px 10px blue;
}
.section-1-image img {
display: none;
box-shadow: 5px 5px 10px blue;
}
.section-1 h3 {
font-style: oblique;
font-weight: bold;
font-size: 3rem;
margin: 60px auto;
color: blue;
}
.section-1 p {
color: black;
}
.section-1 p:nth-child(2) {
margin: 0 auto 15px;
font-size: 1.6rem;
}
.section-1 p:nth-child(3) {
font-size: 1.4rem;
line-height: 2.5;
}
#AboutMe {
margin-bottom: 110px;
min-height: 78vh;
}
#AboutMe-Text {
padding-right: 50px;
}
#Skills {
background: rgba(168, 198, 222, 0.2);
margin: 0 auto;
border-radius: 300px 15px;
}
.section-2 ul {
list-style: none;
text-align: center;
}
.section-2 ul li {
margin: 52px auto 0;
font-size: 1.6rem;
color: black;
}
.section-2 ul li:first-child {
margin-top: 30px;
}
.section-2 ul li:last-child {
margin-bottom: 52px;
}
.section-2 img {
margin: 32px auto;
max-width: 220px;
height: 540px;
border-radius: 7px;
}
.main-titles {
text-align: center;
font-weight: bold;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Home">
<div class="container-fluid">
<div class="row">
<header class="header header-top">
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
</div>
<div class="header-top-p col-lg-4 col-md-4 col-sm-4 hidden-xs">
<p>text</p>
</div>
</header>
<nav id="header-nav">
<ul class="mainMenu">
<li class="Home">Home</li>
<li class="AboutMe">About Me</li>
<li class="Skills">Skills</li>
</ul>
</nav>
</div>
</div>
</section>
<!--end Home section and header-->
<!-- ***** card profile ***** -->
<div id="M-Pic" class="container-fluid">
<div class="M-Picture">
<div class="cover-photo">
<div class="non-profile">
<img src="Content/images/logo.png">
</div>
<img src="Content/images/MPic.jpg"
class="profile">
</div>
<div class="profile-name">text</div>
<p class="about">some text here<br>some text</p>
<button class="msg-btn" onclick="#">send</button>
<button onclick="#" class="follow-btn">button1
</button>
<div>
<a href="#"><i
class="fab fa-linkedin"></i></a>
<a href="#"><i
class="fab fa-instagram"></i></a>
<i class="fab fa-github"></i>
<i class="fab fa-twitter"></i>
</div>
</div>
</div>
<span class="anchor" id="AboutMe-anchor"></span>
<section id="AboutMe" style="padding-top:3rem;">
<div class="container">
<div class="row">
<div class="section-1">
<div id="AboutMe-image" class="col-md-5 col-sm-5 slide-in fade-in">
<img src="Content/images/bg2-com2.jpg" alt="an image" width="1280" height="850">
<img alt="an image" src="Content/images/bg2-com5.jpeg" width="1000" height="800">
</div>
<div id="AboutMe-Text" class="col-md-7 col-sm-7 slide-in fade-in">
<h3>some text here</h3>
<p>some text here</p>
<p>some text here<br> some text here
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostr.<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <br>
</p>
</div>
<div class="col-xs-12 section-1-image">
<!-- <img alt="an image" src="Content/images/bg2-com.jpg" width="598" height="399" class="fade-in slide-in"> -->
</div>
</div>
</div>
</div>
</section>
<!--end AboutMe-->
<!-- ***** skills ***** -->
<span class="anchor" id="Skills-anchor"></span>
<section id="Skills" style="padding-top:1rem;">
<div class="container-fluid">
<div class="row">
<div class="section-2">
<h2 class="main-titles fade-in-main-titles slide-in-main-titles">skills</h2>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-left">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</div>
<div class="col-lg-2 hidden-md hidden-sm hidden-xs">
<img src="Content/images/MySkills2.gif"
class="img-responsive center-block fade-in-skills slide-in-skills">
</div>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-right">
<ul>
<li>item9</li>
<li>item10</li>
<li>item11</li>
<li>item12</li>
<li>item13</li>
<li>item14</li>
<li>item15</li>
<li>item16</li>
</ul>
</div>
</div>
</div>
</div>
</section>
The button scrolls past the content I want to be shown.
I want the "About Us" section to be showed to the display of user (100vh), but it just scrolls past that.
Here's the code:
function smoothScroll(target, duration) {
var target = document.querySelector(target);
var targetPosition = target.getBoundingClientRect().top;
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
var timeElapsed = currentTime - startTime;
var run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t + b;
t--;
return (-c / 2) * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
var btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
smoothScroll(".text-slider", 600);
});
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i{
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your
Quality Management.
</p>
</div>
<div class="cta">
<button class="btn">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
As shown in the picture, it goes past "About Us" h1.
I want the page to stop at "About Us", and not go past it.
If you need more code, or more explanation please comment and I'll try my best!
Thank you in advance.
UPDATE (GIF):
That code that you use for smooth scroll is unnecessary. You should better use Element.scrollIntoView()
Element.scrollIntoView()
The Element interface's scrollIntoView() method scrolls the element's
parent container such that the element on which scrollIntoView() is
called is visible to the user. MDN - Element.scrollIntoView()
Use the following code should you want to scroll to About Us section when you click on Click for more button.
// 'Click for more' button
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background: #000;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i {
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your Quality Management.
</p>
</div>
<div class="cta">
<button class="btn" id="more-info">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
Recommend you to add background: #000; as fallback for background-image since sometimes image might not be loaded.
I'm creating a timeline and for this I need a dashed border for certain event times. But I can't combine the two styles together.
To put it simply, I need a solid border for most of the timeline events except a few, which have a common class, where I need a dotted border. I have the following code till now.
I need the border between the Break event till Event 4 to be dotted instead of solid. Any CSS/JS based solution would do.
.timeline {
border-left: 4px solid #a5a5a5;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background: rgba(255, 255, 255, 0.03);
color: rgba(0, 0, 0, 0.8);
font-family: "Source Sans Pro", sans-serif;
margin: 0 auto 50px auto;
letter-spacing: 0.5px;
position: relative;
line-height: 1.4em;
font-size: 1.03em;
padding: 30px;
list-style: none;
text-align: left;
font-weight: 100;
max-width: 30%;
}
.timeline .event:before,
.timeline .event:after {
position: absolute;
display: block;
top: 0;
}
.timeline .event:before {
left: -170px;
color: rgba(0, 0, 0, 1);
content: attr(data-date);
text-align: right;
font-weight: 100;
font-size: 0.9em;
min-width: 120px;
}
.timeline .event:after {
box-shadow: 0 0 0 4px #a5a5a5;
left: -37.85px;
background: #313534;
border-radius: 50%;
height: 11px;
width: 11px;
content: "";
top: 5px;
}
.timeline .event {
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
padding-bottom: 25px;
position: relative;
}
<ul class="timeline ">
<li class="event" data-date="09:30 - 10:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 1</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="10:00 - 10:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 2</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event break" data-date="10:30 - 11:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Break</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="11:00 - 11:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 4</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
You should change your approach
Try this:
.timeline {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background: rgba(255, 255, 255, 0.03);
color: rgba(0, 0, 0, 0.8);
font-family: "Source Sans Pro", sans-serif;
margin: 0 auto 50px auto;
letter-spacing: 0.5px;
position: relative;
line-height: 1.4em;
font-size: 1.03em;
padding: 30px;
list-style: none;
text-align: left;
font-weight: 100;
max-width: 30%;
}
.timeline .event:before,
.timeline .event:after {
position: absolute;
display: block;
top: 0;
}
.timeline .event:before {
left: -160px;
color: rgba(0, 0, 0, 1);
content: attr(data-date);
text-align: right;
font-weight: 100;
font-size: 0.9em;
min-width: 120px;
}
.timeline .event:after {
box-shadow: 0 0 0 4px #a5a5a5;
left: -8px;
background: #313534;
border-radius: 50%;
height: 11px;
width: 11px;
content: "";
top: 5px;
}
.timeline .event h3 {
margin-top: 0px;
}
.timeline .event {
border-left: 4px solid #a5a5a5;
border-bottom: 1px dashed rgba(255, 255, 255, 0.6);
padding-bottom: 0px;
padding-left: 40px;
position: relative;
}
.timeline .break {
border-left: 4px dotted #a5a5a5;
}
<ul class="timeline ">
<li class="event" data-date="09:30 - 10:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 1</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="10:00 - 10:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 2</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event break" data-date="10:30 - 11:00 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Break</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
<li class="event" data-date="11:00 - 11:30 ">
<div onclick="document.getElementById('id01').style.display='block'">
<h3 class="event-title">Event 4</h3>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</li>
I'm trying to make an image slider, that will slide Step 1 to --> Substep 1 --> Substep 2 --> Substep 3 --> Step 1 (right arrow) and backward (left arrow) from Step 1 to --> Substep 3 --> Substep 2 ---> Substep 1 --> Step 1
I've made a jQuery code (which you can see by visiting the jsfiddle link below), but it doesnt work properly and also very laggy and buggy.
I would appreciate any help whether you will correct the existing code or provide the new one.
Thank you.
https://jsfiddle.net/4j58q930/
.step__arrows {
position: absolute;
width: 300px;
padding: 19px 0px;
margin-top: 128px;
z-index: 1;
}
.step__arrows__previous {
width: 71px;
height: 67px;
float: left;
background-image: url('http://rockerbox.com/assets/img/general/left-arrow.png');
background-repeat: no-repeat;
background-position: 50% 50%;
}
.step__arrows__next {
width: 72px;
height: 67px;
float: right;
background-image: url('http://rockerbox.com/assets/img/general/right-arrow.png');
background-repeat: no-repeat;
background-position: 50% 50%;
}
.step__arrows__previous:hover {
background-color: rgba(255, 255, 255, .2);
cursor: pointer;
-webkit-border-radius: 0px 4px 4px 0px;
-moz-border-radius: 0px 4px 4px 0px;
border-radius: 0px 4px 4px 0px;
}
.step__arrows__next:hover {
background-color: rgba(255, 255, 255, .2);
cursor: pointer;
-webkit-border-radius: 4px 0px 0px 4px;
-moz-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
}
.step__info {
position: absolute;
bottom: 0;
}
.step__a {
color: #fff;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.5px;
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
border-radius: 28px;
display: inline-block;
background: #ff4e50;
margin-left: 21px;
font-weight: normal;
text-decoration: none;
width: 70px;
height: 20px;
line-height: 21px;
text-align: center;
}
.step__a:hover {
background: #3cb0fd;
}
.step__h2 {
color: #fff;
font-size: 24px;
padding: 15px 19px 9px 19px;
margin: 0;
font-weight: bold;
}
.step__p {
color: #ccc;
margin: 0;
padding: 0px 24px 15px 19px;
font-size: 14px;
font-family: Roboto;
font-weight: 300;
line-height: 1.3em;
}
.step__1 {
float: left;
width: 300px;
height: 400px;
background-image: url('http://images.askmen.com/responsive/channels/cars/car_tips.jpg');
background-size: cover;
position: relative;
}
.slider__1 ul {
margin: 0;
padding: 0;
list-style: none;
}
.slider__1 ul li {
margin: 0;
padding: 0;
}
.slider__1 {
float: left;
width: 300px;
height: 400px;
position: relative;
}
.substep__1 {
float: right;
width: 300px;
height: 400px;
background-image: url('http://static2.consumerreportscdn.org/content/dam/cro/cars/sports/buying_lg_sports_cars.jpg');
background-size: cover;
position: relative;
}
.substep__2 {
float: right;
width: 300px;
height: 400px;
background-image: url('http://i.kinja-img.com/gawker-media/image/upload/texbia6a0wfjdclbjlrw.jpg');
background-size: cover;
position: relative;
}
.substep__3 {
float: right;
width: 300px;
height: 400px;
background-image: url('http://indianautosblog.com/wp-content/uploads/2013/12/2015-Ford-Mustang-front-three-quarters-3-leaked-press-shot.jpg');
background-size: cover;
position: relative;
}
<div class="slider__1">
<div class="step__arrows">
<span class="step__arrows__previous"></span>
<span class="step__arrows__next"></span>
</div>
<ul>
<li class="step__1">
<div class="step__info">
<a class="step__a" href="#">Step 1</a>
<h2 class="step__h2">Lorem ipsum dolor sit amet,</h2>
<p class="step__p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</li>
<li class="substep__1">
<div class="step__info">
<a class="step__a" href="#">Substep 1</a>
<h2 class="step__h2">In enim justo</h2>
<p class="step__p">Quisque libero libero, dictum non turpis in, luctus semper lorem. Donec rhoncus a leo sit amet facilisis.</p>
</div>
</li>
<li class="substep__2">
<div class="step__info">
<a class="step__a" href="#">Substep 2</a>
<h2 class="step__h2">Nullam dictum</h2>
<p class="step__p">Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>
</li>
<li class="substep__3">
<div class="step__info">
<a class="step__a" href="#">Substep 3</a>
<h2 class="step__h2">Aenean vulputate</h2>
<p class="step__p">Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
</div>
</li>
</ul>
</div>