Displaying emojionearea emoji container at the bottom of textarea - javascript

I just applied emojionearea.js to my textarea but emoji are been displayed at the top of my textarea, hiding its view from users.
I will like to know how to position its container to the bottom of my textarea.
my code :
$(document).ready(function() {
$(".emoji_act").emojioneArea({
emojiPlaceholder: ":smile_cat:",
searchPlaceholder: "Search",
buttonTitle: "Use your TAB key to insert emoji faster",
searchPosition: "bottom",
});
});
<link href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css" rel="stylesheet" />
<div class="container-fluid pt-3">
<form method="POST" action="" enctype="multipart/form-data">
<div class="form-group">
<font color="#a1a1a1"><span id="count"></span> characters remaining</font>
<textarea type="text" name="bio" class="form-control emoji_act" id="bio" placeholder="10 - 140 characters" onkeyup="count_char(this, 140)"></textarea>
<span id="bio_val"></span>
</div>
<div class="form-group">
<button id="ok_but" class="btn btn-primary btn-block" type="submit" name="ed_submit">
Done
</button>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>


In order to learn how to use this js lib, please follow this document.
now lets solve your current problem:
you can set the property pickerPosition to bottom in your initial config which is passed to emojioneArea jquery function.
$(document).ready(function() {
$(".emoji_act").emojioneArea({
emojiPlaceholder: ":smile_cat:",
searchPlaceholder: "Search",
buttonTitle: "Use your TAB key to insert emoji faster",
searchPosition: "bottom",
pickerPosition: "bottom"
});
});
<link href="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.css" rel="stylesheet" />
<div class="container-fluid pt-3">
<form method="POST" action="" enctype="multipart/form-data">
<div class="form-group">
<font color="#a1a1a1"><span id="count"></span> characters remaining</font>
<textarea type="text" name="bio" class="form-control emoji_act" id="bio" placeholder="10 - 140 characters" onkeyup="count_char(this, 140)"></textarea>
<span id="bio_val"></span>
</div>
<div class="form-group">
<button id="ok_but" class="btn btn-primary btn-block" type="submit" name="ed_submit">
Done
</button>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/mervick/emojionearea/master/dist/emojionearea.js"></script>

Related

Automatically submit a tinymce form after a certain count of words written in the textarea field

Is it possible to automatically submit a tinymce form after a certain name of words written in the textarea field? I tried this but it doesn't work.
Here's my code:
<body>
<div class="container mt-5">
<form method="post" id="form" action="getform.php">
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control">
</div>
<div class="form-group mt-4">
<label>Content</label>
<textarea name="dopamine" id="tinymce"></textarea>
</div>
<button class="btn btn-primary mt-4">Submit</button>
</form>
</div>
<script>
$('#tinymce').keyup(function(){
if(this.value.length ==10){
$('#Form').submit();
}
});
</script>
</body>

Add button under CKEditor is not visible

I have used CKEditor django plugin in my form modal. But when i try to show ADD button below the CKEditor, the button doesn't appear in the UI at all.
As shown in the below image, I have currently kept the Add button on the top of the CKEditor text box as its not appearing when placed at the bottom.
Below is the HTML code snippet
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input type="text" class="form-control" name="dn" id="dnn" required="True" />
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
Can someone please suggest how to make the add button make it appear below ckeditor.

If you are using Bootstrap 4, You can use the Order feature if your elements are wrapped inside a flex container.
Your code should look similar to this:
<div class="row">
<div class="d-flex">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input
type="text"
class="form-control"
name="dn"
id="dnn"
required="True"
/>
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace("editor1");
</script>
</div>
<div class="modal-footer order-1">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>

How to get the value of the input fields and store it in an array

The code is working but I'am getting all the values in a single time , what I want is getting the value when the remove button is click and then store those values in an array. Please Help me I'm kinda stuck in this. Totally new to javascript. Tried searching on google but no luck at all.
<html lang="en">
<head>
<title>Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<form action="">
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
</form>
<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
/* here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class. */
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
/* here it will remove the current value of the remove button which has been pressed */
$("body").on("click", ".remove", function() {
var values = $(this).val();
alert(values);
$(this).parents(".control-group").remove();
});
});
</script>
</body>
</html>

$(document).ready(function() {
var arrays = [];
$(".add-more").click(function(){
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
$("body").on("click",".remove",function(){
var value = $(this).closest('.input-group').find('input').val();
arrays.push(value);
console.log($(this).closest('.input-group').find('input').val());
console.log("arrays: ", arrays)
$(this).parents(".control-group").remove();
});
});
<html lang="en">
<head>
<title>Sample</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<form action="" >
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
</form>
<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
</div>
</div>
</div>

Basically assign onclick event to reset button, which gets values from text fields and e.g. array_name.push(document.getElementByName('addmore[]').value); and then do what do you need.

Add jSignature to Bootstrap Form

I'm trying to add the jSignature widget to a standard Bootstrap form, but so far nothing is appearing on the form (other form fields show fine).
Here's my form:
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I'm including all the files at the bottom of the page in the correct order:
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="assets/js/flashcanvas.js"></script>
<![endif]-->
<script>
$(document).ready(function() {
$("#signature").jSignature()
})
</script>
but the signature canvas doesn't show. Here's a screenshot of what I'm seeing if that helps:
I'm not getting any server errors or console errors so quite stumped at the moment - this is my first go at using jSignature.

Upon further inspection with the dev tools I noticed that the height of the signature div was 0px. I ended up adding this to the script:
$(document).ready(function() {
$("#signature").jSignature({
height: 200
});
$("#signature").resize();
})
and this is at least showing the signature capture now.

Hi now this code is working please check to properly your code is correct
Ref this code
$('#signature').signature();
#signature{
width:300px;
height:200px;
border:solid 1px red;
}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link type="text/css" href="http://keith-wood.name/css/jquery.signature.css" rel="stylesheet">
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script>
<form id="saveEvent" action="index.php" method="post">
<div class="form-group">
<label for="yourName">Your Name</label>
<input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
</div>
<div class="form-group">
<label for="yourSignature">Your Signature</label>
<div id="signature"></div>
</div>
<hr />
<button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Contain form within a bootstrap popover?

<div class="container">
<div class="row" style="padding-top: 240px;">
<a href="#" class="btn btn-large btn-primary" rel="popover"
data-content="<form><input type="text"/></form>"
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
JSfiddle
I'm guessing that I would store the form contents within a javascript function...
How do I contain a form within a bootstrap popover?

I would put my form into the markup and not into some data tag.
This is how it could work:
JS Code:
$('#popover').popover({
html : true,
title: function() {
return $("#popover-head").html();
},
content: function() {
return $("#popover-content").html();
}
});
HTML Markup:
the popover link
<div id="popover-head" class="hide">
some title
</div>
<div id="popover-content" class="hide">
<!-- MyForm -->
</div>
Demo
Alternative Approaches:
X-Editable
You might want to take a look at X-Editable.
A library that allows you to create editable elements on your page based on popovers.
Webcomponents
Mike Costello has released Bootstrap Web Components.
This nifty library has a Popovers Component that lets you embed the form as markup:
<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>
<bs-popover title="Popover with Title" for="popover-target">
<!-- MyForm -->
</bs-popover>
Demo

Either replace double quotes around type="text" within single quotes, Like:
"<form><input type='text'/></form>"
OR
Replace Double quotes wrapping data-content with single quote, Like:
data-content='<form><input type="text"/></form>'

<a data-title="A Title" data-placement="top" data-html="true" data-content="<form><input type='text'/></form>" data-trigger="hover" rel="popover" class="btn btn-primary" id="test">Top popover</a>
just state data-html="true"

like this Working demo http://jsfiddle.net/7e2XU/21/show/#
* Update: http://jsfiddle.net/kz5kjmbt/
<div class="container">
<div class="row" style="padding-top: 240px;"> <a href="#" class="btn btn-large btn-primary" rel="popover" data-content='
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
data-placement="top" data-original-title="Fill in form">Open form</a>
</div>
</div>
JavaScript code:
$('a[rel=popover]').popover({
html: 'true',
placement: 'right'
})
ScreenShot

You can load the form from a hidden div element with the Bootstrap-provided hidden class.
<button class="btn btn-default" id="form-popover">Form popover</button>
<div class="hidden">
<form id="form">
<input type="text" class="form-control" />
</form>
</div>
JavaScript:
$('#form-popover').popover({
content: $('#form').parent().html(),
html: true,
});

Or try this one
Second one including second hidden div content to hold the form working and test on fiddle http://jsfiddle.net/7e2XU/21/
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<div id="popover-content" style="display: none" >
<div class="container" style="margin: 25px; ">
<div class="row" style="padding-top: 240px;">
<label id="sample">
<form id="mainForm" name="mainForm" method="post" action="">
<p>
<label>Name :</label>
<input type="text" id="txtName" name="txtName" />
</p>
<p>
<label>Address 1 :</label>
<input type="text" id="txtAddress" name="txtAddress" />
</p>
<p>
<label>City :</label>
<input type="text" id="txtCity" name="txtCity" />
</p>
<p>
<input type="submit" name="Submit" value="Submit" />
</p>
</form>
</label>
</div>
</div>
</div>
Open form
<script>
$('a[rel=popover]').popover({
html: 'true',
placement: 'right',
content : function() {
return $('#popover-content').html();
}
})
</script>

A complete solution for anyone that might need it, I've used this with good results so far
JS:
$(".btn-popover-container").each(function() {
var btn = $(this).children(".popover-btn");
var titleContainer = $(this).children(".btn-popover-title");
var contentContainer = $(this).children(".btn-popover-content");
var title = $(titleContainer).html();
var content = $(contentContainer).html();
$(btn).popover({
html: true,
title: title,
content: content,
placement: 'right'
});
});
HTML:
<div class="btn-popover-container">
<button type="button" class="btn btn-link popover-btn">Button Name</button>
<div class="btn-popover-title">
Popover Title
</div>
<div class="btn-popover-content">
<form>
Or Other content..
</form>
</div>
</div>
CSS:
.btn-popover-container {
display: inline-block;
}
.btn-popover-container .btn-popover-title, .btn-popover-container .btn-popover-content {
display: none;
}

I work in WordPress a lot so use PHP.
My method is to contain my HTML in a PHP Variable, and then echo the variable in data-content.
$my-data-content = '<form><input type="text"/></form>';
along with
data-content='<?php echo $my-data-content; ?>'

Categories

Resources