Develop Reference

Getting colour in preview area to display when I type into input box using JavaScript and jQuery

I have written a code such that I should see the preview area change colour when I type names into the input box. I need to call the setPreviewColour in the event handler and pass the current value of the input box into it.
Below is my code:
function setPreviewColor(item){
$('.preview').css('background-color', item);
}
$(document).on('keyup', '#add-to-favorite', function() {
setPreviewColor($('#color').val());
// $('#items').append('<li>' + $('#color').val() + '</li>');
// $('.preview').css('background-color', $('#color').val());
} );
HTML code
<div id="container">
<h1>Color picker</h1>
<input id="color" type="text"/>
<button id="add-to-favorite">Add to favorites</button>
<div class="row">
<div class="column">
<div class="preview">
</div>
</div>
<div class="column">
<div id="colors">
</div>
</div>
<br/>
<div class="color-code"></div>
</div>
</div>
Screenshot of broswer
It doesn't change when i click on the Add to favourites button. It only changes when I press CTRL+ SHIFT +J to go to the console. Thanks for the help

You are trying to use onkeyup on a button with id (add-to-favorite), you need to attach the onkeyup event to your textbox:
//Change what you have to the following, now as a user types in the textbox
//with id of color, it will send the value of the textbox to setPreviewColor()
$(document).on('keyup', '#color', function() {
setPreviewColor($('#color').val());
//OR
//setPreviewColor($(this).val());
} );

Change
$(document).on('keyup', '#add-to-favorite', function() {
to
$('#add-to-favorite').on('click', function() {

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>

jquery textfield: show end of text when not in focus

I see that whenever there is more text than the size of the text field, start of the text gets shown when not on focus. In the picture below, i want to show the end of the text like 1, but when text field is not in focus automatically start of the text is shown. I tried right align (bootstrap text-right) as shown in 3 but that didn't help
Code chunk related to this:
<div class="form-group">
<label for="" class="control-label col-xs-3">Work Space:</label>
<div class="col-xs-6">
<input type="text" class="form-control text-right" id="workspace" placeholder="">
</div>
<div class="col-xs-2">
<button type="button" id="load_files" class="btn btn-info">Load Files</button>
</div>
</div>
Edit:
Just tried this in Mozilla firefox, it works just as i want it to, but doesn't work in chrome

Set the direction CSS property to match the direction of the text you want. rtl or ltr.
input {
direction: rtl;
}
input:focus,
input:active {
direction: ltr;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/yongchuc/on91y1hr/

Hide/show div with javascript

I would like to show a form field textbox only when a certain checkbox is checked, and hide it when it is unhecked. I have gotten the code to make it hide when I check the box, but the textbox is displayed when the page is loaded until I check the box, which is opposite of what I would like to accomplish. I am pretty newbish with javascript so I am sure this is pretty elementary. Thanks for any help.
HTML:
<input type="checkbox" onclick="ShowCCFields(this.value);" name="CAT_Custom_510969" id="CAT_Custom_510969_7" value="Other..." />
Other...
<div class="item" id="other">
<label for="CAT_Custom_510972">Other:</label><br />
<textarea onkeydown="if(this.value.length>=4000)this.value=this.value.substring(0,3999);" class="cat_listbox" rows="4" cols="10" id="CAT_Custom_510972" name="CAT_Custom_510972"></textarea>
</div>
javascript:
// Hide or show textarea if the other checkbox field is checked
var voucher = document.getElementById("CAT_Custom_510969_7");
function ShowCCFields(val) {
if (!document.getElementById('other'))
return;
if (val == voucher.checked)
document.getElementById('other').style.display = 'inline';
else
document.getElementById('other').style.display = 'none';
}

Why not set the display to none to begin with? You can do that in CSS or just add it to
<div class="item" id="other" style="display: none;">

Set the style to none in the HTML, just like you do in the javascript:
<div class="item" id="other" style="display:none;">

Set Display to none in the control you want to hide :
<div class="item" id="other" style="display: none;">
And In your js Function :
document.getElementById('other').style.display = 'inline';

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.