We Keep Coding

How to change the background color of the div while focusing the text Input field?

In render,
<div id="container" tabindex="0">
<input id = "input" type="text" />
</div>
In css,
#container::focus{
background-color: "red"
}
I need to make the bg-clr to be fixed in the div when focusing the input field.

Try using :focus-within CSS pseudo-class
The :focus-within CSS pseudo-class represents an element that has
received focus or contains an element that has received focus.
#container:focus-within {
background-color: red;
}
#container {
padding: 30px;
}
<div id="container" tabindex="0">
<input id="input" type="text" />
</div>
Note: if you don't want to focus div#container directly remove tabindex

What are you trying to achieve isn't possible by css. You need use JavaScript focus and blur event listeners on the input to change the background color of div:
document.querySelector('#input').addEventListener('focus', function(e) {
e.target.closest("#container").classList.add('focus');
})
document.querySelector('#input').addEventListener('blur', function(e) {
e.target.closest("#container").classList.remove('focus');
})
CSS:
#container.focus{
background-color: "red"
}

You'll need to add an onfocus event to the element then
<div id="container" tabindex="0">
<input id = "input" type="text" onfocus="myFunction(this)" />
<script>
function myFunction(item) {
item.style.backgroundColor = 'red';
}
</script>
See this page for more info:
https://www.w3schools.com/jsref/event_onfocus.asp

If you are ready to use the JavaScript, this one can be the one solution. Based on the requirement you can se the color into Focus and Blur event.
$(document).on('focus','.input', function() {
$("#container").css("background-color","black");
})
$(document).on('blur','.input', function() {
$("#container").css("background-color", "white");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<input class="input" id="input" type="text" />
</div>

How Can I Copy Text From Hidden Textarea to Clipboard?

I have a hidden text area like this with some values set:
<textarea style="display: none;" id="element_html"></textarea>
On click of a button, I try to copy its content to clipboard using this JS code:
$('#element_html').select();
document.execCommand('copy');
It works only if the text area is visible. How can I copy the hidden text area content to clipboard?

opacity: .01;
does the job. You should combine it with:
height:0;
position:absolute;
z-index: -1;
Do not use pointer-events:none; as it will stop .select() from working, as well.
function copyContents() {
$('#element_html').select();
document.execCommand('copy');
}
#element_html {
position: absolute;
opacity: .01;
height: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="element_html">Which textarea?</textarea>
<button onclick="copyContents()">Copy</button>
<input type="text" placeholder="Paste it here...">

You can create a temporary input element that is appended to the body, set it its value to the textarea's content and then use it for the copy function. Then you remove it from the dom. This will work - irrespective of the display state of the text area.
Note that I did not create this method - I got it from somewhere (possibly another SO answer) and have used it since in a number of instances.
function copyContents() {
var $temp = $("<input>");
var content = $('#element_html').text();
$("body").append($temp);
$temp.val(content).select();
document.execCommand("copy");
$temp.remove();
}
#element_html {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="element_html">Hidden textarea content</textarea>
<button onclick="copyContents()">Click to copy</button>
<input type="text" placeholder="Paste here">

The problem is that since the textarea has its display property set to none, its content can not be selected. You can absolutely position the textarea to the left with position: absolute and left: -9999px. You should also add z-index: -9999 so it will always be placed under other elements (unless they have a lower z-index).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea style="position: absolute; left: -9999px;" id="element_html">Text inside textarea</textarea>
<button onClick="copy()">
Copy
</button>
<p/>
<textarea placeholder="Paste text here..."></textarea>
<script>
function copy(){
$('#element_html').select();
document.execCommand('copy');
}
</script>

The Following codes worked for my problem. paste the js code inside your script tag/file.also add the css style to hide the textarea. Also, I found the following ideas through stackoverflow forum so all credit to those folks.
HTML code:
function cpy(n)
{
var id=n;
var txt=document.getElementById(id);
txt.select();
document.execCommand("copy");
};
/* The Following Code is to Hide textarea from The user view area */
textarea{
opacity: 0;
position: absolute;
z-index: -9999;
pointer-events: none;
}
<!-- readonly attribute is used because i found that in mobile devices, keyboard poped-up while i clicked the button to copy text-->
<textarea id="c1" readonly>
This is a text from textarea One.
</textarea><br>
<!--The cpy(this.id) passes button id to js function-->
<button id="c1" onclick="cpy(this.id)">Copy</button>
<input type=text placeholder="Paste Here to test">

Add icons inside textbox area onfocus event, using bootstrap and javascript

Does anybody knows how can I add some bootstrap icons to my textarea. Icons should show on focus and hide on focus out. This textarea is similary, if not the same as Facebook Add new status textarea.
All I was able to do is to expand and shrink textarea onfocus/focusout events, using JavaScript.
This is the code I have:
HTML:
<div class="jumbotron" style="height:150px">
<div class="col-lg-12">
<textarea class="expand" rows="3" cols="20"></textarea>
</div>
</div>
JS:
<script type="text/javascript">
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
});
$('textarea.expand').focusout(function () {
$(this).animate({ height: "2em" }, 500);
});
</script>
CSS:
.expand
{
height: 2em;
width: 50%;
}
I've also try using .css in JS and trying to add icon, but I suppose I don't do this right way, cause nothing gets shown.
$('textarea.expand').focus(function () {
$(this).animate({ height: "4em" }, 500);
$(this).css('glyphicon glyphicon-camera');
});
Textarea should behave like this:
OnFocusOut:
OnFocus:
Can someone help me, and give me an idea on how to do this...Because I'm pretty bad in JS.

One Simple answer can be creating a sibling div element to the textarea which will contain all the icons, show the div of focusing the textarea and hide it on focusout of the textarea

This example is using the selector
.parent:hover .links{}
but could be edited to
.parent:focus .links{}
if desired. However, to show you this in action, i've designed a simple demo below:
.parent{
height:100px;
width:70%;
background:red;
position:relative;
}
.parent:hover .links{
display:block;
}
.links{
display:none;
position:absolute;
bottom:0;
}
<div class="parent">
<div class="child">
<div class="links">
facebook twitter etc
<img src="http://placekitten.com/g/20/20" alt="" />
</div>
</div>
</div>
An example using Sibling selectors
Here is a working example of using the sibling selector
input:focus + .items
which selects the class .items of which has a sibling of 'input' which has a focus (i.e. what you're looking for)
#parent{
height:100px;
width:80%;
background:red;
position:relative;
}
.items{
bottom:0;
padding:5px;
display:none;
}
input:focus + .items{
display:block;
}
<div id="parent">
<input type="text" placeholder="enter text"/>
<div class="items">
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
<img src="http://placekitten.com/g/20/20" alt=""/>
</div>
</div>

image pop up on a steady position

What is the right syntax to make my pop up image show on the left side of the screen?
jQuery
$("#qm3").mouseover(function(){
$("#osf").show();
});
$("#qm3").mouseout(function(){
$("#osf").hide();
});
HTML
<span><input type="text" id="tb1"><img id="qm3" src="images/WebResource.png"></img></span><span><img id="osf" src="images/osf.jpg" style="position: right; display:none;"></img></span>
As of now, whenever I'm pointing my mouse to qm3, the pop up shows, but it affects the positioning of my page.
http://codepen.io/anon/pen/vENZeK

This could be simplified, if you get rid of the spans and wrap a div around it:
http://codepen.io/anon/pen/OPygOg
js
$(".show").hover(function(){
$(this).next('img.hide').fadeToggle();
});
html
<div>
<input type="text" id="tb1">
<img class='show' src="http://placekitten.com/42/41"/>
<img class="hide" src="http://placekitten.com/40/41"/>
</div>
css
div { postition:relative; padding-left:45px;}
.hide { display:none; position:absolute; left:5px; }

Use jQuery to slide in a textbox when hovering mouse over an area

Newbie jQuery questions. Say I have a label on a web page. I want the effect of sliding out an input box when hovering the mouse over the label. Any hint on how to assemble some existing jQuery support to achieve it?

Example at jsFiddle.
HTML:
<div class="HasHiddenInput">
<div>My label</div>
<div class="HiddenInput">
<input .../>
</div>
</div>
Javascript:
$(function(){
$('.HasHiddenInput').hover(
function(){
$(this).find('.HiddenInput').stop(true,true).slideDown();
},
function(){
$(this).find('.HiddenInput').stop(true,true).slideUp();
}
);
});
Optional CSS:
.HiddenInput{
display:none; /*Initially hidden*/
}
.HasHiddenInput{
padding: 5px;
border: solid 1px #ccc;
}

On hover animate a div to show the input:
$("#YourLabel").hover(function(){
$("#DivWrappingInput").animate({
width: 100,
}, 500);
});

Without seeing any code or CSS, it's hard to say but something like this should work:
Assumign your HTML is like this:
<div>
<div>
<label>Label 1</label>
<input />
</div>
</div>
$(document).ready(function(){
$('label').hover(function(){
//Animate width to show the input box
$(this).siblings('input').animate({'width':200 + 'px'});
}, function(){
//Animate width to hide input box
$(this).siblings('input').animate({'width':0 + 'px'});
}
});
You'll need to add a position of relative to the input box. You can animate the width of the input box if required as well. It depends on the context of use of the input box and label.