Basic idea is to highlight the characters after a specified length value in input, and also show a notice message.
Here we go:
<div id="test_box">
<input type="text" id="text_text">
</div>
css:
#notice {
width: 140px;
height: 40px;
background-color: black;
}
#test_box {
width: 400px;
height: 400px;
}
and jQuery code:
$(document).ready(function() {
var length = $('#text_text').val().length;
var char_limit = 5;
$('#text_text').bind('keyup', function() {
new_length = $('#text_text').val().length;
if (new_length > char_limit) {
$('#text_text').css('color','red');
$('#test_box').append('<div id="notice"> There are limit of character for home page title of this field </div>'); // wrong too much divs :/
} else {
$('#text_text').css('color', 'black');
$('#notice').hide(); //wrong
}
});
});
At the moment characters highlighted after char_limit is exceeded, what i need is to highlight only those who go after char_limit. And also notice block is adding every time if i input character, i think i should create that div manually or maybe not and appear it somehow when char_limit is exceeded.
It is not really impossible highlight some part of the text as you can highlight it by selection.
Check this out: http://jsfiddle.net/9BrpD/3/
$(document).ready(function(){
var input = $('#text_text');
var warning = $('#warning');
input.on('keyup', function(){
var val = $(this).val();
if ( val.length > 3 ) {
warning.html('hello').css('display', 'block');
l = val.length
var input = document.getElementById("text_text");
input.setSelectionRange(l-3, l);
input.focus();
}
else {
warning.css('display', 'none');
}
});
});
It also solves the issue you had with your repeated divs. However, I don't find this solution very user-friendly. You could try to move the focus outside of the input field but still, not entirely satisfactory.
I am not sure what you mean by "highlighting" the characters exceeding char_limit. If you want to apply a style to a part of the input text, then it is impossible: styles will apply to the whole input. You can try to simulate an input field with spans and some javascript to listen to the keyboard events. This is explained in this answer to a similar question as yours.
For the notice, indeed, you should not add it every time. it should be in your HTML with css "display:none" and shown and hidden when appropriate.
<div id="test_box">
<input type="text" id="text_text">
<div id="notice"> There are limit of character for home page title of this field </div>
</div>
--
#notice {
width: 140px;
height: 40px;
background-color: black;
display:none;
}
--
$(document).ready(function() {
var length = $('#text_text').val().length;
var char_limit = 5;
$('#text_text').bind('keyup', function() {
new_length = $('#text_text').val().length;
if (new_length > char_limit) {
$('#text_text').css('color','red');
$('#notice').show();
} else {
$('#text_text').css('color', 'black');
$('#notice').hide();
}
});
});
Here is a JSFiddle with that code.
Related
I am creating a text editable div box in which user can add text and personalize it by adding fields like First_Name, Last_Name etc. I want the options to show when a user press { key.
I did the js which get fired when the user types {, and added a list with the options, but when the scripts run the whole list get added on the input box instead of providing option to select from.
Here is the text div I have and the Js code
<div contenteditable class="text_im" name="text_im" placeholder="Enter Text" maxlength="640"></div>
script:
$(document).keyup(function (e) {
if ($(".text_im:focus") && (e.keyCode === 219)) {
var options = '<ul><li>{First_Name}</li><li>{Last_Name}</li> <li>{Email}</li><li>{Phone}</li></ul>';
$(".text_im").append(options);
}
});
I tried searching for any tips or tutorial , but can't find any. If you could suggest me some tutorial.
You would need to use a library for that to get a cross-browser, modern-looking result, but the basics could work like this:
Create the options element from a template, and give it the CSS rendering it needs to show correctly at the caret position when needed.
Show it on keypress, when character is already in the div element.
Capture mouse clicks on the options
Hide it whenever a key is pressed or user clicks on an option
When option selected, insert corresponding text, except for the opening { which is already there.
Here is some code, but please note that to make this cross-browser and good-looking (with additional features), you would need a lot more. This is just to show a basic set-up:
// Create element (not in DOM yet) for tooltip
var tooltip = $('#template').clone().attr('id', 'tooltip').get(0);
function insertAtCaret(node, caretBefore = false) {
var range = window.getSelection().getRangeAt(0);
range.insertNode(node);
range.collapse(caretBefore);
}
$(document).keypress(function (e) {
$(tooltip).remove(); // Hide tooltip (detach it from the DOM)
var $div = $(".text_im"),
ch = String.fromCharCode(e.which); // Get typed character
if (!$div.is(":focus") || ch !== '{') return;
setTimeout(function () { // Delay a bit, to ensure correct caret position
insertAtCaret(tooltip, true); // Insert the tooltip at the caret
}, 100);
});
$(document).on('click', '#tooltip li', function () {
var text = $(this).text().substr(1); // The text to insert
$(tooltip).remove(); // Hide tooltip (detach it from the DOM)
$(".text_im").focus(); // Make sure the div has focus
insertAtCaret(document.createTextNode(text)); // Insert the text
});
.text_im {
border : 1px solid;
min-height: 40px
}
#template {
display: none;
}
#tooltip {
position: fixed;
margin-top: -0.2em;
background: #eee;
display: inline-block;
cursor: pointer;
}
#tooltip li:hover {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable class="text_im inputor" name="text_im" placeholder="Enter Text" maxlength="640"></div>
<ul id="template"><li>{First_Name}</li><li>{Last_Name}</li> <li>{Email}</li><li>{Phone}</li></ul>
I am trying to make webpage where there is a div in the center which is being changed, instead of going to different pages.
Ultimately, I would like to have the new div, when clicking on an arrow, to flow from right or left in to the center. But first I would like to make the divs appear and disappear when clicking on the arrows but unfortunately this doesn't work.
This is my javascript:
<script>
function changeToHome() {
document.getElementById("mainmain").style.display="block";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="none";
}
function changeToStudy() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="block";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="none";
}
function changeToJob() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="block";
document.getElementById("mainmain4").style.display="none";
}
function changeToContact() {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="block";
}
function changePageRight() {
var displayValue5 = document.getElementById('mainmain').style.display;
var displayValue5 = document.getElementById('mainmain2').style.display;
var displayValue6 = document.getElementById('mainmain3').style.display;
var displayValue7 = document.getElementById('mainmain4').style.display;
if (document.getElementById('mainmain').style.display == "block") {
document.getElementById("mainmain").style.display="none";
document.getElementById("mainmain2").style.display="block";
}
else if (document.getElementById('mainmain2').style.display == "block") {
document.getElementById("mainmain2").style.display="none";
document.getElementById("mainmain3").style.display="block";
}
else if (document.getElementById('mainmain3').style.display == "block") {
document.getElementById("mainmain3").style.display="none";
document.getElementById("mainmain4").style.display="block";
}
else if (displayValue8 == block) {}
}
function changePageLeft() {
var displayValue = document.getElementById('mainmain').style.display;
var displayValue2 = document.getElementById('mainmain2').style.display;
var displayValue3 = document.getElementById('mainmain3').style.display;
var displayValue4 = document.getElementById('mainmain4').style.display;
if (displayValue == "block") { }
else if (displayValue2 == "block") {
document.getElementById("mainmain").style.display="block";
document.getElementById("mainmain2").style.display="none";
}
else if (displayValue3 == "block") {
document.getElementById("mainmain2").style.display="block";
document.getElementById("mainmain3").style.display="none";
}
else if (displayValue4 === "block") {
document.getElementById("mainmain3").style.display="block";
document.getElementById("mainmain4").style.display="none";
}
}
</script>
Now I have a few divs that look like this:
<div id="mainmain4">
<img style="width:400px;height:327px;margin-left:auto;margin-right:auto;display:block;" src="Untitled-22.png" />
<h2> My name </h2>
<p>Hi,</p>
<p>Some text</p>
</div>
With these css atributes:
#mainmain {
float: left;
width: 575px;
display: block;
position: relative;
}
And all other divs with display: none; so I can change this to block and the one that was block to none.
For some reason, after when I click on one button of the menu, which activates a changeToX() function, the arrows work great. But before that, when you first go to the website, it doesn't.
Can someone explain me what I do wrong?
You don't tell the browser which divs shall be displayed on load. You can use theonloadevent for this:
<body onload="changeToHome()">
One additional hint: you maybe don't want to use inline JavaScript and CSS.
jQuery is as this simple:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
toggle!
<div id="mainmain">test text</div>
<script>
// you need this, only apply javascript when all html (dom) is loaded:
$(document).ready(function() {
$('.toggle-container').on('click', function(e) {
e.preventDefault(); // this prevents the real href to '#'
// .toggle() is like "on / off" switch for hiding and showing a container
$($(this).data('container')).toggle();
});
});
</script>
This function can be reused, because it is based on classes instead of id's.
Check this JSFiddle: http://jsfiddle.net/r8L6xg15/
Maybe this is of some use. I've tried to make a page control-like behaviour. You can select any container div and put elements in there that have the class 'page'. The JavaScript code will let you navigate those with buttons.
You can make it more fancy by adding the buttons through JavaScript. What you then have is basically a list of pages which are normally displayed as regular divs, but when the script kicks in, it changes them to a page control.
You can call this for any parent element, and in that sense it behaves a bit like a jQuery plugin. It is all native JavaScript, though. And not too much code, I hope. Like you said, I think it's good to learn JavaScript at first. It is very powerful by itself, and it's becoming increasingly powerful. jQuery adds a lot of convenience functions and provides fallbacks in case browser don't support certain features, or when implementations differ. But for many tasks, bare JavaScript will do just fine, and it certainly can't hurt to know your way around it.
Press the 'Run this snippet' button at the bottom to see it in action.
function Pages(element)
{
// Some initialization
var activePage;
// Find all pages within this element.
var pages = document.querySelectorAll('.page');
var maxPage = pages.length - 1;
// Function to toggle the active page.
var setPage = function(index)
{
activePage = index;
for (p = 0; p <= maxPage; p++)
{
if (p == activePage)
pages[p].className = 'page active';
else
pages[p].className = 'page inactive';
}
}
// Select the first page by default.
setPage(0);
// Handler for 'previous'
element.querySelector('.prev').onclick = function()
{
if (activePage == 0)
return;
setPage(activePage - 1);
}
// Handler for 'next'
element.querySelector('.next').onclick = function()
{
if (activePage == maxPage)
return;
setPage(activePage + 1);
}
// Add a class to the element itself. This way, you can already change CSS styling
// depending on whether this code is loaded or not. So in case of an error, the
// divs are just all show underneath each other, and the nav buttons are hidden.
element.className = element.className + ' js';
}
Pages(document.querySelector('.pages'));
.pages .page {
display: block;
padding: 40px;
border: 1px solid blue;
}
.pages .page.inactive {
display: none;
}
.pages .nav {
display: none;
}
.pages.js .nav {
display: inline-block;
}
<div class="pages">
<button class="nav prev">Last</button>
<button class="nav next">Next</button>
<div class="page">Page 1 - Introduction and other blah</div>
<div class="page">Page 2 - Who am I? Who are you? Who is Dr Who?</div>
<div class="page">Page 3 - Overview of our products
<ul><li>Foo</li><li>Bar</li><li>Bar Pro</li></ul>
</div>
<div class="page">Page 4 - FAQ</div>
<div class="page">Page 5 - Contact information</div>
</div>
To dos to make this a little more professional:
Add the navigation through JavaScript
Disable the buttons when first/last page has been reached
Support navigation by keys too (or even swipe!)
Some CSS transform (fade or moving) when toggling between pages
Smarter adding and removing of classes. Now I just set className, which sucks if someone would like to add classes themselves. jQuery has addClass and removeClass for this, which is helpful. there are also stand-alone libraries that help you with this.
Visible indication of pages, maybe with tabs at the top?
https://auth.me.com/authenticate
On this website when you type in your email address , the font-size will automatically be reduced if the email address fills the box size.
How can we do the same using Javascript?
which are the events that are being fired / captured ?
$("input").keypress(function(){
if(this.value.length>43)//or some other value
{//do stuff here
}
});
Keydown is what you are looking for
I have made a library, named resize.js, which allow to write:
<input type="text" resize="true" />
This is the library:
var precision=18;
window.onload=function()
{
for(var i=0,t=document.getElementsByTagName("input"),l=t.length;i<l;i++)if(t[i].getAttribute("resize")==="true")
{
var div=document.createElement("div");
div.setAttribute("style","font-size"+parseInt(t[i].s("font-size"))+";font-family:"+t[i].s("font-family")+";position:absolute;top:-10000px;left:-10000px;");
document.body.appendChild(div);
(function(i,div,min,max,dif,l,r,w,h,pre){setInterval(function(){modify(t[i],div,min,max,dif,l,r,w,h,pre);},100);})
(
i,
div,
t[i].getAttribute("min")||parseInt(t[i].s("font-size"))-3,
t[i].getAttribute("max")||parseInt(t[i].s("font-size")),
parseInt(t[i].s("padding-left"))+parseInt(t[i].s("padding-right"))+parseInt(t[i].s("border-left-width"))+parseInt(t[i].s("border-right-width"))+precision,
parseInt(t[i].s("padding-left")),
parseInt(t[i].s("padding-right")),
t[i].offsetWidth,
t[i].offsetHeight,
precision
);
}
}
Object.prototype.s=function(p)
{
return this.currentStyle?this.currentStyle[p]:document.defaultView.getComputedStyle(this,null).getPropertyValue(p);
}
function modify(el,c,min,max,dif,l,r,w,h,pre)
{
el.style.width=w+"px";
el.style.height=h+"px";
c.innerHTML=el.value.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/ /g," ");
var test=c.offsetWidth;
while(test>=el.offsetWidth-dif&&parseInt(el.s("font-size"))>min)
{
el.style.fontSize=parseInt(el.s("font-size"))-1+"px";
c.style.fontSize=el.style.fontSize;
test=c.offsetWidth;
}
while(test<el.offsetWidth-dif&&parseInt(el.s("font-size"))<max)
{
el.style.fontSize=parseInt(el.s("font-size"))+1+"px";
c.style.fontSize=el.style.fontSize;
test=c.offsetWidth;
}
if(parseInt(el.s("font-size"))===min&&c.offsetWidth>el.offsetWidth-dif)
{
el.style.paddingLeft="0px";
el.style.paddingRight="0px";
}
else
{
el.style.paddingLeft=l+"px";
el.style.paddingRight=r+"px";
}
}
A fiddle: http://jsfiddle.net/mageek/GEp2y/1
Some advices:
If the attribute "resize" equals anything other than true, or is not set, the text-box will behave as a normal text-box.
You can set the maximum font-size and the minimum font-size allowed by setting the "max" and the "min" attributes. By default, the maximum is the current font-size and the minimum is 3 sizes smaller than the maximum.
I added something, like https://auth.me.com/authenticate, which removes the padding to gain space when the minimum font-size is reached.
There is the variable 'precision' (at the beginning of resize.js) that depends on the text-box, I set it to 18 for default text-box but if you modify the style of the text-box, you will maybe have to modify the variable to a better value (by testing).
I don't ensure the host of resize.js on the website like in the fiddle, you should copy the source code in a new file and save it.
I've made the code for you, I took for example what I did on my own website for the contact form: the <textarea> gets taller if there is lot's of text.
The thing to do is to create an invisible<div>, for each keydown in the <input>, take its content and puts it into the <div>, and check its width is bigger than the <input>'s one.
The HTML
<form>
<input>
<div></div>
</form>
The CSS where we set the same font-size for the <input> and the <div> and hide the <div> (with position: absolute because we need it's width and we don't want it to change the layout)
form > * {
font-size: 22px
}
form > input {
width: 150px;
font-size: 18px;
}
form > div {
position: absolute;
left: -10000px;
}
And the JavaScript (with jQuery here)
var $form = $('form')
, $input = $('input', $form)
, $autoResize = $('div', $form)
, $both = $input.add($autoResize)
, fontSize = parseInt($input.css('font-size'), 10)
$input.on('keydown', function() {
$autoResize.html(this.value.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/ {2,}/g, function(spaces) {
// Change the spaces to $nbsp; except the last one
for (var i = 1, fakeSpaces = '', space; space = spaces[i++];) {
fakeSpaces += ' '
}
return fakeSpaces + ' '
})
)
// We add 10px to be sure it doesn't stick to the edges
if ($autoResize.outerWidth() >= $input.outerWidth() - 10) {
do {
$both.css('font-size', --fontSize)
} while ($autoResize.outerWidth() >= $input.outerWidth() && fontSize > 10)
// 10px is the smallest font-size accepted
if (fontSize === 10) {
$input.off('keydown')
}
}
})
Here is the jsFiddle.
You must use JavaScript to count how much characters've been typed already (I believe with .change() in jQuery) and change the font-size accordingly.
Yes,I think what #somebody is in trouble is doing is what they are doing in here.
Calculate how many letters will fit into the box - you know the width of the textbox. You know the font-size & padding that is being given here. So you know how many letters can be typed in the textbox before it overflows( not exactly) .
Or you can just type random letters & see how many can fit ! :)
Well, if you have time, you can as well dive into the events being fired when you keydown on the email address text box. You will learn a lot!
I need to convert my error messaging to a positioned div (hidden initially) instead of the standard js alert. I realize I need to push the alert message to the DOM, but I'm new to javascript. Any help would be appreciated.
Additionally, I need to do it without a confirm (so error message removes on field focus)
if(el != null) {
switch(el.name) {
case "firstName":
//First Name Field Validation, Return false if field is empty
if( f.firstName.value == "" )
{
alert( bnadd_msg_002 );
if ((typeof TeaLeaf != "undefined") && (typeof TeaLeaf.Client != "undefined") && (typeof TeaLeaf.Client.tlAddEvent != "undefined") ) {
var nVO = { ErrorMessage : bnadd_msg_002}
var subtype="CustomErrorMsg";
TeaLeaf.Event.tlAddCustomEvent(subtype, nVO);
}
return false;
}
break;
Simple approach using jQuery
function customAlert(msg){
var div = $("#AlertMessage");
if (div.length == 0) {
div = $("<div id='AlertMessage' onclick='$(this).hide();'></div>");
$("body").prepend(div);
}
div.html(msg)
}
CSS
#WriteProperties {
background-color: #FFF;
border: 1px solid #000;
height: 300px;
position: fixed;
right: 10px; /* position as desired */
top: 90px; /* position as desired */
width: 300px;
z-index: 1000;
}
JS for clearing message on focus of a text input field. You can always be more selective about which fields to attach the event to.
$("input[type='text']").live("focus", function(){
$("#AlertMessage").hide();
})
very basic but sshould give you a good direction to go.
Basically your creating a div that is hidden, and then you'll fill the span inside wiht your text and show the div.
<Div id="myalertbox" style='display:none'>
<span>put message here</span>
</div>
I always use jquery to change the DOM around. Makes thing alot simpler.
jquery("#myalertbox span").text(bnadd_msg_002);
jquery("#myalertbox").show();
Then just use CSS to position the DIV.
probably have to set the DIV to position Absolute, then use top and left to place it in the middle of the screen.
You may need to surround the DIV with another DIV.
<div id="grayout">
<Div id="myalertbox" style='display:none'>
<span>put message here</span>
</div>
</div>
Show the gray out div full screen, but set its transpancy.
Basically will block people from clicking the screen while your error message shows.
Or just get jquery and it has a built in error message box.
http://api.jquery.com/jQuery.error/
Sorry I'm kinda a javascript noob. I'm using Jquery.
I have an input box and I want to take the text input and make a new div with the input and have the appropriate tags on it.
Specifically, take the input value and output:
Input Value 5
and clear the input box and move it down 50px.
I pretty much have no idea what I'm doing in javascript.
$('input').bind('keydown', function(e) {
var $self = $(this),
dimen = $.extend($self.position(), {
width: $self.outerWidth(),
height: $self.outerHeight()
});
if( e.which === 13 && $.trim(this.value).length ) {
$('<div>', {
text: this.value,
css: {
position: 'absolute',
width: dimen.width,
height: dimen.height,
left: dimen.left,
top: dimen.top
}
}).appendTo($self.parent());
$self.val('').css('position', 'absolute').animate({top: '+=50'}, 1000);
}
});
Demo: http://www.jsfiddle.net/4yUqL/81/
var content = $('#input_id'').val();
var elem = $('').addClass('class_name').html(content)
$('#id_of_element_to_append').append(elem)
Give the above a try.
Bob
You can have a look at the following functions:
$("input#myinput").val() - gives you the value in the input field with id="myinput"
$("input#myinput").val("") - clears the input field with id="myinput"
$("div#mydiv").html("blah") - sets the content of the div with id="mydiv" to blah
$("div#mydiv").append("blah") - adds blah to the current content of the div with id="mydiv"
$("div#mydiv").css({ marginTop: '50px' }); - Sets the margin of the div with id="mydiv"
Combining all this into an event handler should do what you need
Do you mean something like this - ?
$('#myinput').css({top: $(this).offset().top+50}).prepend('<div><input type="text" value="'+$('#myinput').val()+'" /></div>').val('');
Sorry about the long chaining, I know there are other ways but this was the only way I could think of atm.
EDIT: this may work:
$('input').attr('value',$('#myinput').val()).prependTo($('#myinput'));
$('#myinput').css({top: $(this).offset().top+50}).val('');