We Keep Coding

generating manual linear gradient in vue with the color ,percentage and degree input

I am trying to create a manual linear gradient from color,degree and percentage input.User can add as much color as they want. What i want to do is user will pick the degree.Then user will select a color and percentage.When the user click addButton it will be concatinated with string and this way user will concatinate the color and percentage as much as they want and the final value will be something like this:
linear-gradient(0deg, #0359b5ff 0%, #f6ce01ff 50%, #f6ce01ff 100%)
Here is my template where there is a color picker,percentage and degree input.onclick the add button it will generate value in the final Gradient input box
<template>
<VContainer class="mx-5 fluid align-self-start">
<div class="d-flex">
<label>
Final gradient
</label>
<VTextField
v-model="gradient"
filled
flat
autofocus
#blur="$v.gradient.$touch()"
>
</VTextField>
</div>
<div class="d-flex">
<label>
Percentage
</label>
<input
style="border:1px solid black"
v-model="percentage"
type="number"
#change="onPercentage()"
>
</div>
<div class="d-flex">
<label>
Degree
</label>
<input
style="border:1px solid black"
v-model="degree"
type="number"
>
</div>
<input
v-model="gradientColor"
type="color"
#change="onChange()"
>
<div class="container">
<div class="button-group">
<div>
<VBtn
#click="addColor"
class="d-flex mx-auto mt-6"
width="137px"
height="40px"
color="primary"
>
addColor
</VBtn>
<button
#click="addColor"
/>
</div>
</div>
</div>
</VContainer>
</template>
this is my data value:
data() {
return {
degree: 0,
coloring: ' ',
gradientColor: ' ',
primaryColor: ' ',
percentage: 0,
};
},
In the computed gradient final output is generated
computed: {
gradient() {
let colors = 'linear-gradient(';
colors += `${(this.degree)}deg`;
colors += this.gradientColor + this.percentage;
colors += ')';
return colors;
},
primary() {
let colors = ' ';
colors += this.primaryColor;
return colors;
},
}
and here is all the method.onClick the addColor percentage and color value will be concatinated
methods: {
onChange(val:string) {
this.primaryColor = `${(val)}`;
},
onPercentage(val:string) {
this.primaryColor = `${(val)}`;
},
addColor() {
this.gradientColor.concat(this.primaryColor);
this.primaryColor = '';
},
}
I dont want use an array for this.I want the value would be added in a single variable string.But somehow i am not being able to do it.How can i do it to work?

To start off you can use template literal here and that would shorten your code quite a bit.
computed: {
gradient() {
let colors = 'linear-gradient(';
colors += `${(this.degree)}deg`;
colors += this.gradientColor + this.percentage;
colors += ')';
return colors;
},
I think using array to store the selected color and percentage values works nicely here because you can then stringify your array and add commas (only where you need them) by using .join(', ').
computed: {
gradient() {
return `linear-gradient(${this.degree}deg, ${this.colors.join(", ")})`;
},
},
As for solving this without using arrays it becomes more cumbersome. You'd have to remove the last comma by searching for its index and then replacing it with a blank. Built-in string method lastIndexOf(',') would come in handy here.
Here's the code to make it work with arrays. Commented out is the code to make it work just with string minus the last comma deletion. I'm sure you can figure that out yourself 😉
data() {
return {
degree: 0,
gradientColor: "",
selectedColor: "#000",
percentage: 0,
colors: [],
// colors: "",
};
},
computed: {
gradient() {
return `linear-gradient(${this.degree}deg, ${this.colors.join(", ")})`;
// return `linear-gradient(${this.degree}deg, ${this.colors} )`;
},
},
methods: {
addColor() {
this.colors.push(this.selectedColor + " " + this.percentage + "%");
// this.colors += `${this.selectedColor} ${this.percentage}% ,`;
},
},
Markup:
<template>
<div class="mx-5 fluid align-self-start">
<div class="d-flex">
<label> Final gradient </label>
<input
style="width: 100%"
v-model="gradient"
#blur="$v.gradient.$touch()"
/>
</div>
<div class="d-flex">
<label> Percentage </label>
<input
style="border: 1px solid black"
v-model="percentage"
type="number"
/>
</div>
<div class="d-flex">
<label> Degree </label>
<input style="border: 1px solid black" v-model="degree" type="number" />
</div>
<input v-model="selectedColor" type="color" />
<div class="container">
<div class="button-group">
<div>
<button
#click="addColor"
class="d-flex mx-auto mt-6"
width="137px"
height="40px"
color="primary"
>
addColor
</button>
</div>
</div>
</div>
</div>
</template>
PS: I removed #change methods as you already bind them to degree and selectedColor using v-model.

How to disable all elements within a div using jquery

I have a div and when a checkbox is clicked I want to disable all the elements inside the div, including disabling the onClick of one of the elements. Here is the codepen: https://codepen.io/anon/pen/JVwMOq
HTML:
<input type="checkbox" onChange="checkMe(this)">
<div id="test">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe()">
</span>
</div>
JS:
function checkMe(element){
if($(element).prop('checked') === true){
$('#test').prop('disabled', true).off("click");
}
else{
$('#test').prop('disabled', false).on("click");
}
}
Any advice? Thanks!

You can use this, disabled with CSS.
you can't add disabled on div, it's working with input, etc..
$('#clickCheckbox').change(function() {
if($(this).is(":checked")) {
$('#test').addClass('disable-button');
}else{
$('#test').removeClass('disable-button')
}
$('#clickCheckbox').val($(this).is(':checked'));
});
.disable-button {
pointer-events: none;
cursor: not-allowed;
text-decoration: none;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="clickCheckbox">
<div id="test">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe()">
</span>
</div>

I have a working solution below.
I have added in an additional input field to check it works on multiple items.
I created an checking function to see if your item is checked.
const isChecked = (element) => document.getElementById(element.id).checked ? true : false
Then updated the likeMe function to pass in the current id and returned null if the checkbox is checked.
function likeMe(element) {
if (isChecked(element)) {
return null
} else {
console.log('Calling likeMe()');
}
}
Then I updated your checkMe function to pass in the current element and the targetdiv so this would be more reusable across other parts of your code.
function checkMe(element, targetDiv) {
const targetDivInput = `#${targetDiv} input`
const targetDivClassName = `.${targetDiv}`
if (isChecked(element)) {
$(targetDivInput).prop('disabled', true);
$(targetDivClassName).toggleClass('disabled')
} else {
$(targetDivInput).prop('disabled', false);
$(targetDivClassName).toggleClass('disabled')
}
}
Then made some small changes to the markup to pass in the ids into your functions
<div id="test">
<input type="text">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe('test')">
</span>
</div>
and added a disabled state to your css so the user wouldn't see the cursor.
#like{
cursor: pointer;
}
.disabled #like {
cursor: inherit;
}
This is the final result.
#like{
cursor: pointer;
}
.disabled #like {
cursor: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
const isChecked = (element) => document.getElementById(element.id).checked ? true : false
function likeMe(element) {
if (isChecked(element)) {
return null
} else {
console.log('Calling likeMe()');
}
}
function checkMe(element, targetDiv) {
const targetDivInput = `#${targetDiv} input`
const targetDivClassName = `.${targetDiv}`
if (isChecked(element)) {
$(targetDivInput).prop('disabled', true);
$(targetDivClassName).toggleClass('disabled')
} else {
$(targetDivInput).prop('disabled', false);
$(targetDivClassName).toggleClass('disabled')
}
}
</script>
<input id="textCheck" type="checkbox" onChange="checkMe(this,'test')">
<div id="test">
<input type="text">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe('test')">
</span>
</div>

Jquery trouble randomly selecting divs in a grid

I have a grid of 9 divs nested in columns of three. When the grid (#left) is clicked , 2 divs from the middle row, row="1" should have the class .show randomly applied to it, in the column where the no class was applied the div on the bottom row, row="2" should have the class '.show' applied. The attached picture shows the possible random outcomes. The same outcome should never appear consecutively.
I attached a code snippet of my code, currently, my index selection is not working as desired and I have struggled to find the reason why.
var obj = {
bindEvents: function() {
var _this = this;
$('#left').on("click", $.proxy(_this.interaction, _this));
},
interaction: function() {
var selector = this.randomGenerator(0, 3);
console.log('selector = ' + selector());
var $midRow = $('#left').find('div[row=1]');
var $bottomRow = $('#left').find('div[row=2]');
$midRow.removeClass('show');
$bottomRow.removeClass('show');
$midRow.not(':eq(' + selector() + ')').addClass('show');
$bottomRow.eq(selector()).addClass('show');
},
randomGenerator: function(min, max) {
var last;
console.log('last = ' + last);
return function () {
var random;
do {
random = Math.floor(Math.random() * (max - min)) + min;
} while (random === last);
last = random;
return random;
};
},
}
obj.bindEvents();
#left {
display: flex;
}
div[row] {
border: 1px solid black;
width: 20px;
background-color: yellow;
}
.show {
background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
<div col="0">
<div row="0">0</div>
<div row="1">1</div>
<div row="2">2</div>
</div>
<div col="1">
<div row="0">0</div>
<div row="1">1</div>
<div row="2">2</div>
</div>
<div col="2">
<div row="0">0</div>
<div row="1">1</div>
<div row="2">2</div>
</div>
</div>

You do not pass any element to the functions.
There is no this... You have to provide it.
EDIT
When you call selector(), you are aware that it is a function... And that a new number is produced each time you call the function.
If you want the same "number" to be used in both .eq() statement, run the function just once and keep the number in a variable.
See changes in code.
var obj = {
bindEvents: function(el) { // pass an element!
//var _this = this;
//$('#left').on("click", $.proxy(_this.interaction, _this));
el.on("click", $.proxy(obj.interaction(el), el)); // Call the obj function.
},
interaction: function(el) { // pass an element again!
var selector = obj.randomGenerator(0, 3); // Call the obj function.
// Get a number
var number = selector();
console.log('selector = ' + number);
var $midRow = $('#left').find('div[row=1]');
var $bottomRow = $('#left').find('div[row=2]');
$midRow.removeClass('show');
$bottomRow.removeClass('show');
$midRow.not(':eq(' + number + ')').addClass('show');
$bottomRow.eq(number).addClass('show');
},
randomGenerator: function(min, max) {
var last;
console.log('last = ' + last);
return function () {
var random;
do {
random = Math.floor(Math.random() * (max - min)) + min;
} while (random === last);
last = random;
return random;
};
},
}
obj.bindEvents($("#left"));
#left {
display: flex;
}
div[row] {
border: 1px solid black;
width: 20px;
background-color: yellow;
}
.show {
background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
<div col="0">
<div row="0">0</div>
<div row="1">1</div>
<div row="2">2</div>
</div>
<div col="1">
<div row="0">0</div>
<div row="1">1</div>
<div row="2">2</div>
</div>
<div col="2">
<div row="0">0</div>
<div row="1">1</div>
<div row="2">2</div>
</div>
</div>

How to use star rating (input) field many times in a page

I am new to jquery. I want to use this star rating(input) field several times in a page with same ids(as it will come dynamic). Please let me know how i do this.
Jsfiddle: http://jsfiddle.net/9xrkr/
<script src="http://www.radioactivethinking.com/rateit/src/jquery.rateit.js"></script>
<input type="range" min="0" max="5" value="0" step="1" id="backing1">
<div class="rateit" id="rateitHover" data-rateit-backingfld="#backing1" data-rateit-step="1" >
<span class="tooltip" style="float:right; padding-left:10px;"></span>
</div>
<script>
var tooltipvalues = ['Bad', 'Poor', 'Average', 'Good', 'Excellent'];
var valueToDisplay
$("#rateitHover").bind('over', function (event, value) {
$('.tooltip').text(tooltipvalues[value - 1]);
});
$("#rateitHover").bind('reset', function () {
$('.tooltip').text('');
$('#rateitHover').rateit('value')
});
$("#rateitHover").bind('rated', function (event, value) {
$('.tooltip').text('R: ' + tooltipvalues[value - 1]);
});
$('#rateitHover').bind('mouseleave', function() {
var v = $('#rateitHover').rateit('value');
if (v == 0) {
$('.tooltip').html('');
} else {
$('.tooltip').html('R: ' + tooltipvalues[v - 1]);
}
});
</script>

You must use classes (not the unique id of the element)
Try this:
HTML
<input type="range" min="0" max="5" value="0" step="1" id="backing1">
<input type="range" min="0" max="5" value="0" step="1" id="backing2">
<div class="rateit" id="rateitHover1" data-rateit-backingfld="#backing1" data-rateit-step="1" >
<span class="tooltip" style="float:right; padding-left:10px;"></span>
</div>
<div class="rateit" id="rateitHover2" data-rateit-backingfld="#backing2" data-rateit-step="1" >
<span class="tooltip" style="float:right; padding-left:10px;"></span>
</div>
JAVASCRIPT
var tooltipvalues = ['Bad', 'Poor', 'Average', 'Good', 'Excellent'];
var valueToDisplay
$(".rateit").bind('over', function (event, value) {
$(this).find('.tooltip').text(tooltipvalues[value - 1]);
});
$(".rateit").bind('reset', function () {
$(this).find('.tooltip').text('');
$(this).rateit('value')
});
$(".rateit").bind('rated', function (event, value) {
$(this).find('.tooltip').text('R: ' + tooltipvalues[value - 1]);
});
$('.rateit').bind('mouseleave', function() {
var v = $(this).rateit('value');
if (v == 0) {
$(this).find('.tooltip').html('');
} else {
$(this).find('.tooltip').html('R: ' + tooltipvalues[v - 1]);
}
});
Fiddle
http://jsfiddle.net/9xrkr/1/

Try changing ids to classnames, and try narrowing the selectors to relate to this, which should relate to the element that is triggered:
$('#rateitHover')
changes to:
$('.rateit')
Also, you need to get the tooltip that is within the element:
$('.tooltip')
changes to:
$(this).find('.tooltip')
And the $('#rateitHover').rateit('value') should be changed to $(this).rateit('value')
UPDATE
Apparently, since this is all served up dynamically, you can't make the above adjustments. Therefore, I would recommend you use a different script.
I've made something for this purpose in the past: http://codepen.io/bozdoz/pen/ClmLI
See if this code would suit your purposes. Notice that the stars all have classes, instead of ID's. It should be easier to manipulate. Hope this helps (someone). :)
HTML:
<div class="clearfix stars">
<div class="darn">Oh no!</div>
<div class="brilliant">Thanks!</div>
<div class="starHolder">
<div class="star">
<div class="star">
<div class="star">
<div class="star">
<div class="star"></div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.stars {width:450px;margin:5% auto;position:relative}
.star {width:66px;height:50px;background:url(http://www.prportfolio.ca/bjd/images/star.png) no-repeat;cursor:pointer;transition: all .5s;-moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s;}
.star:hover, .star.on {background-position: -66px 0px;}
.star .star { margin-left: 66px; }
.starHolder {width:345px;margin:0 auto;}
.darn {color:#5c2222}
.brilliant {color:#a0b9d8;right:0px}
.darn, .brilliant {line-height:50px;font-weight:bold;display:none;position:absolute}
JS (jQuery):
$('.star').click(function(e){
e.stopPropagation();
var i = $('.stars .star').index(this);
if(i==0||i==5){
$(this).parents('.stars').find('.darn').show().delay(100).fadeOut(1000);
}
if(i==4||i==9){
$(this).parents('.stars').find('.brilliant').show().delay(100).fadeOut(1000);
}
$(this).addClass('on').find('.star').removeClass('on').end().parents('.star').addClass('on');
});

jQuery miniColors colorpicker not positioned right

I am using jQuery miniColors colorpicker but in the sample code the picker appears right next to the field and button, in my case it appears at the very bottom of my document, it is as if it can't read in the position data of the button calling it.
Anyone had a similar issue with this plugin?
Here is what my code looks like (before jQuery initializes this as a color-picker)
<p style='position:absolute;top:0px;left:0px;margin-left:10px;'>
<input type='text' class='color-picker miniColors' name='data_0' id='data_0' size='6' value='".$data[0]."' />
</p>
. And after I run this code on it.
$('#data_0').miniColors({
change: function(hex, rgb) { $('#slide_bg').css("background-color",hex); }
});
. It looks like this.
<p style="position:absolute;top:0px;left:0px;margin-left:10px;">
<input type="text" class="color-picker miniColors" name="data_0" id="data_0" size="6" value="#ffffff" maxlength="7" autocomplete="off">
<span class="miniColors-triggerWrap">
<a class="miniColors-trigger" style="background-color: #ffffff" href="#"></a>
</span>
</p>
. And the actual colorpicker gets inserted at the very last of my (so right before the and looks like this:
<div class="miniColors-selector color-picker miniColors" style="left: 116px; ">
<div class="miniColors-hues">
<div class="miniColors-huePicker" style="top: 0px; "></div>
</div>
<div class="miniColors-colors" style="background-color: rgb(255, 0, 0); ">
<div class="miniColors-colorPicker" style="top: -5px; left: -5px; ">
<div class="miniColors-colorPicker-inner"></div>
</div>
</div>
</div>
. And appears below the footer of my page =(
As you can see it has a value for left:116px but nothing for the vertical positioning.

Please consider trying MiniColors 2.0, which changes the way positioning is handled for the dropdown. This version is a complete rewrite of the original one. We also added a number of new features that you may find useful.

Try putting the field inside a paragraph and define the position of paragraph with css and it will work.
E.g. -
<p style="position: absolute; left: 100; top: 100; margin-left: 10px;">
<input type="input" name="color-picker" class="color-picker" size="7" />
</p>

SOLUTION:
This is how I solved it. Solution is a bit jerky though.
I used show callback and add remove classes based on view
// add jquery function removeClassPrefix
$.fn.removeClassPrefix = function(prefix) {
this.each(function(i, it) {
var classes = it.className.split(' ').map(function(item) {
return item.indexOf(prefix) === 0 ? '' : item;
});
it.className = classes.join(' ');
});
return this;
};
// add more selector expressions to jquery
$.extend($.expr[':'], {
'off-top': function(el) {
return $(el).offset().top < $(window).scrollTop();
},
'off-right': function(el) {
return $(el).offset().left + $(el).outerWidth() - $(window).scrollLeft() > $(window).width();
},
'off-bottom': function(el) {
return $(el).offset().top + $(el).outerHeight() - $(window).scrollTop() > $(window).height();
},
'off-left': function(el) {
return $(el).offset().left < $(window).scrollLeft();
}
});
// use show event
$('#div_id').miniColors({
theme: 'bootstrap',
show: function() {
var $input = $(this);
var $minicolors = $input.parent();
var $panel = $minicolors.find('.minicolors-panel');
var classPrefix = 'minicolors-position-';
$minicolors.removeClassPrefix(classPrefix);
if ($panel.is(':off-top')) {
$minicolors.addClass(classPrefix + 'bottom');
}
if ($panel.is(':off-bottom')) {
$minicolors.addClass(classPrefix + 'top');
}
if ($panel.is(':off-left')) {
$minicolors.addClass(classPrefix + 'right');
}
if ($panel.is(':off-right')) {
$minicolors.addClass(classPrefix + 'left');
}
}
});