Disable slider mouse control? - javascript

How can I remove mouse interaction over the slider but keep the function where it decreases when I click the button and change color? (only in jquery mobile and jquery)
So if I press on the slider nothing should happen, only when I press the button.
Can also the slider decrease in the opposite direction? From left to right?
This is the code:
HTML:
<div id='slider' class='sliderBar'></div>
<button>Remove 10%</button>
CSS:
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#slider {
height:20px;
max-height:20px;
}
.sliderBar-progress {
background:rgb(0, 255, 0);
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s; /* for Safari */;
}
JS:
$('#slider').sliderBar({
start: 100,
onChange: function (val) {
var red = 0,
green = 0;
if (val >= 50) {
red = 255 - Math.round(((val - 50) / 50) * 255);
green = 255;
} else {
red = 255;
green = Math.round(((val) / 50) * 255);
}
$('.sliderBar-progress').css({
background: "rgb(" + red + "," + green + ",0)"
});
}
});
$('button').on('click', function () {
$('#slider').setsliderBar($('#slider').getsliderBar()-10, true);
});
Thank you!

What you are really looking for is a progress bar, not a slider. In your example you appear to be using a third party plugin for the slider; so eliminating mouse interaction and getting right to left functionality would involve changing the plugin code.
Alternatively, it is pretty easy to roll your own with just the functionality you need.
Here is a DEMO
For markup you just need 2 divs:
<div id="slider" class="progressBar">
<div class="progress"></div>
</div>
Then 2 CSS rules to make the track and bar look the way you want (tweak to your taste). Setting the position of the progress div to right: 0 will make it go from left to right.
.progressBar{
position: relative;
box-sizing: border-box;
box-shadow: 1px 1px 3px #777 inset ;
-webkit-box-shadow: 1px 1px 6px #777 inset;
height: 24px;
max-height: 24px;
overflow: hidden;
width: 100%;
border: 1px solid rgb(193, 193, 193);
background-color: rgb(224, 224, 224);
border-radius: 6px;
}
.progress {
position: absolute;
box-sizing: border-box;
box-shadow: inset 0px 0 5px 0 #777;
-webkit-box-shadow: inset 0px 0 5px 0 #777;
right: 0px;
height: 24px;
margin-top: 0px;
background-color: orange;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s; /* for Safari */;
}
For getting and setting the progress/color, add these functions:
function GetProgress(){
var val = $("#slider .progress").outerWidth();
var tot = $("#slider").outerWidth();
if (tot <= 0) return 0;
return Math.floor(val * 100 / tot);
}
function SetProgress(val){
if (val < 0) val = 0;
if (val > 100) vall = 100;
var color = GetColorForVal(val);
$("#slider .progress").css({"background": color, "width": val + "%"});
}
function GetColorForVal(val){
var red = 0,
green = 0;
if (val >= 50) {
red = 255 - Math.round(((val - 50) / 50) * 255);
green = 255;
} else {
red = 255;
green = Math.round(((val) / 50) * 255);
}
return "rgb(" + red + "," + green + ",0)";
}
You can then get and set progress by calling these functions:
$('#subtract').on('click', function () {
var curVal = GetProgress() - 10;
SetProgress(curVal);
});
UPDATE: There can be rounding errors calculating current width, so instead we can read it from the style:
function GetProgress(){
var curWid = $("#slider .progress")[0].style.width || 100;
return parseInt(curWid);
}
Updated DEMO

Related

JavaScript orientation API dont work on mobile

i want to move ball example from:
https://developer.mozilla.org/en-US/docs/Web/Events/Detecting_device_orientation
I was trying to use accelometer or gyroskope.
The demo from mozilla works on my phone.
My demo don't works on the same phone - so its code fail i think.
Don't know why it doesn't work.
My Example link:
http://serwer2134873.home.pl/tests/orientation/index.html
So i created the same code:
<head>
<meta charset="utf-8">
<style type="text/css">
svg:not(:root) {
display: block;
}
.playable-code {
background-color: #f4f7f8;
border: none;
border-left: 6px solid #558abb;
border-width: medium medium medium 6px;
color: #4d4e53;
height: 100px;
width: 90%;
padding: 10px 10px 0;
}
.playable-canvas {
border: 1px solid #4d4e53;
border-radius: 2px;
}
.playable-buttons {
text-align: right;
width: 90%;
padding: 5px 10px 5px 26px;
}
.garden {
position: relative;
width : 200px;
height: 200px;
border: 5px solid #CCC;
border-radius: 10px;
}
.ball {
position: absolute;
top : 90px;
left : 90px;
width : 20px;
height: 20px;
background: green;
border-radius: 100%;
}
</style>
<title>Detecting device orientation - Orientation_example - code sample</title>
</head>
<body>
<div class="garden">
<div class="ball"></div>
</div>
<pre class="output"></pre>
<script>
var ball = document.querySelector('.ball');
var garden = document.querySelector('.garden');
var output = document.querySelector('.output');
var maxX = garden.clientWidth - ball.clientWidth;
var maxY = garden.clientHeight - ball.clientHeight;
function handleOrientation(event) {
var x = event.beta; // In degree in the range [-180,180)
var y = event.gamma; // In degree in the range [-90,90)
output.textContent = `beta : ${x}\n`;
output.textContent += `gamma: ${y}\n`;
// Because we don't want to have the device upside down
// We constrain the x value to the range [-90,90]
if (x > 90) { x = 90};
if (x < -90) { x = -90};
// To make computation easier we shift the range of
// x and y to [0,180]
x += 90;
y += 90;
// 10 is half the size of the ball
// It center the positioning point to the center of the ball
ball.style.top = (maxY*y/180 - 10) + "px";
ball.style.left = (maxX*x/180 - 10) + "px";
}
window.addEventListener('deviceorientation', handleOrientation);
</script>
</body>
Needed SSL connection protocol (https).
Doesn't expect that :)

How can I avoid the automatic left alignment in rotation?

I am trying to move and rotate the object in the direction of the mouse click. Unfortunately during the first click object automatically align itself to left. It works perfectly after the first click but it doesn't work during the first click. I couldn't find out why it goes automatically to upper left corner. How can I fix that? Here is the code:
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
var box = $("#thing");
var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
theThing.style.transform += "rotate(" + angle + "deg)";
setTimeout(function() {
theThing.style.transform = translate3dValue;
}, 500);
}
body {
background-color: #FFF;
padding: 0;
margin: 0;
}
#contentContainer {
width: 550px;
height: 350px;
border: 15px #EDEDED;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
width: 75px;
height: 75px;
background-color: rgb(255, 207, 0);
border-radius: 0%;
transform: translate3d(200px, 100px, 0);
transition: transform.2s ease-in;
}
#triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 45px solid transparent;
border-bottom: 75px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
<div id="thing">
<div id="triangle">
</div>
</div>
</div>
Because initially the transform is set in the CSS thus you cannot append the rotation to it and you will simply override it. Make it inline using JS and it will work fine. It will behave like the next ones since later you will be adding all the transform inline:
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);
theThing.style.transform="translate3d(200px, 100px, 0)";
function getClickPosition(e) {
var xPosition = e.clientX;
var yPosition = e.clientY;
var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
var box = $("#thing");
var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
theThing.style.transform += "rotate(" + angle + "deg)";
setTimeout(function() {
theThing.style.transform = translate3dValue;
}, 500);
}
body {
background-color: #FFF;
padding: 0;
margin: 0;
}
#contentContainer {
width: 550px;
height: 350px;
border: 15px #EDEDED;
overflow: hidden;
background-color: #F2F2F2;
cursor: pointer;
}
#thing {
width: 75px;
height: 75px;
background-color: rgb(255, 207, 0);
border-radius: 0%;
/*transform: translate3d(200px, 100px, 0);*/
transition: transform.2s ease-in;
}
#triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 45px solid transparent;
border-bottom: 75px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
<div id="thing">
<div id="triangle">
</div>
</div>
</div>

How to change border size dynamically of a circle using css and JS?

I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function yesno() {
navigator.vibrate(500);
for (var i = 0; i < 40; i++) {
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";
}
if (Math.random() < 0.5) {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";
}
} else {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";
}
}
}
</script>
<style type="text/css">
#yesno {
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);
}
#ynbtn {
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>
Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.
var circle = document.querySelector('.circle');
function decreaseBorder() {
circle.classList.add('thin');
setTimeout(function() {
circle.classList.remove('thin');
circle.classList.add('bold');
}, 1000);
}
window.onload = function() { decreaseBorder(); }
.circle {
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);
}
.thin {
border-width: 0;
}
.bold {
border-width: 40px;
border-color: rgba(0,0,0,1);
}
<div class="circle"></div>

Inline-block position not as expected (CSS)

for a bit of fun I decided to make a sliding shelf today. I got it looking and working how I wanted and then decided to put some content in the cards.
I added text to the first card and it moved down almost on to a new line. I can't explain why this happened (though I'm sure there's a simple explanation). Can one of you tell me what I'm missing, please?
Thank you 🙂
function hideTrigger() {
leftTrig.removeAttribute("hidden");
rightTrig.removeAttribute("hidden");
switch (pos) {
case 0:
leftTrig.setAttribute("hidden", "");
break;
case posMax:
rightTrig.setAttribute("hidden", "")
}
}
function moveHelper() {
boxesCont.style.transform = slideHelper(), hideTrigger(), setTimeout(function() {
end = boxCont[posMax].getBoundingClientRect().left <= window.innerWidth ? 1 : 0
}, 300)
}
function slideHelper() {
return "translate(-" + boxSize * pos + "px)"
}
function moveRight() {
pos < posMax && (end ? endHelper() : (pos++, moveHelper()))
}
function moveLeft() {
pos > 0 && (pos--, moveHelper())
}
function moveTo(e) {
e >= 0 && e <= posMax && (pos = e, moveHelper())
}
function endHelper() {
pos++;
let edgeDif = boxSize - boxMargin - (window.innerWidth - boxCont[posMax].getBoundingClientRect().left);
rightTrig.setAttribute("hidden", ""), boxesCont.style.transform = "translate(-" + (boxSize * (pos - 1) + edgeDif) + "px)"
}
var leftTrig = document.querySelector(".directional.left");
var rightTrig = document.querySelector(".directional.right");
var boxesCont = document.querySelector(".shelf .boxes");
var boxCont = boxesCont.querySelectorAll(".box");
var boxStyle = boxCont[0].currentStyle || window.getComputedStyle(boxCont[0]);
var boxMargin = parseFloat(boxStyle.marginLeft);
var boxSize = boxCont[0].offsetWidth + 2 * boxMargin;
var end = 0;
var pos = 0;
var posMax = boxCont.length - 1;
leftTrig.addEventListener("click", function() {
moveLeft()
});
rightTrig.addEventListener("click", function() {
moveRight()
});
moveHelper();
body {
margin: 0;
font-family: Roboto;
text-align: justify;
}
.shelf {
position: relative;
overflow-x: hidden;
font-size: 0;
}
.shelf button.directional {
position: absolute;
transition: opacity 0.3s cubic-bezier(.25, .8, .25, 1);
height: 100%;
width: 30px;
top: 0;
opacity: 0;
border: 0;
border-radius: 0;
background: rgba(55, 71, 79, 0.4);
color: #F5F5F5;
cursor: pointer;
z-index: 9999;
}
.shelf button.directional.left {
left: 0;
}
.shelf button.directional.right {
right: 0;
}
.boxes {
white-space: nowrap;
transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
}
.box {
display: inline-block;
border-radius: 2px;
height: 200px;
width: 350px;
margin: 0 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
font-size: 16px;
}
.box:nth-child(even) {
background: #f44336;
}
.box:nth-child(odd) {
background: #2196F3;
}
.shelf:hover button.directional {
opacity: 1;
}
.shelf:hover button.directional:hover {
background: rgba(55, 71, 79, 0.8);
}
*[hidden] {
display: none;
}
<div class="shelf">
<button class="directional left">‹</button>
<div class="boxes">
<div class="box">test</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button class="directional right">›</button>
</div>
Link to JSFiddle
Add vertical-align: top; to your .box.
This will get your inline block elements to align themselves vertically across their top points.
Problem with inline-block elementsis, most browsers including IE will add 1px around inline and inline-block elements.
https://davidwalsh.name/remove-whitespace-inline-block
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
https://matthewlein.com/articles/inline-block-no-space-font/
https://tylercipriani.com/blog/2012/08/01/display-inline-block-extra-margin/
This happens if you stack your inline-block elements. Meaning, in order to keep your code more readible if you put line breaks in html before inline-block elements, you will get this gap and it will cause unwanted UI.
So basically you need to set font-size:0 to wrapper element then set your font-size back to normal in inline-block elements if you have to keep them in separate lines like
<li>Some content<li>
<li>Some content<li>
<li>Some content<li>
or you need to merge them in single line
<li>Some content<li><li>Some content<li><li>Some content<li>

Max-height transition problems

I make autocomplete
Max-height set from JavaScript:
if (data.length < 10)
element.css({'max-height': (30 * newVal.length) + 'px'})
If max-height decreases(e.g. 300px to 150px), transition does not work.
If max-height increases(e.g. 150px to 300px), transition works.
.autocomplete-ion {
background-color: gray;
position: absolute;
width: 90%;
left: 5%;
top:45px;
overflow-y: auto;
z-index: 10000000;
background-color: #FAFAFA;
transition: 0.8s;
max-height: 300px;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);
ul li {
padding:5px;
}
}
It is because you have max-height value as 300px in your css. So you should remove that to work properly
.autocomplete-ion {
background-color: gray;
position: absolute;
width: 90%;
left: 5%;
top:45px;
overflow-y: auto;
z-index: 10000000;
background-color: #FAFAFA;
transition: 0.8s;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);
ul li {
padding:5px;
}
Because the height change from element add/remove will not cause a animation.
When elements increasing, the new height is likely to always larger than previous max-height, so when you set a higher max-height, the animation appears from old max-height to new one.
When elements decreasing, if you remove the elements first, then the height will decrease first, without animation, then, when you set the new max-height, it'll only animate part only if new max-height is smaller than decreased height. And if the new max-height is still larger than decreased height, the animation not appears at all.
So you have to first set to the new max-height when new elements is less then old ones, to trigger animation, and set the list to new one(either by removing or create a new list) when animation ends.
var list = $(".autocomplete-ion ul");
var tryAppend = function(newList) {
var curList = $(".autocomplete-ion ul li");
var curLength = curList.length;
var newLength = newList.length;
if (newLength <= 10) {
// If its adding, no need to listen to animation, as the new height will be definetly larger.
// Otherwise,
if (newLength < curLength) {
$(".autocomplete-ion").on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
list.empty().append(newList);
$(this).off();
});
$(".autocomplete-ion").css({'max-height': (30 * newLength) + 'px'});
} else {
$(".autocomplete-ion").css({'max-height': (30 * newLength) + 'px'});
list.empty().append(newList);
}
}
};
var create = function(num) {
var list =[];
var i, li;
for (i = 0; i < num; ++i ) {
li = $("<li>").text("Test li " + (i + 1));
list.push(li);
}
tryAppend(list);
};
$(".cl").click(function() {
var counts = parseInt($(this).data("len"), 10);
create(counts);
});
$(".clear").click(function() {
list.empty();
});
.autocomplete-ion {
background-color: gray;
position: absolute;
width: 90%;
left: 5%;
top:45px;
overflow-y: auto;
z-index: 10000000;
background-color: #FAFAFA;
transition: 0.8s;
max-height: 0px;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);
ul li {
height: 40px;
padding:5px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="autocomplete-ion">
<ul>
</ul>
</div>
<button class="cl" data-len="1">1</button>
<button class="cl" data-len="5">5</button>
<button class="cl" data-len="10">10</button>

Categories