Color Picker Farbtastic sync on 2 classes - javascript

http://acko.net/dev/farbtastic
I would like to have a few INPUT and users can change color for each. However, each input is synced with some other classes (like body background color, or menu background color).
I want to be able to change color with Farbtastic Color Picker and it affects BOTH the INPUT and the CLASS / ID that synced with the INPUT. How to do that? The example below will make color in "colorwell" changed only but how to sync other element to #color1, #color2... separately? Thanks
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#demo').hide();
var f = $.farbtastic('#picker');
//var p = $('#picker').css('opacity', 0.25);
//var selected;
$('.colorwell')
.each(function () { f.linkTo(this); })
.focus(function() {
//if (selected) {
// $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
//}
f.linkTo(this);
//p.css('opacity', 1);
//$(selected = this).css('opacity', 1).addClass('colorwell-selected');
});
});
</script>
<form action="" style="width: 500px;">
<div id="picker" style="float: right;"></div>
<div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div>
<div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div>
<div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div>
</form>

I had to modify the farbtastic.js file slightly... basically I added this line:
$('.' + this.id).css('background-color',fb.color);
below line 234 in the original script. It takes the ID from the currently selected input box and changes the background-color of the same class as the ID. So changing #color1 with farbtastic will also update the .color1 class. You may need to modify the farbtastic.js yourself if you want change something other than the background color.
Get the modified farbtastic.js here and see a demo here.

Related

input-group-addon change color with onclick

I am trying to change the input-group-addon background-color with an onclick javascript function. It seems i can not get this working.
Anyone has an idea?
color = the name of the color (for example 'red').
<script type="text/javascript">
function changeColor(color, id) {
document.getElementById('onColor').innerHTML = color;
}
</script>
Below background-color is set to red. How can I get the text echo'ed from the function changeColor instead of the text red? So I can put any color into it I want, and the color changes on the clicked radio button.
<div class="input-group" style="width:100%">
<span class="input-group-addon" style="background-color:red"></span>
<input id="bet" type="number" class="form-control" name="bet" placeholder="Lira">
</div>
EDIT:
Seems style change with javascript is the answer (not innerHTML).
See: Change CSS properties on click
Use document.getElementById(id).style to change element's css , not innerHTML.
<div class="input-group" style="width:100%">
<span id="input-addon" class="input-group-addon"> Span </span>
<input id="bet" type="number" class="form-control" name="bet" placeholder="Lira">
</div>
<button onclick="changeColor('red', 'input-addon')">Change Color</button>
<script type="text/javascript">
function changeColor(color, id) {
document.getElementById(id).style.color = color;
}
</script>

Changing Background and Foreground with linked css in html

I have looked literally everywhere. The goal is to
Use the classes in the stylesheet to set color and background
For example, class selector colorA will set the text color to color ‘A’
Change the color of the text by changing the class of the div with id foreground
Change the background color by changing the class of the div with id background.
I was able to change it by manually entering the color, but when I try to change it by getting className it fails.
Here is my code Ive tried several different things with no luck, please help:
JavaScript:
function changeBG(col) {
var x = document.getElementsByTagName("DIV")[0];
x.backgroundColor = (col);
}
HTML:
<body>
<div class="holder">
<div id="background" class="backgroundC">
<div id="foreground" class="colorE">
<p>
Lorem ipsum </p>
</div>
</div>
</div>
<div class="holder">
<table>
Foreground <INPUT type="button" value="A" class = "colorA" name="button3" onClick= "document.fgColor= 'colorA'">
<INPUT type="button" value="A" class = "colorB" name="button3" onClick="document.fgColor='.colorB'">
Background <INPUT type="button" value="B" class = "backgroundA" name="button3" onClick="document.bgColor = '.backgroundA'">
<INPUT type="button" value="B" class = "backgroundB" name="button3" onClick= changeBG(document.getElementsByClassName("backgroundB"))>
</table>
</div>
CSS Stylesheet:
.colorA {
color: #4581cf;
}
.colorB {
color: #B7E2FF;
}
.backgroundA {
background-color: #4581cf;
}
.backgroundB {
background-color: #B7E2FF;
}
Try this
Make sure you are passing correct class nam
function changeBG(col) {
var x = document.getElementsByTagName("DIV")[0];
x.className=col;
}
changeBG's first parameter is wrong.
in w3c getElementsByClassName method definition
The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object
in html code, click event binding
onClick= changeBG(document.getElementsByClassName("backgroundB"))
in js, click event handler
x.backgroundColor=col;
col object is a collection of elements have class attribute containing 'backgroundB'.
backgroundColor is a element property, set with color value. ex) #f3f3f3
You can fix it like this.
x.className = "background" + col[0].value; //col[0] is the input element classfied 'backgroudB'. col[0].value equals 'B'
The className property sets or returns the class name of an element.
Using JQuery.
Create a new form and then copy this code and paste it, you will notice how specific div in specific class color can be changed easily.
<html>
<head>
<title>The Selecter Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".big, #div3").css("background-color", "yellow");
});
</script>
</head>
<body>
<div class="big" id="div1">
<p>This is first division of the DOM.</p>
</div>
<div class="medium" id="div2">
<p>This is second division of the DOM.</p>
</div>
<div class="small" id="div3">
<p>This is third division of the DOM</p>
</div>
</body>
</html>

take value from color picker and transfer to data-pb-tint-colour using paintjs

I have a simple script here with a color picker built in I want to take the selected color and transfer it to the image as a tint with paintjs. I have looked all over for ways to tranfer the color hex value to the data-pb-tint-colour but can't find anything. Is there a way to do this?
HTML:
<form name="colorForm">
<p>Select Color
<input name="colorpicker" type="color" onchange="newBackgroundColor(colorpicker.value);">
</p>
<p>
Selected Color
<input name="selectedcolor" type="text">
<img src="/Layer2.png" class="filter-tint" data-pb-tint-opacity="0.5" data-pb-tint-colour="#F69023">
</p>
</form>
Java script and Jquery and PaintJS:
<script language="javascript"></script>
<script src="jquery-1.11.3.min.js"></script>
<script src="common.js"></script>
<script src="paintbrush.js"></script>
<script>
function newBackgroundColor(color)
{
document.colorForm.selectedcolor.value = color;
}
</script>
Fiddle
You can do this in JQuery:
$('#colorpicker').on('input', function() {
var color= $("#colorpicker").val();
$("#hexvalue").val(color);
$('#image').attr('data-pb-tint-colour', color);
});
you'll need to give your color picker input field, the image, and the text input field ids. colorpickerid stands for the color picker's id, hexvalue for the input text field's id, and image for the image. No need for the onchange handler with this.
Fiddle

When search input is :focus make the surrounding div black

On my site unbotttled.com
in the menu the surrounding div of the search form turns black when I hover over it. What I want is when the input field is clicked on or in focus I want the surrounding div to turn black even when I stop hovering. Any help would be appreciated greatly.
You can just use jQuery to find when it is in focus and set the background color to your liking:
HTML:
<div id="out"><form method="get" id="searchform" action="http://www.unbotttled.com/">
<input type="text" class="field" name="s" id="s" placeholder="">
</form>
</div>
jQuery:
$('.field').focus(function() {
$('#out').css('background-color','black');
});
fiddle: http://jsfiddle.net/yZhC3/
You will have to use javascript for this, as far as I know.
with jquery:
$search = $('.my-search-bar-input');
$search.on(':focus', function () {
$search.parent().addClass('.selected');
})
.on(':blur', function () {
$search.parent().removeClass('.selected);
});
and css:
.my-search-container.selected, .my-search-container:hover {
background-color: #333; // Your color
}
Something like that should work.

jQuery taking control over label's border color

My jQuery function looks like that
$('input[type="text"]').focus(function() {
$("label").css("border-bottom-color", "red");
});
$('input[type="text"]').blur(function() {
$("label").css("border-bottom-color", "#e6e6e6");
});
1) I have a bunch of text inputs in my form. What I want to do is to change bottom border color of focused text boxes label (there is one label for every text box. And I want to change only focused text boxes label's border color). But my functions changes all labels' border colors at once. How to fix that problem?
2) I have 2 forms. with id's form1 and form2. I want to do same things to second form but color will be another. How to modify this func?
My forms are looking like that
<form id="form1">
...
<label for="fname">First Name</label>
<input name="fname" placeholder="please enter your first name" type="text" />
...
</form>
<form id="form2">
...
<label for="job">Your Job</label>
...
<input name="job" placeholder="please enter your job" type="text" />
</form>
How about this fiddle?
http://jsfiddle.net/RvYca/3/
label tag's for attribute references to an input's id attribute, not its name.
I moved the styles to css too.
Use both CSS and JavaScript:
$('input:text, input:password, textarea').focus(
function(){
$(this).prev('label').addClass('focused');
}).blur(
function(){
$(this).prev('label').removeClass('focused');
});
And, in the CSS:
#form1 label.focused {
border-bottom: 1px solid red;
}
#form2 label.focused {
border-bottom: 1px solid green;
}
JS Fiddle demo.
For question 1, use $(this) as your selector:
$('input[type="text"]').focus(function() {
$(this).css("border-bottom-color", "red");
});
$('input[type="text"]').blur(function() {
$(this).css("border-bottom-color", "#e6e6e6");
});
For question 2, do you mean, after the user has selected both items, in either order? They can't both be in focus at the same time.
your selector is not specific enough for manipulating the css. You must be specific about which label you want to update. Something like this:
$('input[type="text"],textarea,input[type="password"]').focus(function() {
$("label[for='" + $(this).attr('id') + "']").css("border-bottom-color", "red");
});

Categories

Resources