Creating a tag box - javascript

I'm making a tag box similar to that of StackOverflow. I see that this question has already been asked here (How to make a "tags box" using jQuery (with text input field + tags separated by comma)) but I'm having a question with regards to the Javascript.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tag-container' id = "tag-container">
<span class='dashfolio-tag'>Tag1</span>
<span class='dashfolio-tag'>Tag2</span>
<span class='dashfolio-tag'>Tag3</span>
</div>
<input type="text" value="" placeholder="Add a tag" id = "add-tag-input" />
CSS:
.tag-container {
max-width: 300px; /* helps wrap the tags in a specific width */
}
.dashfolio-tag {
cursor:pointer;
background-color: blue;
padding: 5px 10px 5px 10px;
display: inline-block;
margin-top: 3px; /*incase tags go in next line, will space */
color:#fff;
background:#789;
padding-right: 20px; /* adds space inside the tags for the 'x' button */
}
.dashfolio-tag:hover{
opacity:0.7;
}
.dashfolio-tag:after {
position:absolute;
content:"×";
padding:2px 2px;
margin-left:2px;
font-size:11px;
}
#add-tag-input {
background:#eee;
border:0;
margin:6px 6px 6px 0px ; /* t r b l */
padding:5px;
width:auto;
}
JS:
$(document).ready(function(){
$(function(){
$("#add-tag-input").on({
focusout : function() {
var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
this.value = "";
},
keyup : function(ev) {
// if: comma|enter (delimit more keyCodes with | pipe)
if(/(188|13)/.test(ev.which)) $(this).focusout();
}
});
$('.tag-container').on('click', 'span', function() {
if(confirm("Remove "+ $(this).text() +"?")) $(this).remove();
});
});
});
My question is pretty simple, how do I add the new input as a span with class dashfolio-tag inside the #tag-container? I dabbled with the insertBefore property trying to add it to the right node, but to no avail. Thanks in advance guys!

Change this line of code,
if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
to
if(txt) {
$("<span/>", {
text:txt.toLowerCase(),
appendTo:"#tag-container",
class:"dashfolio-tag"
});
}
See the demo: https://jsfiddle.net/2gvdsvos/4/
To fix the margins in between tags,
Update HTML to,
<div>
<div class="tag-container" id="tag-container">
<span class='dashfolio-tag'>tag1</span>
<span class='dashfolio-tag'>tag2</span>
<span class='dashfolio-tag'>tag3</span>
</div>
</div>
<div>
<input type="text" value="" placeholder="Add a tag" id="add-tag-input" />
</div>
And add this to CSS,
.tag-container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.dashfolio-tag {
...
margin-right: 4px;
float: left;
}
Hope this helps! ;)
https://jsfiddle.net/2gvdsvos/5/

Related

add div to parent div without duplication

i have a user div, containing a list of users and onclick of any user i want a div with 3 child divs to be appended to another parent div.but when try running my code, 3 appended divs are created when two users are clicked and 5 appended divs are created when 3 users are clicked please any help will be appreciated. below is my code
<htmL>
<head>
<script src="js/jquery-1.11.1.min.js"></script>
</head>
<style>
.clear{
clear:both:
}
.mainwrapper{
width:700px;
border-style:solid;
bottom:5000px;
z-index:2;
margin-left:20px;
margin-top:150px;
//display:none;
}
.wrapper{
height:300px;
width:300px;
border-style:solid;
float:left;
}
.wrapper1{
height:90px;
width:280px;
border-style:solid;
margin:5px;
}
.wrapper11{
height:50px;
width:80px;
border-style:solid;
float:left;
}
.wrapper12{
height:50px;
width:190px;
border-style:solid;
}
.wrapper2{
height:90px;
width:280px;
border-style:solid;
margin:5px;
}
.wrapper21{
height:50px;
width:80px;
border-style:solid;
float:left;
}
.wrapper22{
height:50px;
width:190px;
border-style:solid;
}
.wrapper3{
height:90px;
width:280px;
border-style:solid;
margin:5px;
}
</style>
<body>
<div class="user">
<p>first</p>
<p>second</p>
<p>thid</p>
</div>
<!----parent container---->
<div class="mainwrapper">
</div>
</body>
<script>
$(".user").click(function () {
//alert('oko');
create();
})
function create(){
$('<div/>',{ class : 'wrapper'}).appendTo(".mainwrapper");
$('<div/>',{ class : 'wrapper1'}).appendTo(".wrapper");
$('<div/>',{ class : 'clear'}).appendTo(".wrapper1");
$('<div/>',{ class : 'wrapper2'}).appendTo(".wrapper");
$('<div/>',{ class : 'clear'}).appendTo(".wrapper2");
$('<div/>',{ class : 'wrapper3'}).appendTo(".wrapper");
$(".wrapper3").append('<form action="chatprocess.php?id="+"e"+" method="POST">');
$(".wrapper3 form").append('<input type="text" placeholder="Name" name="a" id="rname"/>');
$(".wrapper3 form").append('<br><input type="submit" name="submit" value="Send" />');
$(".wrapper3 form").attr('action', 'chatprocess.php?send='+send+'&&rec='+user+'&&cat='+cat);
return user
}
</script>
</html>
You shoud add some distinct tag to the wrapper class name that is added to the mainwrapper when you create the new divs so as to associate it with the specific user that was clicked.
To do that pass the tag ("user1" for example) in the create function.
Then name wrapper class as wrapper_user1 instead of just wrapper.
What happens with your code is that when you click on the 2nd and 3rd user, when you append to "wrapper" it is appending to the new wrapper you added, but also to the ones you created before by clicking user 1 and 2.
The same happens with wrapper3. I suggest you tag all your wrappers with the corresponding user in case you add more functionality.
If you want to keep the tagging only at the first level of wrappers you will need to change how you select the different elements by prepending the corresponding tagged wrapper in the jQuery selector.
Note: Also check your code. js has some syntax errors and undefined variables. Css also has syntax errors.
$(".user a").click(function() {
//alert('oko');
var tag = $(this).attr('data-tag');
create(tag);
});
function create(tag) {
var newClass = 'wrapper_' + tag;
//Declared for snippet to work
var send ="";
var user="";
var cat="";
//----------
$('<div/>', {
class: newClass
}).appendTo(".mainwrapper");
$('<div/>', {
class: 'wrapper1 wrapper1_' + tag
}).appendTo("." + newClass);
$('<div/>', {
class: 'clear'
}).appendTo(".wrapper1_" + tag);
$('<div/>', {
class: 'wrapper2 wrapper2_' + tag
}).appendTo("." + newClass);
$('<div/>', {
class: 'clear'
}).appendTo(".wrapper2_" + tag);
$('<div/>', {
class: 'wrapper3 wrapper3_' + tag
}).appendTo("." + newClass);
$(".wrapper3_" + tag).append('<form action="chatprocess.php?id="+"e"+" method="POST">');
$(".wrapper3_" + tag + " form").append('<input type="text" placeholder="Name" name="a" id="rname"/>');
$(".wrapper3_" + tag + " form").append('<br><input type="submit" name="submit" value="Send" />');
$(".wrapper3_" + tag + " form").attr('action', 'chatprocess.php?send=' + send + '&&rec=' + user + '&&cat=' + cat);
return user;
}
.clear {
clear: both;
}
.mainwrapper {
width: 700px;
border-style: solid;
bottom: 5000px;
z-index: 2;
margin-left: 20px;
margin-top: 150px;
//display:none;
}
.wrapper {
height: 300px;
width: 300px;
border-style: solid;
float: left;
}
.wrapper1 {
height: 90px;
width: 280px;
border-style: solid;
margin: 5px;
}
.wrapper11 {
height: 50px;
width: 80px;
border-style: solid;
float: left;
}
.wrapper12 {
height: 50px;
width: 190px;
border-style: solid;
}
.wrapper2 {
height: 90px;
width: 280px;
border-style: solid;
margin: 5px;
}
.wrapper21 {
height: 50px;
width: 80px;
border-style: solid;
float: left;
}
.wrapper22 {
height: 50px;
width: 190px;
border-style: solid;
}
.wrapper3 {
height: 90px;
width: 280px;
border-style: solid;
margin: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user">
<p><a data-tag="user1" href="#">first</a></p>
<p><a data-tag="user2" href="#">second</a></p>
<p><a data-tag="user3" href="#">thid</a></p>
</div>
<!----parent container---->
<div class="mainwrapper"></div>
Have a DIV set in which you want to append//add 3 DIV, something like this:
<div id='parentDiv'>
<!-- place where 3 DIVs will be inserted -->
</div>
Somewhere you will have three texts for a click event to happen, add an onClick event to all the texts:
<div>
<a class = 'clickMe' onclick="myFunction()">one</a></div></br>
<a class = 'clickMe'onclick="myFunction()">two</a></br>
<a class = 'clickMe'onclick="myFunction()">three</a></br>
</div>
In a script tag define a string with has 3 DIVs inside a parent DIV, something like this:
var divWith3ChildDiv = '<div><div style="background-color:blue;">this is 1st added DIV</div><div style="background-color:red;">2nd Added DIV</div><div style="background-color:pink;">3rd added DIV</div></div>';//a parent DIV with 3 DIVs inside it
And then you can have your onClick event function which will use innerHTML method to add the string defined above as HTML to the 'parentDiv'
var getElements = document.getElementsByClassName('clickMe');
var myDiv = document.getElementById('parentDiv');
function myFunction(){
myDiv.innerHTML = divWith3ChildDiv;
}

Button click Triggers Text Below

I want to set up a functionality for a button that causes text to appear underneath it on click.
For example, when you click a button that says "Sign up now", text would appear underneath the button that says "Are you a member, yes or no?".
"Yes" and "No" would be links that bring you to a different page depending on how you answer.
My button code so far (just html and styling done):
<a href="/ticket-link" target="_blank" class="ticket-button">Sign Up
Now</a>
I'm new with this kind of functionality so any help would be greatly appreciated!
Thanks!
Adjust the href attribute as you want.
$('#btn').click(function() {
$('#modal').fadeIn();
});
a {
display: block;
text-decoration: none;
color: white;
background-color: #333;
width: 100px;
padding: 20px;
border-radius: 5px;
margin: 0 auto;
}
#modal {
width: 300px;
height: 120px;
background-color: #ccc;
border-radius: 5px;
margin: 0 auto;
display: none;
}
#modal h3 {
text-align: center;
padding: 10px;
}
#modal a {
width: 50px;
display: inline-block;
text-align: center;
margin: 0 auto;
height: 10px;
vertical-align: middle;
line-height: 10px;
}
.btns {
width: 200px;
margin: auto;
}
a:hover {
background-color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/ticket-link" target="_blank" class="ticket-button" id='btn'>Sign Up Now</a>
<div id='modal'>
<h3>Are you a member?</h3>
<div class='btns'>
Yes
No
</div>
</div>
You could use the onClick function to unhide text, or elements, below it.
Sign Up Now
<span style="display:none;" id="text">This is some text :D</span>
simple way:
Sign Up Now
<script>
function confirmSignup(){
if(confirm("Are you sure?"))
{
window.location.href="http://somelocation.com/sign-up";
}
}
</script>
Like #Pety Howell said, you can use the onClick function to unhide the text. Here's a pretty straightforward way to do it with jQuery.
$(function() {
$('.link').on('click', function() {
$('.span').addClass('open');
});
});
.span {
display: none;
}
.open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click me
<span class="span">I'm hidden!</span>
Working fiddle: https://jsfiddle.net/3gr03yzn/4/
You could use jQuery toggle() function.
HTML :
<button id="member">
Are you Member ?
</button>
<div class="answer">
Yes<br />
No
</div>
JS :
$("#member").click(function() {
$(".answer").toggle();
});
CSS :
.answer {
display:none;
}
The working example on jsFiddle.
Hope this helps
Try this code.
please vote if this code helpful to you
function execute(){
var x = document.getElementById('link_list');
var y =document.getElementById('btn');
if(x.style.visibility==="hidden"){
y.style.visibility="hidden";
x.style.visibility="visible";
}
}
<button onclick="execute()" id="btn">sign up</button>
<div id="link_list" style="visibility:hidden">
Are you a member, <button onclick="window.open('http://sparrolite.blogspot.in')">Yes</button> or <button onclick="window.open('google.com')">no</button>
</div>
Most answers mentioned here either uses
jQuery or,
onclick attribute which is obtrusive javascript.
Here's how to achieve the desired behavior using vanilla, unobtrusive JavaScript.
window.onload = function() {
var button = document.querySelector('.ticket-button');
var info = document.querySelector('.info');
info.style.display = 'none';
var dispalyInfo = false;
button.onclick = function(e) {
e.preventDefault(); /* prevent page from navigating to a new page onclick */
if (dispalyInfo) {
info.style.display = 'none';
dispalyInfo = false;
} else {
info.style.display = 'initial';
dispalyInfo = true;
}
}
}
.ticket-button {
display: block;
}
Sign Up Now
<span class="info">Are you a member, yes or no?</span>
References:
Document.querySelector()
HTMLElement.style

How can I have text resize based on the width of the preceding div element using CSS?

I have a label I'm attempting to generate. It has the following structure.
.name-box { width: 400px; background-color: #efefef; border: 1px solid #000; overflow: hidden; white-space: nowrap; }
.last-name { font-size: 26px; display:inline; overflow: hidden;}
.first-name { display:inline; overflow: hidden;}
<div class="name-box">
<div class="last-name">McDonald-OrAReallySuperDuperLongLastName</div>
<div class="first-name">David</div>
</div>
What I'm wanting to do is change the text size of the first name, based on the length of the last name. If the name is "Venckus-Stringfellow" and I only have a little bit of space left I'd like the text size of the first name to be around 7px. But if the last name is "Le", then I'd want the first name to have a text size of 26px -- granted that having a text size of 26px still allows the first name to fit on the 600px that my div has to fill the label. How can I do this with HTML/CSS (if I MUST use Javascript then that's fine, was trying to avoid it though) ?
Javascript that uses the length of the last name in a mathematical equation to set the first names size. This is a very simple example and you'd need to change it if you wanted it to be exponential and you should probably set high and low bounds that it can't go below.
var lastNameText = document.querySelector('.last-name').textContent;
var firstName = document.querySelector('.first-name');
firstName.style.fontSize = (120 / lastNameText.length) + "px";
.name-box { width: 600px; }
.last-name { font-size: 26px; }
.first-name: { font-size: 26px; }
<div class="name-box">
<div class="last-name">McDonald</div>
<div class="first-name">David</div>
</div>
You're going to need javascript here, unfortunately. You can get close using viewport percentages, but that applies to the whole viewport. And it would only be for one container, not a preceding container. What you are going to need to do is create an algorithm that updates the font sizes, and run it everytime you load HTML/text into those div's.
Something like this should get you started:
function loadNames(var firstName, var lastName) {
//GET THE LENGTH OF THE LASTNAME STRING
var len = lastName.length;
var factor = .7; //CUSTOMIZE THIS TO DO YOUR SIZING BASED ON THE FONT
var fontSize = Math.ceil(factor * len); //GET THE NEW FONT SIZE, BASED ON THE LENGTH AND FACTOR, AND ROUNDED UP
//SET THE TEXT OF THE NAMES
$('firstName').Text(firstName);
$('lastName').Text(lastName);
//SET THE FONT SIZES
$('firstName').css({ 'font-size': fontSize + 'px;' });
$('lastName').css({ 'font-size': fontSize + 'px;' });
}
CSS solution unfortunately is not possible. It's not possible to select partial text inputs, and there's some calculation required that cannot be done with CSS at this point, in this age.
But javascript.. Were you looking for something like this OP?
$(document).on("ready", function(){
var ratio = 20;
$(".name").keydown(function(){
var input_length = $(this).val().length / ratio;
var new_size = (2 - input_length < 1 ? 1 : 2 - input_length);
$(this).css("font-size", new_size+"em");
});
});
input {
width: 40em;
margin: 0 auto;
display: block;
padding: 15px;
}
.main-wrapper {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
<input class="name" type="text" placeholder="Enter name" />
</div>
This is another approach how You could achieve the result. Maybe it's possible to do not use table at all but each div should use display:inline-block; property.
$scalingL = $('.last-name').width();
$scalingF = $('.first-name').width();
$('.first-name').css('font-size',($scalingL / $scalingF * 26));
.name-box { width: 600px; background-color: #efefef; border: 1px solid #000; overflow: hidden; white-space: nowrap; }
.last-name { font-size: 26px; overflow: hidden; display:inline-block;}
.first-name { font-size: 26px; display:inline-block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="name-box">
<table>
<tr>
<td>
<div class="last-name">McDonald-OrAReallySuperDuperLongLastName</div>
</td>
</tr>
</tr>
<td>
<div class="first-name">Something</div>
</td>
</tr>
</table>
</div>
Try this:
<style type="text/css">
.name-box{
width:auto;
overflow:auto;
}
#first-name{
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:1px;
}
#last-name {
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:26px;
}
</style>
<div class="name-box">
<div id="last-name">McDonalds</div>
<div id="first-name">David</div>
</div>
<script type="text/javascript">
var ln = document.getElementById("last-name");
var fn = document.getElementById("first-name");
for ( i = 1; ln.offsetWidth>fn.offsetWidth; i+=.5)
{
fn.style.fontSize=(i)+"px";
}
</script>
<style type="text/css">
.name-box{
width:auto;
overflow:auto;
}
#first-name{
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:1px;
}
#last-name {
display:inline-block;
width:auto;
clear:both;
float:left;
font-size:26px;
}
</style>
<div class="name-box">
<div id="last-name">McDonalds</div>
<div id="first-name">David</div>
</div>
<script type="text/javascript">
var ln = document.getElementById("last-name");
var fn = document.getElementById("first-name");
for ( i = 1; ln.offsetWidth>fn.offsetWidth; i+=.5)
{
fn.style.fontSize=(i)+"px";
}
</script>

jQuery expanding search icon input, not quite working

I have this search box that I have done so far but new to JS so a little stuck.
I need it to slide to the right to reveal the input behind it, it did work when I used just button but I guessed I needed to add just the icon so did not submit when you clicked it but slide across, but then I guess also need to make the button show and the icon hide when you enter something in the input and if not when you click icon would just close again.
Something a bit like this I guess.... http://codepen.io/nikhil/pen/qcyGF - which is what I've been trying to base it off.
searchExpand = function(elm){
var spanIcon = $('.span-icon'),
searchInput = $('.search-input'),
searchForm = $('.search-form'),
btnSearch = $('.btn-search'),
isOpen = false;
if(isOpen == false){
searchForm.addClass('open');
spanIcon.hide();
btnSearch.show();
searchInput.focus();
isOpen = true;
} else {
searchForm.removeClass('open');
btnSearch.hide();
spanIcon.show();
searchInput.focusout();
isOpen = false;
}
}
$(document).ready(function(){
// lets make the search feature happen!
$(document).on("click", "span.btn-search", function() {
searchExpand(this);
});
});
.search-form {
width: 0%;
}
.search-form input {
border-right-style: none;
}
.search-form button {
background: none;
padding: 0;
display: none;
}
.search-form button i {
font-size: 1.9em;
color: #000;
padding: 10px;
}
.search-form span.search-icon {
font-size: 1.9em;
color: #000;
padding: 10px;
cursor: pointer;
}
.search-form .form-control {
padding: 0;
border: 0;
}
.search-form .input-group-addon {
background: #fff;
border: 0;
}
.search-form.open {
width: 100%;
}
.search-form.open .form-control {
padding: 30px 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<form role="search" class="search-form">
<div class="input-group add-on">
<input type="text" class="form-control search-input" placeholder="Enter a search term" name="search" id="search">
<div class="input-group-addon">
<button class="btn btn-clear btn-search" type="submit"><i class="glyphicon glyphicon-search search-icon"></i></button>
<span class="span-icon glyphicon glyphicon-search search-icon"></span>
</div>
</div>
</form>
Notice that your .btn-search isn't inside a span, so your function, searchExpand will not run. when you click the button.
What's in the span is "span-icon glyphicion.... "
If you're using jquery, this would be an effective way of achieving what you want:
Assign an ID to the span call it what you will, and change your js to reflect:
$( "#yourbuttonidname" ).click(function() {
searchExpand(this);
});
Example of the new span:
<span id="yourbuttonidname" class="span-icon glyphicon glyphicon-search search-icon"></span>

Have different line-height between input and output area

I'm trying to make a terminal shell like page.
See my code at jsfiddle:
http://jsfiddle.net/paopaomj/qGw4Q/9/
The input line seems have more line-height then the outputs.
Try it and type something press some enters you'll know what I mean.
Thanks.
html:
<body>
<div id="output"></div>
<div id="input">
root#host
<input type="text" id="command" />
</div>
javascript:
$("#command").keyup(function (e) {
if (e.keyCode == 13) {
submit();
}
});
var submit = function () {
var commandEl = document.getElementById("command");
var command = commandEl.value;
var outputel = document.getElementById("output");
var new_row = document.createElement("div");
new_row.innerHTML = "root#host " + command;
outputel.appendChild(new_row);
commandEl.value="";
};
The input got some padding. Add
padding:0px;
margin-left:-1px;
to the input css
OK.
I got it sovled finally by setting margin=0 for input field, margin-top=0 for iutput div, and margin-bottom=0 for output div:
#output { margin-bottom: 0px; background-color: #000000; }
#input { margin-top: 0px; background-color: #000000; }
input {
border: 0;
background: #000000;
color: #00FF00;
outline: none;
font-family:'Rosario', sans-serif;
font-size: 16px;
padding: 0px;
margin-left: -0.1px;
margin: 0px;
}
Thanks for Johan's help!

Categories

Resources