I am creating chat program in php using jquery, ajax and MySQL.
and my problem how to auto scroll down when div is overflowed.
like when user enter new line it will goes down and I want to auto scroll down when new messages appeares down.
and I am trying to do this dynamically using scroll height change to trigger this $('.main').stop().animate({scrollTop:$('.main')[0].scrollHeight}, 1000);. because using scroll height changing it will also scroll to other users browser who is chatting on the other side.
I also have tried to trigger scroll down event using keypress and click event but that is only works for the current users browser, so on the other hand for another user that wont work or wont auto scroll down, he have to scroll manually to view new messages and I don't want that.
so that's why I am trying to use scroll height event. I also tried the mutate plugin for this purpose and it works fine only for the localhost and conflict on the live server and super slow down the chat.
So I have to leave this plugin for this problem.
so please kindly give me the solution without using any plugin to achieve this purpose.
I have created something like this
setInterval(function(){
oldsH = 0;
newsH = msgBox.prop('scrollHeight');
if (newsH > oldsH){
oldsH = newsH
msgBox.stop().animate({scrollTop:(msgBox[0].scrollHeight)},1000);
}
},500);
and it only works in setInterval() function, I don't want to use it in this function.
because it triggers again and again the scroll event,which cause you can't scroll up to see older messages.
so is there anyway to achieve this without setInterval??
many thanks in advance.
UPDATED
If you have only one chat box, then instead of a class, assign it an id and use code like below:
var chatBox = $('#chatBox');
chatBox.scrollTop(chatBox[0].scrollHeight);
For your reference, I created a Fiddle
I'd be glad to know if you already solved your problem since this is a two-years-ago question.
I've been searching for the function similar to yours for a chat-application for my client. And I solved the problem by myself alternately (Since the internet's resource is limited).
According to you, auto scroll-down when new messages received would be annoying to user when he is reading the old messages. So, you can actually prompt the user if there's new message received and provide a button to scroll down to latest message.
This is how I solved my problem, perhaps yours too :)
// Scroll-to-latest toggle
$(document).ready(function(){
$(BUTTON_DIV).click(function()
{
var latest = $('CONTENT_DIV');
latest.scrollTop(latest[0].scrollHeight);
});
});
// Prompt with "Scroll-to-latest toggle" if new message detected by scrollheight change
function customFunc(){
var window = $("CONTENT_DIV");
var scroll = $("BUTTON_DIV");
if(window.scrollTop() + window.innerHeight() >= window[0].scrollHeight) {
scroll.hide(); //hide scroll-to-latest toggle
} else {
scroll.show(); //show s-t-l toggle
}
}
setInterval (customFunc, UR_INTERVAL); //detect per one ms
Full demo: https://jsfiddle.net/Jvloo/k962u211/
Related
I am using this code for refresh my main DIV in my main page (named readings.php):
jQuery(document).ready(
function intervalle() {
setInterval(jQuery('#myMainDiv').load('readings_content.php'), 10000);
});
In the readings_content.php, sensor readings are being checked from database and drawing a screen like a security cam screens according to the sensor count. This code is like:
$db_sensors->query("select * from tbl_sensors where status=1");
if ($db_sensors->recordcount>0){
while ($db_sensors->nextrow()){
$sensors=$db_sensors->fields;
$sensorname = $sensors["name"];
$sensorvalue = $sensors["lastreading"];
echo "<div>";
echo "Sensor Name: ".$sensorname."<br>";
echo "Last Reading: ".$sensorvalue;
echo "</div>";
}}
This idea is working fine. But because of this loop (there are 9-16 sensors) refresh is taking time. That is normally fine because page is not reloading, just changing the values when it reads a new sensor reading. But there is a button in the my main page (readings.php). It takes almost 10 second for response time for this button even I am using local database.
I want to make this refresh process faster. Or if that is possible, I want to stop this refresh thing (or what ever is happening in the page) when I click the button. and make its onClick event working.
After my whole researches I started to try all different options. And it only was OK when I change the jQuery code like this:
setTimeout('sensorcells_load()', 10000);
function sensorcells_load()
{
jQuery('#sensorcells').load('dashboard_content.php');
setTimeout('sensorcells_load()', 10000);
}
I am not a jQuery man and I don't really know why this one works but other one doesn't. But this solved my issue.
So currently my website works like this; you post an update and through iframe your update gets added to the database and then shown in a list below. But the problem is that when you clicked "Submit" the text you wrote is still shown in the textarea because the website doesn't update completely. I have tried to have "onsubmit" and "onclick" but both remove the content of the textarea before it gets added to the database so it displays an empty message.
What should I do in order to delay it just a second or how do I make it wait for the iframe to "send" data to my PHP-script?
Give your textarea an id and supposing that iframe is an element of the page that contains the textarea you have done the following in the iframe page:
<?php
//code should be done after db add
?>
<script>
o = parent.document.getElementById('textareaID');
o.value = '';
</script>
<?php
//the end of code or something else
?>
You are able to see those demos on jsbin:
http://jsbin.com/ulOyiVo/1 The page with iframe. Supply the textarea with any text and then click on simulate submit link
http://jsbin.com/EyuBeLo/1/ The iframe page
If your only problem is to have a delayed response, you could trigger a setTimeout function to your onClick, with the given setTimeout:
setTimeout(
function() {
alert('hello');
},1250 //in milliseconds
);
You can define a click or a submit event using jQuery and send a request to your server. You can handle the event when the server responded using a callback. In that callback you need to do whatever it is needed to do. Using setTimeout in this case is an unnecessary hack. You will either set up a big time to wait harming the user experience or in case the page responds later than the specified time your page will work unexpectedly. So, instead of that try defining an event.
i wanna apply a affect where my links gets a new color each time i press them... This i believe can be done with a jquery function, however my link are not linked to anything just som PHP so I cant make it work but here is what i wanna do:
Make this: http://jsfiddle.net/wD6C6/
Like this: http://jsfiddle.net/cnMdb/31/
Each time i press the links, they change color to for example blue.
Hope u guys can help me with this tricky one because my links are to some php and not just some # :)
You should add an onclick event to the links, to call a javascript function to change the background color of the link, and a target="_blank", to open the link in a new tab, so that a user can see the changed background color of the clicked link.
Or you can call the php pages using Ajax (I guess you meant this by saying "my links are to some php and not just some #"), and load the responseText to a part of the current page, so that the difference you make in the general design can be seen.
But if it is not the answer you seek for, then your question really needs some more explanation.
Not sure that I've understood your problem but...
Based on:
<div id="foo">
Click
Click
</div>
And whether the links point to php or are created by php should make do difference, you can do:
$(function(){
$("#foo a").click(function(){
var r=Math.floor(Math.random()*256-1);
var g=Math.floor(Math.random()*256-1);
var b=Math.floor(Math.random()*256-1);
rgb = "rgb(" + [r,b,g].toString() + ")";
$(this).css("color", rgb);
});
});
Here's a fiddleto play with.
I'm using a simple script to reload a div
$('#mydiv').fadeOut('300').load('# #mydiv').fadeIn("300");
The problem is that the div I'm reloading has the Facebook like button inside it. After the DIV reloads, I can see it updated inside the source, but the button is hidden for some reason.
Is there any way to force the button to re-draw?
As I stated in my comment, I think the .load is misunderstood, as you stated in your question
I can see it updated inside the source, but the button is hidden for some reason
.. so with that in mind, I assume you have load functioning with the correct parameters.
You have a synchronistic problem here. Everything you use in the chain uses a timescale, and .load() for that matter is asynchronous.
So instead of just chaining everything, you have to use the callbacks in order to know when the time scale ends for a particular function.
$('#myDiv').fadeIn('300', function() {
// callback when #myDiv is faded out (display:none;)
$(this).load('url', function() {
// callback when #myDiv is loaded with new content from the given 'url'
$(this).fadeIn('300');
})
});
The facebook button won't display because it is configured normally just AFTER document.load.
If you load the div content while the document is already loaded and the Facebook javascript SDK has already initialized. It won't work.
If facebook is not required UNTIL the div loads. You may just try to load the "all.js" script inside the div.
Otherwise, if you've come to that, you'll certainly have to review the application's design.
I have had a look at sticky notes with php and jquery and jStickyNote, and while both seem to look pretty nifty they lack some elements I am after. I haven't been able to find a way to allow particular users to modify the stickies they create, nor have I found a good way to save their stickies into my database. I am, and would like to keep using php, mysql and jquery. I have thought with the first link that I could just save the image created into a folder and save the url into that database but then I cannot go back and allow the user to change the content of the sticky. With the second link there does not seem to be support for saving the sticky at all. I'd also like to create a function where adding stickies to a message board (for everyone to see) does so in a randomly placed way that looks natural. Any ideas for either of these problems?
Here is some javascript that should help:
// Called when the edit (A) button is pressed
function edit(event, editButton)
{
// Get existing title and change element to textarea
var stickyTitle = $(editButton).parent().find('p.stickyTitle');
var textareaTitle = $(document.createElement('textarea')).addClass('textareaTitle');
$(textareaTitle).text(stickyTitle.html());
// Get existing description and change element to textarea
var stickyDescription = $(editButton).parent().find('p.stickyDescription');
var textareaDescription = $(document.createElement('textarea')).addClass('textareaDescription');
$(textareaDescription).text(stickyDescription.html());
// Create save button
var saveButton = $(document.createElement('div')).addClass('jSticky-create');
// Add save button, then replace title, then replace description, then remove edit button
$(editButton).before(saveButton);
$(editButton).parent().find('p.stickyTitle').before(textareaTitle).remove();
$(editButton).parent().find('p.stickyDescription').before(textareaDescription).remove();
$(editButton).remove();
// Set description textarea focus and set button actions
textareaTitle.focus();
setActions();
}
// Called when the save (tick) button is pressed
function save(event, saveButton)
{
// Get existing title and change element to paragraph
var textareaTitle = $(saveButton).parent().find('textarea.textareaTitle');
var stickyTitle = $(document.createElement('p')).addClass('stickyTitle');
var newTitleValue = textareaTitle.val();
$(stickyTitle).html(newTitleValue);
// Get existing description and change element to paragraph
var textareaDescription = $(saveButton).parent().find('textarea.textareaDescription');
var stickyDescription = $(document.createElement('p')).addClass('stickyDescription');
var newDescriptionValue = textareaDescription.val();
$(stickyDescription).html(newDescriptionValue);
// Create edit button
var editButton = $(document.createElement('div')).addClass('jSticky-edit');
// Add edit button, then replace title, then replace description, then remove save button
$(saveButton).before(editButton);
$(saveButton).parent().find('textarea.textareaTitle').before(stickyTitle).remove();
$(saveButton).parent().find('textarea.textareaDescription').before(stickyDescription).remove();
$(saveButton).remove();
// Set button actions
setActions();
// Add the object to the ads div
$('#ads').append(object);
// Update your database here
// by calling the saveAd.php
}
function setActions()
{
// call these after changes are made to anything
$('.jSticky-create').unbind('click').click(function(e)
{
save(e, this);
});
$('.jSticky-edit').unbind('click').click(function(e)
{
edit(e, this);
});
$('.jSticky-delete').unbind('click').click(function(e)
{
remove(e, this);
});
}
function remove(event, deleteButton)
{
var stickyMaster = $(deleteButton).parent();
$(stickyMaster).remove();
//then call savead.php with delete parameter
}
Have you looked at any of the code? I took a really quick look at jStickyNote.
Basically, the "sticky note" is a css-styled, text area (that is surround by a div element).
If you want users to be able to save sticky notes/edit past notes, here's what I'd recommend:
Add some button to each note that says "Save" or with a similar meaning.
When a user clicks the "Save" button, you'll need to grab the text from that specific textarea element and then save that text to a database.
With that said, you'll probably need to design some sort of database with a user table and sticknote table. The sticknote table can have a foreign key to the user table.
You'll also want to add some sort of login functionality to your site and then load the correct sticky notes for the authenticated user.
Good Luck!
You can have a look at http://sticky.appspot.com - the code has been released by the google appengine team.
Sorry for not going into specifics, but you could modify the plugin code to load a php script whenever a save button is clicked (or the box is moved, or even on keyup) with $.ajax(), passing it the horizontal and vertical positions and content of the note ( say, $("#note-content").text() ) and have the script plug those things into a database with a MySQL query. Just serialize your data and send it away. This gets more complicated if you want let your users have multiple notes, but start with one. Where is you hangup, exactly? I would be more specific, but I'm not sure what you already know.
I was thinking earlier about adding this feature to an app I'm working on. The thing is, I don't like those plugins. It should be very simple to write your own though. Let me know if you need help with something specifically.