I would like to disable or hide the contents "Grouping"
of <label> tag without affecting the nested <input> tag.
<label class="" for="officersheet_fields_attributes_3_grouping">
<input type="checkbox" id="officersheet_fields_attributes_3_grouping" name="officersheet[fields_attributes][3][grouping]" value="1">
Grouping
</label>`
I am using formtastic within rails.
formtastic code snippet
<td><%= f.input :grouping %></td>
the above line generates the html above.
Thanks in advance
You may use text-indent: -1000em.
label
{
text-indent: -1000em;
}
But I don't think it is a good idea to have the input inside the label. Better have following:
<input type="checkbox"/><label>Grouping</label>
Add span tag around the label text and hide it
<label for="foo">
<input type="checkbox" value="1"><span>Grouping</span>
</label>
CSS
span{
display:none
}
DEMO
I would go for the span too, but if you have no control on your html structure, you could do something like this:
$(document).ready(function () {
$('label')
.contents()
.each(function() {
// if (this.nodeType == Node.TEXT_NODE); this works unless using IE 7
if (this.nodeType === 3) {
$(this).remove();
}
});
});
Related
I have two html pages page_1.html and page_2.html. In page_1.html, I have a button, which upon being clicked should redirect to page_2.html. But it should redirect only when the button has a charteuse background color.
So, in page_1.html, I have a button:
Organization:<div id="org"><input type="checkbox" id="cb1" >ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
<input type="checkbox" id="cb2" >Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
<button id="button" onmouseover="hovar()" onclick="submit()" >Register</button>
<script src="back_end.js" async></script>
My javascript (back_end.js):
function hovar(){
var phone=document.getElementById("ph_number").value;
var btn=document.getElementById("button");
if (phone.length!=10){
btn.style.backgroundColor="lightsalmon"
}
else{
btn.style.backgroundColor="chartreuse"
btn.style.color="black"
}
}
function submit(){
var btn=document.getElementById("button");
if (getComputedStyle(btn).backgroundColor == "charteuse"){
window.location.href="page_2.html";
}
}
But, it doesn't redirect to page_2.html. What am I missing here? I have also tried window.location.replace("page_2.html"), but it's the same.
EDIT: I have changed the code a little, it's from a project I'm doing. I have also tried getComputedStyle(document.getElementById("button")).backgroundColor, but it doesn't work.
Another thing that I've noticed, is that when I use:
if (btn.style.backgroundColor == "charteuse"){
//console.log(true)
location.href="page_2.html";
}
it prints true into the console but still doesn't redirect to page_2.html.
But if I use:
if (getComputedStyle(btn).backgroundColor == "charteuse"){
//console.log(true)
window.location.href="page_2.html";
}
it doesn't print true into the console.
But nevertheless, in both the cases, it doesn't redirect to page_2.html
ElementCSSInlineStyle.style
The style property is used to get as well as set the inline style of
an element. When getting, it returns a CSSStyleDeclaration object that
contains a list of all styles properties for that element with values
assigned for the attributes that are defined in the element's inline
style attribute.
https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style
So your if-conditon document.getElementById("button").style.backgoundColor == "red" does never return true because the color is defined in your css-file and not as an inline argument.
A solution would be using getComputedStyle(element) which returns the actuall style from the css-file.
getComputedStyle(document.getElementById("button")).backgroundColor == "red"
as explained here https://zellwk.com/blog/css-values-in-js/
Also in your css, you can remove the quotationmarks around "red" as mentioned by #George
The styles property doesn't directly reflect your CSS, so running
if(document.getElementById("button").style.backgoundColor=="red"){
never works.
What you can do is change the color to red using javascript:
function changeButtonColor(color) {
document.getElementById("button").style.backgoundColor = color;
}
changeButtonColor('red');
So you do this, wherever you need to change the background color, your if statement will work correctly and you can switch.
so you should compare like this
var btn=document.getElementById("button");
if (getComputedStyle(btn).backgroundColor == "rgb(127, 255, 0)"){
window.location.href="page_2.html";
}
}
Just wanted to know if anyone knew a way I can select and style the html tag directly after looking for :checked in css.
#btnControl:checked ??? html {
overflow: hidden;
}
Any feedback will be greatly appreciated! : )
Best, Jonathan
You can't select parent using CSS. But you can use class to do this work. Use javascript to add/remove class to element. When checkbox checked, add class to html and when checkbox unchecked, remove class of html.
var checkbox = document.getElementById("checkbox");
var html = document.getElementsByTagName("html")[0];
checkbox.addEventListener("change", function(){
if (checkbox.checked)
html.classList.add("checked")
else
html.classList.remove("checked")
});
html.checked {
background: orange;
}
<label for="checkbox">Click on checkbox</label>
<input id="checkbox" type="checkbox" />
Not sure how to style or change the text of the "Choose File" button inside of my file upload input field.
http://codepen.io/leongaban/pen/wrCLu
<input id="choose_file" type="file" name="datafile" size="40">
input {
padding: 10px 15px;
border: 0;
background: orange;
}
^ Here the background gets styled instead of the button.
As I told you in my comment you can simply create whatever layout and visuals you like to a button and create a file button then simply hide that file button and bind the event on the styled button to trigger the file button.
I've made this example for that purpose:
Codepen with custom file button
There are no native options for styling an input[type="file"] element. However, this article describes a cool (but hacky) trick you can use to accomplish this. Basically:
Create a button and style the layout as you would like it to appear.
Position your <input type="file" /> absolutely over the top of your new button element.
Add a z-index to the element to make it one level above the styled button.
Set the input to have an opacity: 0;
Wire up the proper events described in the article to make the input function accordingly.
CSS only solution
You can use the file-selector-button CSS pseudo-element
::-webkit-file-upload-button{
..
}
more information
Here is my straight-forward HTML 5 solution shown using an MVC Razor Form, but you could use a plain html form just as well. This solves the problem with the Input type=file not rendering the same in all browsers. You could style the browseBtn however you like by setting a background image for it. I tested this in IE 11, Firefox, and Chrome. IMO, the look of the default Chrome native control (shown in the question) is unacceptable.
Index.cshtml
<h2>Index</h2>
#using (Html.BeginForm("postFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div style="display:inline-block; margin-bottom:10px">
<input type="text" name="uploadControl" id="uploadControl"
style="width: 400px; height: 1.1em;" readonly="true" >
<button type="button" id="browseBtn" >Browse...</button>
</div>
<input type="file" name="upfile" id="upfile" style="display:none;" >
<button type="submit" id="uploadbtn" style="display:block">Click to upload</button>
<br><br>
#ViewBag.Message
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/UploadFile.js"></script>
UploadFile.js
$('#browseBtn').click(function () {
$('#upfile').first().trigger("click"); //cause the browse menu to pop up
});
$('#upfile').first().change(function (event) {
event.preventDefault();
var fileName = $('#upfile').val();
if (fileName && fileName.length > 0) {
$('#uploadControl').val(fileName);
}
});
HomeController.cs
public ActionResult postFile(HttpPostedFileBase upfile)
{
if (upfile != null && upfile.ContentLength > 0)
{
try
{
string path = Path.Combine(Server.MapPath("~/Images"),
Path.GetFileName(upfile.FileName));
//upfile.SaveAs(path);
ViewBag.Message = Path.GetFileName(upfile.FileName) + " uploaded successfully";
}
catch (Exception ex)
{
ViewBag.Message = "ERROR:" + ex.Message.ToString();
}
}
else
{
ViewBag.Message = "You have not specified a upfile.";
}
return View("Index");
}
I'm trying to get CSS Switches to work with ASP.NET rendered check-box.
The way that CSS Switcher structured and the ASP.NET check-box rendered make it hard to me to get it work and the problem not only in the span generated around the input it's also the label - which I need for sure - for the check-box, once I remove them from rendered HTML it works.
ASP.NET Check-box adds span and label when rendered as follow:
<span>
<input id="ID" type="checkbox" checked="checked" name="ID"></input>
<label for="ID">Label</label>
</span>
While the switcher needs the input to be wrapped in the following form:
<label class="switch switch-default">
<input type="checkbox" checked><span></span>
</label>
Here is an Example
here is how my check-box coded in my ASP HTML
<div class="col-sm-9">
<label class="switch switch-default"><asp:CheckBox id="chkAdd" runat="server" Text="Add" CssClass=""></asp:CheckBox><span></span></label>
</div>
Is there any workaround this problem?
I have found a solution and wanted to share.
As appears in this jsFiddle example which uses code similar to ASP.NET rendered check-boxes, the problem was with the CSS selectors and how to reach a parent that has a child check-box with checked or unchecked .. that is not applicable still in CSS. I had to add a jQuery function and change the selectors in my CSS to reach this jsFiddle result
$(document).ready(function () {
$('.switch input').each(function () {
var _span = $(this).closest('.switch').children('span.sw-inner');
if ($(this).is(":checked")) {
$(_span).addClass('checked').removeClass('un-checked');
} else {
$(_span).addClass('un-checked').removeClass('checked');
}
});
$('.switch input').change(function () {
var _span = $(this).closest('.switch').children('span.sw-inner');
if ($(this).is(":checked")) {
$(_span).addClass('checked').removeClass('un-checked');
} else {
$(_span).addClass('un-checked').removeClass('checked');
}
});
});
I have this:
<div id="sidebar-a">
<form id="form">
<input class="button" type="submit">
</input>
</form>
</div>
And I need to select only the input (my page has same <form> in #footer, the only way to change property of this one is, like I tried to do, with #sidebar-a, but it doesn't work)
Given that you made no mention of JQuery, I'm assuming you're trying to select the input element via CSS.
#sidebar-a > form > input.button:first-child {
font-size: 2em;
}
An example is available at this JSFiddle
You should not have 2 form elements with same ID. However this will do it:
#sidebar-a > form > input.button:first-of-type { }