I've seen several work arounds on StackOverflow however none of which seem to be a sufficient answer for what I am looking to achieve.
Live Demo:
var value = 0,
pos = 0,
progressHidden = false,
progressEl = $('progress'),
timer = setInterval(progress, 100);
var ProgressColourTween = [
"#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400",
"#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300",
"#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100",
"#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00",
"#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400",
"#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00",
"#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800",
"#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300",
"#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00",
"#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800"
];
function progress() {
// run counter
value++;
if (value <= 100) {
progressEl.val(value);
progressEl.css("background-color", ProgressColourTween[value]);
pos = 1 - (value / 100);
if (value == '10') {
$('progress').addClass('ten');
}
if (value == '100') {
$('progress').addClass('hundred');
}
}
// update background
progressEl.css('background-position', '0 ' + pos + 'em');
// show/hide progress
if (progressHidden && value < 100) {
progressEl.val(0);
progressEl.removeClass("hidden");
progressHidden = false;
}
}
body {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 50px;
background: #000000;
}
progress {
appearance: none;
position: relative;
width: 450px;
height: 1.4em;
padding: 0;
border: none;
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 120px;
transition: height .4s;
}
progress.hidden {
height: 0;
transition-delay: .4s;
}
progress::before {
content: attr(value);
position: absolute;
top: 0;
left: 0;
bottom: 0;
text-align: center;
font-size: 1.5em;
line-height: .80em;
color: hsla(0, 0%, 100%, .2);
background: linear-gradient( green, orange) no-repeat center;
background: -moz-linear-gradient( green, orange) no-repeat center;
background: -webkit-linear-gradient( green, orange) no-repeat center;
background: -o-linear-gradient( green, orange) no-repeat center;
background: -ms-linear-gradient( green, orange) no-repeat center;
background-position: inherit;
-webkit-background-clip: text;
background-clip: text;
}
progress::after {
content: '%';
position: absolute;
top: 0;
right: 190px;
bottom: 0;
text-align: center;
font-size: 1.5em;
line-height: .80em;
color: hsla(0, 0%, 100%, .2);
background: linear-gradient( green, orange) no-repeat center;
background: -moz-linear-gradient( green, orange) no-repeat center;
background: -webkit-linear-gradient( green, orange) no-repeat center;
background: -o-linear-gradient( green, orange) no-repeat center;
background: -ms-linear-gradient( green, orange) no-repeat center;
background-position: inherit;
-webkit-background-clip: text;
background-clip: text;
}
progress.ten::after {
right: 100px;
}
progress.hundred::after {
right: 0px;
}
progress::-webkit-progress-bar,
progress::-webkit-progress-value {
background: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress max="99"></progress>
My Problem
I've added my colour tween to progressEl = $('progress'), however it needs to somehow be applied to .progress:before
Question
How can I add the colour tween to my loading percentage text which is manipulated via the .progress:before background?
There is no way to say $('.progress:before') but you can add another class for you progress element in you style sheet and using addClass(). Or you can do something like this:
var porgress_before = $("<style>").appendTo("head");
// And then you can use below function on any where to style your element.
porgress_before.text(".progress:before{ background: red;}");
Good luck!
Don't have time to write out the code for you, but you can dynamically create a style tag at the bottom of the head, then create and insert a new rule that applies to the :before element in question.
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
This will pass back an index value you can use to look up the actual CSSStyleRule object. You can then manipulate that object's style property like you would the style property of an element
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule
Related
I have a percentage animation which the number counts up while the outer stroke completes. This animation works perfectly but I need to have the text centered both vertically and horizontally, also the inner circle transparent. Any idea how I could do this?
function perCirc($el, end, i) {
if (end < 0)
end = 0;
else if (end > 100)
end = 100;
if (typeof i === 'undefined')
i = 0;
var curr = (100 * i) / 360;
$el.find(".perCircStat").html(Math.round(curr) + "%");
if (i <= 180) {
$el.css('background-image', 'linear-gradient(' + (90 + i) + 'deg, transparent 50%, #ccc 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
} else {
$el.css('background-image', 'linear-gradient(' + (i - 90) + 'deg, transparent 50%, #00cc00 50%),linear-gradient(90deg, #ccc 50%, transparent 50%)');
}
if (curr < end) {
setTimeout(function() {
perCirc($el, end, ++i);
}, 1);
}
}
.perCirc {
position: relative;
text-align: center;
width: 240px;
height: 240px;
border-radius: 100%;
background-color: #00cc00;
/* the color of the percent */
}
.perCirc .perCircInner {
position: relative;
top: 10px;
left: 10px;
text-align: center;
width: 220px;
height: 220px;
border-radius: 100%;
background-color: hsla(0, 0%, 73%, 1.00);
/* the color of the inner circel */
}
.perCirc .perCircInner div {
position: relative;
color: #4E1414;
}
.perCirc .perCircStat {
font-size: 30px;
margin: 0 auto;
}
<div id="sellPerCirc" class="perCirc">
<div class="perCircInner">
<div class="perCircStat">0%</div>
<div>Complete</div>
</div>
</div>
Add these attributes to your perCircInner class
display: flex;
flex-direction: column;
justify-content: center;
I'm using Nestable.js plugin. I'm wondering how can I get access to the li element I'm clicking on. I'm trying to do it with the code below, but nothing is happening.
$('.dd-item').on('change', function(Event) {
console.log(Event.target);
});
$('.dd-item').on('click', function(Event) {
console.log(Event.target);
});
If someone could take a look at it, I left all the files I'm using below. The code above is inserted in the HTML one.
This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="appearance.css"></link>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<div class="dd">
<ul class="dd-list">
<li class="dd-item" data-id="1">
<div class="dd-handle">Item 1</div>
</li>
<li class="dd-item" data-id="2">
<div class="dd-handle">Item 2</div>
</li>
<li class="dd-item" data-id="apples">
<div class="dd-handle">Apples</div>
</li>
<li class="dd-item" data-id="oranges">
<div class="dd-handle">Oranges</div>
</li>
<li class="dd-item" data-id="bananas">
<div class="dd-handle">Bananas</div>
</li>
<li class="dd-item" data-id="strawberries">
<div class="dd-handle">Strawberries</div>
</li>
<li class="dd-item" data-id="3">
<div class="dd-handle">Item 3</div>
<ul class="dd-list">
<li class="dd-item" data-id="4">
<div class="dd-handle">Item 4</div>
</li>
<li class="dd-item" data-id="5">
<div class="dd-handle">Item 5</div>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="nestable.js"></script>
<script type="text/javascript">
$('.dd').nestable('');
$('.dd-item').on('change', function(Event) {
console.log(Event.target);
});
$('.dd-item').on('click', function(Event) {
console.log(Event.target);
});
</script>
</body>
</html>
This is the CSS:
.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .cf { zoom: 1; }
*:first-child+html .cf { zoom: 1; }
/*NESTABLE*/
.dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 13px; line-height: 20px; }
.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
.dd-list .dd-list { padding-left: 30px; }
.dd-collapsed .dd-list { display: none; }
.dd-item,
.dd-empty,
.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }
.dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
background: #fafafa;
background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
background: linear-gradient(top, #fafafa 0%, #eee 100%);
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd-handle:hover { color: #2ea8e5; background: #fff; }
.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
.dd-item > button[data-action="collapse"]:before { content: '-'; }
.button_make_container > .dd_item
.dd-placeholder,
.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
-webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
-moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
.dd-dragel .dd-handle {
-webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}
#button_make_container {
border: 1px outset blue;
background-color: lightBlue;
float: right;
}
And here is nestable:
/*!
* Nestable jQuery Plugin - Copyright (c) 2012 David Bushell - http://dbushell.com/
* Dual-licensed under the BSD or MIT licenses
*/
;(function($, window, document, undefined)
{
var hasTouch = 'ontouchstart' in document;
/**
* Detect CSS pointer-events property
* events are normally disabled on the dragging element to avoid conflicts
* https://github.com/ausi/Feature-detection-technique-for-pointer-events/blob/master/modernizr-pointerevents.js
*/
var hasPointerEvents = (function()
{
var el = document.createElement('div'),
docEl = document.documentElement;
if (!('pointerEvents' in el.style)) {
return false;
}
el.style.pointerEvents = 'auto';
el.style.pointerEvents = 'x';
docEl.appendChild(el);
var supports = window.getComputedStyle && window.getComputedStyle(el, '').pointerEvents === 'auto';
docEl.removeChild(el);
return !!supports;
})();
var defaults = {
listNodeName : 'ol',
itemNodeName : 'li',
rootClass : 'dd',
listClass : 'dd-list',
itemClass : 'dd-item',
dragClass : 'dd-dragel',
handleClass : 'dd-handle',
collapsedClass : 'dd-collapsed',
placeClass : 'dd-placeholder',
noDragClass : 'dd-nodrag',
emptyClass : 'dd-empty',
expandBtnHTML : '<button data-action="expand" type="button">Expand</button>',
collapseBtnHTML : '<button data-action="collapse" type="button">Collapse</button>',
group : 0,
maxDepth : 5,
threshold : 20
};
function Plugin(element, options)
{
this.w = $(document);
this.el = $(element);
this.options = $.extend({}, defaults, options);
this.init();
}
Plugin.prototype = {
init: function()
{
var list = this;
list.reset();
list.el.data('nestable-group', this.options.group);
list.placeEl = $('<div class="' + list.options.placeClass + '"/>');
$.each(this.el.find(list.options.itemNodeName), function(k, el) {
list.setParent($(el));
});
list.el.on('click', 'button', function(e) {
if (list.dragEl) {
return;
}
var target = $(e.currentTarget),
action = target.data('action'),
item = target.parent(list.options.itemNodeName);
if (action === 'collapse') {
list.collapseItem(item);
}
if (action === 'expand') {
list.expandItem(item);
}
});
var onStartEvent = function(e)
{
var handle = $(e.target);
if (!handle.hasClass(list.options.handleClass)) {
if (handle.closest('.' + list.options.noDragClass).length) {
return;
}
handle = handle.closest('.' + list.options.handleClass);
}
if (!handle.length || list.dragEl) {
return;
}
list.isTouch = /^touch/.test(e.type);
if (list.isTouch && e.touches.length !== 1) {
return;
}
e.preventDefault();
list.dragStart(e.touches ? e.touches[0] : e);
};
var onMoveEvent = function(e)
{
if (list.dragEl) {
e.preventDefault();
list.dragMove(e.touches ? e.touches[0] : e);
}
};
var onEndEvent = function(e)
{
if (list.dragEl) {
e.preventDefault();
list.dragStop(e.touches ? e.touches[0] : e);
}
};
if (hasTouch) {
list.el[0].addEventListener('touchstart', onStartEvent, false);
window.addEventListener('touchmove', onMoveEvent, false);
window.addEventListener('touchend', onEndEvent, false);
window.addEventListener('touchcancel', onEndEvent, false);
}
list.el.on('mousedown', onStartEvent);
list.w.on('mousemove', onMoveEvent);
list.w.on('mouseup', onEndEvent);
console.log(list);
},
serialize: function()
{
var data,
depth = 0,
list = this;
step = function(level, depth)
{
var array = [ ],
items = level.children(list.options.itemNodeName);
items.each(function()
{
var li = $(this),
item = $.extend({}, li.data()),
sub = li.children(list.options.listNodeName);
if (sub.length) {
item.children = step(sub, depth + 1);
}
array.push(item);
});
return array;
};
data = step(list.el.find(list.options.listNodeName).first(), depth);
return data;
},
serialise: function()
{
return this.serialize();
},
reset: function()
{
this.mouse = {
offsetX : 0,
offsetY : 0,
startX : 0,
startY : 0,
lastX : 0,
lastY : 0,
nowX : 0,
nowY : 0,
distX : 0,
distY : 0,
dirAx : 0,
dirX : 0,
dirY : 0,
lastDirX : 0,
lastDirY : 0,
distAxX : 0,
distAxY : 0
};
this.isTouch = false;
this.moving = false;
this.dragEl = null;
this.dragRootEl = null;
this.dragDepth = 0;
this.hasNewRoot = false;
this.pointEl = null;
},
expandItem: function(li)
{
li.removeClass(this.options.collapsedClass);
li.children('[data-action="expand"]').hide();
li.children('[data-action="collapse"]').show();
li.children(this.options.listNodeName).show();
},
collapseItem: function(li)
{
var lists = li.children(this.options.listNodeName);
if (lists.length) {
li.addClass(this.options.collapsedClass);
li.children('[data-action="collapse"]').hide();
li.children('[data-action="expand"]').show();
li.children(this.options.listNodeName).hide();
}
},
expandAll: function()
{
var list = this;
list.el.find(list.options.itemNodeName).each(function() {
list.expandItem($(this));
});
},
collapseAll: function()
{
var list = this;
list.el.find(list.options.itemNodeName).each(function() {
list.collapseItem($(this));
});
},
setParent: function(li)
{
if (li.children(this.options.listNodeName).length) {
li.prepend($(this.options.expandBtnHTML));
li.prepend($(this.options.collapseBtnHTML));
}
li.children('[data-action="expand"]').hide();
},
unsetParent: function(li)
{
li.removeClass(this.options.collapsedClass);
li.children('[data-action]').remove();
li.children(this.options.listNodeName).remove();
},
dragStart: function(e)
{
var mouse = this.mouse,
target = $(e.target),
dragItem = target.closest(this.options.itemNodeName);
this.placeEl.css('height', dragItem.height());
mouse.offsetX = e.offsetX !== undefined ? e.offsetX : e.pageX - target.offset().left;
mouse.offsetY = e.offsetY !== undefined ? e.offsetY : e.pageY - target.offset().top;
mouse.startX = mouse.lastX = e.pageX;
mouse.startY = mouse.lastY = e.pageY;
this.dragRootEl = this.el;
this.dragEl = $(document.createElement(this.options.listNodeName)).addClass(this.options.listClass + ' ' + this.options.dragClass);
this.dragEl.css('width', dragItem.width());
dragItem.after(this.placeEl);
dragItem[0].parentNode.removeChild(dragItem[0]);
dragItem.appendTo(this.dragEl);
$(document.body).append(this.dragEl);
this.dragEl.css({
'left' : e.pageX - mouse.offsetX,
'top' : e.pageY - mouse.offsetY
});
// total depth of dragging item
var i, depth,
items = this.dragEl.find(this.options.itemNodeName);
for (i = 0; i < items.length; i++) {
depth = $(items[i]).parents(this.options.listNodeName).length;
if (depth > this.dragDepth) {
this.dragDepth = depth;
}
}
},
dragStop: function(e)
{
var el = this.dragEl.children(this.options.itemNodeName).first();
el[0].parentNode.removeChild(el[0]);
this.placeEl.replaceWith(el);
this.dragEl.remove();
this.el.trigger('change');
if (this.hasNewRoot) {
this.dragRootEl.trigger('change');
}
this.reset();
},
dragMove: function(e)
{
var list, parent, prev, next, depth,
opt = this.options,
mouse = this.mouse;
this.dragEl.css({
'left' : e.pageX - mouse.offsetX,
'top' : e.pageY - mouse.offsetY
});
// mouse position last events
mouse.lastX = mouse.nowX;
mouse.lastY = mouse.nowY;
// mouse position this events
mouse.nowX = e.pageX;
mouse.nowY = e.pageY;
// distance mouse moved between events
mouse.distX = mouse.nowX - mouse.lastX;
mouse.distY = mouse.nowY - mouse.lastY;
// direction mouse was moving
mouse.lastDirX = mouse.dirX;
mouse.lastDirY = mouse.dirY;
// direction mouse is now moving (on both axis)
mouse.dirX = mouse.distX === 0 ? 0 : mouse.distX > 0 ? 1 : -1;
mouse.dirY = mouse.distY === 0 ? 0 : mouse.distY > 0 ? 1 : -1;
// axis mouse is now moving on
var newAx = Math.abs(mouse.distX) > Math.abs(mouse.distY) ? 1 : 0;
// do nothing on first move
if (!mouse.moving) {
mouse.dirAx = newAx;
mouse.moving = true;
return;
}
// calc distance moved on this axis (and direction)
if (mouse.dirAx !== newAx) {
mouse.distAxX = 0;
mouse.distAxY = 0;
} else {
mouse.distAxX += Math.abs(mouse.distX);
if (mouse.dirX !== 0 && mouse.dirX !== mouse.lastDirX) {
mouse.distAxX = 0;
}
mouse.distAxY += Math.abs(mouse.distY);
if (mouse.dirY !== 0 && mouse.dirY !== mouse.lastDirY) {
mouse.distAxY = 0;
}
}
mouse.dirAx = newAx;
/**
* move horizontal
*/
if (mouse.dirAx && mouse.distAxX >= opt.threshold) {
// reset move distance on x-axis for new phase
mouse.distAxX = 0;
prev = this.placeEl.prev(opt.itemNodeName);
// increase horizontal level if previous sibling exists and is not collapsed
if (mouse.distX > 0 && prev.length && !prev.hasClass(opt.collapsedClass)) {
// cannot increase level when item above is collapsed
list = prev.find(opt.listNodeName).last();
// check if depth limit has reached
depth = this.placeEl.parents(opt.listNodeName).length;
if (depth + this.dragDepth <= opt.maxDepth) {
// create new sub-level if one doesn't exist
if (!list.length) {
list = $('<' + opt.listNodeName + '/>').addClass(opt.listClass);
list.append(this.placeEl);
prev.append(list);
this.setParent(prev);
} else {
// else append to next level up
list = prev.children(opt.listNodeName).last();
list.append(this.placeEl);
}
}
}
// decrease horizontal level
if (mouse.distX < 0) {
// we can't decrease a level if an item preceeds the current one
next = this.placeEl.next(opt.itemNodeName);
if (!next.length) {
parent = this.placeEl.parent();
this.placeEl.closest(opt.itemNodeName).after(this.placeEl);
if (!parent.children().length) {
this.unsetParent(parent.parent());
}
}
}
}
var isEmpty = false;
// find list item under cursor
if (!hasPointerEvents) {
this.dragEl[0].style.visibility = 'hidden';
}
this.pointEl = $(document.elementFromPoint(e.pageX - document.body.scrollLeft, e.pageY - (window.pageYOffset || document.documentElement.scrollTop)));
if (!hasPointerEvents) {
this.dragEl[0].style.visibility = 'visible';
}
if (this.pointEl.hasClass(opt.handleClass)) {
this.pointEl = this.pointEl.parent(opt.itemNodeName);
}
if (this.pointEl.hasClass(opt.emptyClass)) {
isEmpty = true;
}
else if (!this.pointEl.length || !this.pointEl.hasClass(opt.itemClass)) {
return;
}
// find parent list of item under cursor
var pointElRoot = this.pointEl.closest('.' + opt.rootClass),
isNewRoot = this.dragRootEl.data('nestable-id') !== pointElRoot.data('nestable-id');
/**
* move vertical
*/
if (!mouse.dirAx || isNewRoot || isEmpty) {
// check if groups match if dragging over new root
if (isNewRoot && opt.group !== pointElRoot.data('nestable-group')) {
return;
}
// check depth limit
depth = this.dragDepth - 1 + this.pointEl.parents(opt.listNodeName).length;
if (depth > opt.maxDepth) {
return;
}
var before = e.pageY < (this.pointEl.offset().top + this.pointEl.height() / 2);
parent = this.placeEl.parent();
// if empty create new list to replace empty placeholder
if (isEmpty) {
list = $(document.createElement(opt.listNodeName)).addClass(opt.listClass);
list.append(this.placeEl);
this.pointEl.replaceWith(list);
}
else if (before) {
this.pointEl.before(this.placeEl);
}
else {
this.pointEl.after(this.placeEl);
}
if (!parent.children().length) {
this.unsetParent(parent.parent());
}
if (!this.dragRootEl.find(opt.itemNodeName).length) {
this.dragRootEl.append('<div class="' + opt.emptyClass + '"/>');
}
// parent root list has changed
if (isNewRoot) {
this.dragRootEl = pointElRoot;
this.hasNewRoot = this.el[0] !== this.dragRootEl[0];
}
}
}
};
$.fn.nestable = function(params)
{
var lists = this,
retval = this;
lists.each(function()
{
var plugin = $(this).data("nestable");
if (!plugin) {
$(this).data("nestable", new Plugin(this, params));
$(this).data("nestable-id", new Date().getTime());
} else {
if (typeof params === 'string' && typeof plugin[params] === 'function') {
retval = plugin[params]();
}
}
});
return retval || lists;
};
})(window.jQuery || window.Zepto, window, document);
Thanks!
You almost had it, the only thing I had to add is Event.stopPropagation(); inside the click handler function to avoid the event to be fired twice when clicking on 2nd level items (Item 4 and Item 5 in your example):
$('.dd').nestable('');
$('.dd-item').on('click', function(Event) {
console.log(Event.target);
Event.stopPropagation();
});
.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .cf { zoom: 1; }
*:first-child+html .cf { zoom: 1; }
/*NESTABLE*/
.dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 13px; line-height: 20px; }
.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
.dd-list .dd-list { padding-left: 30px; }
.dd-collapsed .dd-list { display: none; }
.dd-item,
.dd-empty,
.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }
.dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
background: #fafafa;
background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
background: linear-gradient(top, #fafafa 0%, #eee 100%);
-webkit-border-radius: 3px;
border-radius: 3px;
box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd-handle:hover { color: #2ea8e5; background: #fff; }
.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
.dd-item > button[data-action="collapse"]:before { content: '-'; }
.button_make_container > .dd_item
.dd-placeholder,
.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
-webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
-moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
}
.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
.dd-dragel .dd-handle {
-webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}
#button_make_container {
border: 1px outset blue;
background-color: lightBlue;
float: right;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Nestable/2012-10-15/jquery.nestable.min.js"></script>
<div class="dd">
<ul class="dd-list">
<li class="dd-item" data-id="1">
<div class="dd-handle">Item 1</div>
</li>
<li class="dd-item" data-id="2">
<div class="dd-handle">Item 2</div>
</li>
<li class="dd-item" data-id="apples">
<div class="dd-handle">Apples</div>
</li>
<li class="dd-item" data-id="oranges">
<div class="dd-handle">Oranges</div>
</li>
<li class="dd-item" data-id="bananas">
<div class="dd-handle">Bananas</div>
</li>
<li class="dd-item" data-id="strawberries">
<div class="dd-handle">Strawberries</div>
</li>
<li class="dd-item" data-id="3">
<div class="dd-handle">Item 3</div>
<ul class="dd-list">
<li class="dd-item" data-id="4">
<div class="dd-handle">Item 4</div>
</li>
<li class="dd-item" data-id="5">
<div class="dd-handle">Item 5</div>
</li>
</ul>
</li>
</ul>
</div>
I just figured out the better way to achieve what I need (i.e get access to the element I'm clicking on) is by adding the following code:
$("div")
.mousedown(function(e) {
console.log(e.target);
e.stopPropagation();
});
I need to generate a graph like I have shown here
Single line with multiple colors over time
The X axis will be time series . Can anyone suggest a JQuery plugin to generate such a graph ?
Thanks
Try below chart and change as per your requirement
var graph = (function(){
var urgentTitle = "Urgent",
$graph = $('.graph'),
$barContainer = $graph.find('.graph-bars'),
$markers = $('.markers'),
$graphTitles = $('.graph-titles'),
max = null,
limit = null;
var init = function(data){
max = getMaxValue(data);
limit = max + Math.ceil(max * 0.05);
$barContainer.empty();
$markers.empty();
$graphTitles.empty();
$('#urgent-title').text(urgentTitle);
setMarkers($markers, limit);
if (data.length) buildTeamRows($barContainer, $graphTitles, data, limit);
else buildUserRows($barContainer, $graphTitles, data, limit);
};
// return a values percentage in relation to the limit
var getPercentage = function(value, limit) {
return value / limit * 100 + "%";
};
var getMaxValue = function(data) {
var largest = 0;
var sum = 0;
if (data.length) {
for (x=0;x<data.length;x++) {
sum = data[x].active + data[x].newCount + data[x].newFromBatch;
if (sum > largest) {
largest = sum;
}
}
} else {
largest = Math.max(data.active, data.newCount, data.newFromBatch);
}
return largest;
};
var setMarkers = function($selector, limit) {
var increment = limit / 5;
var value = 0;
var values = [];
var leftOffset = 0;
// Create array of marker values
while(value < limit) {
values.push(Math.round(value));
value += increment;
}
values.push(limit);
for (var x=0;x<values.length;x++) {
var $markerTmpl = $('<div class="marker"><span class="marker-number"></span></div>');
leftOffset = getPercentage(values[x], limit);
$markerTmpl.css({ 'left': leftOffset }).find('.marker-number').text(values[x]);
$selector.append($markerTmpl);
}
$selector.addClass('loaded');
};
//Build each individual graph based on selector, data, and max value
var buildTeamRows = function($barSelector, $titleSelector, data, limit) {
var percentage;
// Loop through data
for (var x=0;x<data.length;x++) {
var titleClass = null;
var titleCount = 0;
var $graphBar = $('<div class="graph-bar"></div>')
.attr('id', 'userGraph-' + data[x].userId);
$barSelector.append($graphBar);
// Render each fragment
renderFragment($graphBar, 'urgent', data[x].urgent, limit);
renderFragment($graphBar, 'active', data[x].active - data[x].urgent, limit);
renderFragment($graphBar, 'newCount', data[x].newCount, limit);
renderFragment($graphBar, 'newFromBatch', data[x].newFromBatch, limit);
// Calculate largest fragment value
var largest = 0;
$.each(data[x], function(index, value){
if ($.isNumeric(value)){
if (value > largest) {
largest = value;
titleClass = index;
titleCount = value;
}
}
});
// If Active is greatest value, Check if urgent portion of active is greater than active
if (titleClass === 'active' && data[x].urgent >= (data[x].active - data[x].urgent)) {
titleClass = 'urgent';
titleCount = data[x].urgent;
}
// Render row meta-data
var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>');
$titleSet.find('.graph-title-name').text(data[x].userName);
$titleSet.find('.graph-title-count').addClass(titleClass).text(titleCount);
$titleSelector.append($titleSet);
}
};
var renderFragment = function($selector, type, value, limit) {
var $rowFragmentTmpl = $('<div class="graph-bar-fragment"></div>');
var percentage = getPercentage(value, limit);
$rowFragmentTmpl.attr('data-value', value);
$selector.append($rowFragmentTmpl.addClass(type));
setTimeout(function(){
$rowFragmentTmpl.css({'width': percentage});
}, 1);
};
var buildUserRows = function($barSelector, $titleSelector, data, limit) {
renderUserRow($barSelector, $titleSelector, 'urgent', data.urgent, limit, urgentTitle);
renderUserRow($barSelector, $titleSelector, 'active', data.active, limit, 'Active');
renderUserRow($barSelector, $titleSelector, 'newCount', data.newCount, limit, 'New');
renderUserRow($barSelector, $titleSelector, 'newFromBatch', data.newFromBatch, limit, 'New From Batch');
};
var renderUserRow = function($barSelector, $titleSelector, type, value, limit, title) {
var percentage = getPercentage(value, limit);
var $graphBar = $('<div class="graph-bar graph-bar-single"></div>').attr({'id' : 'userGraph-' + type, 'data-value': value});
$barSelector.append($graphBar);
setTimeout(function(){
$graphBar.css({'width': percentage}).addClass(type);
},1);
var $titleSet = $('<div class="graph-title"><div class="graph-title-name"></div><div class="graph-title-count"></div></div>');
$titleSet.find('.graph-title-name').text(title);
$titleSet.find('.graph-title-count').addClass(type).text(value);
$titleSelector.append($titleSet);
};
return {
init: init
}
})();
// Document ready
$(function(){
// Dummy Data
var dataSet = [
{
active: 5,
newCount: 4,
newFromBatch: 40,
urgent: 1,
userId: "molly",
userName: "Molly"
},
{
active: 21,
newCount: 2,
newFromBatch: 5,
urgent: 10,
userId: "jack",
userName: "Jack"
},
{
active: 25,
newCount: 4,
newFromBatch: 3,
urgent: 20,
userId: "tracy",
userName: "Tracy"
},
{
active: 10,
newCount: 24,
newFromBatch: 4,
urgent: 2,
userId: "nolan",
userName: "Nolan"
},
];
var dataSingle = {
active: 25,
newCount: 4,
newFromBatch: 3,
urgent: 20,
userId: "ryan",
userName: "Ryan Scofield"
};
// Initialize Graph
graph.init(dataSet);
$('#teamGraph').on('click', function(e){
graph.init(dataSet);
});
$('#userGraph').on('click', function(e){
graph.init(dataSingle);
});
});
body {
padding: 20px;
}
/* Opportunity Graphs */
.graph-titles {
display: inline-block;
width: 200px;
vertical-align: top;
margin: 20px 0 20px;
padding: 0;
}
.graph-title {
margin-bottom: 1em;
width: 100%;
line-height: 30px;
overflow: hidden;
}
.graph-title-name {
float: left;
}
.graph-title-count {
float: right;
padding: 0 10px;
height: 30px;
border-radius: 20px;
color: #fff;
}
.graph {
display: inline-block;
position: relative;
margin: 20px 20px 20px 10px;
padding: 0;
width: 500px;
}
.graph-bar {
display: block;
overflow: hidden;
margin-bottom: 1em;
}
.graph-bar-fragment {
width: 0;
height: 30px;
float: left;
background-color: #ccc;
-webkit-transition: width .4s ease-in;
}
.graph-bar-single {
height: 30px;
background-color: #ccc;
-webkit-transition: width .4s ease-in;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.graph-bar-fragment:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.urgent {
background: #c9575e;
background: -moz-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9575e), color-stop(100%, #c12e41));
background: -webkit-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -o-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: -ms-linear-gradient(top, #c9575e 0%, #c12e41 100%);
background: linear-gradient(to bottom, #c9575e 0%, #c12e41 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9575e', endColorstr='#c12e41',GradientType=0 );
}
.active {
background: #d6ac6e;
background: -moz-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d6ac6e), color-stop(100%, #cc9e52));
background: -webkit-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -o-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: -ms-linear-gradient(top, #d6ac6e 0%, #cc9e52 100%);
background: linear-gradient(to bottom, #d6ac6e 0%, #cc9e52 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6ac6e', endColorstr='#cc9e52',GradientType=0 );
}
.newCount {
background: #6db683;
background: -moz-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db683), color-stop(100%, #569b6d));
background: -webkit-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -o-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: -ms-linear-gradient(top, #6db683 0%, #569b6d 100%);
background: linear-gradient(to bottom, #6db683 0%, #569b6d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db683', endColorstr='#569b6d',GradientType=0 );
}
.newFromBatch {
background: #7f8cc4;
background: -moz-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7f8cc4), color-stop(100%, #6477ac));
background: -webkit-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -o-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: -ms-linear-gradient(top, #7f8cc4 0%, #6477ac 100%);
background: linear-gradient(to bottom, #7f8cc4 0%, #6477ac 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f8cc4', endColorstr='#6477ac',GradientType=0 );
}
.markers {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .4s ease-in;
}
.markers.loaded {
visibility: visible;
opacity: 1;
}
.marker {
-webkit-box-sizing: border-box;
position: absolute;
bottom: -2em;
top: 0;
border-left: 2px solid #e6e6e6;
}
.marker-number {
position: absolute;
padding-left: .5em;
bottom: 0;
text-align: right;
}
.marker:last-child .marker-number {
right: 0;
padding-left: 0;
padding-right: .5em;
}
.graph-key {
margin: 20px 0 0 210px;
}
.graph-key-item {
display: inline-block;
margin-right: 1.5em;
}
.graph-key-dot {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 50%;
margin-right: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph-container">
<div class="graph-titles">
<!-- Populated -->
</div>
<div class="graph">
<div class="graph-bars">
<!-- Populated -->
</div>
<div class="markers">
<!-- Populated -->
</div>
</div>
<div class="graph-key">
<div class="graph-key-item">
<span class="graph-key-dot urgent"></span><span id="urgent-title">Urgent</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot active"></span><span>Active</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot newCount"></span><span>New</span>
</div>
<div class="graph-key-item">
<span class="graph-key-dot newFromBatch"></span><span>New From Batch</span>
</div>
</div>
</div>
<button id="teamGraph">Team Graph</button>
<button id="userGraph">User Graph</button>
Try below chart and change value as per your requirement
var chart = new Chartist.Bar('#chart01',
{
labels: ['C-Level', 'Executive', 'Director', 'Manager', 'Professional', 'Other'],
series: [
[3,9,5,8,4,2],
[2,8,4,19,25,6],
[2,16,6,53,57,12]
]
},
{
stackBars: true,
seriesBarDistance: 10,
reverseData: false,
horizontalBars: true,
low: 0,
fullWidth: true,
chartPadding: {
right: 30,
left: 30
},
axisX: {
showGrid: true,
showLabel: true
},
axisY: {
showGrid: false,
showLabel: true,
offset: 60,
onlyInteger: true,
labelInterpolationFnc: function(value) {
return value;
}
}
});
$('#chart01').on('click', '.ct-chart-bar .ct-labels foreignobject', function(evt) {
var index = $(this).index();
var label = $(this).find('span.ct-label').text();
graphClicked(index, label, null);
});
$('#chart01').on('mouseover', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
$(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').addClass('hover');
});
$('#chart01').on('mouseleave', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
$(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').removeClass('hover');
});
$('#chart01').on('click', '.ct-chart-bar .ct-series-a line, .ct-chart-bar .ct-series-b line, .ct-chart-bar .ct-series-c line', function(evt) {
var index = $(this).index();
var label = $(this).closest('.ct-chart-bar').find('.ct-labels foreignobject:nth-child('+(index+1)+') span').text();
var value = $(this).attr('ct:value');
graphClicked(index, label, value);
});
function graphClicked(index, label, value) {
console.log('---');
console.log('index:', index);
console.log('label:', label);
alert('Index: '+index+', Label: '+label+', Value: '+value);
}
html {
background-color: lightgrey;
}
.chart-wrapper {
width: 50%;
margin: 1rem auto;
background-color: white;
padding: 0.1rem 0.5rem 1rem 0.5rem;
}
h3 {
text-align: center;
}
h4 {
text-align: center;
}
.center-link {
text-align: center;
display: block;
font-size: 0.7rem;
}
.ct-line {
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
}
.ct-series-a .ct-line {
animation: dash 5s linear forwards;
animation-delay: 1s;
}
.ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-bar {
stroke: #5b9bd5;
}
.ct-series-b .ct-line {
animation: dash 5s linear forwards;
animation-delay: 2s;
}
.ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-bar {
stroke: #ed7d31;
}
.ct-series-c .ct-line {
animation: dash 5s linear forwards;
animation-delay: 3s;
}
.ct-series-c .ct-line, .ct-series-c .ct-point, .ct-series-c .ct-bar {
stroke: #a5a5a5;
}
.chart-title {
text-align: center;
color: #555;
margin-bottom: 0.5rem;
}
.key {
font-size: 0.7rem;
color: #555;
padding: 0 30px 0 90px;
}
.key .key-element {
width: 32%;
display: inline-block;
padding-left: 22px;
box-sizing: border-box;
position: relative;
}
.key .key-element:before {
content: "";
display: block;
width: 16px;
height: 16px;
position: absolute;
top: -2px;
left: 0;
}
.key .key-element.key-series-a:before {
background-color: #5b9bd5;
}
.key .key-element.key-series-b:before {
background-color: #ed7d31;
}
.key .key-element.key-series-c:before {
background-color: #a5a5a5;
}
.ct-chart-bar.ct-horizontal-bars .ct-label.ct-horizontal.ct-end {
display: block;
position: relative;
left: -50%;
text-align: center;
}
.ct-chart-bar .ct-labels foreignobject {
cursor: pointer;
}
.ct-chart-bar .ct-labels foreignobject span {
text-decoration: none;
}
.ct-chart-bar .ct-labels foreignobject span:hover, .ct-chart-bar .ct-labels foreignobject span.hover {
text-decoration: underline;
}
.ct-chart-bar .ct-series line {
cursor: pointer;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.9.7/chartist.min.css" rel="stylesheet" />
<div class="chart-wrapper">
<h4>Click on the bars to get their index, label and value</h4>
<div id="chart01" class="ct-chart ct-chart01 ct-octave"></div>
<div class="key">
<div class="key-element key-series-a">Account Topic Score</div>
<div class="key-element key-series-b">#Unique Contacts</div>
<div class="key-element key-series-c">#Interactions</div>
</div>
</div>
In jQuery API written what .css() return String. This String have view like value without quotes.
If I'll put $(object).css(“margin”) in my code like this:
condition: this != object
$(this).animate({
width: "toggle",
margin: $(object).css("margin"),
padding: ($(object).css("padding"))
}, time, "linear");
"Chrome" work out perfectly, but "IE 11" and last "Edge" work out incorrect.
If I'll add to $(object).css(“margin”) quotes, all browser work identically.
How identically, You can see in code below.
Eventually I need code which independent of content. How to fix it ?
$(document).ready(function() {
var time = 200;
var delay = time + 100;
$(".icon-language").click(function() {
slide($(".rightBlockMenu i"), $(this), time);
$(".hidden").delay(delay).animate({
width: "show"
}, time, "linear");
});
$(".icon-search-1").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
$(".icon-user-o").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
$(".icon-basket").click(function () {
slide($(".rightBlockMenu i"), $(this), time);
});
})
function slide(selector, object, time) {
if (selector.not(object).css("display") != "none") {
selector.not(object).animate({
width: "hide",
margin: "0px -1px",
padding: "9px 0px"
}, time, "linear");
$(object).animate({
margin: "0"
}, time).addClass("active_i");
}
if (selector.not(object).css("display") == "none") {
selector.each(function (){
if ($(this).is(selector.last())) {
$(this).animate({
width: "show",
margin: "0 0 0 6px",
padding: "\"" + $(object).css("padding") + "\""
}, time, "linear");
$(this).removeClass("active_i");
} else {
$(this).animate({
width: "show",
margin: "0 6px",
padding: "9px 18px"
}, time, "linear", function() {
if ($(this).is(selector.first())) {
$(this).css("margin-left", "0");
}
});
$(this).removeClass("active_i");
}
});
}
}
.header_top {
height: 100px;
position: relative;
}
.rightBlock {
max-height: 100%;
padding-right: 10px;
float: right;
right: 0;
text-align: right;
}
.rightBlockMenu {
color: hsla(0, 0%, 80%, 1);
font-size: 2.7em;
vertical-align: middle;
display: inline-block;
}
.rightBlockMenu i:last-child {
margin-right: 0;
}
.rightBlockMenu i:first-child {
margin-left: 0;
}
.rightBlockMenu i:hover {
color: hsla(0, 70%, 45%, 1);
cursor: pointer;
}
.rightBlockMenu i {
padding: 9px 18px;
margin: 0 6px;
vertical-align: bottom;
border: 1px solid hsla(0, 0%, 80%, 1);
display: inline-block;
}
.active_i {
color: hsla(0, 70%, 45%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_top">
<div class="rightBlock">
<div class="rightBlockMenu">
<i class="icon-language">aaa</i>
<i class="icon-search-1" >bbb</i>
<i class="icon-user-o" >ccc</i>
<i class="icon-basket" >ddd</i>
</div>
</div>
</div>
I tested your code on Firefox, Chrome and Edge and it seemed fine. Maybe clarify more what you are trying to achieve. In any case, your code seems a needlessly complicated.
Find below a shorter version of your code:
$(document).ready(function() {
var time = 200;
var delay = time + 100;
$(".rightBlockMenu i").click(function() {
var currentElement = jQuery(this);
var margin = "0 6px";
var padding = "9px 18px";
var toggle = "show";
if (!currentElement.hasClass("active_i")) {
currentElement.addClass("active_i")
margin = "0";
padding = "9px 0";
toggle = "hide";
}
currentElement.siblings().each(function(index, elemenet) {
jQuery(elemenet).removeClass("active_i").animate({
width: toggle,
margin: margin,
padding: padding
}, time, "linear", function() {
// Show element after it was hidden
if (currentElement.hasClass("icon-language")) {
setTimeout(function() {
jQuery(elemenet).animate({
width: "show",
margin: "0 6px",
padding: "9px 18px"
});
}, delay);
}
if (toggle == 'show')
$(".rightBlockMenu i").removeClass("active_i");
});
});
});
});
.header_top {
height: 100px;
position: relative;
}
.rightBlock {
max-height: 100%;
padding-right: 10px;
float: right;
right: 0;
text-align: right;
}
.rightBlockMenu {
color: hsla(0, 0%, 80%, 1);
font-size: 2.7em;
vertical-align: middle;
display: inline-block;
}
.rightBlockMenu i:last-child {
margin-right: 0;
}
.rightBlockMenu i:first-child {
margin-left: 0;
}
.rightBlockMenu i:hover {
color: hsla(0, 70%, 45%, 1);
cursor: pointer;
}
.rightBlockMenu i {
padding: 9px 18px;
margin: 0 6px;
vertical-align: bottom;
border: 1px solid hsla(0, 0%, 80%, 1);
display: inline-block;
}
.active_i {
color: hsla(0, 70%, 45%, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header_top">
<div class="rightBlock">
<div class="rightBlockMenu">
<i class="icon-language">aaa</i>
<i class="icon-search-1">bbb</i>
<i class="icon-user-o">ccc</i>
<i class="icon-basket">ddd</i>
</div>
</div>
</div>
I would like there to be an orange gradient trail behind the slider bar as it moves. Here's the fiddle.
Orange Gradient Code:
background: linear-gradient(to bottom, rgba(241,194,16,1) 0%,rgba(239,192,14,1) 11%,rgba(243,186,17,1) 29%,rgba(242,181,15,1) 39%,rgba(243,172,18,1) 57%,rgba(241,168,14,1) 68%,rgba(244,164,17,1) 79%,rgba(240,158,20,1) 100%);
The finished version should look like this, and I only want it through JavaScript or jQuery and HTML/CSS.
How's this?
$(function() {
$(".vHorizon").change(function() {
var slider = $(this);
var min = slider.prop('min');
var max = slider.prop('max');
if (!min) min = 0;
if (!max) max = 100;
var percent = (slider.val() - min) / (max - min);
var cover = slider.next();
var coverWidth = cover.attr('mwidth');
cover.css('width', 'calc(' + percent + ' * ' + coverWidth + ')');
});
$(".vHorizon").change();
});
input[type=range].vHorizon,
.vHorizonCover {
-webkit-appearance: none;
background-color: #8a9398;
height: 26px;
width: 590px;
margin: 65px 0 0 5px;
border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-image: url("http://i.imgur.com/ZmVoXyE.png?1");
background-repeat: no-repeat;
width: 20px;
height: 52px;
}
.vHorizonContainer {
position: relative;
}
.vHorizonCover {
position: absolute;
top: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgba(241, 194, 16, 1) 0%, rgba(239, 192, 14, 1) 11%, rgba(243, 186, 17, 1) 29%, rgba(242, 181, 15, 1) 39%, rgba(243, 172, 18, 1) 57%, rgba(241, 168, 14, 1) 68%, rgba(244, 164, 17, 1) 79%, rgba(240, 158, 20, 1) 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='vHorizonContainer'>
<input type="range" class="vHorizon" />
<div class='vHorizonCover' mwidth='590px'></div>
</div>
It won't work as well in IE 10 or earlier (the css pointer-events property is not supported).
I created a div to cover the slider, and changed its width using jQuery based on the slider's value.