Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am trying to create a progress bar and I want a cycle divider so that I can divide the situations I have
Can someone give me a solution ?
I tried to recreate your progress bar, see my fiddle here.
Just add a class .current to the .cycle you want to be currently highlighted. I used pure CSS on this with floats for better compatibility.
You can add numbers to the circles by adding .counter class to the .progress element.
.progress, .progress * { box-sizing: border-box; }
.progress {
width: 410px;
padding: 15px;
padding-left: 25px;
margin: 20px;
border-radius: 3px;
background: #ddd;
}
.progress .cycle {
width: 90px;
height: 10px;
border: 1px solid #111;
float: left;
position: relative;
background: #555;
}
.progress .cycle:first-of-type {
width: 0px;
}
.progress .cycle.current ~ .cycle {
background: #fff;
}
.progress .cycle:after {
content: '';
width: 30px;
height: 30px;
border: 1px solid #111;
border-radius: 50%;
position: absolute;
top: -12px;
right: -15px;
z-index: 2;
background: #555;
}
.progress .cycle.current:after {
background: deepskyblue;
}
.progress .cycle.current ~ .cycle:after {
background: #fff;
}
/* With Counters */
.progress.counter {
counter-reset: cycle;
}
.progress.counter .cycle:after {
counter-increment: cycle;
content: counter(cycle);
line-height: 30px;
text-align: center;
font-family: Arial;
}
Using Floats
<div class="progress">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
<div class="progress">
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
<div class="progress counter">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
I also created another demo here using the CSS3 flex-box approach.
The contents of the .progress element will now adjust according to the width of the element. This gives way to adding more cycles dynamically and adjusting the progress bar width without worrying about fixed widths. Also, this prevents the cycles from wrapping in very compressed widths.
body { font-family: Arial; font-weight: normal;}
.progress, .progress * { box-sizing: border-box; }
.progress {
padding: 25px;
margin: 20px;
border-radius: 3px;
display: flex;
flex-flow: row nowrap;
background: #ddd;
}
.progress .cycle {
height: 10px;
border: 1px solid #111;
flex: 1 0 auto;
position: relative;
background: #555;
}
.progress .cycle:first-of-type {
width: 0px;
flex: 0 0;
}
.progress .cycle.current ~ .cycle {
background: #fff;
}
.progress .cycle:after {
content: '';
width: 30px;
height: 30px;
border: 1px solid #111;
border-radius: 50%;
position: absolute;
top: -12px;
right: -15px;
z-index: 2;
background: #555;
}
.progress .cycle.current:after {
background: deepskyblue;
}
.progress .cycle.current ~ .cycle:after {
background: #fff;
}
/* With Counters */
.progress.counter {
counter-reset: cycle;
}
.progress.counter .cycle:after {
counter-increment: cycle;
content: counter(cycle);
line-height: 30px;
text-align: center;
font-family: Arial;
}
/* Fixed Width */
.fixed1 {
width: 400px;
}
.fixed2 {
width: 300px;
}
<h2>Using Flex</h2>
6 cycles (fixed width)
<div class="progress fixed1">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div style="clear: both; height: 0px;"> </div>
</div>
9 cycles (100% width)
<div class="progress">
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
</div>
5 cycles (fixed width, numbered)
<div class="progress counter fixed2">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
</div>
7 cycles (100%, numbered)
<div class="progress counter">
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle"></div>
<div class="cycle current"></div>
<div class="cycle"></div>
<div class="cycle"></div>
</div>
The only problem for the CSS3 flexbox approach is browser support. If the browser support is alright with you, then go for the flex-box approach :)
Related
I have to set up a menu website for an assignment and want to make a floating side div for the order summary
Figma reference : https://images2.imgbox.com/59/9f/qikiR5qq_o.jpg
Note: This is the first class with any coding so I'm really new to this.
I have the div and grid set up but can't add the content without messing things up.
The buttons at the bottom are always either not at the bottom or too bottom that it passes the div. Is the problem the div or the content?
Is there a way to remove the item using the remove button? I guess that's javascript?
I copied the code here: https://jsfiddle.net/93bqypdu/1/
<div class="grid-container">
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
</div>
<div class="side">
<img src="https://images2.imgbox.com/f6/96/uf0fayVE_o.png" width="150vh"
height="auto" class="pic">
<div class="content">Lorem Ipsum</div>
<div class="sbutt">
CANCEL
</div>
<div class="sbutt">
ORDER
</div>
</div>
If you are referring to the misaligned Order & Cancel buttons in your fiddle, we will need to add an additional div container for the buttons and assign additional classes to the buttons:
HTML
<div class="grid-container">
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
</div>
<div class="side">
<img src="https://images2.imgbox.com/f6/96/uf0fayVE_o.png" width_="150vh" height="auto" class="pic">
<div class="content">Lorem Ipsum</div>
<div class="sbutt-container">
<div class="sbutt cancel" onclick="window.location.href = 'Hiveworks.html';">
CANCEL
</div>
<div class="sbutt order" onclick="window.open('dashboard.html', '_blank', 'toolbar=no,scrollbars=no,resizable=no,top=100,left=800,width=380,height=380',overflow=hidden)">
ORDER
</div>
</div>
</div>
CSS
.side {
right: 1px;
float: right;
margin: 0;
margin-right: 1%;
width: 26vw;
height: 80%;
background-color: #ffffff;
border-radius: 10px;
border: 5px solid #EFA078;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
position: fixed;
padding: 0;
}
.content {
height: 51%;
background-color: #ffffff;
}
.pic {
margin-left: 20px;
margin-right: 20px;
max-width: 100%;
}
.sbutt-container {
position: absolute;
display: block;
height: auto;
bottom: 0;
width: 100%;
background-color: white;
height: auto;
padding: 10px;
box-sizing: border-box;
}
.sbutt {
background-color: #EFA078;
display: block;
text-align: center;
font-size: 10px;
vertical-align: middle;
padding: 5px 5px;
}
.cancel {
width: 30%;
float: left;
left: 0;
}
.order {
width: 50%;
float: right;
right: 0;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 1px;
grid-row-gap: 2px;
padding: 0;
width: 69vw;
height: 100%;
margin-left: 0.8%;
float: left;
}
.a {
margin: 0;
width: 150px;
height: 150px;
background-color: red;
}
Watch it in action: https://jsfiddle.net/q4n9rxhg/
I have a makeshift table of items that are rounded and equal borders by removing the bottom border from every container that ins't the first or the last.
What I'm trying to achieve, is when I hover, I'd like to have the entire "container" have a white border but it's not really possible at the moment because of the zero border. Does anyone have any suggestions? I'm assuming I have to do this with javascript.
Here is what I have so far (jsfiddle)
HTML
<div id="container">
<div class="item-container">
1
</div>
<div class="item-container">
2
</div>
<div class="item-container">
3
</div>
<div class="item-container">
4
</div>
<div class="item-container">
5
</div>
</div>
CSS
body {
background-color:#000;
}
#container { width:500px;}
.item-container { border:3px solid #7F7F7F;color:#7F7F7F;padding:10px;width:100%;border-bottom:0 }
.item-container:not(:first-child) { border-bottom:0; }
.item-container:hover { border:3px solid #fff;cursor:pointer;color:#fff; }
.item-container:first-child { border-top-right-radius:3px;border-top-left-radius:3px; }
.item-container:last-child { border-bottom:3px solid #7F7F7F;border-bottom-right-radius:3px;border-bottom-left-radius:3px; }
You may create the border differently:
body {
background-color: #000;
}
#container {
width: 500px;
color: #7F7F7F;
border-radius: 3px;
border-bottom: 3px solid;
}
.item-container {
border: 3px solid #7F7F7F;
border-bottom: 0;
padding: 10px;
position: relative;
}
.item-container:after {
content: "";
position: absolute;
bottom: -3px;
right: -3px;
left: -3px;
height: 3px;
background-color: #7F7F7F;
}
#container .item-container:hover {
border-color: #fff;
z-index: 2;
transition: 1s;
}
#container .item-container:hover::after {
background-color: #fff;
z-index: 2;
transition: 1s;
}
<div id="container">
<div class="item-container">
1
</div>
<div class="item-container">
2
</div>
<div class="item-container">
3
</div>
<div class="item-container">
4
</div>
<div class="item-container">
5
</div>
</div>
I've created a horizontal scroll, but I need some help with my javascript.
What I want is, when I click on the right button, it should align perfectly with the second box, and then the third one and so on. My javascript is set to scroll 100px. But I want it to align perfectly with the other boxes.
IMPORTANT! The horizontal scroll will be added to a responsive website. So I cant use px here :) Hope somebody can help :) Thanks
$(document).ready(function(){
$(".arrow-left").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "-="+100});
});
$(".arrow-right").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "+="+100});
});
});
.offer-pg-cont{
width: 100%;
overflow-x: auto;
margin: 0px;
}
span.arrow-left,span.arrow-right{
display: block;
position: absolute;
background-color: #555;
top: 40px;
color:white;
z-index: 2;
cursor: pointer;
}
span.arrow-left{
left: 0px;
}
span.arrow-right{
right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
background-color: #333;
}
.content{
width: 1500px;
}
.item-wrapper.offer-con{
background-color: #333 !important;
}
.offer-con .left-item h4 {
color: #fff;
font-weight: normal;
margin: 0px;
}
.offer-con .right-item{
float: right;
padding: 10px;
}
.offer-con .right-item h5{
color: #cb9944;
margin: 0px;
font-size: 14px;
}
.content > .portfolio-item{
width: 10%;
background-color:blue;
margin-right:50px;
float:left;
height:100px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
<div class='content'>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
</div>
</div>
You must be check the width and margin of your element and add to your scroll. But warning, your content width inside the box must be: the number of boxe X the (width + margin) of box:
Example: 6 x (200+50)
because otherwise your scroll will not full: Please try below
$(document).ready(function(){
var margin = parseInt($(".portfolio-item").css("margin-right").replace("px",""));
var width = parseInt($(".portfolio-item").width()) ;
var widthitem = width + margin;
console.log(widthitem)
$(".arrow-left").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "-="+widthitem});
});
$(".arrow-right").click(function(){
$(".offer-pg-cont").animate({scrollLeft: "+="+widthitem});
});
});
.offer-pg-cont{
width: 100%;
overflow-x: auto;
margin: 0px;
}
span.arrow-left,span.arrow-right{
display: block;
position: absolute;
background-color: #555;
top: 40px;
color:white;
z-index: 2;
cursor: pointer;
}
span.arrow-left{
left: 0px;
}
span.arrow-right{
right: 0px;
}
span.arrow-left:hover,.offer-pg span.arrow-right:hover{
background-color: #333;
}
.content{
width: 1500px;
}
.item-wrapper.offer-con{
background-color: #333 !important;
}
.offer-con .left-item h4 {
color: #fff;
font-weight: normal;
margin: 0px;
}
.offer-con .right-item{
float: right;
padding: 10px;
}
.offer-con .right-item h5{
color: #cb9944;
margin: 0px;
font-size: 14px;
}
.content > .portfolio-item{
width: 10%;
background-color:blue;
margin-right:50px;
float:left;
height:100px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
<div class='content'>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
<div class="col-md-3 portfolio-item"></div>
</div>
</div>
I tried using flexbox, as sweet as flexbox is for keeping it responsive, I quickly found out that it wasn't possible to selectively place a div in between rows when wrapping.
Tried doing it via inline-block rather than using flexbox, and it works fine if I ignore keeping the page responsive. But that's the crux of the matter; I need for it to stay responsive.
Regardless of how many items are in the row, it should display the bio row below the row of where the row of the selected (clicked) picture is. If a picture is selected in a different row, the original bio row is closed, and reopened in the row below the row of the newly selected picture.
This is the closest I've managed for flexbox:
.container {
max-width: 1220px;
border: 5px solid black;
display: flex;
margin: 0 auto;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.item {
border-width: 1px;
border-style: solid;
border-color: black;
width: 200px;
height: 300px;
}
.one {
background: #B5AC01;
}
.two {
background: #ECBA09;
}
.three {
background: #E86E1C;
}
.four {
background: #D41E45;
}
.five {
background: #D41EFF;
}
.six {
background: #D4FF45;
}
body {
margin: 0px;
padding: 0px;
}
<div class="container">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>
<div class="item five"></div>
<div class="item six"></div>
<div class="item four"></div>
<div class="item five"></div>
<div class="item six"></div>
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
</div>
That didn't work out, as it's apparently a toughie to be able to find a row and insert a div in between those rows. So I switched tacks and tried inline-block, only to find that while it's less complicated, it's still complicated.
.container {
max-width: 1220px;
border: 5px solid black;
margin: 0 auto;
font-size: 0;
}
.item {
display: inline-block;
width: 200px;
height: 300px;
margin: 0px;
padding: 0px;
border: 1px solid black;
font-size: 14pt;
color: white;
text-align: center;
line-height: 300px;
}
.bio {
height: 500px;
width: 100%;
background: #333;
color: white;
font-size: 24pt;
text-align: center;
line-height: 500px;
}
.selected {
box-shadow: inset 0 0 10px #000000;
font-weight: 800;
}
.row {
display: inline-block;
font-size: 0;
}
.subrow {
display: inline-block;
font-size: 0;
}
.one {
background: #B5AC01;
}
.two {
background: #ECBA09;
}
.three {
background: #E86E1C;
}
.four {
background: #D41E45;
}
.five {
background: #D41EFF;
}
.six {
background: #D4FF45;
}
body {
margin: 0px;
padding: 0px;
}
<div class="container">
<div class="row">
<div class="subrow">
<div class="item one">Pic</div>
<div class="item two">Pic</div>
<div class="item three selected">Clicked Pic</div>
</div>
<div class="subrow">
<div class="item four">Pic</div>
<div class="item five">Pic</div>
<div class="item six">Pic</div>
</div>
</div>
<div class="bio">
Bio goes here with pic
</div>
<div class="row">
<div class="subrow">
<div class="item four">Pic</div>
<div class="item five">Pic</div>
<div class="item six">Pic</div>
</div>
<div class="subrow">
<div class="item one">Pic</div>
<div class="item two">Pic</div>
<div class="item three">Pic</div>
</div>
</div>
</div>
Haven't had much luck. Would love a CSS/HTML only solution, but I'm open to Javascript/jQuery if that's necessary to pull it off. Ideas? Thanks in advance for your time.
Edit: someone posted a solution below suggesting using offsetTop to track wrappage to determine where to insert the bio row. While it's not a CSS/HTML only solution, it's not a bad solution. I'll experiment with the JS code some more tomorrow morning when I've had more sleep in me.
$(function(){
$('.item').click(function() {
var $this = $(this);
$('.selected').removeClass('selected');
$this.addClass('selected');
moveBio();
});
function moveBio() {
var $bio = $(".bio");
var itemsPerRow = 0;
$bio.hide(); // hide so doesn't affect calculations
var firstItem = $('.item').eq(0);
var itemTop = firstItem.position().top;
$('.item').each(function(i) { // loop till we hit next row
if($(this).position().top != itemTop) {
itemsPerRow = i;
return false;
}
});
selectedIndex = $(".item").index($('.selected')[0]);
selectedRowNum = Math.floor(selectedIndex / itemsPerRow) + 1;
$(".bio").insertAfter($(".item").eq((selectedRowNum * itemsPerRow) - 1)).show();
}
$(window).resize(function() {
$(".bio").hide(); // hide Bio so it doesn't interfere with the flex layout during resize
clearTimeout(window.resizedFinished);
window.resizedFinished = setTimeout(function(){
moveBio(); // show Bio again now that resize has stabilised
}, 250);
});
});
.container {
max-width: 1220px;
border: 5px solid black;
display: flex;
margin: 0 auto;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
position: relative;
}
.item {
border-width: 1px;
border-style: solid;
border-color: black;
width: 200px;
height: 300px;
}
.bio {
height: 500px;
width: 100%;
background: #333;
color: white;
font-size: 24pt;
text-align: center;
line-height: 500px;
}
.one {
background: #B5AC01;
}
.two {
background: #ECBA09;
}
.three {
background: #E86E1C;
}
.four {
background: #D41E45;
}
.five {
background: #D41EFF;
}
.six {
background: #D4FF45;
}
.selected {
box-shadow: inset 0 0 10px #000000;
font-weight: 800;
}
body {
margin: 0px;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>
<div class="item five"></div>
<div class="item six selected"></div>
<div class="bio">
Bio goes here with pic
</div>
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>
<div class="item five"></div>
<div class="item six"></div>
</div>
Added dynamic browser resizing
Here's an easier to resize example: http://jsbin.com/wamisiliza/edit?output
It's an interesting question. I have no idea with CSS. But I came up with a quite complicated javascript method.
First get the array of all the items, just like your first example. And for each item, compare the offsetTop with the former item, if the values are not equal, insert a new Bio row between the two rows.
Sorry about the poor English, looking forword to a better answer.
I'm trying to create a material design Stepper using Materializecss and I'm almost there, but I'm having some strange issue with the slideUp animation on each step.
When it's just about to end, there is an abrupt jump. I prepared a jsFiddle for you to see, but I'm also writing the code in here:
https://jsfiddle.net/c3xLwzru/
HTML:
<div class="row">
<div class="col l8 m10 s12 offset-l2 offset-m1">
<h3 class="light center-align purple-text text-darken-4">Subscription</h3>
<div class="card">
<div class="card-content">
<ul class="stepper">
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">1</div>Step 1</div>
<div class="step-content">
Example 1
<div class="step-actions">
<button class="waves-effect waves-dark btn" type="submit">SEGUINTE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">2</div>Step 2</div>
<div class="step-content">
Example 2
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">3</div>Step 3</div>
<div class="step-content">
Example 3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS (adding to Materializecss):
ul.stepper {
max-width: 800px;
}
.step:not(:last-child) {
position: relative;
margin-bottom: 24px;
}
.step:not(:last-child).active {
margin-bottom: 36px;
}
.step-title {
margin: 0 -20px;
cursor: pointer;
margin-bottom: 8px;
padding: 12px 44px 24px 20px;
display: block;
}
.step-title:hover {
background-color: #F0F0F0;
}
.step.active .step-title {
font-weight: 500;
}
.step-title .number {
margin-right: 10px;
display: inline-block;
height: 28px;
width: 28px;
color: white;
background-color: rgba(0,0,0,0.3);
border-radius: 50%;
text-align: center;
line-height: 28px;
font-weight: 400;
}
.step.active .number {
background-color: #9C27B0;
}
.step-content {
display: none;
height: calc(100% - 132px);
width: inherit;
overflow: auto;
margin-left: 41px;
margin-right: 24px;
}
.stepper>.step:not(:last-child)::after {
content: '';
position: absolute;
top: 50px;
left: 13.5px;
width: 1px;
height: calc(100% - 24px);
background-color: rgba(0,0,0,0.1);
}
.stepper>.step.active:not(:last-child)::after {
height: calc(100% - 12px);
}
.step-actions {
display: none;
padding-top: 16px;
margin-right: 24px;
}
.step.active .step-actions {
display: block;
}
And JS, using jQuery:
$(document).on("click", '.stepper .step-title:not(.active)', function () {
$(this).parent().addClass('active');
$(this).next().stop().slideDown('slow');
$(".step.active").not($(this).parent()).find(".step-content").stop().slideUp('slow');
$(".step.active").not($(this).parent()).removeClass('active');
});
I don't know what to do anymore. I tried everything and I couldn't find a reason for them to jump, man.
Could you help me?
Remove margin-bottom: 8px on .step-title and add margin-top: 8px to .step-content.
It should stop abrupt jump