We Keep Coding

Scroll down to bottom. Then reload page and do it again

I'm using this simple code, and it's working fine.
$("#mydiv").animate({ scrollTop: $('#mydiv')[0].scrollHeight}, 20000)
What I would like is to after the bottom has been reached immediately go back to the top of the page and start scrolling down slowly again. How would one achive something like this in JQuery?
Thank you guys!

you can jump back to the top of your page using the following javascript function:
function jump(elementId){
var location = document.getElementById(elementId).offsetTop;
window.scrollTo(0, location);
}
just use the id of some element at the top of your page.

Not sure what you are trying to do and what "reload" means but here is a quick snippet to get you started:
JSnippet Demo
As you can see its configurable and easy to understand:
$(function() {
var pageScan = {
speed : 10000,
loop : true,
delayRestart : 1000,
start : function(){
pageHeight = $('body').height() - window.innerHeight;
pageScan.proc(pageHeight);
},
proc : function(to){
$("body").animate(
{scrollTop: to},
pageScan.speed,
"linear",
function(){
if (pageScan.loop) {
setTimeout(function() {
window.scrollTo(0, 0);
pageScan.start();
}, pageScan.delayRestart);
}
});
}
};
pageScan.start();
});

We could do something easier like this:
(function (){
var div = $('#myDiv'),
infiniteScroll = function () {
//---gets the bottom of the page value
var bottomHeight = div[0].scrollHeight;
var callback1 = function () {
//once it gets into this callback function
//it resets the position to zero
div.scrollTop(0);
//invokes again the function infinite scroll
infiniteScroll();
};
div.animate({scrollTop:bottomHeight},20000,callback1)
};
//starts the function for the very first time
infiniteScroll();
})();
I created a codepen so you can see it working and play with it:
http://codepen.io/dieggger/pen/VLoZWv?editors=101

How to slide down a jQuery slideToggle when scaling a browser

I am having an issue with my slideToggle function. Once pressed it opens up the way I need it to. But when I scale the browser to test the responsive flow to the site the slideToggle still stays active instead of sliding down. I tried a few functions but nothing seems to work. Below is the scrip I am using without the code to slide down when it hits a specific screen resoultion. How would I go about fixing this issue?
$('#more').click(function () {
var open = $('header').is('.open');
$('#footerPanel')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=120' }, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('#footerPanel').slideUp(400);
}
});
$('.footerButton').click(function () {
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
My Code
http://jsfiddle.net/wyze/XqUp4/4/

Try if this works for you. I have added to check whether the width is 780(you can change it), when the panel to slide down. Try adding this in you fiddle and check if this works
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=120"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#footerPanel').slideToggle(400);
}
}
});

Jquery, Codeigniter 2.1 - pagination issues

I am creating pagination using Codeigniter, and I want to add ajax functionality. JS is working when pagination link is clicked first time. When it is clicked for the second time JS doesn't work and pagination is working via PHP controller (this part is working without any problem). This is JS code:
var pag = $('#pagination a');
pag.on('click', function(e){
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({'opacity':0, scrollTop: 0}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({'opacity':1}, 400);
});
});
e.preventDefault();
});
Also scrollTop doesn't work. What am I doing wrong?

Probably that's because your DOM gets manipulated everytime, and hence the handler for the click event is lost.
try this way :
$('body').on('click', '#pagination a', function(e) {
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({
'opacity':0,
scrollTop: 0
}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({
'opacity':1
}, 400);
});
});
e.preventDefault();
});
this will ensure rebinding the click event on each DOM manipulation

try this bro..
maybe the element was not yet loaded...
var pag = $('#pagination a');
pag.on('click', 'a', function(e){
var pagination =
{
target : $(this).attr('href') + ' .mali_oglasi',
content : $('.mali_oglasi'),
container: $('.mali_oglasi_wrapper')
};
pagination.content.animate({'opacity':0, scrollTop: 0}, 400, function(){
pagination.container.load(pagination.target, function(){
pagination.content.animate({'opacity':1}, 400);
});
});
e.preventDefault();
});

function not defined when calling from outside of document ready

I did have a look at this quesiton although I could work out how I could implement this.
The basic code overlay is:
jQuery.noConflict();
jQuery(document).ready(function($){
$("button").click(function(e){
popupOverlay();
popupDisplay();
e.preventDefault();
});
function popupOverlay() {
var overlayCss = {
"width" : $(document).width(),
"height" : $(document).height(),
"display" : 'block'
}
$("#popupOverlay").css(overlayCss);
}
function popupDisplay() {
var popup = $("#popup");
etc etc code to work out the central position for popup
$(popup).css({
'top': yPosition + 'px',
'left': xPosition + 'px',
'display' : 'block'
});
}
});
They above works fine, although I want to re-call the above function if the window is resized by adding this below the above:
jQuery(window).resize(function() {
popupOverlay();
popupDisplay();
});
Error I am getting is: popupOverlay is not defined
I have tried moving the popup functions out of the document ready but then I get the error: $ is not a function
I have to be really careful with this code that it does not cause any conflict with other JavaScript libraries that are already used on the website.

It does not work because the functions popupOverlay and popupDisplay are inside $(document).ready and you are trying to access it outside the scope of the declaration.
Rearrange your code like this.
jQuery.noConflict();
// DOM Ready event
jQuery(document).ready(function ($) {
$("button").click(function (e) {
popupOverlay();
popupDisplay();
e.preventDefault();
});
});
//window resize event
jQuery(window).resize(function () {
popupOverlay();
popupDisplay();
});
//custom functions
function popupOverlay() {
var overlayCss = {
"width": $(document).width(),
"height": $(document).height(),
"display": 'block'
}
jQuery("#popupOverlay").css(overlayCss);
}
function popupDisplay() {
var popup = jQuery("#popup");
//etc etc code to work out the central position
//for popup
jQuery(popup).css({
'top': yPosition + 'px',
'left': xPosition + 'px',
'display': 'block'
});
}

This should work.
jQuery.noConflict();
jQuery(document).ready(function(){
var $ = jQuery;
$("button").click(function(e){
popupOverlay();
popupDisplay();
e.preventDefault();
});
function popupOverlay() {
var overlayCss = {
"width" : $(document).width(),
"height" : $(document).height(),
"display" : 'block'
}
$("#popupOverlay").css(overlayCss);
}
function popupDisplay() {
var popup = $("#popup");
etc etc code to work out the central position for popup
$(popup).css({
'top': yPosition + 'px',
'left': xPosition + 'px',
'display' : 'block'
});
}
jQuery(window).resize(function() {
popupOverlay();
popupDisplay();
});
});

declare functions outside of document.ready()
no reason to declare them there,
the "not working" is due to the function belong other namespace
you can still use them if you will add handles to your events also in $(function() {});

center on resize too

This works:
$.fn.center = function () {
this.css("position", "absolute");
this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
return this
};
$('#container').center();
.. but the element stays in the same position if the window is resized, how do I center it with the resize too?
Thanks

You would need to execute that code in the window resize event. But, if the browser is resized this event fires huge! So it's in general a good idea to create a little "balancer".
$(window).bind('resize', function() {
var that = this;
if(!('balancer' in that) ) {
that.balancer = setTimeout(function() {
$('#container').center();
delete that.balancer;
}, 200);
}
});
This will absorb the many events that are fired when resizing the browser window. In fact, it only calls the .center() at a maximum of 200ms. You probably should even increase that value and cache the node reference to the #container element.

EDIT::
giving percentage to top and left can put at center. but this bad ... really really bad.
$.fn.center = function () {
$(this).css({'position': 'absolute',
'top': '40%',
'left': '40%'
});
};
$(function (){
$('#container').center();
})
On jsfiddle.