|
JavaScript - Counting Remaining Amount Of Words On Mouseup Event
Hi all, as the title says i am trying to keep count of the number of words a user has typed into a textbox.
I have an emoticon box, something like the one that you see when you reply/start a thread here. The mouseup event fires off when the user clicks on an emoticon to display it in the textbox. The problem here is, my code below does not start counting if an emoticon is added when theres nothing in the textbox (making the emoticon the first item). I can continue to add more smileys in and they will be counted in the word limit, but the first one will not be included in the count, unless the user clicks somewhere on the screen. How can i fix this problem? Code: //#message is the textbox
$(document).ready(function()
{
var characters = 100;
$("#remainder").append(characters+"words left");
$("#emoticonsbox").mouseup(function()
{
var remaining = characters - $("#message").val().length;
$("#remainder").html(remaining+"words left");
});
});
Similar TutorialsI set out to do a little exercise in creating draggable divs that look like app windows in pure javascript, with very little html. Problem is my mouseup event isn't always triggering and will never drop the div in the new spot. I have a global variable to determine whether or not the div is being dragged. This is toggled on the mouseup and mousedown events on the titlebar div. I have a mouesmove event on the body so that it can determine if the global dragging variable is true or false. If true then it moves the div to the x/y coordinates of the mouse Same thing with the mouseup event. It should move the div to the x/y coordinates of the mouse Sometimes it works, sometimes it doesnt. Most of the time it acts like it just wants to select text while I'm dragging (which i thought my selectstart event would take care of) Code: <html>
<head>
<title>testjs</title>
<script>
var dragging = false;
function Window(title,top,left,width,height)
{
this.title = (typeof title == 'undefined')?'New Window':title;
this.x = (typeof top == 'undefined')?0:top;
this.y = (typeof left == 'undefined')?0:left;
this.width = (typeof width == 'undefined')?600:width;
this.height = (typeof width == 'undefined')?400:height;
this.borderStyle = 'solid';
this.windowPanel = null;
this.Open =
function()
{
var windowPanel = document.createElement('div');
windowPanel.setAttribute('id','windowPanel');
windowPanel.setAttribute('z-index', '2');
windowPanel.style.position='absolute';
windowPanel.style.left = this.x+'px';
windowPanel.style.top = this.y+'px';
windowPanel.style.width = this.width + 'px';
windowPanel.style.height = this.height + 'px';
windowPanel.style.border = 'thin solid black';
var titleBar = document.createElement('div');
titleBar.setAttribute('id','titleBar');
titleBar.setAttribute('z-index', '4');
titleBar.style.position = 'absolute';
titleBar.style.left = '0px';
titleBar.style.top = '0px';
titleBar.style.width = this.width + 'px';
titleBar.style.height = '22px';
titleBar.style.borderBottom = 'thin solid black';
titleBar.innerHTML = "<span style=position:absolute;>"+this.title+"</span>";
titleBar.addEventListener('mousedown', function(e){MouseDown(e,this)}, false);
titleBar.addEventListener('mouseup', function(e){MouseUp(e,this)}, false);
titleBar.addEventListener('selectstart', function(e){return false}, false);
var closeButton = document.createElement('div');
closeButton.style.position = 'absolute';
closeButton.style.left = this.width - 30 + 'px';
var cbimg = document.createElement('img');
cbimg.setAttribute('src', 'close_button_red.png');
cbimg.setAttribute('width', '16');
cbimg.setAttribute('height', '16');
closeButton.appendChild(cbimg);
closeButton.addEventListener('click', function(event){CloseWindow('windowPanel')}, false);
document.body.addEventListener('mousemove', Mover, false);
titleBar.appendChild(closeButton);
windowPanel.appendChild(titleBar);
document.body.appendChild(windowPanel);
}
}
function Mover(e)
{
if(dragging == true) {
console.log(e.pageX);
document.body.style.cursor = 'move';
document.getElementById('windowPanel').style.x = e.pageX + 'px';
document.getElementById('windowPanel').style.y = e.pageY + 'px';
}
else
document.body.style.cursor = 'auto';
}
function MouseUp(e,ele)
{
dragging = false;
ele.parentNode.style.top = e.pageY + 'px';
ele.parentNode.style.left = e.pageX + 'px';
}
function MouseDown(e,ele)
{
dragging = true;
}
function CloseWindow(wnd)
{
document.body.removeChild(document.getElementById(wnd));
}
function init()
{
wnd = new Window('A new approach', 100, 150, 1024, 768);
wnd.Open();
}
</script>
</head>
<body onLoad='javascript:init()'>
<a href="#" onClick="javascript:init();">Open</a>
</body>
</html>
Hello I have this snippet for controlling the number of characters entered in a textarea. It works. But, if I replace in this code the name "my_form" by "contact-form" and "my_text" by "message", it doesnt ! It looks like the keyword is " my_form ". You change that , and the script will not work! It turns out that I have to change those names because the form as it was already had those names my_form and message before I added this counter And I dont want to replace the names of the form in order to adapt them to this code snippet below. The question is why would the script not work if I have just replaced two words, which dont seem to be keywords of JS programming (my_form and my_text) <html><head> <title>(Type a title for your page here)</title> <script language=JavaScript> <!-- function check_length(my_form) { maxLen = 50; // max number of characters allowed if (my_form.my_text.value.length >= maxLen) { // Alert message if maximum limit is reached. // If required Alert can be removed. var msg = "You have reached your maximum limit of characters allowed"; alert(msg); // Reached the Maximum length so trim the textarea my_form.my_text.value = my_form.my_text.value.substring(0, maxLen); } else{ // Maximum length not reached so update the value of my_text counter my_form.text_num.value = maxLen - my_form.my_text.value.length;} } //--> </script> </head> <body> <form name=my_form method=post> <textarea onKeyPress=check_length(this.form); onKeyDown=check_length(this.form); name=my_text rows=4 cols=30></textarea> <br> <input size=1 value=50 name=text_num> Characters Left </form> </body> </html> Okay I Don't Know Much About Javascript, But I Need A Hand I Have A Drag And Drop Script Along With A Simple Script To Make Things Appear And Disappear Bt Using This Line: ShowHide('Table'); return false; I Want to Make It So That When I Drag Something over a Div, More Preferably a Table or an Image and Then Let Go of Your Mouse (onMouseUp) It Makes the Object Disappear Or Have An Action Happen Thanx ________________________________________________________________________________________ Alright, I wrote this a while ago and This Time I'll Be More Clear And Simple. I Want To Make It So That If A Div Hovers Over A Table By Drag And Drop And You Drop Your Div in The Table An Action happens when user populate info it will appear like this: ------------------------- chkbox | name | number ------------------------- radbtn | MJ | 234123 radbtn | MD | 343543 radbtn | AB | 453466 Is uncertain that how many info will appear as its from database. I am able to enable the radbtn with chkbox by getting radbtn name. How can i enable only the selected radbtn textbox under name and number in order for user to edit it ? thanks anyone who can solve it! I have a simple function like this: Code: function chars_remaining()
{
var remaining = 200 - document.getElementById("text_box").value.length;
document.getElementById("number").innerHTML = 'Characters Remaining: ' + remaining;
}
And I call this onkeyup on the textarea. 200 chars max and what happens is when they type a character, it will still stay at 200 until they press another key. So when it will be 199, it should actually be 198. Onkeyup, onkeydown, onkeypress will all do the same thing. How can I make it so that as soon as they press a key it changes right away? Also I insert this into my database with mysql_real_escape_string, which is limited at 200 chars. When they keep typing and get to 0 remaining characters if they had any quotes, backslashes, etc. they will get added and thus some of their text will be cut off. I.e. lets say the text ended with "good luck". If they had 3 quotes in their text it might end up being "good l" instead because 3 backslashes had to be used to escape. So would the best thing to do be to count a quote, backslash, etc. as two characters instead of one. How would I do that in JS? Hi forum, I am trying to attach an event to a dynamically produced button, and then use stopPropagation and preventDefault. Code: function chapter12_nodeOne() {
//create an element
var element = document.createElement('input');
//set some attributes
element.setAttribute('type', 'button');
element.setAttribute('value', 'submit');
element.setAttribute('id', 'myBtn');
//appendd the element into a DIV
document.getElementById('myDiv').appendChild(element);
//uses EventUtil to attach an event listener
EventUtil.addHandler(element, 'click', function() {
alert('event attached');
});
var flag = confirm('prevent default behavior of button?');
if (flag) {
var el = document.getElementById('myBtn');/////////////////////////(1)
var ev = el.onclick;
}
}
var EventUtil = {
addHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = null;
}
}
};
But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?! PS:the event is attached, when I click on the button I get an alert message is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event. for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked. thanks I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though. How can retrieve the clientX and clientY in ondrag event? This is probably a really simple question. Is it possible to initialize x amount of variables. Like someone enters 10 into an input box and it makes 10 variables called variable1, variable2, variable3, etc. How would you name them? variable + num = 0; ? Thanks! Hi is there a way to only allow a certain numeric amount to be entered into a text input? i.e, Like nothing over 20? Thanks Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Project</title>
<script type="text/javascript">
var clicks=0;
function linkClick(){
document.getElementById('clicked').value = ++clicks;
}
</script>
</head>
<body>
<p align="center"><a href="http://www.google.ie" target="_blank" onclick="linkClick()">Google</a></p>
<p align="center"> </p>
<p align="center"><a href="http://www.google.ie" target="_blank" onclick="linkClick()">Google</a></p>
<p align="center"> </p>
<p align="center"><a href="http://www.google.ie" target="_blank" onclick="linkClick()">Google</a></p>
<p align="center"> </p>
<td colspan="3" valign="top">You have clicked my links <input id="clicked" size="1" onfocus="this.blur();" value="0" > times</td>
<Script Language="JavaScript">
if ("clicks">3);
{
window.open('http://ie.yahoo.com','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,location=no,status=no');
}
</Script>
</body>
</html>
I am a complete novice, I've spend most of today trying to research and learn Javascript. I would like my page to keep a count of how many times the links have been opened (this is happening) I would like a new pop up window to occur when the count gets to a specif value (this isnt happening) OR maybe to have a new hyperlink to appear that the user can then click on? Thanks in advance. Hi Im new to javascript and need some help with a project I have, the task I have is: Create a page that can take a bloke of text and out put the following o How many times each letter occurs o How many spaces o How many words o How many times each word occurs o A list of things that are not words or special characters I think maybe use an array but im not sure, like I said im new to this so not too sure on how to do it. I know it would read into a file say a txt file and sort through it this way, possibly using some kind of loop to read through all of the text before sorting it and I know it might use variables. I know how to kind of work through the task I have, but to actually implement the mechanics of the javascript is something that I then struggle with Thanks to all that help. I have a vertical menu in which the sub menu is a box that pops out to the right and the user can click boxes to make selections (input check boxes). I would like some way to indicate to the user after they have left the sub menu, that they have made selections within that sub menu. Perhaps a number after the menu item name, in which the number of sub menu selections are indicated in parenthesis? Is this possible? So if I have three dollar amounts like .... a = 1,222.00; b = 1,323.00; c = ; d = 1,222.00; How can I alert the highest variable even though there may be 1 or more of them? Hey guys. So I've been learning PHP and MySQLi for the past few weeks and it's going brilliantly! I intend to start learning JS over the Xmas holidays, but right now I only have a very basic knowledge of it. I was just wondering if someone could point me in the right direction on how to do this, as I think i should be pretty easy. After someone changes something in the admin area [e.g. the position of an item] I want to be able to have a small div display at the top of the screen saying something like "Position Updated!" and then have it fade away after 2-3 seconds. Just wondering if there's a fairly easy way to do this, or would I have to go get something like MooTools, etc.? Thanks a lot! Hi, i followed a tutorial online on how to use Javascript to calculate total price. Everything works fine, when all the dropdown select value has it's own value and does not correspond to each other. Eg : Cake Type : Round $4.00 Cake Color : Red $3.00 Cake Filling : Raspberry $4.00 So total is $11.00 The problem comes when you want to add Cake Layers and the price of Cake Color changes based on No of Layers - 1 Layer , 2 Layer and so on. Eg: Cake Layer : Layer 1 $5.00 | Layer 2 $2.50 | Layer 3 $2.50 (for color Orange) Cake Layer : Layer 1 $7.00 | Layer 2 $4.00 | Layer 3 $4.00 (for color Red) Do i have to use if and else conditional statement for every possibility? I am just a beginner. Attached below is the example code i have so far.. Code: var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=5;
filling_prices["Custard"]=5;
filling_prices["Fudge"]=7;
filling_prices["Mocha"]=8;
filling_prices["Raspberry"]=10;
function getFillingPrice()
{
var cakeFillingPrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedFilling = theForm.elements["filling"];
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
cakeFillingPrice = filling_prices[selectedFilling.value];
//finally we return cakeFillingPrice
return cakeFillingPrice;
}
This is for the calculation Code: function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
}
Some sample of the HTML Code: <select id="filling" name='filling' onchange="calculateTotal()">
<option value="None">Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custard">Custard($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
Is there a better way of simplifying this calculation method ? How do i change the price of form values based on selected values on previous dropdown. Thanks in advance. I have a text field. I want the text field to change / be calculated on the action made on the dropdown menu... So if I select Debit card.. it should leave the amount as is.. If I selected Credit Card it should add a percentage to the Amount. Please dont just provide a solutoin.. but please explain as i would love to understand why Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function doMath() {
if (CardType = "cc") {
var one = eval(document.myForm.Amount.value)
var prod = one * 1.03
document.myForm.Amount.value=custRound(prod,2);}
}
else
document.myForm.Amount.value;
function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}
</script>
</head>
<body>
<form id="myForm" name="myForm" method="post" action="">
<input name="Amount" type="text" id="Amount" v alue="100" />
<select id="CardType" name="CardType" onchange="doMath();" >
<option value="" selected="selected">Please Select</option>
<option value="dc">Debit Card</option>
<option value="cc">Credit Card</option>
</select>
</form>
</body>
</html>
Hi, I am thinking of how to write the code for this: There are 4 textboxes, 3 of which allow you to enter any number (e.g. 1000, 2500, 12345, 100.10, etc.). So whenever I entered a number in one of them (or two or all of them), the 4th read-only textbox will automatically shows the total of the values in the 3 textboxes. So...can anyone give me any references to this? Thanks. Hi, I need to count how many times a keyword (input) appears in a string (str). I think I'm getting close with this: Code: var input = document.getElementById('autocomplete').value;
var inp = input;
for (var j = 0; j < gmarkers.length; j++)
{
var str=gmarkers[j].myname;
var patt1=new RegExp(inp,'i');
if (str.match(patt1))
{
found = true;
var box = [inp];
var string1 = str;
for (var i=0;i<box.length;i++) {
nCount = string1.split(box[i]).length-1;
alert(box[i] + ' is found ' + nCount + ' times<br>');
}
but I can't get it to actually work. any ideas? thanks in advance. Hello all! I've run into a few hour long snag and cant seem to get thru it. My homework says to write a JS program form with an identifying lable, an associated text area and 2 buttons. The buttons should have text that says "# letter occurrences" and one that says "# word occurrences". Each button should call an associated JS function. The # letter occurrences routine should print a table indicatin the number of occurrences of each letter off the alphabet in the text area, the # word occurrences routine should print a table indicating the number of one letter wors, the number of two letter words, the number of three letter words, up to 10 letter words ... So far here is what I have ..... <?xml version = "1.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>random</title> <script type="text/javascript"> var tableLetter="textArea"; var tableWord="textArea"; var lengthOfWord="tableWord.Length"; function ShowDiv(divName) { HideDivs(); if (document.all) { document.all.tableLetter.style.visibility = "visible"; } else { document.getElementById(divName).style.visibility = "visible"; } } function HideDivs() { if (document.all) { document.all.tableLetter.style.visibility = "hidden"; document.all.tableWord.style.visibility = "hidden"; } else { document.getElementById('tableLetter').style.visibility = "hidden"; document.getElementById('tableWord').style.visibility = "hidden";} } </script> </head> <body> <form name="form1" method="post" action=""> <textarea name="textArea" rows=6 cols=50> How many occurrences are in your sentence? </textarea> <br /> <input type="button" onClick="ShowDiv('tableLetter')" name="button1" value="# Letter Occurences"> <input type="button" onClick="ShowDiv('tableWord')" name="button2" value="# Word Occurences"> </form> <br /> <div id="text containter" style='width:420; height:85px; background:silver; position: absolute; '> <table> <div id='tableLetter' style="position:absolute; left:5px; top:10px"> <font color='#0000FF'>Letter Occurrences </font> </div> </table> <div id='tableWord' style='position:absolute; left:5px; top:10px; visibility:hidden;'> <font color='#0000FF'>Word Occurrences.</font> </div> </div> </body> </html> |
|||||||