javascript - Prevent automatic "scrolling up" with jquery ajax $.load -


i trying build ajax chat jquery , php. working fine except scrolling. basically, i've set-up time-out when inner-content of chat automatically reload makes chat box scroll way if scrolling. here's code without many li (messages) (they loaded php):

http://jsfiddle.net/m72jj/1/

and here's live version can see (the scrolling doesn't happen in jsfiddle):

http://alfie.co.nf/templates/sandbox/php/ajax-chat/

here's jquery:

var form = $('form');  form.submit(function(event){     event.preventdefault();     var username = form.find('input[name=user]').val(),         messform = form.find('input[name=message]')         mess     = messform.val(),         url      = form.attr('action');      var posting = $.post(url, {message : mess , user : username});     posting.done(function(data){         var content = $(data).find('.chatbox');         $('.chatbox').empty().append(content).fadein();         messform.val("").fadein();     }); })  function checknewmessages(){     $('.chatbox').load(" .chatbox"); }  setinterval(checknewmessages, 500);

update oh well, saw directly point load onto chatbox itself, replace completely. loose scroll position sure.

try add container around .chatbox , change styles of .chatbox container around (and don't name .chatbox).

here's example of meant (compared first version of jsfiddle):

http://jsfiddle.net/m72jj/2/

hope helps.

original post seems problem lies in jquery load method.

i created small example whole content reset, not using ajax nor $.load:

http://jsfiddle.net/aybsq/

html:

<div id="outercontainer">     <div id="contentcontainer">     </div> </div>

javascript:

jquery(document).ready(function() {     var linecount = 0;     var outercontainer = $('#outercontainer');      var contentcontainer = $('#contentcontainer');      var updatecontent = function () {         contentcontainer.empty();         (var index = 0; index < 50; index++){             linecount++;             contentcontainer.html(contentcontainer.html() + '<p>' + linecount + ': 1 chat content line</p>');            }     }      window.reloadinterval = setinterval(function() { updatecontent(); }, 1000); });

perhaps should create ajax endpoint in php script messages rendered, use standard $.ajax call , put resulting html using $(element).html().

anyway, in opinion change message-loading plain html json, , cache chat messages on client , send new messages server. reduce amount of data transferred. achieved using framework knockoutjs fill observablearray , render array using knockout. longer story tell ;)

hope helps.

best regards, chris


Comments

Post a Comment

Popular posts from this blog

Why can rails not find a route created by a helper? -

i created member route in rails 4: resources :line_items post 'decrement', on: :member end and gave matching method in line_items controller: def decrement @cart = current_cart @line_item = @cart.line_items.find_by_id(params[:id]) @line_item.decrement_quantity respond_to |format| if @line_item.save format.html { redirect_to shop_path, notice: 'line item updated.' } format.js {@current_item = @line_item} format.json { head :ok } else format.html { render action: "edit" } format.js {@current_item = @line_item} format.json { render json: @line_item.errors, status: :unprocessable_entity } end end end but when try make button: <%= button_to 'x', decrement_line_item_path(item) %> i error: no route matches [post] "/carts/25" what gives? your error message is: no route matches [post] "/carts/25" but expectin...
Read more

javascript - jquery or ashx not working -

i using ajax file upload control. it creating html: <form action="/pages/handlers/asyncfileuploadhandler.ashx" method="post" enctype="multipart/form-data" target="ajaxuploader-iframe-1397144545"> <input type="hidden" name="type" value="mindvoice"> <input type="file" id="imagefile" style="display: block; width: 80%; margin-right: auto; margin-left: auto;"> </form> and target is: <iframe width="0" height="0" style="display:none;" name="ajaxuploader-iframe-1397144545" id="ajaxuploader-iframe-1397144545"></iframe> the form submitted using .submit() . my ashx handler: <%@ webhandler language="c#" class="asyncfileuploadhandler" %> using system; using system.web; using nettpals.core; public class asyncfileuploadhandler : ihttphandler { public void processre...
Read more

opencv - DataType<cv::detail::deriv_type>::depth what is it used for -

i wondering why line used in lucas kanade tracker in opencv: datatype<cv::detail::deriv_type>::depth can explain me? in opencv, depth of mat refers type of data contained in mat 's data buffer. represented integer values correspond given data type. these integers commonly abstracted appropriate macro definition (e.g. uchar data represented macro cv_8u ). cv::datatype type-traits class provides method obtain corresponding integer value without having memorize macro means data type. there few cases user code needs use datatype::depth . more common datatype::type . a simple example shows 1 possible use of datatype::depth : cv::mat uchar_data = cv::mat::ones(3, 3, cv_8uc1); cv::mat float_data; uchar_data.convertto(float_data, cv::datatype<float>::depth); // ^^ equivalently replaced // cv_32f macro float_data.at<float>(0,1) += 0.5f; std::cout << float_data << std::endl;...
Read more