Change text box quantity, change picture upon hover with jQuery/Javascript - javascript

I would like to do 2 things in jQuery or Javascript,
Change with quantity in a text box with up and down arrows. The default qty is 1, and I want to increment by 1 when a user clicks the up arrow, and vice versa.
Can I change the arrow to another picture (color) when the mouse hovers on it?
Thank you.

I would recommend using click() command for changing the value in a textbox and the hover() command for changing the arrow to another picture (color)
for example, for the incrementer
$('#myImg')
.click( function() {
var num = $('#myTextbox').text();
if (!isNaN(num))
$('#myTextbox').text(parseInt(num,10) + 1);
.hover(
function() { $(this).css('background-image','over.jpg'), //over
function() { $(this).css('background-image','out.jpg') // out
)

1.)
<script>
function increase() {
var textbox = document.getElementById('textbox');
textbox.value = parseInt(textbox.value) + 1;
}
</script>
<input id="textbox" name="textbox" type="text" value="1">
up
2.) Should be down with CSS :hover

Related

Kendo UI - Text color change when under modification

I have provided a working demo.
Demo in Dojo
Is it possible to change the text color went under modification?
For example, when I click on Edit button, the whole rows will change to blue color text and if I click Cancel back to normal color.
Thank you in advance.
Well. I manage to accomplished this by create a hidden field.
On edit event, I need to add:
function(e) {
e.model.set("HiddenColumnName", "Y");
highlightBlue();
},
then on cancel event, I need to add this as well.
function(e) {
e.model.set("HiddenColumnName", "N");
},
and last but not least the highlight color function.
function highlightBlue() {
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.data();
$.each(data, function (i, row) {
if (row.HiddenColunName == "Y") {
$('tr[data-uid="' + row.uid + '"] ').css("background-color", "blue");
}
})
}
Here a I provide a working demo. Don't forget to make the field hidden.

Faking a toggle switch with an Input Range, dealing with custom range

I need to fake a toggle switch with an input range.
The idea is to create a short range, with just 2 values, min and max. the css button will match one end of the range. So far you click on it, the div containing the range will move a bit bringing the other end of the ranger under your mouse.
I have this function, which applies on all input ranges on the page. But i need to apply it only on some classes, not all. But i can't find the right syntax and it doesn't work.
The Javascript:
$('input[type="range"]').on('change', function() {
$('div#launcher01').css('margin-top', parseInt($(this).val() ) > 0 ? parseInt($(this).val() ) + 'px' : '0px');
});
CSS:
.fakbl input {
height: 50px;
width: 50px;
HTML:
<div id="launcher01">
<div class="fakbl">
<input type="range" id="launch01" name="launch01" min="0" max="50" step="50"" />
</div>
</div>
Fiddle
Since you are already using jQuery, you can phrase your widget-maker as a jQuery plugin as follows :
$.fn.rangeButton = function(containerSelector) {
return this.each(function() {
var $self = $(this);
$self.on('change', function() {
$self.closest(containerSelector).css('margin-left', ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px');
}).trigger('change'); // trigger 'change' immediately to initialize everything.
});
};
Now, invoke the widget on each of your ranges, and pass a selector for the appropriate container :
$('#launcher01 input[type="range"]').rangeButton('#launcher01');
$('#launcher02 input[type="range"]').rangeButton('#launcher02');
Demo
Alternatively, by giving all containers the same class, you can invoke all your widgets with a single command :
$('.myClass input[type="range"]').rangeButton('.myClass');
Demo
May I ask a refinement please?
I completed the fake button. As you can see in this FIDDLE
(the white box will disappear, I added some opacity to it just to show that the button is working)
The red box (now green due to my buggy code part) is in the background and I would need it to change color depending on the status. I tried this but it doesn't work.
Here the code:
$.fn.rangeButton = function(containerSelector) {
return this.each(function() {
var $self = $(this);
$self.on('change', function() {
$self.closest(containerSelector).css('margin-left', ($self.val()/3) > 0 ? ($self.val()/3) + 'px' : '0px');
// this part is not working, if you remove this part, the button works flawlessy
if ($self = 100) {
document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 191, 1)";
} else {
document.getElementById("fakbuttonsfondo01").style.backgroundColor="rgb(0, 0, 255)";
}
// end of buggy code
}).trigger('change'); // trigger 'change' immediately to initialize everything.
});
};
$('#launcher01 input[type="range"]').rangeButton('#launcher01');
$('#launcher02 input[type="range"]').rangeButton('#launcher02');
Thanks:)

How to change HTML range slider value with button?

I am using a HTML range slider to zoom in and zoom out an image. I also want to show two buttons with slider like + for zoom and − for zoom out. When a user clicks on either of these buttons, the slider should also be moved. But I am unable to do this. Here is my code.
<div id="slider">
<input id="slide" type="range" min="330" max="1200" step="30" value="330" onchange="ImageViewer.sliderAction(this.value)" />
</div>
Here is my function:
var sliderAction = function (value) {
$sliderChosen.html(value);
$("#img").width(value);
$("#img").height(value);
};
When I click the button, I tried this:
btnZoomIn.click(function() {
$("#slide").value(); //Want to change value but value is undefined.
});
Is there any way to change slider value and move it as well on button click?
use val()
btnZoomIn.click(function() {
//if value < max
$("#slide").val(parseInt($("#slide").val())+30);
$("#slide").trigger('change');
});
https://jsfiddle.net/9jfst447/
You can use callback function of .val() and then trigger onchange event:
var sliderelement = $( "#slide" );
btnZoomIn.click(function() {
sliderelement.val(function( index, value ) {
return parseInt(value,10) + 30;
});
sliderelement[0].onchange()
});

jQuery: Only substract 1 after adding 1

How can I do this in jQuery. I already have a script that can add 1 after clicking a button. But I also want something that should substract 1 if I click on the button again, and return the button to its original state.
Here's my current jquery code
$(document).ready(function() {
$("#addMe").one('click',function(){
var counter = parseInt($("#hiddenVal").val());
counter++;
$("#hiddenVal").val(counter);
$("#theCount").text(counter);
$("#addMe").toggleClass('active');
});
});
Here's my live js fiddle: http://jsfiddle.net/jehzlau/7hv2eyv0/
Right now, it adds 1 after I click it. The button should only be clickable once to add + 1. And the color of the button will change. That's the first one that I'm trying to achieve, and it's already working.
The only problem I have now is to revert the changes after clicking it again.
For example, if you click on the button, it's now blue and the heart is black, and the number is 2. What I want is if you click it again, the button will become green again by default, the heart to white, and the number 2 to 1. I just want to reverse what happened in the second click. Then if I click on it again (3rd click), it will go back to 2, then the button will be blue, and the heart will be black again. And if I click on it again (4th click), it will revert again. And so on... and so forth...
That's all I want to do, but I can't do it. I hope someone here can point me to the right direction. :(
I would do it this way. See if active class exist and then increment/decrement counter based on it:
$("#addMe").on('click',function(){
var counter = parseInt($("#hiddenVal").val());
if($(this).hasClass('active'))
counter--;
else
counter++;
$("#hiddenVal").val(counter);
$("#theCount").text(counter);
$("#addMe").toggleClass('active');
});
Working Demo
Try to use on() not one() like,
$(document).ready(function () {
$("#addMe").on('click', function () { // use on instead of one
var counter = parseInt($("#hiddenVal").val());
$(this).hasClass('active') ? 1 : 2;// toggle text 1,2
$("#hiddenVal").val(counter);
$("#theCount").text(counter);
$("#addMe").toggleClass('active');
});
});
Live Demo
If you want to add 1 and subtract 1 from any hiddenVal then, you can change it like,
$(document).ready(function () {
$("#addMe").on('click', function () { // use on instead of one
var counter = parseInt($("#hiddenVal").val());
// change the line where counter initialization takes place like
$(this).hasClass('active') ? counter-- : counter++ ;
$("#hiddenVal").val(counter);
$("#theCount").text(counter);
$("#addMe").toggleClass('active');
});
});
If you do not really want to count but just toggle, use a global variable and just toggle:
var counter = false;
$(document).ready(function() {
$("#addMe").click(function(){
counter = !counter;
$("#hiddenVal").val(counter);
$("#theCount").text(counter);
$("#addMe").toggleClass('active');
});
});
You can also drop the hidden element in your form.

Color picker set individual attribute in JQuery each

I have three buttons on a page I've set up as an array. I'm using $.each to iterate through them and inside that is the color picker function. I'm trying to have only the (last) clicked button change background color, but right now, if I click all 3 before using the color picker, they all change color. I need the button last clicked only to change color. JSFiddle
var test1 = $('#test1');
var test2 = $('#test2');
var test3 = $('#test3');
var elements = [test1, test2, test3]
$.each(elements, function(i) {
function handler() {
$('#color').change(function(){
$(elements[i]).unbind('click', handler);
elements[i].css('background-color', this.value);
});
}
$(elements[i]).bind('click', handler)
});
Your solution seems overly complex. A simpler solution might be this:
Add click handlers to the buttons. When a button is clicked, add an "active" class to that button and remove from others.
Bind a change handler to the color picker. When that happens, change the background color of the active button:
I'm also going to assume you can give a class of colorButton to the buttons:
$('.colorButton').click(function(e) {
e.preventDefault();
$('.colorButton').removeClass('active');
$(this).addClass('active');
})
$('#color').change(function() {
$('.colorButton.active').css('background-color', this.value);
});
Working fiddle: http://jsfiddle.net/wBsab/
Why don't you bind the click event with the color change?
$('.buttons_that_change_color_on_click').bind('click', function(){
this.style.backgroundcolor = the_value_you_want;
});

Categories