|
JavaScript - Make New Messages Appear At Top Of Chatbox
I need help making new messages appearing at the top of the chatbox, not the bottom. Anyone know how to do that?
Also, how can I make it hold only X amount of messages then after X amount of messages it just removes the last one. Thanks This isn't all the code but I figure it has to be something within this code that I have to change. If you want to look at the source code to go http://gifts4points.com and take a look there. Code: //Function for initializating the page.
function startChat() {
//Start Recieving Messages.
getChatText();
}
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.';
}
}
//Gets the current messages from the server
function getChatText() {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
receiveReq.open("GET", 'getChat.php?chat=1&last=' + lastMessage, true);
receiveReq.onreadystatechange = handleReceiveChat;
receiveReq.send(null);
}
}
//Add a message to the chat server.
function sendChatText() {
if(document.getElementById('txt_message').value == '') {
alert("You have not entered a message");
return;
}
if (sendReq.readyState == 4 || sendReq.readyState == 0) {
sendReq.open("POST", 'getChat.php?chat=1&last=' + lastMessage, false);
sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sendReq.onreadystatechange = handleSendChat;
var param = 'message=' + document.getElementById('txt_message').value;
param += '&name=<?php echo $_SESSION['login']; ?>';
param += '&chat=1';
sendReq.send(param);
document.getElementById('txt_message').value = '';
}
}
//When our message has been sent, update our page.
function handleSendChat() {
//Clear out the existing timer so we don't have
//multiple timer instances running.
clearInterval(mTimer);
getChatText();
}
Similar TutorialsI have asked to create a chatbox, which acts just like a messenger which I type a text in the textbox and press send to show output to the messagebox. However, in my code, I have 2 bugs which is bothering me. The first one is whenever I press spacebar, a "+" sign appear. The second is the first text disappeared whenever I type the second text. Please help me. Code: <html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var isShift=null;
var isNN = (navigator.appName.indexOf("Netscape")!=-1);
var OP = (navigator.appName.indexOf("Opera")!=-1);
if(OP)isNN=true;
var key;
function shift(event){
key = (isNN) ? event.which : event.keyCode;
if (key==16)isShift=1;
}
function process(event){
key = (isNN) ? event.which : event.keyCode;
if(document.layers&&event.modifiers==4){
isShift=1;
}
if (key==13&&isShift!=1){
document.myForm.submit();
}
if (key!=16)isShift=null;
}
function retrieve(){
document.myForm.text1.focus();
if(location.search.length>0){
blubb=unescape(location.search.split('=')[1]);
document.myForm2.text2.value=blubb;
}
}
//-->
</script>
</head>
<body onload="retrieve()">
<form name="myForm">
<textarea name="text1" onkeypress="process(event)" onkeydown="shift(event)" cols="50" rows="7"></textarea><input type="submit" accesskey="s" value="Send">
</form><br><br>
This second textarea is just to show, that the line breaks "arrive":<br>
<form name="myForm2">
<textarea name="text2" cols="50" rows="7"></textarea>
</form>
</body>
</html>
If you go to a Youtube video by Justin Bieber or Rebecca Black, comments are constantly being posted and it seems like the autorefresh for the comments kicks in every half second. I don't plan on having millions of users viewing my page, but still, wouldn't having every user make a [mysql] request to the server every half second really take a toll on the server (especially since I don't plan to ever have the resources that Youtube has)? Facebook also seems to have instantaneous auto-refreshes, be it in comment boxes or their chat interface. So what would be the best method to implement a near-instantaneous autorefresh system with minimal resource usage? Hi! I was wondering if anyone could help with the code below. I think there is something wrong with the "thecontents[] part below. Could anyone have a look and possible email me with a finished version... Code: <table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="ddmessage"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><select name="selectbox" size="1" onChange="changecontent(this)">
<option selected value="What is JavaScript?">What is JavaScript?</option>
<option value="Why learn JavaScript?">Why learn JavaScript?</option>
<option value="What do you think of the site?">What do you think of the site?</option>
<option value="I'd like to feature one of these codes on my site.">I'd like to feature one of these codes on my site.</option>
</select><br>
</td>
</tr>
<tr>
<td width="100%"><textarea rows="8" name="contentbox" cols="35" wrap="virtual"></textarea><br>
<font face="arial" size="-2">This free script provided by <a href="http://javascriptkit.com">JavaScript Kit</a></font>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<p>
<script language="JavaScript">
/*
Drop down messages script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/
//change contents of message box, where the first one corresponds with the first drop down box, second with second box etc
var thecontents=new Array()
thecontents[0]='Its what I used to make this :/'
thecontents[1]='I wouldn't reccommend it, its rather hard. Though, I hate to blow ones own trumpet, I am learning to do it rather well.'
thecontents[2]='I hope you have enjoyed it! Email support@matthewjmorris.co.uk with your comments. Also, if you have any bits to go on this page, email Support aswell with the code, instructions for installing the code and your name! Your name may appear here, along with your code!'
thecontents[3]='support@matthewjmorris.co.uk'
//don't edit pass this line
function changecontent(which){
document.ddmessage.contentbox.value=thecontents[which.selectedIndex]
}
document.ddmessage.contentbox.value=thecontents[document.ddmessage.selectbox.selectedIndex]
</script>
Thanks! I had posted a previous forum for help and solved a problem. However, than the links lost their formatting in the browser. I kept going as I am doing a lesson out of a textbook and the links are fixed now, but my coded object is not showing up. There should be a calendar in the upper righthand corner. I posted the javascript first and only a section of html after. Code: function calendar() {
var calDate = new Date("March 18, 2011");
document.write("<table id='calendar_table'>");
writeCalTitle(calDate);
writeDayNames();
writeCalDays(calDate);
document.write("</table>");
}
function writeCalTitle (calendarDay) {
var monthName = new Array ("January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December");
var thisMonth=calendarDay.getMonth();
var thisYear=calendarDay.getFullYear();
document.write("<tr>");
document.write("<th id='calendar_head' colspan='7'>");
document.write(monthName[thisMonth]+" "+thisYear);
document.write("</th>");
document.write("</tr>");
}
function writeDayNames() {
var dayName = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
document.write("<tr>");
for (var i=0; i < dayName.length; i++){
document.write("<th class='calendar_weekdays'> "+dayName[i]+"</th>");
}
document.write("<tr>");
}
function daysInMonth(calendarDay) {
var thisYear = calendarDay.getFullYear();
var thisMonth = calendayDay.getMonth();
var dayCount = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
if (thisyear % 4 == 0) {
if((thisyear % 100 != 0) || (thisyear % 400 == 0)){
dayCount[1] = 29; //this is a leap year
}
}
return dayCount[thisMonth];
}
function writeCalDays(calendarDay){
var dayCount = 1;
var totalDays = daysInMonth(calendarDay);
calendarDay.setDate(1);
var weekDay = calendarDay.getDay();
document.write("<tr>");
for (var i = 0; i < weekday; i++) {
document.write("<td></td>");
}
while (dayCount <= totalDays) {
if (weekDay == 0) document.write ("<tr>");
document.write("<td class='calendar_dates'>"+dayCount+"</td>");
if (weekday == 6) document.write ("</tr>");
dayCount++;
calendarDay.setDate(dayCount);
weekDay = calendarDay.getDay();
}
document.write("</tr>");
}
Code: <title>The Chamberlain Civic Center</title> <link href="ccc.css" rel="stylesheet" type="text/css" /> <link href="calendar.css" rel="stylesheet" type="text/css" /> <script src="cal.js" type="text/javascript"></script> </head> <body> <div id="head"> <script type="text/javascript"> calendar(); </script> <img src="logo.gif" alt="Chamberlain Civic Center" /> </div> If you want, I can upload the files to my school server so you can view the webpage in a browser. The error console says that there is a missing parenthetical where I have the ! symbol. I don't see that. Also it says that calendarDay is not defined. Hi all. I'm trying stuff out for learning. What I would like to do is display the first error message in array ie 'required' if its still wrong when validate again I want message two to display ie 'still required' but I can't work it out. As expected, I always get the last message. Can it be done as I would like or is it done another way? Code: var errmail = [];
errmail[0]="Required";
errmail[1]="Still required";
errmail[2]="Oi idiot, enter a VALID email";
/other code here/
email checked and failed
for (i=0; i<errmail.length; i++)
document.getElementById("emerr").innerHTML = errmail[i] ;
/other code/
any positive input very welcome LT ps:-)smile On twitter, when you change your avatar/background a small white box covering an inch of the top of the page appears. How can I do this?
What can I do to find out what the errors in the error console mean?
I'm trying to make these two messages change every two seconds. I'm not sure if the setInterval needs to be outside of the function. Also, not sure about HTML action"". It's not working and I'm not sure where my mistakes are. Very frustrating. I know it's easy for some of you, please help! <script type="text/javascript"> var curMessage="message1"; var changeMessage="message2"; function adMessage() { if (curMessage) {document.getElementbyId("message").value = "Place your Thanksgiving orders today!"; changeMessage; setInterval ('adMessage()',2000); } else (changeMessage); {document.getElementbyId("message").value = "All orders must be received by November 20th!"; curMessage; setInterval ('adMessage()',2000); } } </script> </head> <body onload="adMessage();"> <h1>Forestville Foods</h1> <h2>Party Platters</h2> <form name="advertising" action="adMessage"> <input type="text" name="message" size="60" value="Place your Thanksgiving orders today!" /> </form> so here is my "Project" for this class http://sw.cs.wwu.edu/~strickk/Project2/project2.html and here are the directions where im stuck at, just right click view source to see the code. I believe what i am doing wrong is where i enter my variables and i dont know how to get an alert message to pop up using an if statement as well as getting the values for the distances to show up correctly directions: 8. Now we will write some JavaScript to validate the input. We don’t want the user to be able to enter the same origin and destination city when they book a ticket. So we will use an if statement to check that. If they have entered the same origin and destination city then we will tell them that by using an alert statement and make them select again. All of your code to validate the input code goes in between the single quotes of the onClick event in the Calculate Fare button. Follow these steps: a) Assign the value of the origin city to a variable called origin Note that the value that gets assigned to origin is actually 0, 60, 90, 120 or 150 (and NOT Bellingham, Everett, Seattle etc.) since the value we gave to the each element of the list was its distance from Bellingham. This will make our lives easier later when we compute the fare. b) Assign the value of the destination city to a variable called destination in a similar fashion. c) Write an if statement that will test whether origin is equal to destination and if it is then do two things. i. Issue an alert message that says Please input different origin and destination cities ii. Stop the execution of the JavaScript code in the onClick event. Use return; as the second statement inside the if statement. Remember to use curly braces to denote that two statements are contained within the if statement. Your if statement will have the following structure to it. if (<put the test you want to do here>) { alert(<put the message here>); return; Hello all, i am new to this forum.. i am validating a form and displaying results.. but, instead of displaying the result in popup(alert), i need to display it as a text that disappears after a few seconds.. Code: function valtext()
{
if(document.getElementById("functional").value == "")
{
document.getElementById("label").innerHTML=message;
startTimer();
}
}
function hideMessage()
{
document.getElementById("label").style.display="none";
clearTimeout(tim);
}
function startTimer()
{
tim = setTimeout("hideMessage()",3000);
}
i did it using the above code.. but my problem is, i cant check it the second time, without reloading the page.. how to do it without refreshing the page and i want to add a bg color to that warning.. how to do that.. and, is there anyother way of doing it? any help is much appreciated.. and thanks I'm wanting to put a piece of code on my website that will display when our next meeting will be. We have 2 meetings per month. I'm thinking what I need to do is create a code that gets the current month, day of month, and year then combines it together somehow, and if that combination is in a certain range a particular statement, "Next meeting is MM, DD YY." or "Next meeting is today." is displayed. If date is equal to or between 01012012 and 01112012, "Next meeting is January, 12 2012" is displayed. If date is equal to 01122012, "Next meeting is today" is displayed. If date is equal to or between 01132012 and 01252012, "Next meeting is January, 26 2012" is displayed. If date is equal to 01262012, "Next meeting is today" is displayed. ...that kind of thing. How would I combine the month, day of month, and year? Would 48 if statements be what I need to do? Sorry, I'm pretty new to javascript. If there's a better way to do this, please let me know. Thanks, CJ Hi, Could I use javascript code to stop Internet Explorer script error messages? Bob Kuspe Hi all, I have an issue that seems to relate to IE6 only. Tested and working in IE8 and FF3. If you go to the following page and click 'Buy Now' at the bottom of the page to submit the form the jQuery validate library error messages are displayed at the top of the page, rather than next to the corresponding form element: http://bit.ly/cc97GP Any help appreciated with this one. Seems to work fine in IE8 and FF3 as mentioned. Best Regards, Picco Hi, I'm using HTA with iframes contains external web pages, lot of pages (external - not mine) contains errors and while running 'script error' pops. If running the same pages in IE there are only error notice in the bottom left side of the browser. Can I do something to ignore those script error popups in my HTA? (I'm using also Javascript for my HTA) Could I use javascript code to stop Internet Explorer script error messages? Regards Bob I am developing a messaging service between members of my site. I am developing this with asp.net mvc. When a user goes to the SendMessage view to send a message to another member, there is a dropdown list which presents the sender with all the members of the site, which he or she will pick as the recipient. However, i don't want it to be a dropdown, i want it to be a text box, where a user types in the first couple of letters of a name, and the dropdown appears then with only the members which have the same couple of letters. This is basically like every email system out there (facebook and gmail have it just like that). And after they chose one, they can select another one in the same textbox, just separated by a comma or something like that. Basically, how do i achieve that in javascript? I'm not even sure what that functionality is called, that's why i had to explain it properly. Any help is greatly appreciated. thank you hi people I'd need a program just in command prompt to post messages on server minecraft, possibly being able to automate this process every few time, should I use it for more players at a time, work done to pay 20 Euros or more p.s is nothing illegal I apologize for all the text I'm about to type, but I just want to make sure I explain my problem in detail. So I have created a simple Weather Forecast algorithm containing the JavaScript code that uses a prompt to allow a user to enter a temperature in degrees Celsius, and based on the degrees entered (temperature scale is below), the program will display one of the following messages based on the selection structure I have created: (Kindly find attached .txt file of my entire code, I wasn't able to upload an HTML file.) -18 degrees Celsius: "Bundle up! It's freezing out there!" -18 - 0 degrees Celsius: "Pretty cold with a chance of snow!" 15 degrees Celsius: "Don't forget your jacket. It's still chilly out!" 16 - 27 degrees Celsius: "Perfect, lovely weather... unless it rains." 28 - 35 degrees Celsius: "Nice and warn. Go for a swim." 35 degrees Celsius: "Really hot! Best to stay in air conditioning." HELP Now i want improve on the same program and let the user enter the degrees in either unit using a prompt to ask the user whether the entry is Celsius(C) or Fahrenheit (F) (F scale is below) and use the correct degree breakdown to display the same messages: Less than 0 degrees Fahrenheit: "Bundle up! It's freezing out there!" 0 - 32 degrees Fahrenheit: "Pretty cold with a chance of snow!" 33 - 59 degrees Fahrenheit: "Don't forget your jacket. It's still chilly out!" 60 - 80 degrees Fahrenheit: "Perfect, lovely weather... unless it rains." 81 - 95 degrees Fahrenheit: " Nice and warn. Go for a swim." Greater than 95 degrees Fahrenheit: " Really hot! Best to stay in air conditioning." I'd appreciate if anyone can help me with this. Again, I've attached my original file where the user can only enter in degrees Celsius and gets the corresponding messages. I have tested it and it works perfectly. Attached Files hourlyForecast1.txt (954 Bytes, 24 views) I found this copy and paste java script for slide shows... I can only put 1 on the page then the other don't work... how do i edit it so i can put multiple on 1 page? http://www.javascriptkit.com/script/.../jsslide.shtml Code: <script language="JavaScript1.1">
<!--
/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}
//-->
</script>
Code: <a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")
slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")
//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
I want the dynamically add fields can be appear with a contain of php code, but I have not found the way, I wondering there who are willing to help me. my code as fallowing: Code: <!-- // another fields here //-->
<div id="new_field"--></div>
<script type="text/javascript">
var inputs = {
fields: 0,
target: "new_field",
addInput: function() {
if (this.fields != 5) {
this.fields++;
var newElement = document.createElement('div');
newElement.id = this.target + this.fields;
newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?>' size='auto' maxlength='100%' /><?php } } ?>";
document.getElementById(this.target).appendChild(newElement);
} else {
alert("Only 5 fields allowed.");
}
},
};</script>
i know it does not appear because the php code Quote: newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?' size='auto' maxlength='100%' /><?php } } ?>"; but please let me know is there another idea and pointer to make it work?, I would appreciate it and many thanks. Hello, I Installed a Javascript on my site but the font is very small The code Code: <script type="text/javascript"> TargetDate = "03/12/2010 12:00 PM"; BackColor = ForeColor = CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% يوم, %%H%% ساعة, %%M%% دقيقة, %%S%% ثانية"; FinishMessage = "It is finally here!"; </script> <script type="text/javascript" src="http://f1zcdn.appspot.com/js/countdown.js"></script> How can i make the font in "yellow" bigger ? Thank you |
|||||||