I want to show few text fields on click of a radio button ,how can i do it? without JavaScript or AJAX.
You must employ JavaScript for this.
The only other thing besides JavaScript that might work (I haven't tried it but it's something to investigate) is to use the :focus pseudo class in CSS. Even if it works it won't be cross browser probably, but since you're targeting specific mobile platforms it might be OK. It would work like this:
<style>
#bar { display:none; }
#foo:selected #bar { display:block; }
</style>
<input type="radio" id="foo">
<label for="foo"><div id="bar">Stuff goes here</div></label>
I don't know if :focus also applies to a form element's associated label, but it certainly may considering that clicking an element's label does activate the "click" event on the form element it's labeling.
Something to try anyway. If you're targeting mobile Safari that should have good support for these kind of selectors.
Yes, can you do this with a psudo-class selector but it certainly will not work cross browser. You can check:
http://www.quirksmode.org/css/contents.html
for a list of what browser support what selectors. IE 7 and lower do NOT support the :focus selector, although you could accomplish roughly what you want with :hover (although I imagine you don't want it to show only on hover).
The following example works in Firefox (3.5):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<style>
input { float: left; }
/* Make the text hidden when the page loads */
.text_to_show { display:none; }
/* This style affects element which immediately follows the focused class */
.trigger:focus + div.text_to_show { display: inline; }
</style>
</head>
<body>
<input type="radio" name="radio" class="trigger" />
<div class="text_to_show">This text is tied to the first radio button.</div>
<input type="radio" name="radio" class="trigger" />
<div class="text_to_show">This text is tied to the 2nd radio button</div>
</body>
</html>
Related
I have to greyout an entire form and make it disabled, if is possible using (controlled by a Javascript)
My idea was:
<div style="background-color: gray; opacity:0.7; z-index:2;">
<h:form prependId="false" id="login_form" style="x-index:1;">
...button
...inputBox
</h:form>
</div>
But it doesn't work properly, infact the grey of the DIV is only in the background and I want grey on ALL the object in the form (inputbox, button, text, etc...)
I prefer with just one DIV so I don't have to change the style of each object (button disabled, inputbox disabled, etc...)
Thanks
There are a number of ways this can be achieve - one simple, pure-CSS based approach would be to define a CSS class .disable-form and apply it to the <div/> that encloses your form when you want your form to be disabled.
You could do this like so:
.disable-form {
/* Make form elements appear disabled against grey background */
background-color: gray;
opacity:0.5;
/* Prevent user interaction with form while disabled */
pointer-events:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
<form prependId="false" id="login_form">
<div>
<label>Some field</label>
<input />
</div>
<label>Some field not wrapped in div</label>
<input />
</form>
</div>
<br>
<br>
<button id="toggle-disable">Click to toggle form disable</button>
<script>
document.getElementById('toggle-disable')
.addEventListener('click', function() {
document.getElementById('login_form')
.parentNode
.classList
.toggle('disable-form');
});
</script>
Note that I've adjusted the HTML in this code sample for the purpose of demonstrating the technqiue - the key here is defining and apply the disable-form CSS to achieve the desired affect on your form.
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 need to have an onclick event on an <input> tag which is disabled.
Here onclick event doesn't work.
Is there any other way to work with onclick event for disabled input based on id?
I tried the code below.
First input worked but I need worked same as second one also same as of first one. (I need to call function Clicked on input only).
My code:
function Clicked(event)
{
alert(event.id)
}
function ClickedDisabled(event)
{
alert(event.ids)
}
<input type="text" id="ID" onclick="Clicked(this)" />
<input type="text" id="IDs" onclick="ClickedDisabled(this)" disabled />
function Clicked(event) {
alert(event.id)
}
function ClickedDisabled(event) {
alert(event.id)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="text" id="ID" onclick="Clicked(this)" />
<span style="position:relative;">
<input type="text" id="IDs" disabled />
<div style="position:absolute; left:0; right:0; top:0; bottom:0; cursor: pointer;" id="IDs" onclick="ClickedDisabled(this)"></div>
</span>
Try this it may help you
Put
input[disabled] {pointer-events:none}
in your CSS (it prevents some browsers from discarding clicks on disabled inputs altogether), and capture the click on a parent element. It's a cleaner solution, IMHO, than putting a transparent overlay over the element to capture the click, and depending on circumstances may also be much easier than simply "simulating" the disabled state using CSS (since that won't prevent the input from being submitted, and also requires overriding the default browser 'disabled' style).
If you have multiple such buttons, you'll need a unique parent for each, in order to be able to distinguish which button was clicked, because with pointer-events:none, the click target is the button's parent rather than the button itself. (Or you could test the click coordinates, I suppose...).
If you need to support older browsers, though, do check which ones support pointer-events: http://caniuse.com/#search=pointer-events
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/
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.