folder creation in javascript - 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>

Related

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>

How to get the element that was used as event selector

I got the following problem.
I got an div with is filled with different elements and that has a mouserover-event. I need to use the div in the mouseover-function. The Problem is that i can't select the div via it's class because there are many automaticaly created divs with the same class.
I have tryed to use event.targetbut it returns the object that is inside the that that was used as selector.
$(".outer").on("mouseover",function(event){
alert("event.target.className is: " + event.target.className);
});
.inner{
background-color:#ccc;
min-width:100px;
width:100%;
min-height:100px;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "outer">
<div class="inner">
here
</div>
</div>
Is there any way to get the div outer on mouseover without selecting it by it's class?
I also can't just use $(event.target).parent() because there can be deeper nested structures inside the outer div that are dynamically created
The way I understood the question is you really want to use mouseover event on the .inner div(s). With the example you provided, what would happen if .outer div had padding for example? The event would still trigger even though we are not hovering over .inner div at all. So I would change the event attaching a little and use jQuerys .closest-method to travel back up to the parent div:
var $container = $(".outer");
$container.on("mouseover", ".inner", function(event) {
console.log($(this).closest(".outer").attr("class"));
// or since in this case you know it's the same element:
// console.log($container.attr("class"));
});
.outer {
padding-top: 30px;
background: Red;
}
.inner {
background-color: #ccc;
min-width: 100px;
width: 100%;
min-height: 100px;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
here
</div>
<div class="inner">
here 2
</div>
</div>
Hope, this would work for you:
$(".outer").on("mouseover",function(event){
alert("event.target.className is: " + $(event.target).parent().attr('class'));
});
.inner{
background-color:#ccc;
min-width:100px;
width:100%;
min-height:100px;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "outer">
<div class="inner">
here
</div>
</div>
Use this instade of event.target
this trigger current selector.
$(".outer").on("mouseover",function(event){
alert("event.target.className is: " + this.className);
});
Like this?
I don't understant why you can't use parent
Well, you can get the current listener object just by using "this"
$(".outer").on("mouseover", function(event){
var obj = $(this);
console.log(obj.hasClass("outer"))
});
.inner{
background-color:#ccc;
width:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">
here
</div>
</div>
<div class="outer">
<div class="inner">
<div>
<div>
<div>
<div class="someclass">
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
deeeeeeeep inside
</div>
</div>
</div>
</div>
</div>
there
</div>
</div>
Have you tried event.currentTarget
Example: http://codepen.io/camtullos/pen/bgQNoa?editors=1111
$(".outer").on("mouseover",function(event){
console.log(event.currentTarget.className);
});

HTML textbox not working in AngularJS directive template

I've made a small directive for my AngularJS application, here is the directive template:
<div style="width:100px; height:30px; background-color:white;">
<div style="background-color:khaki; width:100%; height:30px; text-align:center;" >
<span ng-if="show_label" ng-dblclick="ChangeTitle($event)">{{ GetTitle() }}</span>
<textarea style="z-index:1000000"></textarea>
</div>
</div>
<div style="width:100px; height:120px; background-color:skyblue;" >
<div style="height:24px; width:24px; background-color:orange; position:relative; top:50px; left:50px;
z-index:2000; cursor:hand; cursor:pointer;" ng-click="SwitchRoot()" onclick="SwitchRoot2()"></div>
</div>
I have a small problem: my text area (or text box) doesn't receive any input, meaning that I cannot type anything in the textbox!
what is the problem? what is going wrong here?

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>

Trouble with Javascript mouseover

I've been trying to make a div inside a container div visible when the mouse is moved over the container div. Currently the div that needs to be made visible has property display set as none. I've tried repeatedly to make this work with javascript to no avail. could someone help me out please? The code is included below.
HTML
<html>
<!--Header Files-->
<head>
<!--Icon for tabbed browsers-->
<link rel="shortcut icon" href="images/favicon.ico" type="image/png"/>
<!--Including the CSS file that gives all the appearance attributes to the page-->
<link type="text/css" rel="stylesheet" href="css/talentdatabase.css"/>
<!--Including the JavaScript file to give interaction with the web objects-->
<script src="js/talentdatabase.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!--Title of the page-->
</head>
<!--Body-->
<body>
<!--Top Banner-->
<div class="button">
</div>
<div class="head">
<a href="index.html"><div class="logo">
<image src= "" height="60px" width="320px"/>
</div></a>
<div class="contact">
</div>
</div>
<div class="bar">
<a href="talentdatabase.html"><div class="one">
<h3>Talent Database</h3>
</div></a>
<a href="facilities.html"><div class="two">
<h3>Facilities</h3>
</div></a>
<a href="print.html"><div class="three">
<h3>Print Campaigns</h3>
</div></a>
<a href="tv.html"><div class="four">
<h3>TV Campaigns</h3>
</div></a>
<a href="contact.html"><div class="five">
<h3>Contact Us</h3>
</div></a>
</div>
<div class="container">
<div class="column1">
<div class="pic1"><image src= "images/talentdatabase/back/man.png" height="100%" width="100%"/></div>
<div class="caption">Male&nbsp</div>
<div class="popcontain1">
<div class="apop1">&nbsp Fresh Talent</div>
<div class="apop2">Mature Models&nbsp </div>
<div class="apop3">&nbsp Active Models</div>
</div>
</div>
<div class="gutter1">
</div>
<div class="column2">
<div class="pic2"><image src= "images/talentdatabase/back/woman.png" height="100%" width="100%"/></div>
<div class="caption">Children&nbsp</div>
<div class="popcontain2">
<div class="bpop1">&nbsp Boy</div>
<div class="bpop2">G &nbsp i &nbsp r &nbsp l &nbsp </div>
</div>
</div>
<div class="gutter2">
</div>
<div class="column3">
<div class="pic3"><image src= "images/talentdatabase/back/child.png" height="100%" width="100%"/></div>
<div class="caption">Female&nbsp</div>
<div class="popcontain3">
<div class="apop1">&nbsp Fresh Talent</div>
<div class="apop2">Mature Models&nbsp </div>
<div class="apop3">&nbsp Active Models</div>
</div>
</div>
</div>
<div class="bottombar">
<a href="index.html"><div class="one">
<h3>Home</h3>
</div></a>
<div class="bottomleft">
<h3></h3>
</div>
</div>
</body>
</html>
What I've been trying to do is make popcontain1 turn visible when column1 is mouseover-ed.
The css is:
.container{
position:absolute;
width:80%;
height:75%;
top:20%;
left:10%;
}
.column1{
visibility:visible;
font-family:deconeuelight;
position:absolute;
width:32%;
height:100%;
padding:0px;
color:white;
}
.popcontain1{
display:none;
}
.apop1{
position:absolute;
text-align:left;
font-size:1.5em;
background: rgb(247, 121, 0);
background: rgba(247, 121, 0, .6);
width:100%;
top:60%;
}
.apop2{
position:absolute;
text-align:right;
font-size:1.5em;
background: rgb(255, 241, 35);
background: rgba(255, 241, 35, .4);
width:100%;
top:70%;
}
.apop3{
position:absolute;
text-align:left;
font-size:1.5em;
background: rgb(50, 205, 50);
background: rgba(50, 205, 50, .6);
width:100%;
top:80%;
}
For this I've been using the following code in the javscript file:
$(document).ready(function() {
$(".column1").hover(function () {
$(".popcontain1").toggle();
})
})
EDIT:
Am I including all the right libraries? I'm using the google hosted jquery library.
First thing you are trying to display a div with class pop contain which is not present there.
So why its not displaying.
Second thing you are using toggle inside hover first argument function, so next time if you will hover the column it will hide popcontain1 div.
Looking your code it seems you want to apply hover on each column and display popcontain inside it.
So why not make it generic. Add a common class on every column div say 'column' and on popcontain div say'popcontain';
Now this will work for all div.
If you want to show it on mouse over and hide on mouse out.
$(document).ready(function() {
$(".column").hover(function () {
$(this).find(".popcontain").toggle();
},function(){
$(this).find(".popcontain").toggle();
})
})
If you want to permanently show it on first hover.
$(document).ready(function() {
$(".column").hover(function () {
$(this).find(".popcontain").show();
})
})
However you don't need to use jquery if you just want to show hide the inner popcontain.
Following css will help you to achieve what you want.
.popcontain{
display:none;
}
.column:hover .popcontain{
display:block;
}
Edit for your first comment
If you are trying it on local put http: in the link you have included jquery. change this link
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
If you are not putting http: it is searching jquery file on local file system instead of web.
Since you have multiple use an CSS attribute selector to find the element whose class starts with popcontain with:
$("[class^=column]").hover(function () {
$("[class^=popcontain]").toggle();
})

Categories