I am trying to allow an element to be dragable/resizable inside of another element but not in the area of another child of that element.
Given the following table row:
I want to be able to drag and resize the blue area anywhere within the table row, but not where the grey table cell is (i.e. it would move/resize freely within the first four cells but be stopped when it reaches the last one).
I can constrain it to the table row using the containment: '.middle tr' or containment: $el.closest('tr'), (where $el is a selector for the blue element) options in JQuery.draggable and JQuery.resizable, but I haven't been able to find a way that works for excluding the last column from the containment.
How do you exclude an element from the containment area?
Example with code:
$(function() {
$("td").droppable({
drop: function(event, ui) {
var draggable = ui.draggable;
var newLeft = draggable.offset().left - draggable.closest(".middle table").offset().left;
var childNum = Math.round((newLeft + 100) / 100);
var newContainer = $(this).closest('tr').find('td:nth-of-type(' + childNum + ')');
draggable.css({
top: '',
left: ''
});
newContainer.append(draggable);
},
});
$(".planning-spot").resizable({
grid: [100, 10000000],
handles: "e",
containment: ".middle tr"
}).each(function() {
var $el = $(this);
$el.draggable({
containment: $el.closest('tr'),
axis: 'x',
});
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
overflow: hidden;
table-layout: fixed;
width: 500px;
margin: 20px;
}
tr {
position: relative;
background: #FFF;
}
td, th {
position: relative;
padding: 0;
width: 100px;
height: 30px;
border: 1px solid #000;
}
.planning-spot {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 90px;
border-radius: 10px;
margin: 5px;
text-align: center;
z-index: 1;
cursor: pointer;
color: #FFF;
width: 290px;
background: #3CF;
}
.no-planning {
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="middle">
<table>
<tbody>
<tr>
<td>
<div></div>
<div class="planning-spot">18 / 20</div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td class="no-planning">
<div></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
http://jsfiddle.net/xpvt214o/668937/
I'm aware that I can check the location during the drop and stop functions of droppable and resizable respectively and reverse the action if needed (which is my current solution), but I'm looking for a solution to prevent it being moved into an "unwanted" area in the first place.
You can determine the draggable area with getBoundingClientRect() and assign containment to an array wich take the width of each resizeable elements
$(function() {
$("td").droppable({
drop: function(event, ui) {
var draggable = ui.draggable;
var newLeft = draggable.offset().left - draggable.closest(".middle table").offset().left;
var childNum = Math.round((newLeft + 100) / 100);
var newContainer = $(this).closest('tr').find('td:nth-of-type(' + childNum + ')');
draggable.css({
top: '',
left: ''
});
newContainer.append(draggable);
},
});
$(".planning-spot").resizable({
grid: [100, 10000000],
handles: "e",
containment: ".middle tr"
}).each(function() {
var $el = $(this);
var bBoxTr = $el.closest('tr')[0].getBoundingClientRect();
var bBoxTd = $el.closest('tr').children(".no-planning")[0].getBoundingClientRect();
var x1 = bBoxTr.x, y1 = bBoxTr.y;
var x2 = bBoxTr.right-bBoxTd.width, y2 = bBoxTr.bottom;
$el.draggable({
// containment: $el.closest('tr'),
containment: [x1,y1,x2-$el.width()-10,y2],
axis: 'x',
});
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: no-collapse;
overflow: hidden;
table-layout: fixed;
width: 500px;
margin: 20px;
}
tr {
position: relative;
background: #FFF;
}
td, th {
position: relative;
padding: 0;
width: 100px;
height: 30px;
border: 1px solid #000;
}
.planning-spot {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 90px;
border-radius: 10px;
margin: 5px;
text-align: center;
z-index: 1;
cursor: pointer;
color: #FFF;
width: 290px;
background: #3CF;
}
.no-planning {
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="middle">
<table>
<tbody>
<tr id="test">
<td>
<div></div>
<div class="planning-spot">18 / 20</div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td class="no-planning">
<div></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Edit:
Since getBoundingClientRect(); is not supported by all browsers, better go with jquery features, position(), height() and width();.
See the revised snippet below, the function getDragArea returns an array with the coordinates of the drag area. I add a listener (mouseover) which permit to reset drag area when needed.
The table is wrapped in a scrolling div to test behavior.
$(function() {
$("td").droppable({
drop: function(event, ui) {
var draggable = ui.draggable;
var newLeft = draggable.offset().left - draggable.closest(".middle table").offset().left;
var childNum = Math.round((newLeft + 100) / 100);
var newContainer = $(this).closest('tr').find('td:nth-of-type(' + childNum + ')');
draggable.css({
top: '',
left: ''
});
newContainer.append(draggable);
},
});
$(".planning-spot").resizable({
grid: [100, 10000000],
handles: "e",
containment: ".middle tr"
}).each(function() {
$(this).on('mouseover',function(){
$(this).draggable({
containment: getDragArea($(this)),
axis: 'x',
});
})
});
function getDragArea($el){
var $tr = $el.closest('tr');
var $tds = $el.closest('tr').children(".no-planning");
var width = $el.closest('tr').width()-$tds.width()*$tds.length;
var height = $el.closest('tr').height();
var position = $el.closest('tr').position();
var x1 = position.left, y1 = position.top;
var x2 = x1+width, y2 = y1+height;
return [x1,y1,x2-$el.width()-10,y2]
}
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: no-collapse;
overflow: hidden;
table-layout: fixed;
width: 500px;
margin: 20px;
}
tr {
position: relative;
background: #FFF;
}
td, th {
position: relative;
padding: 0;
width: 100px;
height: 30px;
border: 1px solid #000;
}
.planning-spot {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 90px;
border-radius: 10px;
margin: 5px;
text-align: center;
z-index: 1;
cursor: pointer;
color: #FFF;
width: 290px;
background: #3CF;
}
.no-planning {
background: #CCC;
}
.wrapper{
overflow:auto;
width:500px;
height:120px;
border: solid 1px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="middle">
<table>
<tbody>
<tr id="test">
<td>
<div></div>
<div class="planning-spot">18 / 20</div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td class="no-planning">
<div></div>
</td>
<td class="no-planning">
<div></div>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
I did the trick by checking if drag event will cause collision with non dragable item.
Checkout code below:
$(function() {
var nonDragableItems = $(".no-planning");
$("td").droppable({
drop: function(event, ui) {
var draggable = ui.draggable;
var newLeft = draggable.offset().left - draggable.closest(".middle table").offset().left;
var childNum = Math.round((newLeft + 100) / 100);
var newContainer = $(this).closest('tr').find('td:nth-of-type(' + childNum + ')');
draggable.css({
top: '',
left: ''
});
newContainer.append(draggable);
},
});
function onDrag(e, ui){
var dragElemRect = ui.helper[0].getBoundingClientRect();
for(var i=0;i<nonDragableItems.length;i++){
var elemRect = nonDragableItems[i].getBoundingClientRect();
if(areColliding(dragElemRect, elemRect))
return false;
}
}
function areColliding(rect1, rect2){
if(rect1.bottom <= rect2.top ||
rect1.top >= rect2.bottom ||
rect1.left >= rect2.right ||
rect1.right <= rect2.left)
return false;
return true;
}
$(".planning-spot").resizable({
grid: [100, 10000000],
handles: "e",
containment: ".middle tr"
}).each(function() {
var $el = $(this);
$el.draggable({
containment: $el.closest('tr'),
axis: 'x',
drag: onDrag
});
});
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
overflow: hidden;
table-layout: fixed;
width: 500px;
margin: 20px;
}
tr {
position: relative;
background: #FFF;
}
td, th {
position: relative;
padding: 0;
width: 100px;
height: 30px;
border: 1px solid #000;
}
.planning-spot {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 90px;
border-radius: 10px;
margin: 5px;
text-align: center;
z-index: 1;
cursor: pointer;
color: #FFF;
width: 290px;
background: #3CF;
}
.no-planning {
background: #CCC;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">
<div class="middle">
<table>
<tbody>
<tr>
<td>
<div></div>
<div class="planning-spot">18 / 20</div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td class="no-planning">
<div></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
I intend to use chosen select in my code, but it is returning an error and it doesn't work. I leave my code here:
var linha = ``;
linha += `<tr id="5">
<td class="text-center text-muted" style="vertical-align: middle;"><div class="tooltip-demo"><div class="most dropdown"><div class="caption"> <i class="pe-2x pe-va pe-7s-user"></i></div><div class="list">
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
<div class="item">Option 4</div>
<div class="item">Option 5</div>
</div></div><div class="tooltip">Atribuir Membro</div></div></td>
</tr>`;
$("#daberto tbody").html(linha);
$(".list").chosen({
disable_search_threshold: 5,
no_results_text: "Sem resultados",
placeholder_text_multiple: "Selecione opções",
width: "100%"
});
$(function() {
$('.dropdown > .caption').on('click', function() {
$(this).parent().toggleClass('open');
});
$('.dropdown > .list > .item').on('click', function() {
$('.dropdown > .list > .item').removeClass('selected');
$(this).addClass('selected').parent().parent().removeClass('open').children('.caption').text( $(this).text() );
});
$(document).on('keyup', function(evt) {
if ( (evt.keyCode || evt.which) === 27 ) {
$('.dropdown').removeClass('open');
}
});
$(document).on('click', function(evt) {
if ( $(evt.target).closest(".dropdown > .caption").length === 0 ) {
$('.dropdown').removeClass('open');
}
});
});
.tooltip-demo {
position: relative;
}
.tooltip {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: .1s;
position: absolute;
top: -.75rem;
left: 50%;
transform: translate(-50%, -100%);
background-color: #333;
color: #eee;
padding: .25rem .75rem;
white-space: nowrap;
border-radius: 3.5px;
}
.most:hover ~ .tooltip,
.most:focus ~ .tooltip,
.most.active ~ .tooltip {
opacity: 1;
visibility: visible;
}
div.dropdown {
position: relative;
}
div.dropdown > div.caption {
padding: 11px 40px;
border-radius: 3px;
cursor: pointer;
}
div.dropdown > div.list {
position: absolute;
background-color: #ffffff;
width: 100%;
border-radius: 0 0 3px 3px;
display: none;
margin-top: 15px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
div.dropdown > div.list > div.item {
padding: 11px 14px;
cursor: pointer;
}
div.dropdown > div.list > div.item.selected {
font-weight: bold;
}
div.dropdown > div.caption:hover,
div.dropdown > div.list > div.item:hover {
color: #29a4f6;
}
div.dropdown.open > div.caption {
border-radius: 3px 3px 0 0;
}
div.dropdown.open > div.list {
display: block;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon#1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.7.0/chosen.jquery.min.js"></script>
<table class="align-middle mb-0 table table-borderless table-striped table-hover daberto" id="daberto">
<thead>
<tr>
<th class="text-center col-2">Destinatário</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
If you remove this code:
$(".list").chosen({
disable_search_threshold: 5,
no_results_text: "Sem resultados",
placeholder_text_multiple: "Selecione opções",
width: "100%"
});
The code works correctly. But I want the choice options that appear when clicking on the tag to open with the chosen select formatting, but it's not working.
Also, the chosen select appears as soon as the table is returned. It should only appear in the pick list when clicking on the tag.
I leave here an image of what I want:
I am trying to get the new size of a div after resizing. However when using ui.size.height or $(e.target).height() I am getting instead the original height of the element.
function allowResizing(el){
$(el).resizable({
animate: true,
containment: "parent",
helper: "ui-resizable-helper",
minWidth: 250,
minHeight: 250,
grid: [20, 20],
stop: function( e, ui ) {
console.log("height: " + $(e.target).height())
console.log("height: " + ui.size.height)
console.log("originalHeight: " + ui.originalSize.height)
}
});
}
All three logs write the same value. When I try this code on any other div on another page I get the right values.
My hmtl:
<style>
.containment-wrapper > .row{
border: 3px solid white;
width: 100%;
height: calc(100vh - 200px);
min-height: 200px;
position:relative;
}
.ui-resizable-helper {
border: 2px dotted #b1b1b1;
}
</style>
<div class="containment-wrapper">
<div class="row">
<div id="resizable" class="ui-draggable ui-draggable-handle" style="position: absolute !important; outline: 1px solid white;">
<div class="Container_Header">
<span style="display: block; padding: 0 10px" class="Text_H2">$title</span>
</div>
<p style="padding: 10px">
Some text
</p>
</div>
<script type="text/javascript">
allowResizing("#resizable")
</script>
</div>
</div>
I also use ui.Draggable on the same element but also tried without it.
Appreciate every help. Thank you
Since you have defined a Helper, you will want to review the Size of that element.
$(function() {
function allowResizing(el) {
$(el).resizable({
animate: true,
containment: "parent",
helper: "ui-resizable-helper",
/*
minWidth: 250,
minHeight: 250,
grid: [20, 20],
*/
resize: function(e, ui) {
log("Height: " + ui.size.height);
},
stop: function(e, ui) {
log("El height: " + $(ui.element).height());
log("Stop height: " + ui.size.height);
log("Original Height: " + ui.originalSize.height);
log("Helper Height: " + ui.helper.height());
}
});
}
function log(str) {
var log = $("#log").length ? $("#log") : $("<div>", {
id: "log"
}).appendTo("body");
log.append(`<p>${str}</p>`).scrollTop(log.prop("scrollHeight"));
}
allowResizing("#resizable");
});
.containment-wrapper>.row {
border: 3px solid white;
width: 100%;
height: calc(100vh - 200px);
min-height: 200px;
position: relative;
}
.ui-resizable-helper {
border: 2px dotted #b1b1b1;
}
#log {
font-size: 65%;
height: 4em;
overflow: auto;
}
#log p {
padding: 0;
margin: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="containment-wrapper">
<div class="row">
<div id="resizable" style="position: absolute !important; outline: 1px solid white;">
<div class="Container_Header">
<span style="display: block; padding: 0 10px" class="Text_H2">$title</span>
</div>
<p style="padding: 10px">
Some text
</p>
</div>
</div>
</div>
I want a Info-Box (here <div class="inner">...</div>) which knows if there is enough space on the right, left, up or down to open and then does.
I already can check the space on the left and right, but I didn't get the box to open to the left side.
If I hover over the 'i' span the Box will be showed, and the z-index of all ".inner" will be set to 100 without the one I hovered. If I leave the "inner" div container all will be set to Normal
$(document).on("mouseenter", ".container", function() {
//höhe des Documents
let getD = $(document).width();
console.log(" getD: " + getD);
//breite des Documents
let getDh = $(document).height();
console.log("getDh: " + getDh);
//Aktuelle Position offset
var offset = $(this).offset();
console.log("Offset, Left: " + offset.left + " Top: " + offset.top)
var space_right = getD - offset.left;
var space_inner = $(".inner").width()
console.log(space_inner);
if (space_right >= space_inner) {
$(".inner").css("z-index", 100);
$(this).css("z-index", 5000);
console.log("true");
} else {
console.log("false");
}
});
$(document).on("mouseleave", ".inner", function() {
$(".inner").css("z-index", 5000);
$(".container").delay(400)
.queue(function(next) {
$(this).css("z-index", 100);
next();
})
});
.tabelle-test,
tr,
td,
th {
border-style: solid;
}
#collapse {
border-collapse: collapse;
}
.container {
width: 20px;
height: 20px;
position: relative;
}
.inner {
position: absolute;
z-index: 5000;
background: rgb(9, 201, 153);
padding: 1em;
border-radius: 10px;
width: 250px;
clip-path: circle(5% at 5% 8%);
transition: all .5s ease-in-out;
cursor: pointer;
}
.inner>.info_p {
color: white;
font-size: .8rem;
}
.inner>.info_span {
float: left;
color: white;
font-weight: bold;
transition: color .5s;
position: relative;
top: -14px;
left: -4px;
}
.inner>.info_h {
color: white;
margin: 0;
}
.inner:hover {
clip-path: circle(75%);
z-index: 1000;
background: #00B6FF;
}
.innen:hover span {
color: rgba(255, 255, 255, 0)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tabelle-test" id="collapse">
<tr width="1020px">
<th width="1000px">ganz viel BlaBla</th>
<th width="20px" height="20px">Info</th>
</tr>
<tr>
<td>blaaaaaaaaa</td>
<td class="info-td">
<div class="container">
<div class="inner">
<span class="info_span">i</span>
<h1 class="info_h">Hey</h1>
<p class="info_p">This is an informative card that will tell you something that's... well, important!</p>
</div>
</div>
</td>
</tr>
</table>
Here is the code. There are changes in css. I have changed into .inner, .container. There is no change in jquery. And if any changes , Please let me know.
.tabelle-test,tr,td,th{border-style:solid;}
#collapse{border-collapse:collapse;}
.container{width: 100%;height: 20px;position: relative;top: 0;}
.inner{position:absolute;z-index:5000;background:rgb(9, 201, 153);padding:1em;border-radius:10px;width:250px;clip-path:circle(5% at 93% 8%);transition:all .5s ease-in-out;cursor:pointer;right: -5px;}
.inner>.info_p{color:white;font-size:.8rem;}
.inner>.info_span{color:white;font-weight:bold;transition:color .5s;position: absolute;top:1px;right:18px;}
.inner>.info_h{color:white;margin:0;}
.inner:hover{clip-path:circle(75%);z-index:1000;background:#00B6FF;}
.innen:hover span{color:rgba(255, 255, 255, 0)}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tabelle-test" id="collapse">
<tr width="1020px">
<th width="1000px">ganz viel BlaBla</th>
<th width="20px" height="20px">Info</th>
</tr>
<tr>
<td>blaaaaaaaaa</td>
<td class="info-td">
<div class="container">
<div class="inner">
<span class="info_span">i</span>
<h1 class="info_h">Hey</h1>
<p class="info_p">This is an informative card that will tell you something that's... well, important!</p>
</div>
</div>
</td>
</tr>
</table>
I have problem with canvas tag. I need to append it into parent div. But when I set precise dimensions of parent and embed canvas tag, I get scrollbars. When I do same think with div, it works good. Here is fiddle:
https://jsfiddle.net/57yovrkx/4/
and here is code:
$(function() {
var content1 = $('#content1');
var div = $('<div/>', {width: content1[0].clientWidth, height: content1[0].clientHeight});
content1.append(div);
var content2 = $('#content2');
var canvas = $('<canvas/>', {width: content2[0].clientWidth, height: content2[0].clientHeight});
content2.append(canvas);
})
* {
box-sizing: border-box;
border: 0;
margin: 0;
padding: 0;
}
#wrap1, #wrap2 {
display: flex;
flex-direction: column;
position: absolute;
left: 0;
right: 0;
overflow: auto;
}
#wrap1 {
top: 0;
bottom: 50%;
}
#wrap2 {
top: 50%;
bottom: 0;
}
.header {
flex: 0 0 2rem;
background: darkgrey;
}
#content1, #content2 {
flex: 1;
}
#content1 {
background: lightblue;
}
#content2 {
background: lightgreen;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap1">
<div class="header">
Some header
</div>
<div id="content1">
</div>
</div>
<div id="wrap2">
<div class="header">
Some header
</div>
<div id="content2">
</div>
</div>
Does anybody knows why?
Setting canvas.style.height = '100%'; before you append the canvas seems to do the trick.
https://stackoverflow.com/a/10215724/1482623
I've looked everywhere for this specific need but cannot find any good sources. I have a 'skills' graph that shows how well I can accomplish things. My issue is that I don't want it to display a percentage, but a letter grade (A+, A, B, C)
Here is the link
Here is the code
<script type="text/javascript">
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
function grow() {
var element = '.bar';
var i = 1;
$(element).each(function(index, value) {
var percent = $(this).attr('data-percent');
var timing = percent / 100;
setTimeout(function() {
$(value).css('max-width', +percent + '%').css('transition', timing + 's ease all');
$(value).append('<div class="num">' + percent + '%</div>');
}, i * 50);
i++;
});
}
$(window).load(function() {
requestAnimationFrame(grow);
});
</script>
.bar {
background: white;
border-top: 1px solid #b4996d;
width: 100%;
max-width: 0;
height: 25px;
margin: 0 0 10px 0;
border-top-style: dotted;
}
.num {
line-height: 22px;
color: #b4996d;
font-size: 12px;
text-align: right;
font-family: 'open_sansbold';
}
.label-graph {
line-height: 22px;
position: absolute;
color: #333;
font-size: 12px;
font-family: 'open_sansbold';
}
.holder {
margin: 0 auto;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="holder">
<div class="bar" data-percent="95">
<span class="label-graph">Web Design</span>
</div>
<div class="bar" data-percent="95">
<span class="label-graph">Graphic Design</span>
</div>
<div class="bar" data-percent="95">
<span class="label-graph">Photoshop</span>
</div>
<div class="bar" data-percent="80">
<span class="label-graph">HTML5</span>
</div>
<div class="bar" data-percent="90">
<span class="label-graph">Illustration</span>
</div>
<div class="bar" data-percent="85">
<span class="label-graph">Print</span>
</div>
</div>
Here is a simple example with what #lux suggests in the comment. You add conditions on what you get with the data-percent attribute and it's on :)
See it here
$(function(){
$('.bar').each(function(i,v){
data = $(this).data('percent');
// just an example, you can set whatever you wants as value and conditions
if(data > 80){
$(this).addClass('grade-Aplus');
}
else if(data <= 80 && data > 60){
$(this).addClass('grade-A');
}else{
$(this).addClass('grade-B');
}
});
});
CSS
.bar:before {content:""; width: 0; height: 30px; background: blue; position: absolute; left: 0; top: 0; transition: all 0.5s; }
.bar { position: relative; margin: 15px 0; padding: 7px 0 0 110px}
.bar.grade-Aplus:before { width: 100px; content: "A+"; color: #fff;}
.bar.grade-A:before { width: 80px; content: "A"; color: #fff}
.bar.grade-B:before { width: 30px; content: "B"; color: #fff}
/* and so on ... :) */