Develop Reference

angularjs show div if clicked inside a input field and hide if clicked outside

I want to show my div if user clicks inside the input field, and if clicked outside only, then it should hide it. If clicked inside the field again, it shouldn't hide.
Here is my attempt:
JSFIDDLE LINK
<div ng-app="app">
<div ng-controller="HelpCtrl">
<input type="text" id="myText" name="myText" ng-click="showHelp = ! showHelp">
<div class="details" ng-class="{ 'hidden': ! showHelp }">
<p>
The help text here!
</p>
</div>
</div>
</div>
the problem is that when the page is opened, I see the help text, and it suddenly disappears and when I click inside the field, it shows again, but it disappears only when clicked inside the field again. Now I want it to hide only if clicked outside the field.
Please help me with this.

Use ng-focus instead of ng-click
Plunker Example
<input type="text" ng-focus="focused = true" ng-blur="focused = false" />
<p ng-if="focused">Input has focus!</p>

below code should help you.
<style>
.hidden{
-webkit-transition: width 2s; transition: width 2s;
display:none !important;;
}
.details{
display:block;
}
</style>
<div ng-app="app">
<div ng-controller="HelpCtrl">
<input type="text" id="myText" name="myText" ng-focus="showHelp = true" ng-blur="showHelp = false">
<div class="details" ng-class="{'hidden':!showHelp}">
<p>
The help text here!
</p>
</div>
</div>
</div>

Make radio button required, when using a custom image radio button

My issue is that I am using custom images for my radio buttons, so I have them set to display:none; but doing this means they are no longer being called out as required.
Is there a simple solution for this? The radio buttons MUST be images.
-Thanks
<label for="topsides">Top Sides</label>
<form action="" id="TopSideYearCubics_id">
<input class="radio" id="topsidescubicsides" type="radio" name="properties[Top Sides]" value="Cubic Sides" required="required">
<a id="topsidescubicsides_button" href="javascript:set_radio('topsidescubicsides');" class="radio-picture-150x150" style="background: url(http://www.xxxx.com/_Store/_images2015/customring_buttons/button_CA01test_topsides_cubics.gif) no-repeat scroll 0 0;"> </a>
<input class="radio" id="topsidesyearsides" type="radio" name="properties[Top Sides]" value="Year Sides">
<a id="topsidesyearsides_button" href="javascript:set_radio('topsidesyearsides');" class="radio-picture-150x150" style="background: url(http://www.xxxx.com/_Store/_images2015/customring_buttons/button_CA01test_topsides_years.gif) no-repeat scroll 0 0;"> </a>
</form>
<br />
<script>
<!-- //## Sets the Image to the Radio Button ##//-->
function set_radio($inputid) {
$("input#" + $inputid).click();
}
$(document).ready(function() {
$("a.radio-picture-150x150").click(function(){
var $id = $(this).attr('id');
$("a.radio-picture-150x150").removeClass('selected-border');
$("a#" + $id).addClass('selected-border');
});
});
</script>
<style>
input[type=radio], input[type=checkbox] {
display:none;
}
</style>

In my CSS, I just gave the input[type="radio"] a style of opacity:0; to get rid of the stock button, but still show the browser's "Please select one of these options" validation tool-tip when one of my custom radio images wasn't chosen.

change font size of button text in jQuery mobile

I have 2 jQuery mobile buttons inside a fieldset and would like to change the font-size of one of the buttons. I have tried adding an inline style but that did not work.
I have also tried this but that did not work as-well:
.myButton
{
word-wrap: break-word !important;
white-space: normal !important;
}
This is what is happening: (only on the iPhone)
Because the screen size of the iPhone, the "Request Change" button is being cut-off.
Is there a way for me to change the font-size of the button text so that it shows the complete text without getting cut-off?
HTML:
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input data-mini="true" type="submit" value="Cancel" name="Submitbutton" class="button button-link"/>
</div>
<div class="ui-block-b">
<input data-mini="true" data-theme="b" type="submit" value="Request Change" name="Submitbutton" class="button button-link" />
</div>
</fieldset>
I have tried:
jquery mobile button text auto line break
Change font size of a jQuery Mobile button at runtime

Play with the following to find what's best on the iPhone screen
​
.ui-btn-inner{
text-overflow: initial; /* Get rid of the ellipsis */
padding-left: 5px; /* Play with padding to make max use of available button width */
}
.ui-btn-text {
font-size: 15px; /* Play with font size of the text */
}

Live Example:
http://jsfiddle.net/Pjvvx/ (Width)
http://jsfiddle.net/3DSGT/ (Height)
JS:
// For all buttons use something like this
$('.ui-btn').css('width','50%');
// For individual buttons use something like this
$('#theButton1').parent().css('width', '75%');
// Or this for HREF data-role buttons
$('#hrefButton4').css('width', '45%');
// this changes the height for all buttons
$('.ui-btn-text').css('font-size','50px');
// This changes the height for a single element
$('#hrefButton3').children().children().css('font-size','30px');
I think you're looking to do something like this:
$('#hrefButton3').children().children().css('font-size','10px');
HTML:
<div data-role="page" id="home">
<div data-role="content">
<input type="button" id="theButton1" value="Press Me 1" />
<input type="button" id="theButton2" value="Press Me 2" />
<input type="button" id="theButton3" value="Press Me 3" />
<input type="button" id="theButton4" value="Press Me 4" />
<br />
HREF Me 1
HREF Me 2
HREF Me 3
HREF Me 4
</div>
</div>
Related:
resizing a BUTTON through CSS

TextBox Get clear when div show/hide using jquery

I am working on a project in which I have two DIVs (DIV1, DIV2), both have no. of text boxes which are creating dynamically.
I have to hide one of the DIV. On another DIV click event I am showing these DIVs accordingly and enter some text in those textboxes of DIV1. When I hide this div1 and show the DIV2 and enter some text in some textboxes of the DIV2 and hide it. When I show the DIV1 the textboxes are empty. I want these textboxes to retain their values that I entered before I hide it. The same occurs with DIV2 as well.
All these operations are doing by jquery and I need help in jquery.
Can any body help me please.
Thanks in Advance.

You should be hiding your divs by using .css('display', 'none'), or by .toggle().
It seems you're deleting them, and then adding new ones to the DOM.
Can you show us your code?

Try code similar as below:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<style>
.container{
border:1px solid gray;
margin:10px;
}
p,input{margin:10px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#p1").click(function(){ $("#div2").toggle();});
$("#p2").click(function(){ $("#div1").toggle();});
});
</script>
</head>
<body>
<div class="container">
<p id="p1">Text in block2</p>
<div id="div1">
<input type="text" value="Some text in div 1" class="c1" />
<input type="text" value="Some text in div 1" class="c1" />
</div>
</div>
<div class="container">
<p id="p2">Text in block1</p>
<div id="div2">
<input type="text" value="Some text in div 2" class="c2" size="20"/>
<input type="text" value="" class="Some text in div 2" size="20"/>
</div>
</div>
</body>
</html>

How to bind to browser change of input field? (jQuery)

Please take a look at this:
http://jsfiddle.net/sduBQ/1/
Html:
<form action="login.php" method="post" id="login-form">
<div class="field">
<input name="email" id="email" type="text" class="text-input" value="E-mail" />
</div>
<div class="field">
<input name="code" id="code" type="password" class="text-input" />
<div id='codetip'>Access Code</div>
<label class="error" for="code" id="code_error"></label>
</div>
<br />
<div class="container">
<a id="submit" class="link-2">Access</a>
</div>
</form>
CSS:
a {
border: solid 1px #777;
padding:5px;
}
#codetip {
position:absolute;
margin-top:-20px;
margin-left:5px;
}
Javascript:
$('#email').focus(function(){
if($(this).val()=='E-mail'){$(this).val('');}
});
$('#email').blur(function(){
if($(this).val()==''){$(this).val('E-mail');}
});
$('#code').focus(function(){
$('#codetip').hide();
});
$('#code').blur(function(){
if($(this).val()==''){$('#codetip').show();}
});
$('#codetip').click(function(){
$(this).hide();
$('#code').focus();
});
$('#submit').click(function(){
$(this).submit();
});
The problem is that at least in Chrome(haven't tried other browsers yet) when the Chrome Password Manager saves your password and prefills the password for you when you pick the email. I use jquery to hide/show a div over the top of the password input field as a label, hiding that div when the user clicks into the password field (as can be seen in the above jsfiddle code). I need to know how to hide that div when Chrome prefills the password field...

I've haven't run into this myself, but it appears to be a common issue, based on a few quick Google Searches.
FireFox capture autocomplete input change event
http://bugs.jquery.com/ticket/7830
One easy hack you could do is set up some code that runs every second or two via setInterval, and checks to see if the field has a value.
Something like this...
var code = $('#code');
var codeTip = $('#codetip');
var interval = setInterval(function(){
if (code.val()!=''){
codeTip.hide();
clearInterval(interval);
}
}, 1000);

I had the same issue. None of the solutions I found worked nicely enough. I ended up with this:
If it doesn't matter that your input fields have a background, I handled it just in CSS.
jsfiddle
I just gave the .inputPlaceholder { z-index: -1; } so that it aligned behind the input field and then set the input { background: transparent; } so you could see the div behind it.
Google's default -webkit-autofill style has a yellow background, so that just covers up your placeholder behind it all. No need to mess around with custom plugins/events/setIntervals.