I have an input for writing tags. My problem is that I wanted to write in the input any name of tag and by pressing enter or clicking the button, the tag was created in the box below as shown in the image.
What I have
What I want when I press enter key or button plus
Final
.TagInput {
width: 400px;
height: 32px;
background: #FAFAFB 0% 0% no-repeat padding-box;
border-radius: 16px;
background: url(https://cdn0.iconfinder.com/data/icons/social- messaging-ui-color-shapes/128/add-circle-blue-512.png) no-repeat scroll 370px 3px;
}
.card {
width: 435px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 20px #BCBCCB47;
border-radius: 8px;
}
<div class="card">
<div class="card-header header">
<h1> Tags </h1>
</div>
<div class="card-body">
<div class="form-group">
<input type="text" class="form-control TagInput" placeholder="Tag your product...">
</div>
</div>
</div>
I'm not so familiar with bootstrap to be honest. But maybe you can try out an Angular solution. This could be a starting point:
CSS
.your-class{
list-style-type: none;
display:inline-block;
position:relative;
background:#eee;
padding:5px;
min-width:50px;
text-align: center;
border-radius:30px;
margin-right:10px;
}
HTML
<ul>
<li *ngFor="let tag of tags" class="your-class">
{{tag}} <span class="delete-entry" (click)="deleteTagFromProduct(tag)">x</span>
</li>
</ul>
<input (change)="addTagToProduct($event)" class="form-control TagInput"/>
Typescript
private tags:string[] = [];
private addTagToProduct( $event ):void {
this.tags.push($event.target.value);
$event.target.value = "";
}
private deleteTagFromProduct( tag:string ):void {
this.tags = this.tags.filter( (a) => a!==tag );
}
<style>
body {
font-family: "Helvetica Neue"
}
#wrapper .counter {
display:inline-block;
font-size:2em;
line-height:1.2em;
}
.counter span.digit {
background:#161616;
background: #3F3F3F; /* Old browsers */
background: linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -o-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -moz-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -ms-linear-gradient(bottom, #0A0A0A 0%, #2B2B2B 50%, #3F3F3F 100%);
background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #0A0A0A), color-stop(0.5, #2B2B2B), color-stop(1, #3F3F3F));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FF0A0A0A', endColorstr='#FF3F3F3F')"; /* IE8 */
zoom:1; -webkit-border-radius:0.1em;
-moz-border-radius:0.1em;
border-radius:0.1em;
background-clip:border;
color:#FFF;
display:inline-block;
float:left;
height:44px;
margin:0 1px;
overflow:hidden;
padding:0;
position:relative;
text-align:center;
}
.counter span.digit span {
line-height:44px;
position:relative;
top:0;
}
.counter span.digit hr {
border-color: transparent;
-webkit-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
box-shadow: inset 0 2px 1px rgba(0,0,0,0.5);
height: 3px;
margin: -2px 0 0 0;
position: absolute;
top: 50%;
width: 100%;
z-index: 1;
}
.counter span.separator {
display:block;
float:left;
font-family:Georgia, serif;
font-size:0.5em;
position:relative;
top:0.5em;
}
.counter span.separator hr {
display:none;
}
</style>
<div id="sidebar" class="sidebar" style="float:left;">
<div class="textwidget"><p style="text-align:left; color:#000000; padding-left: 10px; padding-right: 10px; bottom-margin: 40px;">Boomerang Giving™ is a national movement of Baby Boomers working to make our communities stronger by reinvesting what we save from senior discounts to charity.</p>
<br>
<br></div>
<div class="textwidget"><p style="color=#ff6600; text-align:center;">Since Nov. 2014:<br></p>
<span class="counter"><span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="separator">
<span title=",">,</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="0">0</span>
<hr>
</span>
<span class="digit">
<span title="4">4</span>
<hr>
</span>
</span>
<div style="clear:both">
<p style="color=#ff6600; text-align:center; margin-top: 10px; margin-bottom:20px;">Boomers have taken the<br>
BOOMERANG PLEDGE<br></p></div>
</div>
<div class="textwidget"><div class="aligncenter"><style>#wrapper .fusion-button.button-1{border-width:1px;color:#ffffff;border-color:#ffffff;}#wrapper .fusion-button.button-1:hover,.fusion-button.button-1:focus,.fusion-button.button-1:active{border-width:1px;border-color:#ffffff;color:#ffffff;}#wrapper .fusion-button.button-1{background: #f15a22;
background-image: -webkit-gradient( linear, left bottom, left top, from( #ef871f ), to( #f15a22 ) );
background-image: -webkit-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: -moz-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: -o-linear-gradient( bottom, #ef871f, #f15a22 );
background-image: linear-gradient( to top, #ef871f, #f15a22 );}#wrapper .fusion-button.button-1:hover,.button-1:focus,.fusion-button.button-1:active{background: #d17c57;
background-image: -webkit-gradient( linear, left bottom, left top, from( #e8b38f ), to( #d17c57 ) );
background-image: -webkit-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: -moz-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: -o-linear-gradient( bottom, #e8b38f, #d17c57 );
background-image: linear-gradient( to top, #e8b38f, #d17c57 );}</style><a class="button xlarge button default fusion-button button-flat button-pill button-xlarge button-default button-1 buttonshadow-1" type="button" target="_self" title="Take the Boomerang Pledge!" href="http://boomeranggiving.org/take-the-boomerang-pledge/"><span class="fusion-button-text">TAKE THE PLEDGE!</span></a></div>
<br>
<br>
</div>
<div class="textwidget"><br>
<h2 style="text-align:center; margin-top:15px; margin-bottom:5px;">Tell Your Friends About<br>BOOMERANG GIVING!</h2></div>
<!-- Simple Share Buttons Plus (v0.4.2) simplesharebuttons.com/plus --><div class="ssbp-wrap"><div class="ssbp-container" data-ssbp-share-text="" data-ssbp-url="http://boomeranggiving.org/" data-ssbp-title="Private: Take the Pledge" data-ssbp-short-url="" style="display: block;"><span class="ssbp-text">Facebook</span><span class="ssbp-total-shares ssbp-total-facebook-shares ssbp-each-share">0</span><span class="ssbp-text">Twitter</span><span class="ssbp-total-shares ssbp-total-twitter-shares ssbp-each-share">4</span><span class="ssbp-text">Linkedin</span><span class="ssbp-total-shares ssbp-total-linkedin-shares ssbp-each-share">0</span><span class="ssbp-text">Email</span></div></div> <div class="textwidget"><br>
<br>
<br>
<br>
<div style="background-color:#363839; border-top: 12px solid #e9eaee; border-bottom: 12px solid #e9eaee; border-left: 2px solid #e9eaee; border-right: 2px solid #e9eaee;">
<p style="text-align:center; line-height: 22px; color:#fff;"><strong>Let's Stay in Touch!</strong></p>
<p style="text-align:center !important; line-height: 22px; color:#fff;">Enter e-mail to stay informed about<br>BOOMERANG GIVING</p>
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:none; font: 18px 'PTSansRegular', Arial, Helvetica, sans-serif; width:100%; text-align:center !important;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//boomeranggiving.us9.list-manage.com/subscribe/post?u=081f420813d884ff7b9270435&id=823e7c4392" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address </label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" aria-required="true">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_081f420813d884ff7b9270435_823e7c4392" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="SUBMIT" name="SUBMIT" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
<p style="font-size:13px; text-align:center;">*We will not share your e-mail.</p></div>
<br>
<br>
<br>
<br>
<br></div>
</div>
I need the following Javascript odometer to increase by 1 every time a button is clicked. This is part of a charity site and each time someone donates the odometer will update.
The following is the script:
<script>
;(function($){
/*
Function: initCounter
Initializes the scrolling counter using the value currently displayed in the element.
Parameters:
$this - the counter container
e - jQuery Event object
*/
function initCounter($this, e){
$this.find('.digit').each(function(){
var $display = $(this);
var $digit = $display.find('span');
$digit.html([0,1,2,3,4,5,6,7,8,9,0].reverse().join('<br/>'))
$digit.css({
top: '-' + (parseInt($display.height()) * (10 - parseInt($digit.attr('title')))) + 'px'
});
});
animateDigit($this.find('.digit:last'), e);
}
/*
Function: animateDigit
Moves the digit indicated by $this one step. If the end of the counter has been reach, the subsequent digit(s) will also be rotated
Parameters:
$this - digit to be rotated
e - jQuery Event object
*/
function animateDigit($this, e){
var $counter = $this.closest('.counter');
var $display = $this;
var $digit = $display.find('span');
// If we've reached the end of the counter, tick the previous digit
if(parseInt($digit.css('top')) == -1 * parseInt($display.height())){
animateDigit($display.prevAll('.digit:first'), e);
}
$digit.animate({
top: '+=' + $display.height() + 'px'
}, 500, function(){
// Repeat the animation on a semi-random interval
if($display.index('.counter .digit') == $counter.find('.digit').length - 1){
setTimeout(function(){
animateDigit($display, e);
}, Math.max(550, Math.random() * 10000));
}
// If we've reached the end of the counter, loop back to the top
if(parseInt($digit.css('top')) > -1 * parseInt($display.height())){
$digit.css({
top: '-' + (parseInt($display.height()) * 10) + 'px'
});
}
});
}
// Remove comments to animate odometer
$(function(){
initCounter($('.counter'), $.Event('load'));
});
})(jQuery);
</script>
Thank you so much in advance for any help you can give. Again this is my first time, so please go easy on me.
In jquery, binding an event to a click event on a button can be done like so:
HTML:
<button id="mybuttonID">Click me to increment odometer!</button>
JS:
$(document).ready(function() {
// wait for the dom to initialize before binding events
$('body').on('click', '#mybuttonID', animateDigit);
});
Hope this helps!
if you don't have the necessity to store it on db, i think it could help you.
http://jsbin.com/quvulabaro/2/edit?html,css,js,output
Usually for a DropDown menu you would expect that when you chose an option the menu collapse, however this is not my case. I don't want to collapse the dropdown menu if the user tries to login and click on Username and Password:
http://www.filmgratuiti.org/streamingembed2.php?nome=jobs
I remember it worked a while ago probably it's about the CSS, which I have cleaned up in the meantime.
Is there an easy way of doing it?
P.S: I don't know why but it looks like i can't share clickable link ...
try this
HTML
<div class="signup" >
LOGIN
</div>
<div class="login_form ">
<form method="post" action="#">
<p>Email</p>
<p><input type="email" name="email" class="email" placeholder="Email"></p>
<p>Password</p>
<p><input type="password" name="password" class="password" placeholder="Password"></p>
<br>
<p><span><input type="checkbox" name="check" class="check" style="vertical-align:middle;">Remember me</span><span class="login_btn" >Login</span> </p>
</form>
</div><!-- login_form -->
CSS
.signup
{
background-color:rgb(255,255,255);
width:25%;
height:25px;
border-color:rgb(221,221,221);
border-width:1px;
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
border-style:solid;
text-align:center;
padding:9px 8px 0 5px;
margin-top:10px;
}
.signup a
{color:#444444;
font-size:0.9375em;
text-decoration:none;
}
.login_form
{
width:50%;
height:auto;
padding:10px 0 0 0;
position:absolute !important;
}
.login_form p
{line-height:150%;
font-size:0.875em;
color:#535353;
padding-left:5px;
}
.email, .password
{border:1px solid #D9D8D7;
width:96%;
}
.login_btn
{
display:block;
width:80%;
padding:3px 0 5px 0;
border-color:rgb(242,128,8);
border-width:1px;
border-style:solid;
text-align:center;
margin-bottom:2px;
}
.login_btn a
{color:#fff;
}
JS
$(".login_form").hide();
$(".signup, .login_form").click(function(e) {
$(".login_form").show();
e.stopPropagation();
return true;
});
$(document).click(function(){
$('.login_form').hide(); //hide the form
});
here is the working fiddle
I have this code here which allows you to resize the DIV and Textbox which stays at 100%.
However the textbox goes onto a new line - how can I keep the label and Textbox on the same line? So resizing the DIV around the label will reduce the textbox size?
<div id='div1' style='display:table-cell;width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
<div style="display:table-cell"><label>Test </label> </div>
<input type='text' style='width:100%;' id='inputBox'/>
</div>
$("div").resizable({
handles: "w, sw, ne, nw, se"
});
Working example here:
http://jsfiddle.net/XPUuj/1/
Thanks!
Here is what you want http://jsfiddle.net/xDHHM/
Your code had minor positioning problems and a unwanted div.
HTML:
<div class="container">
<lable>Text</lable>
<input type="text" />
</div>
CSS:
.container {
width:300px;
border:#000 dashed 1px;
display:table-cell;
white-space:nowrap;
padding:10px 50px 10px 10px;
}
input {
width:100%;
margin-left:10px;
}
Jquery
$(".container").resizable({
handles: "w, sw, ne, nw, se"
});
Remove the div around the label:
<div id='div1' style='display:table-cell;width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
<label>Test </label>
<input type='text' style='width:100%;' id='inputBox'/>
</div>
Jsfiddle: http://jsfiddle.net/XPUuj/2/
You should have your input inside the div
http://jsfiddle.net/XPUuj/3/
<div id='div1' style='display:table-cell;width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
<div style="display:table-cell">$
<label>Test </label>
<input type='text' style='width:100%;' id='inputBox'/></div>
</div>
</div>
Consider the following html code snippet:
<div id="parent" class="parent">
<form id="child" class="child">
<input id="textForDim" type="text" />
<input type="submit" value="submit"/>
</form>
<div id="divchild" class="childd"><input type="text" /><br/>
<div class="cchild"></div>
</div>
and corresponding css styles
.parent{
position: absolute;
text-align: center;
width: 350px;
height: 450px;
background-color: #f7f7f7;
-webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
}
.childd{
width:200px;
height:180px;
background: grey;
}
.cchild{
background:aqua;
width:20px;
height:10px;
}
JSFIDDLE. How i can do that after submit button click we have margin-left,margin-right,width,padding-left,padding-right in the textForDim input as the follow:
margin-left: _Margin-Left_Value_px, margin-right: _Margin-Right_Value_px, etcetera...
Is it possible to apply JS for this needs or it's a bad practice?
Where _Margin-Right_Value_px is the value of margin-right property of divchild div element.
<script>
function doThis()
{
var k = document.getElementById('textForDim');
k.style.marginLeft = _Margin_Left_Value_px + "px";
k.style.marginRight = _Margin_Right_Value_px + "px";
}
</script>
<div id="parent" class="parent">
<form id="child" class="child">
<input type="text" id="textForDim" onclick="doThis()"/>
<input type="submit" value="submit"/>
</form>
<div id="divchild" class="childd"><input type="text" /><br/>
<div class="cchild"></div>
</div>