I am using this plugin to customize check boxes and radio buttons on a page.
These radio buttons are in a div#Main element which comprise of some other HTML elements also. I need to disable everything in this div on a button click (I am using jQuery). For this I have the following code,
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
Script
$(function(){
$('#DisableElements').click(function(){
$('#Main').find('*').attr('disabled', 'disabled');
});
});
Issue: Everything got disabled correctly except the radio buttons.
Behind the scenes, the plugin script hides the actual radio button and
put a span over the radio buttons like a blanket. This span has
got a background image sprite with different states (on and off) which
gets updated accordingly on radio button selection. This was the
working of this plugin.
I could have used the inbuilt method of the plugin to disable/destroy the functionality but I did not find any method for this.
images loads with little delay after the DOM has finished loading,
so you can try calling your function in $(window).load().
hope it will help.
The solution i made can be thought of as a patch but works nice (for my scenario at least). What should have been the right approach for this would be using some existing API method to reflect the change, something like disable() or similar but i did not find such method or something like this.
Solution: Making the radio buttons appear like disable (non clickable).
Because i do not want to dig into the plugin js file. For this i made a transparent div with some width and height enough to cover the radio buttons and place it over them like a layer between radio buttons and cursor. This div is hidden by default and show this while making controls disable. keeping it short and sweet, here are the code changes.
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<div id="Blanket"></div>
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
CSS - for blanket div
#Blanket
{
position:absolute; /*Imp: otherwise it will disturb the UI*/
width:100px;
height:100px;
display:none;
/* top/left adjustments, if required! */
}
Script
$(function(){
$('#DisableElements').click(function(){
$('#Blanket').show();
$('#Main').find('*').attr('disabled', 'disabled');
});
});
This solution however needed to drop the fear of what if someone using developer tools to out smart the application but that does not matter any way. Besides, you can-not 100% block the user from using such tools.
Another solution which worked and looks more appropriate: Placing invisible blanket over input controls sounds like a patch and can be easily snapped. The plugin script adds a CSS class named styled and requires to add following styles to achieve customized look and feel.
input.styled
{
display: none; // hides the parent input element
}
Because of this, even if we switch button states to disable, the changes did not reflect because the parent element was hidden making the other listeners difficult to attach. By changing the styles to following, everything worked.
input.styled
{
position: absolute;
opacity: 0;
}
It makes the parent input element invisible but completely active on DOM behind the scenes.
Related
I am trying to create a trigger in my form such that if someone double-clicks the empty part of textarea, it increases the height. I am trying the below code but it doesn't work.
What am I missing?
HTML
<div id="div_details" class="fields">
<label id="label_details" for="input_details" >Details</label><br/>
<textarea id="input_details" class="" name="details" disabled="disabled" >Customer can look more.</textarea>
JavaScript
$('#input_details').dblclick(function(){
$('#input_details').animate({height: '+=50'}, 500);
});
jsfiddle
The problem is that disabled form elements don't fire mouse events.
Your code would work if it were applied to a text area that wasn't in a disabled state.
One possible solution is to surround the text area in a container, which you animate instead, and have the text area set to fill the container.
An example:
$('.container').dblclick(function(){
$('.container').animate({height: '+=50'}, 500);
});
.container{
height:100px;
}
#input_details{
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_details" class="fields">
<label id="label_details" for="input_details" >Details</label><br/>
<div class="container">
<textarea id="input_details" class="" name="details" disabled="disabled" >Customer can look more.</textarea>
</div>
Put a div around the textare and bind the event to this div.
It´s not possible to do this with a disabled textarea.
Example: (binded to your div)
$('#div_details').dblclick(function(){
$('#input_details').animate({height: '+=50'}, 500);
});
You've disabled your textarea, which means the double click event is never triggered.
A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element. (https://www.w3.org/TR/html5/forms.html#attr-fe-disabled)
Once you remove the disabled attribute, you'll see it starts working. I'd suggest to not use a textarea if you're not planning to make the element interactive.
I am trying to hide a form on a site, but it refuses to hide via jquery. I can manually set the style properties on the element, but .hide() does not hide it.
Consider this code:
$(document).ready(function() {
$('form').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name="style_name" value="small" type="hidden">
<p>I AM hidden</p>
</form>
<form>
<input name="style" value="small" type="hidden">
<p>I should be hidden</p>
</form>
Basically, if there is an input with a name of "style" it can't hide the form. If the input has a different name, it hides it just fine.
Is there a reason this is happening?
The "name" attributes of input elements in a form are used to populate properties on the form DOM node. Your name, "style", overrides the "style" property of the form, which means that jQuery can no longer access the native style object. It needs to do that in order to hide the form.
Note that you can still do this with CSS.
$(document).ready(function() {
$('form').addClass("hidden");
});
CSS:
.hidden { display: none; }
Those old habits of implicitly trampling over namespaces dates from the early days of browser technology. It's hard to imagine anyone thinking it's a good idea nowadays, at least without there being some qualified sub-space (like form.fields or something).
I think what I am trying to achieve can be done in a simpler manner. However I have little JS experience and none in the way of CSS. So I’m utilizing prebuilt CSS and JS code and subtlety modifying it. So I will explain my end goal and see if what I currently have is acceptable.
A top menu on the webpage that has push buttons and checkboxes that all visually look the same
I would like checkboxes to look like buttons, e.g. no checkbox only the label.
I would like for the checkbox to still retain its functionality as a checkbox given the JS code it is calling
Is the way I’m calling the JS code through the button and checkbox correct or too complicated?
JSFiddle
<li><a title="Zoom to U.S" input type="button" name="US" onclick="US();"><span>Zoom to U.S.</span></a></li>
<li><a title="Test 1 KML"><input type="checkbox" id="kml-red-check" name="kml-red-check" onclick="toggleKml("red");"><span>Test 1 KML</span></a></li>
.hidden {
position: absolute;
visibility: hidden;
opacity: 0;
}
input[type=checkbox]+label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked+label {
color: #f00;
font-style: normal;
}
<input type="checkbox" class="hidden" name="cb" id="cb">
<label for="cb">text</label>
http://css-tricks.com/almanac/selectors/c/checked/
Won't work on lt IE9 though.
edit: Following your markup it should be something like this:
<ul>
<li><input id="cb1" name="cb1-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb1\')',100);"><label for="cb1" onclick="setTimeout('checkIt(\'cb1\')',100);">text 1</label></li>
<li><input id="cb2" name="cb2-name" type="checkbox" onkeypress="setTimeout('checkIt(\'cb2\')',100);"><label for="cb2" onclick="setTimeout('checkIt(\'cb2\')',100);">text 2</label></li>
</ul>
And then check if the checkbox is checked or not in your function.
onchange / onclick in a checkbox doesn't work in IE
edited again: changed NAME attribute so you won't end up having problems further along the line. And added a little workaround for the unresponsive, though ultimately desired, onchange functionality in IE8. Eventually you should add a timer to your function, rather than inline.
function checkIt(e){
if(document.getElementById(e).checked){
alert('checked');
} else {
alert('unchecked');
}
}
It is not possible to change the appearence of a checkbox so radically using CSS.
What you CAN do though, is style a label element enough to make it look like a button. Due to the nature of the label element, clicking it will toggle the state of the checkbox keeping your functionality intact.
Here is how to do it
Markup
<li>
<label for="kml-red-check">I am a button!</label>
<input type="checkbox" id="kml-red-check" name="kml-red-check" onchange="toggleKml("red");">
</li>
Note that I've changed the onclick handler to onchange since now it is impossible to click the checkbox itself. Its value changes though when you click on the label
Styling
label[for="kml-red-check"]{
//Your CSS goes that makes the label look like a button goes here
}
#kml-red-check{
display:none;
}
<label>
<input type="checkbox" ng-model="vm.abc" ng-change="vm.go()"/>
<span>this is button add some css to lokking like a button</span>
</label>
this will work like button , if you don't want to show checkbox use this
<label>
<input type="checkbox" ng-model="vm.abc" ng-change=vm.go()" hidden=''/>
<span>this is button add some css to lokking like a button</span>
</label>
check it out here https://jsfiddle.net/h0ntpwqk/2/
When using JQuery, some ui elements such as dropdownboxes or buttons will NOT UPDATE their ui automatically if you change their value with javascript. Although the value is correctly updated, on screen it looks like nothing changed. To fix this, Jquery requires the use of a "refresh" method after changing the value. On this page you can find the info and syntax: http://jquerymobile.com/test/docs/forms/docs-forms.html (scroll down to "refreshing form elements)
I have problems with the text not updating correctly on some html elements, especially buttons and list boxes (select/option). It's supposed to do so automatically, but sometimes the text just stick to its previous value. The value of the text or innerHTML is correct though, it's just not visible.
Here is the problem with the button.I use Javascript to get the innerHTML and change it.
HTML markup:
<button id="btn" onclick"simple_function">A</button>
Javascript:
function simple_function()
{
var anArray = aFunctionThatReturnAnArray();
document.getElementById("btn").innerHTML = anArray[0];
}
By using alert messages I can see the values before and after a change. These alert messages are correct: the value after clicking is indeed the value of anArray[0], but the text of the button in my browser does not change, it stays on "A".
What's frustrating about this button is that sometimes the text does change, but only the first time I change the html (this happens right before the button is displayed the first time to the user). Additional calls of the function afterwards don't change the text anymore. However, the innerHTML IS changed, as verified by an alert message. So everything keeps 'working' but the users will not know what they're actually clicking on because the text of the button isn't visible changed.
I fixed this by using a < span > as the innerHTML for the button, and changing the innerHTML of the span to the value in the array. This works: everytime the innerHTML is changed, it is visible on the screen. Although I have a solution, it's only a work around and I'm curious as to what could cause this?
I have a similar problem with a list box. The default value is "daily". (See full code below).
document.getElementById("interval_list").selectedIndex
and
document.getElementById("interval_list").selectedIndex = 3;
Again, inside the functions the values are always correct, but the text of dropdown stays on daily even if the function says the selectedIndex is 3 (should be "never"). I cannot fix this by adding < span > anywhere, so here I'm stuck.
Some remarks:
There are no duplicate id's in the html (used find to check)
I don't have this problem with buttons in the footer and also never with paragraphs, spans or headers.
I've tried copying similar code in fiddle and wc3's tryit editor: it works there. So it must be something outside of the simple functions that bugs it out?
Checking for browsercompatability: that's not an issue (I don't use
IE).
Full code of list box:
<div class="ui-grid-a">
<div class="ui-block-a">
<p style="padding-right: 1em; padding-top: 0.4em;" align="right">AUTO REMIND</p>
<p style="padding-right: 1em; padding-top: 1em;" align="right">INTERVAL</p>
</div>
<div class="ui-block-b">
<div id="auto_remind_radio_buttons" data-role="controlgroup" data-type="horizontal">
<input type="radio" onclick="document.getElementById('interval_list').selectedIndex = 0;" name="auto_remind_button" id="auto_remind_on" value="male"/>
<label for="auto_remind_on"><img src="images/correct.png" alt="NO" width="26" height="21"></label>
<input type="radio" onclick="document.getElementById('interval_list').selectedIndex = 3;" name="auto_remind_button" id="auto_remind_off" value="female"/>
<label for="auto_remind_off"><img src="images/wrong.png" alt="NO" width="26" height="21"></label>
</div>
<select id="interval_list" name="Single-line ListBox example">
<option id="1" value="1">daily</option>
<option id="2" value="2">weekly</option>
<option id="3" value="4">monthly</option>
<option id="4" value="5">never</option>
</select>
</div>
</div>
document.getElementById("btn").innerHTML=
Watch your case- HTML should be in caps.
More comment than answer. Using the following code:
<button id="b0">b0</button>
<button id="b1" onclick="
document.getElementById('b0').innerHTML = 'foo';
">click me</button>
the innerHTML of the button changes in FF and IE 8, what browser are you using?
Same for your issue with the select, the following works in IE 8 and FF:
<select id="sel0">
<option>Sunday
<option>Monday
<option>Tuesday
<option>Wednesday
</select>
<button onclick="
document.getElementById('sel0').selectedIndex = 1;
">Select Monday</button>
<button onclick="
document.getElementById('sel0').selectedIndex = 3;
">Select Wednesday</button>
I'm trying to re-skin the input type file element.
I do this by placing two elements on top of each other. One of them is the input tag and the other is a nice button. Something like this:
<input type="file" id="filesButton" multiple>
<input type="button" id="filesButtonOverlay" value="Add Files">
The button has some nice effects when a user hovers, clicks, etc (all done is CSS). However since the input-type-file has a higher z-index (needs to be the case since you can't emulate a click on it) all these effects don't show.
Is there a nice way to delegate all events that input-type-file gets and trigger them on the button?
What if you wrapped the inputs in a div and attached the events to the div? Then target your button with your changes?
I would think you should be able to do this with a shared parent. Then you place the hover on the parent rather than the button itself.
<span id="wrapper">
<input type="file" id="filesButton" multiple>
<input type="button" id="filesButtonOverlay" value="Add Files">
</span>
$("#wrapper").hover(function(){
$("#filesButtonOverlay").dosomething();
});
or in CSS:
#wrapper:hover #filesButtonOverlay{
stuff:
}
If you could potentially have multiple on the same page, you'd want to change to using classes instead of ids