javascript - jQuery scrollTop after ajax load not working -
after ajax load of html content need scroll specific element. element has attr data-event-id="" variable $('.timelinetoolpanel[data-event-id="'+id+'"]').offset().top; returns 0. whole ajax code is:
function refreshcontent(id) { var scrollnumber = 0; $.ajax({ type: 'post', url: '<?php echo yii::app()->createabsoluteurl("user/ajaxeventload"); ?>', datatype:'html', success:function(data){ $("#eventlistblock").empty().append(data); if(id!=null) { console.log(id); scrollnumber = $('.timelinetoolpanel[data-event-id="'+id+'"]').offset().top; console.log(scrollnumber); $("html, body").animate({ scrollto: scrollnumber }, 1000, function() { // alert("finished animating"); }); } }, error: function(data) { // if error occured alert("error occured. please try again"); } }); } and html:
<div id="eventlistblock"> <? $this->renderpartial('/windows/timelinewindow', array( 'dataprovider'=>$dataprovider )); ?> </div> with rendering part:
<div class="cd-timeline-block"> <div class="cd-timeline-icon" style="background: <? echo $data->color ?>"> <i class="fa fa-<? echo $data->icon ?>"></i> </div> <div class="cd-timeline-content"> <div class="timelinetoolpanel" data-event-id="<? echo $data->id ?>"> <i class="fa fa-pencil timelinetoolpaneledit"></i> <i class="fa fa-trash timelinetoolpaneldelete"></i> </div> <h2><? echo $data->title ?></h2> <p><? echo $data->content ?></p> <span class="cd-date"><? echo date("d. m. y", strtotime($data->date_event)); ?></span> </div> </div> where #eventlistblock fixed container.
custom attributes in html have defined "data-*", otherwise won't work.
http://www.w3schools.com/tags/att_global_data.asp
name attr in "data-event-id=" , should job, when have not proofed js code :d
Comments
Post a Comment