How to remove horizontal line before first element and after last element in horizontal timer with swipper implementation in below article, i removed left:42% in css, so it is shifted left to remove left horizontal but right horizontal line is not able to remove -
.status span:before {
content: '';
width: 25px;
height: 25px;
background-color: #e8eeff;
border-radius: 25px;
border: 4px solid #3e70ff;
position: absolute;
top: -15px;
**left: 0%;**
transition: all 200ms ease-in;
}
codepen Horizontal Timeline swipper
Since the line is the border of the element with the text, it can never get smaller than the element/text itself.
I´d suggest to use an extra element with the width you need instead of the border.
To do this just remove the line
border-top: 4px solid #3e70ff;
from your css-class .status and add the following css classes:
.status:before {
content: "";
position: absolute;
width: 100%;
height: 4px;
bottom: 100%;
left: 0;
background-color: #3e70ff;
}
.swiper-slide:first-of-type .status:before {
width: 50%;
left: 50%;
}
.swiper-slide:last-of-type .status:before {
width: 50%;
}
I would recommend to work with a spacer element inside of each swiper-slide which will be only visible inside the first and last element. It also has the same restriction as the old answer, the background needs to have a uniform color.
HTML code
<div class="swiper-container">
<div class="swiper-wrapper timeline">
<div class="swiper-slide" v-for="item in steps">
<div class="status">
<span>{{item.title}}</span>
<div class="overlapper"></div>
</div>
</div>
</div>
</div>
CSS
.overlapper {
background-color: white;
position: absolute;
width: 50%;
height: 4px;
z-index: 1;
top: -4px;
display: none;
}
.swiper-slide:first-child .overlapper {
left: 0;
display: block;
}
.swiper-slide:last-child .overlapper {
right: 0;
display: block;
}
Codepen
https://codepen.io/AlexWayhill/pen/XWmYyvJ
Old answer
One option that only works on uni-color backgrounds would be to add "terminators" to overlap the border-top that is defined on the .swiper-slide element. It will also need some tweeking to get the right width of the .swiper-terminator otherwise it will overlap in the wrong spot.
HTML Code
<div class="swiper-wrapper timeline">
<div class="swiper-terminator swiper-left"></div>
<div class="swiper-slide" v-for="item in steps">
<div class="status">
<span>{{item.title}}</span>
</div>
</div>
<div class="swiper-terminator swiper-right"></div>
CSS
.swiper-terminator.swiper-left {
left: 0;
}
.swiper-terminator.swiper-right {
right: 0;
}
.swiper-terminator {
background-color: white;
position: absolute;
width: 20px;
padding: 20px;
height: 30px;
z-index: 1;
}
.status span {
/* Add the z-index to position the bubble over the terminator */
z-index: 3;
}
.timeline {
position: relative;
}
Codepen
https://codepen.io/AlexWayhill/pen/KKderQx
Related
Hello i'm stuck with this little problem my customer wants to do this in react native the orange border and i really suck in css how can i do it please ?
By skewing a containing parent and counter skewing its child elements you can create what you need with a few lines of CSS:
/* Solution */
.item { transform: skew(-15deg) } /* skew */
.item .content { transform: skew( 15deg) } /* reset */
/* Just eye-candy */
.wrapper { display: flex; gap: 0.5rem }
.item { border: 2px solid orange }
.item .content { padding: 0.5rem 1rem }
.item:hover { cursor: pointer; background-color: hsl(0,0%,96%); border-color: black }
<div class="wrapper">
<div class="item">
<div class="content">some content</div>
</div>
<div class="item">
<div class="content">some content</div>
</div>
<div class="item">
<div class="content">some content</div>
</div>
</div>
You can use the transform skew function in css. I would use it on an after pseudo element, so the content of the div will not be deformed. Like so:
.losange {
position: relative;
width: 100px;
padding: 10px;
}
.losange:after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 2px solid orange;
transform: skew(-0.25rad);
pointer-events: none;
}
<div class="losange">test</div>
EDIT:
If you also want the background color to be skewed, you can do this by adding it to the after element pseudo element and setting the z-index to -1, which will put it behind the content of the losange.
.losange {
position: relative;
width: 100px;
padding: 10px;
}
.losange:after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 2px solid orange;
transform: skew(-0.25rad);
pointer-events: none;
background-color: #eeeeee;
z-index: -1;
}
<div class="losange">test</div>
I have stumbled upon a frontend problem where I cannot figure out what the best approach is.
The simplified layout I need to achieve can be looked up here: https://jsfiddle.net/kw56sa84/
content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.end-of-body-block {
width: 50%;
margin: 0 auto;
padding: 30px;
border: 1px solid #a00;
position: relative;
transform: translateY(50%);
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9)
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
<div class="footer">
Links and other information that should be visible
</div>
</div>
Basically what I have are content and footer and there is a block that should be 50% in the body and 50% in the footer, and have both element contents moved by a dynamic half-height of the connecting element. In the jsfiddle example, the footer content should have some sort of padding. The height of all elements is dynamic.
The main question I suppose here is - is it possible to achieve this with CSS (solution may include grids, flexboxes), or am I out of luck and should seek a JS solution?
EDIT Here you can see a simplified design that should be achieved:
Thanks in advance!
Based on your explication you want that class: "end-of-body-block" be positionned dynamicly between body and footer.
The basic idea is to remove the red box from the normal flow by using position: absolute; but by doing that, it is loosing basic position strucutre. So we fix it with parent with position: relative;. Which is classic move.
To do so, I added position:relative; in .content:
.content{
position:relative;
}
And then I postionned absolute your red block as followed:
.end-of-body-block{
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
EDIT
JS to add dynamic padding on content and footer.
DEMO:
var heightRed = document.getElementsByClassName('end-of-body-block')[0].offsetHeight;
heightRed = (heightRed / 2) + 2 + 'px';
var content = document.getElementsByClassName('content')[0]
var footer = document.getElementsByClassName('footer')[0]
content.style.paddingBottom = heightRed;
footer.style.paddingTop = heightRed;
.content{
position:relative;
}
.content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.end-of-body-block {
width: 50%;
margin: 0 auto;
padding: 30px;
border: 1px solid #a00;
/*position: relative;
transform: translateY(50%);*/
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9);
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
<div class="footer">
Links and other information that should be visible
</div>
</div>
After a few hours of trial and error, I came up with an idea of how to solve this. It's a real hacky solution, but in my case it actually works, maybe someone else will find it useful.
So in my case the footer had an image background, thus making it more difficult to think of this, however.. solution here could be to simulate the same background as the other part where your element isn't.
To elaborate, instead of trying to move the other element's content, make it seem that it does so. I moved the red box to the footer instead, so it takes up the whole height it needs. Then add a pseudo (before) element as absolute to the red box's parent and make it full width and 50% of it's height. See here for example https://jsfiddle.net/co35svtd/4/
.content {
position: relative;
z-index: 0;
width: 100%;
display: inline-block;
}
.wrapper {
background: #eee;
}
.content-block {
min-height: 100px;
background: #aaa;
border: 1px solid;
}
.footer-block-wrapper {
position: relative;
}
.end-of-body-block {
width: 50%;
margin: 0 auto 0;
padding: 30px;
border: 1px solid #a00;
text-shadow: 0 0 2px #fff;
background: rgba(250, 180, 180, 0.9);
box-sizing: border-box;
z-index: 10;
}
.end-of-body-block:before {
content: '';
z-index: -1;
position: absolute;
height: 50%;
width: 100%;
top: 0;
left: 0;
right: 0;
background: #fff;
}
.footer {
min-height: 300px;
background: #0A152B;
color: #fff;
position: relative;
z-index: 100;
}
<div class="wrapper">
<div class="content">
<div class="content-block">Some content</div>
<div class="content-block">Some content</div>
</div>
<div class="footer">
<div class="footer-block-wrapper">
<div class="end-of-body-block">
Some text here that can have into a dynamic height, and responsively height increases.
</div>
</div>
Links and other information that should be visible
</div>
</div>
I know it's not the answer I was looking for, but this hack does the job for me.
I want to change the display of the elements with the .slide-prev and .slide-next classes. As I'm using a slide plugin, it automatically creates the navigation elements outside the ul, so the only way the display change worked was with javascript. The problem is that it did not work as it should.
When I move the mouse over the div with the class .intro-noticias the elements appear, and when I leave they disappear, so far so good. The problem is when I hover over the elements .slide-prev and .slide-next, they are shaking, disappearing depending on where the arrow is and do not activate the hover.
It may be that I let something simple go by, but I really have not found it, if anyone knows what's causing it, I appreciate it.
Video demonstrating the problem
$(".intro-noticias").hover(function() {
$('.slide-prev,.slide-next').css("display", "block");
}, function() {
$('.slide-prev,.slide-next').css("display", "none");
});
.intro-noticias {
width: 100%;
height: 85vh;
margin-top: 70px;
}
.slide-prev {
z-index: 20;
position: absolute;
top: 70px;
left: 0;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-prev:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
left: 2px;
display: block;
background: url("img/icones/previous.png") left center no-repeat;
}
.slide-prev:hover {
background: red;
transition: all 0.2s ease-in;
}
.slide-next {
z-index: 20;
position: absolute;
top: 70px;
left: 40px;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-next:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
right: 2px;
display: block;
background: url("img/icones/next.png") right center no-repeat;
}
.slide-next:hover {
background: red;
transition: all 0.2s ease-in;
}
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next
You can wrap ul and anchors into the <div class="cont"> and bind events mouseenter and mouseleave to this div.
<div class="cont">
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next
</div>
$(".cont").mouseenter(function() {
$('.slide-prev,.slide-next').css("display", "block");
});
$(".cont").mouseleave(function() {
$('.slide-prev,.slide-next').css("display", "none");
});
I am trying to move content left and right using on click event and need to stop by margins on the left or right. list-items generating dynamically. Here is the code I tried so far but no worth. By my code it is moving the container left and right. But I need to move list-items left and right.
How can I do this.?
function moveList(px) {
$('.list').animate({
'marginLeft': px
});
}
.list {
white-space: nowrap;
overflow: auto;
height: 85px;
padding: 10px 0;
margin: 25px 0;
position: relative;
}
.list-item {
display: inline-block;
min-width: 20%;
max-width: 150px;
padding: 10px 0;
border-radius: 3px;
background: #eee;
border: 1px solid #ddd;
margin: 0 5px;
cursor: pointer;
text-align: center;
}
#right-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
right: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/right-arrow.png) no-repeat #000;
}
#left-arrow {
width: 40px;
height: 40px;
display: block;
position: absolute;
left: 0;
top: 35px;
z-index: 999;
border-radius: 50%;
background: url(img/left-arrow.png) no-repeat #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right-arrow" onclick="moveList('-=50px')"></div>
<div id="left-arrow" onclick="moveList('+=50px')"></div>
<div class="list">
<div class="list-item">1</div>
<div class="list-item">2</div>
<div class="list-item">3</div>
<div class="list-item">4</div>
<div class="list-item">5</div>
<div class="list-item">6</div>
<div class="list-item">7</div>
<div class="list-item">8</div>
<div class="list-item">9</div>
<div class="list-item">10</div>
</div>
Try script like this:
function moveList(px) {
$(".list-item:first-child").animate({
'marginLeft': px
});
}
It will be easier for you if you create a element that wraps the .list-items with:
position: absolute;
top: 0;
left:0;
Then, instead of modify the margin, you should modify the left value.
If you want to use semmantic content for your web it's better to use another HTML structure, not only div. For example:
<nav> <!-- As this is containing page navigation elements-->
<ol> <!-- As this is an ordered list of elements-->
<li> <!-- Each list element-->
First element
</li>
<li>
Second element
</li>
</ol>
</nav>
Simply translate them.
Define this (given that clicker is the selector for your click event).
var xValue = -5;
$("#clicker").on('click', function(e) {
e.preventDefault();
$(".list-item").css("transform","translateX("+xValue+")");
xValue -= 5;
});
Translate will not mess with your markup, and only move the objects it's working on to the left (in this case).
By keeping xValue you can keep moving them to the left by repeatedly clicking clicker.
I have div containing the background image but i want to make that image as clickable and pointed to somewhere site. Is it possible to do this in css or jquery
HTML:
<div id="logincontainer">
</div>
css :
#loginContainer {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat scroll center center #FF660D; /*for example */
border-color: #FFFFFF;
border-image: none;
border-right: medium solid #FFFFFF;
border-style: none solid solid;
border-width: medium;
left: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
min-height:200px;
right: 0;
top: 0;
vertical-align: super;
width: 100%;
z-index: 9999999;
}
Here is the http://jsfiddle.net/a39Va/16/
I am not sure is there is a way to make the background image as clickable which is pointed in div?
Any suggestion would be great.
Just do something like:
<div id="loginContainer'></div>
Or you can do that as well via JavaScript and jQuery
$('#loginContainer').click(function(e) { <Whatever you want to do here> });
You need to fix the z-index of the background element, and as others have said, add an anchor or a javascript action. Also, I added some sample of the rest of the content on the page. You need to see how the two interact with each other.
Here's an updated jsFiddle
HTML
<div id="loginContainer">
</div>
<div class="content">
<p>Something</p>
</div>
CSS
#loginContainer {
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat center #FF660D;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
}
#loginContainer a {
display: block;
height: 100%;
width: 100%;
}
.content {
z-index: 2;
position: relative;
width: 200px;
height: 100px;
background: #fff;
margin: 30px 0 0 30px;
}
Here's a Fiddle
HTML
<div id="logincontainer" data-link="http://google.com"></div>
jQuery
$(function() {
$('#logincontainer').hover(function() {
var divLink = $(this).attr('data-link');
$(this).wrap('');
});
});
Why not using an anchor ?
<a href="link" id="logincontainer">
</a>
i updated your jsFiddle
otherwise :
you can click on any element to behave like a link with jQuery.
you can surround your <div> in an anchor if you use the html5 <!DOCTYPE> ( Otherwise invalid )