Ion.RangeSlider 2.0.3 - javascript

I’m trying to using Ion.RangeSlider 2.0.3
URL : http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
So I want to modify that slider with three colors. Left, Middle, Right likewise. I have attached this image for get idea what I want to need.
So i need your help to customize this slider.
Thanks.

I did the similar thing. Here is the related css and javascript code segments to achieve it.
Let say I want left side green, mid yellow and right side red, then
CSS
.irs-line-left {
background: #66b032;
width: 60%;
}
.irs-line-mid {
background: #FFBF00;
}
.irs-line-mid:before {
content: '';
background-color: #FF0000;
position: absolute;
left: 54%;
top: 0;
right: 0;
bottom: 0;
}
.budget-page .irs-line-right {
background: #FF0000;
width: 40%;
}
.budget-page .irs-line-mid {
width: 0 !important;
}
.irs-bar {
background: #FFBF00;
}
Now here is the trick. When you change the two points we need to change the left and right side width to change the color width dynamically.
Javascript section.
var iri_line_left = $(".irs-line-left");
var iri_line_right = $(".irs-line-right");
$("#color-slider").ionRangeSlider({
type: "double",
min: 0,
max: 100,
from: 60,
to: 80,
grid: true,
onChange: function (data) {
var leftWidth = Math.ceil(data.from_percent);
var rightWidth = 100 - leftWidth;
// set left side width
iri_line_left.css({ 'width': leftWidth + "%" });
// set right side width
iri_line_right.css({ 'width': rightWidth + "%" });
}
});
Hope this will help you.

can be well
.irs-line {
// needs latest Compass, add '#import "compass"' to your scss
#include background-image(linear-gradient(left, #32ff6c 0%,#28ff57 33%,#207cca 33%,#2989d8 66%,#ff3030 66%,#ff0000 100%));
}

Related

Javascript animate Method Accumulation Problem

I am trying to do an animation example but there is a problem about accumulation. At first click on the button, the translate animation is done and the position of the element changes permanently. However, on second click it does the translate animation again but this time does not keep the last position. How to overcome this? I went through MDN document and applied the optional section but failed to complete this challenge. Regards,
https://jsfiddle.net/ja218pbr/19/
document.getElementsByTagName("button")[0].addEventListener("click", function() {
document.querySelectorAll("div")[0].animate([
{transform: 'translate(100%, 0)'}
], {
duration: 250,
composite: "accumulate",
iterationComposite: "accumulate",
fill: "forwards"
});
});
If I'm understanding this correctly, you want to be able to let the object slide again from the position it ended in earlier. To do this we can get the boundingClientRect each time the button is clicked and calculate the new translation distance by basically taking the width of the object and adding the left distance of the client rect, this will effectively allow the rectangle to keep moving from the distance it ended in before. Also I removed the composite property because it caused the rectangle to jump over the correct position.
document.getElementsByTagName("button")[0].addEventListener("click", function() {
const clientRect = document.querySelectorAll("div")[0].getBoundingClientRect();
const translationX = clientRect.width + clientRect.left;
document.querySelectorAll("div")[0].animate([{
transform: `translate(${translationX}px, 0)`
}], {
duration: 250,
iterationComposite: "accumulate",
fill: "forwards"
});
});
body {
margin: 0;
}
div {
position: relative;
height: 150px;
width: 150px;
background-color: yellow;
text-align: center;
line-height: 150px;
}
<div>Moving Object</div>
<button>Press</button>

Make left side image sticky while right side scrolls with Wordpress and Waypoints

I'm designing a website with Wordpress and the Divi theme. I would like there to be a 2 column section with an image on the left, and text on the right. When the image gets to the top of the viewport, I'd like the image to be be 100% of the viewport height and stick, while the right side continues to scroll until the next section.
http://newbcs.bigcityswing.com/groupclasstest
Here is what I have so far:
<script type="text/javascript">
(function($) {
if ( $.fn.waypoint ) {
var $waypoint_selector,
$waypoint_selector = $('#top-section'),
$site_header = $('#main-header'),
$fixed_column = $('#stickySection .stickyColumn1'),
$non_fixed_column = $('#stickySection .unstickyColumn2'),
$offset = $site_header.height() +
$waypoint_selector.height();
console.log($offset);
$waypoint_selector.waypoint( {
handler : function( direction ) {
if ( direction === 'down' ) {
$fixed_column.addClass( 'wpc-fixed-column' );
$non_fixed_column.addClass('wpc-non-fixed-column')
console.log('down');
} else {
$fixed_column.removeClass( 'wpc-fixed-column' );
$non_fixed_column.removeClass('wpc-non-fixed-column')
console.log('up');
}
},
offset: -$offset
} );
}
})(jQuery)
And CSS:
.wpc-fixed-column {
position: fixed;
top: 0;
}
.unstickyColumn2.wpc-non-fixed-column {
left: 33.333%;
}
I can't get anything to happen, and when I look at the console in Chrome, I get this:
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
Any help would be really appreciated.
Thanks
css:
.stickyColumn1 {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.unstickyColumn2 {
width: 100%;
padding-left: 33.4%;
}

HTML + CANVAS: Constellation background animation

I've been wanting to implement a moving constellation background for a site of mine.
This is an example of the effect I'd like to achieve:
The image doesn't show, but those constellations are constantly moving. I took that from the: https://www.nuclino.com/ site, which is awesome BTW.
So here my questions:
How could I use a CSS animation/transition to implement this effect? CSS transitions only let me specify positions at every step of the animation.
Is there any JS library for this effect?
Here you go:
http://codepen.io/JulianLaval/pen/KpLXOO/
// particle.min.js hosted on GitHub
// Scroll down for initialisation code
!function(a){var b="object"==typeof self&&self.self===self&&self||"object"==typeof global&&global.global===global&&global;"function"==typeof define&&define.amd?define(["exports"],function(c){b.ParticleNetwork=a(b,c)}):"object"==typeof module&&module.exports?module.exports=a(b,{}):b.ParticleNetwork=a(b,{})}(function(a,b){var c=function(a){this.canvas=a.canvas,this.g=a.g,this.particleColor=a.options.particleColor,this.x=Math.random()*this.canvas.width,this.y=Math.random()*this.canvas.height,this.velocity={x:(Math.random()-.5)*a.options.velocity,y:(Math.random()-.5)*a.options.velocity}};return c.prototype.update=function(){(this.x>this.canvas.width+20||this.x<-20)&&(this.velocity.x=-this.velocity.x),(this.y>this.canvas.height+20||this.y<-20)&&(this.velocity.y=-this.velocity.y),this.x+=this.velocity.x,this.y+=this.velocity.y},c.prototype.h=function(){this.g.beginPath(),this.g.fillStyle=this.particleColor,this.g.globalAlpha=.7,this.g.arc(this.x,this.y,1.5,0,2*Math.PI),this.g.fill()},b=function(a,b){this.i=a,this.i.size={width:this.i.offsetWidth,height:this.i.offsetHeight},b=void 0!==b?b:{},this.options={particleColor:void 0!==b.particleColor?b.particleColor:"#fff",background:void 0!==b.background?b.background:"#1a252f",interactive:void 0!==b.interactive?b.interactive:!0,velocity:this.setVelocity(b.speed),density:this.j(b.density)},this.init()},b.prototype.init=function(){if(this.k=document.createElement("div"),this.i.appendChild(this.k),this.l(this.k,{position:"absolute",top:0,left:0,bottom:0,right:0,"z-index":1}),/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.background))this.l(this.k,{background:this.options.background});else{if(!/\.(gif|jpg|jpeg|tiff|png)$/i.test(this.options.background))return console.error("Please specify a valid background image or hexadecimal color"),!1;this.l(this.k,{background:'url("'+this.options.background+'") no-repeat center',"background-size":"cover"})}if(!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.particleColor))return console.error("Please specify a valid particleColor hexadecimal color"),!1;this.canvas=document.createElement("canvas"),this.i.appendChild(this.canvas),this.g=this.canvas.getContext("2d"),this.canvas.width=this.i.size.width,this.canvas.height=this.i.size.height,this.l(this.i,{position:"relative"}),this.l(this.canvas,{"z-index":"20",position:"relative"}),window.addEventListener("resize",function(){return this.i.offsetWidth===this.i.size.width&&this.i.offsetHeight===this.i.size.height?!1:(this.canvas.width=this.i.size.width=this.i.offsetWidth,this.canvas.height=this.i.size.height=this.i.offsetHeight,clearTimeout(this.m),void(this.m=setTimeout(function(){this.o=[];for(var a=0;a<this.canvas.width*this.canvas.height/this.options.density;a++)this.o.push(new c(this));this.options.interactive&&this.o.push(this.p),requestAnimationFrame(this.update.bind(this))}.bind(this),500)))}.bind(this)),this.o=[];for(var a=0;a<this.canvas.width*this.canvas.height/this.options.density;a++)this.o.push(new c(this));this.options.interactive&&(this.p=new c(this),this.p.velocity={x:0,y:0},this.o.push(this.p),this.canvas.addEventListener("mousemove",function(a){this.p.x=a.clientX-this.canvas.offsetLeft,this.p.y=a.clientY-this.canvas.offsetTop}.bind(this)),this.canvas.addEventListener("mouseup",function(a){this.p.velocity={x:(Math.random()-.5)*this.options.velocity,y:(Math.random()-.5)*this.options.velocity},this.p=new c(this),this.p.velocity={x:0,y:0},this.o.push(this.p)}.bind(this))),requestAnimationFrame(this.update.bind(this))},b.prototype.update=function(){this.g.clearRect(0,0,this.canvas.width,this.canvas.height),this.g.globalAlpha=1;for(var a=0;a<this.o.length;a++){this.o[a].update(),this.o[a].h();for(var b=this.o.length-1;b>a;b--){var c=Math.sqrt(Math.pow(this.o[a].x-this.o[b].x,2)+Math.pow(this.o[a].y-this.o[b].y,2));c>120||(this.g.beginPath(),this.g.strokeStyle=this.options.particleColor,this.g.globalAlpha=(120-c)/120,this.g.lineWidth=.7,this.g.moveTo(this.o[a].x,this.o[a].y),this.g.lineTo(this.o[b].x,this.o[b].y),this.g.stroke())}}0!==this.options.velocity&&requestAnimationFrame(this.update.bind(this))},b.prototype.setVelocity=function(a){return"fast"===a?1:"slow"===a?.33:"none"===a?0:.66},b.prototype.j=function(a){return"high"===a?5e3:"low"===a?2e4:isNaN(parseInt(a,10))?1e4:a},b.prototype.l=function(a,b){for(var c in b)a.style[c]=b[c]},b});
// Initialisation
var canvasDiv = document.getElementById('particle-canvas');
var options = {
particleColor: '#888',
background: 'https://raw.githubusercontent.com/JulianLaval/canvas-particle-network/master/img/demo-bg.jpg',
interactive: true,
speed: 'medium',
density: 'high'
};
var particleCanvas = new ParticleNetwork(canvasDiv, options);
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#particle-canvas {
width: 100%;
height: 100%;
}
<div id="particle-canvas"></div>
<script src="https://rawgit.com/JulianLaval/canvas-particle-network/master/particle-network.min.js"></script>
You can download the fully developed package from npm:
https://www.npmjs.com/package/canvas-particle-network

overflow-y: scroll causing issues with JQuery

When I add overflow-y:scroll to the .nav styling the button to open the navigation requires 2 clicks. Change this to overflow: none and it only requires 1 click as intended when using the following jquery:
$(function(){
var nav = $('.nav'),
navBut = $('.navBut');
navBut.click(function(){
if(nav.width() === 0){
nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
} else {
nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
}
});
Can anybody see why this would be the case or how I can solve this?
http://jsfiddle.net/9ubxyw0t/2/
Rather than checking if the width of .nav is equal to 0, you need to check to see if it is less than or equal to 0.
Your original issue only seemed to effect certain browsers. It seems like some browsers would give the element a negative width when the overflow property was set to scroll. I guess this is just a cross-browser rendering inconsistency.
Updated Example
var nav = $('.nav'),
navBut = $('.navBut');
navBut.on('click', function () {
if (nav.width() <= 0) {
nav.stop().animate({
width: '15%',
opacity: '1.0'
}, 300);
} else {
nav.stop().animate({
width: '0',
opacity: '0.0'
}, 300);
}
});

Enyo JS Vertical Sliders

I am trying to code a vertical slider in enyo (Like a control on mixing desk). I was trying to avoid starting from scratch so I started tweaking the onyx.Slider class. I changed to styles from left to top and from width to height and with a few other tweaks, it's working. I'm now stuck on getting the slider to fill from bottom to top as at the minute it is vertical but it fills from the top down. Thanks in advance for any help.
Here are the code changes I have done:
in ProgressBar.js:
updateBarPosition: function(inPercent) {
this.$.bar.applyStyle("height", inPercent + "%");
},
in Slider.js (dividing by 64 is a temporary hack):
valueChanged: function() {
this.value = this.clampValue(this.min, this.max, this.value);
var p = this.calcPercent(this.value);
this.updateKnobPosition(p/64);
if (this.lockBar) {
this.setProgress(this.value);
}
},
updateKnobPosition: function(inPercent) {
this.$.knob.applyStyle("top", inPercent + "%");
},
calcKnobPosition: function(inEvent) {
var y = inEvent.clientY - this.hasNode().getBoundingClientRect().top;
return (y / this.getBounds().height) * (this.max - this.min) + this.min;
},
CSS:
/* ProgressBar.css */
.onyx-progress-bar {
margin: 8px;
height: 400px;
width: 8px;
border: 1px solid rgba(15, 15, 15, 0.2);
border-radius: 3px;
background: #b8b8b8 url(./../images/gradient-invert.png) repeat-x;
background-size: auto 100%;
}
.onyx-progress-bar-bar {
height: 100%;
border-radius: 3px;
background: #58abef url(./../images/gradient.png) repeat-x;
background-size: auto 100%;
}
Tom
There are a couple of approaches you could take. The most obvious (except for the fact it didn't occur to me first) is just to swap the background/gradient of the bar and the bar-bar. This will give you the appearance of filling from the bottom. I would recommend this.
The other method is what I did in this jsFiddle here: http://jsfiddle.net/RoySutton/b9PmA/ (Do ignore the doubled updateBarPosition function)
Instead of modifying those files directly, I derived from Slider and overrode the appropriate functions and added a new class for the vertical slider.
I changed the 'fill' to be absolutely positioned within the slider.
Now, your next problem is that value '0' is fully filled and '100' is fully empty. I handled that by modifying your calcKnobPosition to adjust from max and inverting the positioning logic as seen in this fiddle here: http://jsfiddle.net/RoySutton/b9PmA/2/
return this.max - (y / this.getBounds().height) * (this.max - this.min);

Categories