Develop Reference

I want to get the Page Number of Foo Table for Server Side Processing

This is my foo table code I can get when Pagination button is clicked want to get the page number of the button click in java script can anyone please help me with this
$(document).ready(function() {
$('.footable').footable();
// $('.footable2').footable();
$('.footable').footable().bind({
'footable_paging': function (e) {
paginateScroll();
}
});
});
function paginateScroll() {
$('html, body').animate({
scrollTop: $(".footable").offset().top
}, 100);
console.log('pagination button clicked'); //remove after test
}

i got it working uses this
$(document).ready(function () {
$('.footable').footable();
$('.footable').footable().bind({
'footable_paging': function (e) {
paginateScroll();
}
});
});
function paginateScroll() {
$('html, body').animate({
scrollTop: $(".footable").offset().top
}, 100);
$("a").click(function () {
var number = $(this).text();
});
}

change a mouseenter event into a timed event

I have the following code that works excellent for a mouseenter event:
$(document).ready(function () {
$(".someClass").mouseenter(function () {
//does some stuff
}).mouseleave(function () {
//does some stuff
});
});
What I am looking for is to change the above so that it is a timed event and does not require the mouse to enter the DIV with the associated class.
Any help would be greatly appreciated.
Regards,
jmcall10

Something like this? (If that's the case, I'll add some comments)
$(function() {
$('.someClass')
.on('mouseenter', function() {
console.log('mouse entered');
})
.on('mouseleave', function() {
console.log('mouse exited');
});
setTimeout(function() { $('.someClass').trigger('mouseenter'); }, 2000);
setTimeout(function() { $('.someClass').trigger('mouseleave'); }, 4000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someClass">Enter your mouse here</div>

First define a timed event: setTimeout(fun, 1000);
Then trigger event which you want in fun: $('.someClass').dispatchEvent(new Event('mouseenter');
May can help you...

Animate scrollTop on scroll event

I have a custom slider. And I want to do a such thing. When user scrolls down it should animate scroll down to next slide, and during this animation user should not be able to scroll. But I have a problem. Scroll event is fired multiple times, and after one animation is done, second one is started, and etc.
Here is my code sample
$(window).scroll(function(e){
if($scrolling){
e.preventDefault();
e.stopPropagation();
}
})
$(window).on('mousewheel', function(event){
$scrolling = true
$('html, body').animate({scrollTop: 'my position here' }, {done: function(){ $scrolling = false; } }, 1000)
});
What I am doing wrong? Thanks in advance!

You can control everything from the mousewheel event alone..
var $scrolling = false;
$(window).on('mousewheel', function(event){
if (!$scrolling){
$scrolling = true;
$('html, body').animate({scrollTop: 'my position here' }, {done: function(){ $scrolling = false; } }, 1000);
}
});

onmouseover show/ hide div and can select the text of div

I want to Show and hide one tooltip on hover of an anchor. but tooltip should be there till my cursor on it.
fiddle
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()}).mouseout(function(){
$(this).parent().find('#reasonTip').slideUp()
}
)
thanks in advance.

Try
jQuery(function ($) {
$('#showReasonTip').hover(function () {
var $target = $('#reasonTip');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown();
}, function () {
var $target = $('#reasonTip');
var timer = setTimeout(function () {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$($('#reasonTip')).hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).slideUp();
});
});
Demo: Fiddle

You should try using mouseleave instead of mouseout and that too on #reasonTip and not on #showReasonTip.
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()
});
$('#reasonTip').mouseleave(function(){
$(this).parent().find('#reasonTip').slideUp()
});
Here's the modified fiddle with a small change in your code.

Is there a more elegant way to write this in javascript?

$(function () {
$('#button').click(function () {
$('html, body').animate({
scrollTop: $(document).height()
},
400);
return false;
});
$('#top').click(function () {
$('html, body').animate({
scrollTop: '0px'
},
400);
return false;
});
});
I'm using that code to scroll to the bottom/top of the page. I'm wondering if there is a better way to write that? I'm new to jquery so I'm not sure but I've heard using event.preventDefault() may be better instead of return false? If so, where would I insert that?

How about just using a ternary to select the scroll? eg
$(function () {
$('#button').add('#top').click(function () {
$('html, body').animate({
scrollTop : ((this.id=='button') ? $(document).height() : '0px')
},
400);
return false;
});
});
JSFiddle for this code here
You could make this better by adding a class eg 'navButton' to each of these buttons and then using that as the selection ie $('.navButton') - This will eliminate the .add() call.
Also I'd recommend giving the bottom button the id bottom rather than button :) eg
$(function () {
$('.navButton').click(function () {
$('html, body').animate({
scrollTop : ((this.id=='bottom') ? $(document).height() : '0px')
},
400);
});
});

Sure:
$(function() {
var map = {'#button': $(document).height, '#top': '0px'};
jQuery.each(map, function(k, v) {
$(k).click(function() {
$(document.body).animate({
scrollTop:(typeof v === 'function') ? v() : v
},
400);
});
});
});

According to jQuery manual return false and preventDefault does different things:
Example: Cancel a default action and prevent it from bubbling up, return false:
$("a").live("click", function() { return false; })
Example: To cancel only the default action by using the preventDefault method.
$("a").live("click", function(event){
event.preventDefault();
});
So preventDefault is more limited.

Using a specialized plugin jquery.scrollTo.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js"></script>
Makes code nice and easy
$(function() {
$('#button').click(function() {
$.scrollTo('max', 400);
return false;
});
$('#top').click(function() {
$.scrollTo(0, 400);
return false;
});
});
Demo: http://jsfiddle.net/disfated/mkZp3/
Also if you want a more flexible code, you could do something like
$(function() {
$(document).on('click', '[data-scroll]', function(e) {
e.preventDefault();
$.scrollTo($(this).data('scroll'), jQuery.fx.speeds._default);
});
});
Then, define scroll behaviour directly in html, example
<button data-scroll="max">scroll to page bottom</button>
<button data-scroll="0">scroll to page top</button>
<button data-scroll="#my_selector">scroll to #my_selector element</button>
Demo: http://jsfiddle.net/disfated/Sj8m7/