We Keep Coding

How to Insert an image inside an input field in react js?

.js file
<div className = "num">
<p >Enter Phone Number <span className='star'>*</span></p>
<input
type="tel"
className="code"
placeholder="+91"
/>
<img className='drop' src={drop} alt='drop' />
<input
type="tel"
className="number"
placeholder="00000 00000"
/>
</div>
.css file
.drop{
color: #797B86;
margin-top: 46.5px;
margin-left:-30px;
without giving negative value, I'm unable to move it inside the box.Even after moving it inside the box, the space between these two boxes gets disturbed. What is the best way to do this?
}
.star{
color: #DE1F48;
}
Is it possible without giving negative values in stylesheet?

You can surround your input and image by another element, and set the position of the image based on the parent as below:
.container {
position:relative;
padding:0;
margin:0;
}
.input {
height:20px;
margin:0;
padding-left:30px;
}
.image {
position:absolute;
bottom:8px;
left:10px;
width:10px;
height:10px;
}
<div class="container">
<input class="input" type="text" id="input" value>
<img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/right-forward-arrow-512.png" class="image">
</div>

Closest parent selector in AngularJS

I have a working code to close a custom popup using jQuery, but I want a solution using AngularJS instead of jQuery.
Anyone can help me out to find this.closest() in AngularJS.
I want to hide .popOverlay on click of .popClose using AngularJS, not jQuery. And I don't want to use perticular class/id becoz I have many popups like this, I want to a common solution for all of them.
Here is my working jQuery Code:
function popClose(e)
{
$(e).closest('.popOverlay').fadeOut('slow');
}
.popOverlay { background:rgba(0,0,0,.5); width:100%; height:100%; overflow-y:auto; position:fixed; left:0; top:0;}
.popBox { background:#fff; border-radius:5px; position:relative; width:400px; max-width:90%; padding:20px; margin-left:auto; margin-right:auto; margin-top:50px;}
.popClose { display:inline-block; position:absolute; top:5px; right:10px; cursor:pointer; color:#f00; font:bold 16px Arial, Helvetica, sans-serif;}
.heading { color:#0077c8; font:bold 16px Arial, Helvetica, sans-serif; margin-top:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popOverlay">
<div class="popBox">
<a class="popClose" onClick="popClose(this)">x</a>
<h3 class="blue-heading">This is a custom popup.</h3>
</div>
</div>

To achieve expected result, use ng-hide on div with class-popOverlay and set it to true on click of x
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<div class="popOverlay" ng-hide="closePop">
<div class="popBox">
<a class="popClose" ng-click="popClose()">x</a>
<h3 class="blue-heading">This is a custom popup</h3>
</div>
</div>
</div>
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.popClose= function(){
$scope.closePop= true;
};
});
http://codepen.io/nagasai/pen/XKgEbE

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popOverlay" ng-hide="popclose">
<div class="popBox">
<a class="popClose" onClick="popClose("true")">x</a>
<h3 class="blue-heading">This is a custom popup.</h3>
</div>
</div>
function popClose(status)
{
if(status=="true"){
$scope.popclose=true;
}
}
try this. it worked for me

you can use "bootstrap modal" instead.
visit http://getbootstrap.com/javascript/#modals

folder creation in javascript

How to create folder with specific name in javascript? I don't want to create folder in PC, but just create HTML's div with specific content inside. The name should be entered when I click "create new folder" and after I hit enter div appears just below "create new folder" section. I don't want to hard code all elements and so on, so maybe there is an easier way to do that?
I want to create something like this, but appending this code in javaScript would be nonsense
<div class="new_folder">
<div class="folder_icon">
<div class="folder_icon_border">
<div class="folder_icon_bubble"></div>
<div class="folder_icon_bubble"></div>
<div class="folder_icon_bubble"></div>
</div>
</div>
<div class="folder_name">
<p class="folder_name_txt"></p>
</div>
<div class="folder_do">
<div class="icon" ng-click="someFunction()"></div>
</div>
</div>

There's multiple method to do that, it's just an append of html in a container.
You can try something like this
$(document).ready(function(){
$("#buttonCreateFolder").click(function()
{
var name=$("#folderName").val();
if(name!="")
{
var div="<div class='folder'><span class='fname'>Folder : "+name+"</span> Your content here</div>";
$(".container").append(div);
$("#folderName").val("");
}
});
});
.folder{
position:relative;
background-color:yellow;
width:300px;
height:150px;
margin:20px;
border:solid 1px #999;
padding:40px 10px 5px 10px;
display:inline-table;
}
.fname{
position:absolute;
width:100%;
text-align:center;
border-bottom:solid 1px black;
top:0;
left:0;
height:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<input type="text" id="folderName" name="folderName" placeholder="Folder Name"> <button id="buttonCreateFolder">
Create Folder
</button>
<div class="container">
</div>

Unable to change text color using jQuery

I am unable to change the text color using jQuery.I have gone through other similar questions and tried to implement the solutions but somehow its not working. Not sure where I am going wrong. please help. I have created a demo
CODE
HTML
<div class="wrapper">
<button class="addItem">Add Item</button>
<button class="removeItem">Remove Last Item</button>
<div class="clear">
</div>
<div class="colr blue">blue</div>
<div class="colr red">red</div>
<div class="clear">
</div>
<ul class="items">
<li class="newItem">ONE</li>
<li class="newItem">ONE</li>
</ul>
</div>
CSS
.clear{
clear:both;
}
.colr{
height:20px;
width:50px;
float:left;
color:white;
padding:10px;
margin:10px;
text-align:center;
cursor:pointer;
}
.blue{
background:blue;
}
.red{
background:red;
}
jQuery
$(document).ready(function(){
$('.addItem').click(function(){
$('.items').append("<li class=\'newItem\'>NEW ITEM</li>");
});
$('.removeItem').click(function(){
$('.items li:last-child').remove();
});
$('blue').click(function(){
$('.items').css('color','blue');
});
$('red').click(function(){
$('.newItem').css('color','red');
});
});

Here you can try this code
$('.blue').click(function(){
$('.items').css('color','blue');
});
$('.red').click(function(){
$('.newItem').css('color','red');
});
Js fiddle link click here

Switch divs when pressing buttons with javascript

I have two buttons and two divs(I put one above another). I made "info" class visible and "info2" hidden. I need when pressed on "Global" button - "info" div is shown and on the "Asia" button - "info2" div. I tried this code but it's not working:
$('.corpo_button_asia').click(function(){
$('.info').hide;
$('.info2').show;
});
$('.corpo_button_global').click(function(){
$('.info').show;
$('.info2').hide;
});
Here is html code:
<div clas"corpo_buttons">
<div class="corpo_buttons_global">
Global
</div>
<div class="corpo_buttons_asia">
Asia
</div>
</div>
<div class="info">
Info1
</div>
<div class="info2">
Info2
</div>
and css:
.corpo_buttons
{
height:50px;
}
.corpo_buttons_global
{
position:absolute;
z-index:10;
width:50px;
float:left;
background-color:rgb(23,55,94);
color:#FFF;
padding:2px;
border:thick;
border-color:rgb(23,55,94);
border-width:1px;
border-style:solid;
}
.corpo_buttons_asia
{
position:relative;
z-index:2;
left:45px;
width:50px;
float:left;
padding:2px;
background-color:rgb(197,197,197);
padding:2px;
border:thick;
border-color:rgb(23,55,94);
border-width:1px;
border-style:solid;
}
.info
{
position:absolute;
margin-top:21px;
width:150px;
height:60px;
border:thick;
border-color:#000;
border-width:1px;
border-style:solid;
text-align:left;
padding:5px;
font-size:10px;
}
.info2
{
margin-top:21px;
width:150px;
height:60px;
border:thick;
border-color:#000;
border-width:1px;
border-style:solid;
text-align:left;
padding:5px;
font-size:10px;
visibility: hidden;
}

Notwithstanding the class error noticed by #Sorpigal, the other problem is that you don't actually call .show and .hide because you've omitted the parentheses after the function names.
They should say .show() and .hide() !

This could be related to your "visibility: hidden;" in .info2. I'd suggest trying it with "display: none;" instead.
The way the jquery show/hide methods work is by toggling the display from none to block and back again. Chances are it's not paying attention at all to your visibility state.
If your absolutely dependant on visibility in your css you can change the code to toggle that one instead:
$('.info').css('visibility', 'hidden');
$('.info2').css('visibility', 'visible');

The problem is that your class assignment reads <div class="corpo_buttons_asia"> but in jquery you say .corpo_button_asia - note the "button" vs "buttons"
Fix this first.

Try with this:
DEMO jsBin
$('.corpo_buttons_asia').click(function(){
$('.info').hide();
$('.info2').show();
});
$('.corpo_buttons_global').click(function(){
$('.info').show();
$('.info2').hide();
});

Check Corrected one as Below
<div>
<div class="corpo_buttons">
<div class="corpo_buttons_global">
Global
</div>
<div class="corpo_buttons_asia">
Asia
</div>
</div>
<div class="info">
Info1
</div>
<div class="info2">
Info2
</div>
</div>
</form>
<script language="javascript">
$('.corpo_buttons_global').click(function(){
$('.info').hide();
$('.info2').show();
});
$('.corpo_buttons_asia').click(function(){
$('.info').show();
$('.info2').hide();
});
</script>

your html class names does not match with jquery selectors.
‍‍<div clas in the 1st line of your html should be as <div class=.
anyway I created a jsfiddle for you. hope this helps
http://jsfiddle.net/5MvHZ/1/