input-group-addon change color with onclick - javascript

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>

Related

How to restore div which is hidden using empty() function

html code:
<button id="add"></button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>
Jquery code:
$("#add").click(function(){
$("#count_search").empty();
})
I want to show count_search div once again on clicking on any other button execpt to add button
In above code add is button on which empty() is implimented. On clicking on add button count_search is got hide. Then after I want to restore that div content
.empty() deletes the elements in your container (count_search).
Instead, you can use .hide()/.show() or better approach, you can use .toggle() that show or hide your element.
$("#add2").click(function() {
$("#count_search").toggle();
});
$("#add").click(function() {
if ($("#count_search").is(":visible")) {
$("#count_search").hide();
} else {
$("#count_search").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Show/Hide</button>
<button id="add2">Toggle</button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>
By empty() you are deleting an item in DOM.
Instead of empty, you can use toggle(), which hides the element and If you click once again, the item will show.
$("#add").click(function(){
$("#count_search").hide();
})

How to click radio by clicking on div?

Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});
Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</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>

Semantic UI adding class dynamically to input field

It seems there is an issue with adding class dynamically to input field in SUI.
My goal is to active a disabled input on double click, then disabled it again on blur.
On https://jsfiddle.net/Greggg/e1x7jnor/2/ on first input I am adding css dynamically with success. On second input, I am trying to do the same just by adding class and it does not work.
Here is code
<div class="column">
<div class="ui disabled transparent test2 input">
<input value="Add class do not work" type="text">
</div>
$(".disabled.transparent.test2").dblclick(function() {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active');
});
Is it a SUI issue or a miscoding?
Any help would be appreciated
Greg
The class is getting added, but the background color is getting overriden by another rule because of specificity.
Also since the class active is dynamically added, you need to use event delegation to target those elements.
/* Focus on double click on page name */
$(".disabled.transparent.test1").dblclick(function() {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').css('background-color', 'red');
});
$(".disabled.transparent.test2").dblclick(function() {
console.log('a')
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active');
});
$('.ui.input').on('blur', '.active', function() {
alert("test");
$('input').hasClass('.active').addClass('disabled transparent');
});
.ui.input input.active,
.ui.input.focus input.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<div class="column">
<div class="ui disabled transparent test1 input">
<input value="Add css work" type="text">
</div>
</div>
<div class="column">
<div class="ui disabled transparent test2 input">
<input value="Add class do not work" type="text">
</div>
</div>

Color Picker Farbtastic sync on 2 classes

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.

Categories

Resources