Within a series of check boxes (lets say 3 options) I am looking to target a specific input element on the checking/unchecking of the associated label.
HAML
.choice-select-button
= check_box_tag("order[recipes][]", recipe.id, selected)
= label_tag do
= t(".step_4.tick_box_to_select")
Renders HTML
<div class="choice-select-button">
<input type="checkbox" name="order[recipes][]" id="order_recipes_" value="6" checked="checked">
<label>Click to select</label>
</div>
Each <input> is assigned same id, namely id="order_recipes_" so if I give set <label for="order_recipes_"> and the user then 'un-checks' the label then only the first input on the page with the id="order_recipes_" is styled according to my css instructions.
The only differentiator I can see for the choice-select-button.input is it's value. As such I was looking at giving the label a for= that targets inputs with the id="order_recipes_ AND value="6". First up, is this doable, and secondly, is the best way to do something like this or is there a much more simple method?
Thanks in advance.
According to the rrails doc:
check_box_tag(name, value = "1", checked = false, options = {}) Link
Creates a check box form input tag.
Options
:disabled - If set to true, the user will not be able to use this
input.
Any other key creates standard HTML options for the tag.
you can generate different ids like this:
check_box_tag("order[recipes][]", recipe.id, selected, {id: recipe.id})
Related
In the code sample below I have a simple form with two submit buttons.
<form>
<input type="submit" value="< Previous">
<input type="submit" value="Next >">
</form>
Depending on the value attribute the buttons will get different sizes, like the image below:
Is there a method I can use to make the buttons equally sized based on the widest button? I use Bootstrap if that's any advantage...
I know that I could use a fix CSS-width (or similar) to set equal widths on the buttons. But since I don't know how wide the value will be in advance it won't solve the problem... (or will it?).
Use JQuery
var prev = $('#prev').width();
var next = $('#next').width();
if (prev > next) {
$('#next').width(prev);
} else {
$('#prev').width(next);
}
Here is a jsfiddle I made..
I'm having problem with placeholders.
I want to ask, is there possibility to style value in input fields but in the way to style words of that value different.
For example, if we have input field which have initial value "First Name" i want to have green color for "First", and red color for "Name" (this is just an example).
Is this even possible?
Note: Im using value as "placeholder" (instead of placeholder html attribute) because of ie.
<input type="text" value="First Name" onFocus="if (this.value == 'First Name') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'First Name';}" />
unfortunately its not possible. when it comes to styling the form elements, there are many hindrances, color can be set to for an element not chracters, try this:
http://jsfiddle.net/Fgd2e/1/
You may change the color of an input using the color style attribute. Having separate colors for each word is much harder. You need to have an overlay that displays the right colors. Besides, the cursor would disappear, so that the user wouldn't know where he currently is.
If i use below , button display bigger.
<i class="icon-plus"></i>Add
If i use below , button display smaller than above code.
#Html.ActionLink("Add", "xx", "Law", new { _lawfileid = -1, baseappid = ((ObjectModelLibrary.Law)ViewData["currentLaw"]).LawID }, new { #class = "btn btn-primary icon-plus" })
How can i change Html.Actionlink like a href i ?
What is difference between actionlink and href or how can i set same size for both ?
The reason for your issue is that in the first line of code you have an element inside another element. Whereas in the second line of code you have a single element with extra class.
Similar question is already answered on stackoverflow. Please find the link below
Create an ActionLink with HTML elements in the link text
Since you need to build an element inside an element use #Url.Action as mentioned in the above link.
I am trying to bind a range slider with two text input controls. Ideally, I want change in either range slider, text input or viewModel property to update all these controls visually and in sync. But here is my observation.
Changing range slider values by dragging the thumb, updates the viewModel and input text control values
Editing the text in input field in UI updates the viewModel but the rangeSlider is not updated.
Changing the range property in console eg. viewModel.range[0]=-10, does not update the text input value or range slider.
Changing the range slider value programmatically(slider.value([-7. 10])) does not update viewModel or input text.
Here is the code:
Javascript
<script type="text/javascript">
var viewModel = kendo.observable({
range: [-7, 3]
});
$(document).ready(function() {
var slider = $("#slider").kendoRangeSlider({
min: -10,
max: 10
});
kendo.bind($(".QFContent"), viewModel);
});
</script>
HTML
<div class='QFContent'>
<div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'>
<div class='QFReadout QFLowerBound tab-ctrl-formatted-border-hover'>
<span class='readoutText tab-ctrl-formatted-fixedsize'></span>
<input data-bind="value: range[0]" data-value-update="keyup" type='text'></input>
</div>
<div class='QFReadout QFUpperBound tab-ctrl-formatted-border-hover'>
<span class='readoutText tab-ctrl-formatted-fixedsize'></span>
<input data-bind="value: range[1]" data-value-update="keyup" type='text'></input>
</div>
<div id="slider" class='QFSlider QFBar' data-bind="value : range">
<input></input>
<input></input>
</div>
</div>
You have to do a bit more work with updating the range as I don't think binding the value to an array[0]/[1] will actually update it.
You will need to call a function that will update the range values when the input box changes. I went ahead and used kendo numerictextboxes, but a regular input box works just as well.
http://jsbin.com/eBOJeceN/2/edit
-- Edit, small bug in that sample, "undefined" isn't undefined. Updated jsbin http://jsbin.com/eBOJeceN/4/edit
I have a form, which has a text area. I want to be able to set the text color of the text inside of the text area when they click the color intended.
So far, I have it to where when they click the color, it sets the hex color inside of a hiddenfield. How could I go about changing the textcolor with css based on the hiddenfield results.
I don't think I can alter the CSS with the GET/POST method, because I want the color to change immediately, not only when the form is posted. Is there a way to do this with either javascript or PHP?
I use the setting of the color to the hiddenfield using (through the img src):
onclick="document.getElementById('color').value = '#ffffff'; " />
HERE IS A JSFIDDLE OF WHAT I HAVE SO FAR:
jsfiddle.net/ymG6t
Ok I figured it out! Instead of using
onclick="document.getElementById('color').value = '#ffffff'; " />
I used: onclick="document.getElementById('color').style.color = '#ffffff';" />
onto the field itself. No need for the hiddenfield!
I have a solution. copy and paste code below:
<script>
function change_color(col){
if ( col == 'red'){
document.getElementById("text").style.color = '#f00';
}
if ( col == 'green'){
document.getElementById("text").style.color = '#0f0';
}
if ( col == 'blue'){
document.getElementById("text").style.color = '#00f';
}
}
</script>
<form>
<input type='radio' onchange="change_color(this.value)" name='color' value='red' >Red<br>
<input type='radio' onchange="change_color(this.value)" name='color' value='green' >Green<br>
<input type='radio' onchange="change_color(this.value)" name='color' value='blue' >Blue<br>
Text:<textarea id='text'>Here is the text that you want to change it's color</textarea>
</form>
Save into a new file with *.php extension.
If you want to save it as html, you must add html tag for header, body and other such as <html> in the beginning, <head>, and then <body>, and of course with it's close tag.
use it as a reference, you can modify the code/script as you need.
may it help! :D