We Keep Coding

How to place page on top after the reload?

var $form = $('form');
$form.submit(function() {
$.post($(this).attr('action'), $(this).serialize(), function(response) {
alert("Your form is submitted");
location.reload();
}, 'json');
return false;
});
How do I place the user at the top of the page after I forced location.reload(); ?
Thanks

$('body').scrollTop(0);
location.reload();
That will take the page to the top after your alert and then reload which will load the page where it left off (at the top in this case).

Write following code before 'location.reload();'
$(window).on('beforeunload', function() {
$(window).scrollTop(0);
});

Use this code on your page:
$(document).ready(function(){
$(this).scrollTop(0);
});
That will scroll page on top after reload.

Jquery Scripts stop working after infinite scroll loads new pages

i am trying to load one script which is working fine on first page but once the infinite scroll load the new page that js functionality is not showing up there.
<script>
$(document).ready(function(){
var original = $('.load_more_text a').attr('href');
var new_href = original.replace('/page/', '/?page=');
$('.load_more_text a').attr('href', new_href);
$('.prod_meta span.winned-for').text('Sold');
$('.prod_meta span.winned-for').parent().addClass('green');
$('.prod_meta span.winned-for').parent().parent().parent().addClass('green_pr');
})
</script>
what am i missing ?

Call the function after infinite scroll loads
example
<script>
$(document).ready(function(){
//YOUR SCRIPT infinite scroll load
$.ajax({
url: newUrl,
type: "GET",
data: data,
cache: false,
success: function (data, textStatus, xhr) {
loadtext(); //call the function after infinite scroll loads
},
});
function loadtext(){
var original = $('.load_more_text a').attr('href');
var new_href = original.replace('/page/', '/?page=');
$('.load_more_text a').attr('href', new_href);
$('.prod_meta span.winned-for').text('Sold');
$('.prod_meta span.winned-for').parent().addClass('green');
$('.prod_meta span.winned-for').parent().parent().parent().addClass('green_pr');
}
})
</script>

mCustomScrollbar won't scroll to the very bottom

I'm using this jQuery plugin called mCustomScrollbar and it works fine but I can't make it scroll to the page bottom completely. Here's my code, hope you can help me. Thanks.
$(document).on('click','#comentar',function(e){
e.stopPropagation();
e.preventDefault();
$('.comentario').css({'background-image':'url(image/loading.gif)'});
var comentario = $('.comentario').val();
var foto = $('.comentario').attr('id');
var datosComentario='foto='+foto+'&comentario='+comentario;
$.ajax({
type: "POST",
url: "/includes/comentar.php",
data: datosComentario,
cache: false,
beforeSend: function(){
},
success: function(response){
$('#comentarios_cont p').append(response);
$('.comentario').val('').focus();
$("#comentarios_cont").mCustomScrollbar("update");
$("#comentarios_cont").mCustomScrollbar("scrollTo", "bottom");
$('.comentario').css({'background-image':'none'}).val('');
}
});
});
It scrolls but not to the very bottom.

I had this problem a few minutes ago.
My problem was that a div inside mCSB_container had top and bottom margin. I removed them and now is okay, so check for this.
Hope this helps!

JS page scroll didn't work

I wrote code something like
$.ajax({
type: 'POST',
url: form.attr('action'),
data: data,
dataType: 'html',
success: function(html){
$(html).hide().appendTo(parent.find("[data-interactions]")).show().stop().animate({
scrollTop: $(".vote_feedback_snippet:last-child").offset().top
}, 1500,'easeInOutExpo');
I above code when I click on post button it generates new HTML snippet at the bottom of the list
What I want:-
When new Html Snippet come it will scroll upto that snippet only
Can somebody help me

Try:
$(html).hide()
.appendTo(parent.find("[data-interactions]"))
.show('fast', function(){
$('html, body').animate({
scrollTop: $(".vote_feedback_snippet:last-child").offset().top
});
});

Using this plugin: http://demos.flesler.com/jquery/scrollTo/
will allow you to do this:
$.scrollTo(".vote_feedback_snippet:last-child")
It's always worked for me.

jQuery, Shadowbox and AJAX

I would like to load some content using AJAX and Shadowbox
Basically I would like the user to goto a page in case javascript is off. So this is what I want to do :-
1) Cancel the click event i.e the User must not go to a different page.
2) Load content using ajax function in jQuery
3) Show the content inside a shadow box
My code works ok until loading content using ajax but the shadowbox is not displayed and the URL is gettin refreshed i guess, everything goes blank.
jQuery(document).ready(function($){
// rounded corners
$('img').addClass('corner iradius16');
DD_roundies.addRule('#nav li a',4,true);
DD_roundies.addRule('.grid',6,true);
$('h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "/ajax-post.php?p="+id,
success: function(data){
Shadowbox.open({
content: data,
player: "html",
height: 350,
width: 350
});
}
});
return false;
});
UPDATE 1
tried this code, and as soon as the shadowbox loads, the document gets reloaded and white.
Shadowbox.init({
skipSetup: true,
players: ["html"]
});
// LOAD
jQuery(document).ready(function($){
// rounded corners
$('img').addClass('corner iradius16');
DD_roundies.addRule('#nav li a',4,true);
DD_roundies.addRule('.grid',6,true);
$('.post h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "<?php bloginfo( 'template_directory'); ?>/ajax-post.php?p="+id,
success: function(data){
show_box(data);
}
});
return false;
});
});
//shadowbox
function show_box(html) {
Shadowbox.open({
content: html,
player: "html",
height: 350,
width: 350
});
}
UPDATE 2
Okay got the prbolem, the html that I am getting via ajax has some javascript in it and that is the reason for the page reload.
Why is this happening ? Any ideas ?

Since you're not getting any JavaScript errors try debugging by breaking it down:
Ensure that the binding to and overriding of the click event is functioning properly:
$('h2 a').bind('click', function() {
alert('click even fired');
return false;
});
If that works, check the data that your ajax request is returning:
$('h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "ajax-post.php?p="+id,
success: function(data){
alert(data);
}
});
return false;
});
The code looks like it should work, so I'm guessing there's either something wrong elsewhere (in which case the first test will likely fail) or you're getting some really odd data returned.

Need to run
Shadowbox.setup('h2 a');
This will reinitialise and bind it to any ajax loaded content