I am working on auto scrolling of chat application, which is like that whenever I go for a conversation to someone then the conversation page automatically scroll down and when I send a message the scroller automatically again scroll down on each send-receive message.
Using this script I achieve my goal
$(document).ready(function() {
setInterval(function() {
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>').scrollTop($("#messagepost").prop('scrollHeight'))
}, 1000);
});
But problem is that when I scroll up it is not scrolling up normally, means it is not fixing on its upper position it goes to down automatically.
I want it to work normally when I scroll up or down beside auto-scrolling on each send message and on refreshing a page.
After searching its solution, I have implemented this script (in place of above)-
var scrollpos = $("#messagepost").scrollTop();
var scrollpos = parseInt(scrollpos) + 520;
var scrollHeight = $("#messagepost").prop('scrollHeight');
if(scrollpos < scrollHeight)
{
$(document).ready(function() {
setInterval(function () {
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>')
}, 1000);
});
}
else
{
$(document).ready(function() {
setInterval(function () {
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>').scrollTop($("#messagepost").prop('scrollHeight'))
}, 1000);});
}
But after applying it, the functionality of auto scrolling has gone.
After spending a lot of time, I got a solution and it is working for me.
<script type="text/javascript">
$("#messagepost").scrollTop($("#messagepost").prop('scrollHeight'));
$(document).ready(function()
{
function updateChat(){
$('#messagepost').load('conveyrefresh.php?value=<?php echo $mid."&picture=".$profilepic; ?>');
}
var chat = $("#messagepost").html();
setInterval(function () {
updateChat();
if(chat !== $("#messagepost").html()){
$("#messagepost").scrollTop($("#messagepost").prop("scrollHeight"));
chat = $("#messagepost").html();
}
}, 1000);});
</script>
Related
I tried to implement a div on my website, that sticks to the top of the browser as soon as it scrolls out of the viewport. I found a script that does this pretty good and it works well on the desktop. When I test it on the iphone I have a short lag where the div scrolls out for about a half second and pop then up at the desired location. Has anybody a clue how I could tweak that script?
Here is the link: jsFiddle
Thanks for your help!
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky-anchor').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
Maybe you can use setTimeout and clear the interval when the scroll is invoked multiple times. This might help by limiting the number of times the callback is invoked.
$(function() {
var timer;
$(window).scroll(function() {
clearInterval(timer);
timer = setTimeout(function() {
sticky_relocate();
}, 50);
});
sticky_relocate();
});
I have a newsletter section that appears on the site when the person starts to scroll down after a certain point. On this newsletter section there is a close button that allows this Newsletter section to be closed. However the problem is that when they close the newsletter and start scrolling again it reappears. So the first function is cancelling out the second. How can the close button remove the newsletter button from the page and not reappear when they start to scroll again?
var amountScrolled = 300;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolled ) {
$('.Newsletter_btn').fadeIn('slow');
} else {
$('.Newsletter_btn').fadeOut('slow');
}
});
$(document).ready(function(c) {
$('.alert-close').on('click', function(c){
$(this).parent().fadeOut('slow', function(c){ });
});
});
×
It's simple. Just add a variable, what listenst is the newsletter has closed?
I called it showNewsletter.
When you load the pages, it's true. When use scroll down, it appears. If user has closed, then set it to false, so now you know, you should not appear it again.
var amountScrolled = 300;
var showNewsletter = true; //init
$(window).scroll(function () {
if ($(window).scrollTop() > amountScrolled) {
if (showNewsletter) { //show only if not turned off
$('.Newsletter_btn').fadeIn('slow');
}
} else {
$('.Newsletter_btn').fadeOut('slow');
}
});
$(document).ready(function (c) {
$('.alert-close').on('click', function (c) {
$(this).parent().fadeOut('slow', function (c) { });
showNewsletter = false; // turn off
});
});
Im having issues with combining 2 scripts
I have javascript code that checks how big my container is and if its bigger than 500 it devides the content into 2 different divs:
function divideStream() {
if ($("#stream_one_col").width() > 500) {
var leftHeight = 0;
var rightHeight = 0;
$("#stream_one_col").children().each(function() {
if (rightHeight < leftHeight) {
$("#stream_right_col").append(this);
rightHeight += $(this).height();
$(this).children().addClass("stream_right_inner");
}
else {
$("#stream_left_col").append(this);
leftHeight += $(this).height();
$(this).children().addClass("stream_left_inner");
}
});
}
else {
$("#content_left").load("php/stream_left.php");
}
}
And I have an ajax refresh
$(document).ready(
function() {
setInterval(function() {
$('.aroundit').load('php/stream_left.php');
$(".aroundit").divideStream();
}, 3000);
});
Now basically the reloading goes just fine
However, the function (divideStream) wont reload after the ajax is activated
Instead it just keeps jumping back and forth
Can anyone help me?
the function divideStream is not a extend function of jQuery .
You should use this:
$(document).ready(
function() {
setInterval(function() {
$('.aroundit').load('php/stream_left.php');
divideStream();
}, 3000);
});
I'm not quite sure I understand what is happening. But I think you might want to make sure that you run your divideSteam function after the load has completed. You can do it like this.
$(document).ready(
function() {
setInterval(function() {
$('.aroundit').load('php/stream_left.php', function() { //this function runs once load has completed
divideStream(); // as hugo mentioned
});
}, 3000);
});
I'm implementing a jquery carousel into my page. Because I have used percentage units rather than fixed units, I need to redraw the carousel after window resize.
My problem is that the carousel stops to work correctly and its function call does not behave normally and renders the carousel oddly after resizing using the following code:
jQuery(document).ready(function ($) {
FnUpdateCarousel();
}); // end ready
var lightbox_resize = false;
$(window).resize(function() {
if (lightbox_resize)
clearTimeout(lightbox_resize);
lightbox_resize = setTimeout(function() {
FnUpdateCarousel();
}, 100);
});
function FnUpdateCarousel() {
var widthof =
Math.round(parseInt(jQuery('#services-example-1').css('width'))-(45));
jQuery('#services-example-1').services(
{
width:widthof,
height:290,
slideAmount:6,
slideSpacing:30,
touchenabled:"on",
mouseWheel:"on",
hoverAlpha:"off",
slideshow:3000,
hovereffect:"off"
});
};
Please guide me on how can I make it behave normally.
Here is the solution I reached:
<script type="text/javascript">
var initialContent = jQuery('#services-example-1').html();
jQuery(document).ready(function ($) {
FnUpdateCarousel();
}); // end ready
var lightbox_resize = false;
$(window).resize(function() {
if (lightbox_resize)
clearTimeout(lightbox_resize);
lightbox_resize = setTimeout(function() {
jQuery('#services-example-1').empty();
jQuery('#services-example-1').html(initialContent);
FnUpdateCarousel();
}, 200);
});
function FnUpdateCarousel() {
var widthof =
Math.round(parseInt(jQuery('#services-example-1').css('width'))-(45));
jQuery('#services-example-1').services(
{
width:widthof,
height:290,
slideAmount:6,
slideSpacing:30,
touchenabled:"on",
mouseWheel:"on",
hoverAlpha:"off",
slideshow:3000,
hovereffect:"off"
});
};
</script>
I used this snippet of code (had to adapt it) to autoload (think Twitter) new posts on my page when scrolling.
Since this is resource heavy for my server when a user scrolls fast, I want it to be activated when clicking on a button, lets say <button id="load_more">Load more</button>
Can anyone help me convert mine ? I can't get it to work... (plus eventually remove the busy indicator)
Here is the code I use for autoscroll :
<?php
$maxPage = $this->Paginator->counter('%pages%');
?>
<script type="text/javascript">
var lastX = 0;
var currentX = 0;
var page = 1;
$(window).scroll(function () {
if (page < <?php echo $maxPage;?>) {
currentX = $(window).scrollTop();
if (currentX - lastX > 150 * page) {
lastX = currentX - 150;
page++;
$("#busy-indicator").fadeIn();
$.get('<?php echo $this->Html->url('/users/getmore_timeline/'.$this->Session->read('Auth.User.id')); ?>/page:' + page, function(data) {
setTimeout(function(){
$('#postList').append(data);
var bi = $("#busy-indicator");
bi.stop(true, true);
bi.fadeOut();
}, 500);
});
}
}
});
</script>
EDIT :
I tried (from memory)
<button onlick"LoadMore()">Load More</button>
<?php
$maxPage = $this->Paginator->counter('%pages%');
?>
<script type="text/javascript">
function LoadMore () {
if (page < <?php echo $maxPage;?>) {
page++;
$("#busy-indicator").fadeIn();
$.get('<?php echo $this->Html- >url('/users/getmore_timeline/'.$this->Session->read('Auth.User.id')); ?>/page:' + page, function(data) {
setTimeout(function(){
$('#postList').append(data);
var bi = $("#busy-indicator");
bi.stop(true, true);
bi.fadeOut();
}, 500);
});
}
};
</script>
i'm not sure if i missed something here, but if all you want is a button to call the function LoadMore():
HTML
<button id="load_more">Load more</button>
JS
$('#load_more').on('click', function() {
Loadmore()
})
PS: about your <button onlick"LoadMore()">Load More</button>, you have a typo (very funny one :D), forgot a equal sign, and you should avoid using inline event handlers.