Develop Reference

How to call javascript function each time user scrolls

I want to call a javascript function each time Facebook updates their feed for a user (when he scrolls). Any idea how I can do that?
This does not work:
if (document.body.scrollTop > 30) {
addArt();
}
Thank you

Using an onscroll function:
window.onscroll = function() { }

You need to attach it to the window's scroll event listener. I have wrapped it inside an onload event, so that it gets executed after the document is loaded.
window.onload = function () {
window.onscroll = function () {
if (document.body.scrollTop > 30) {
addArt();
}
};
};
Or if you are using jQuery, use:
$(function () {
$(window).scroll(function() {
if (document.body.scrollTop > 30) {
addArt();
}
});
});

Using jquery, you can use this function to run code every time the user scrolls
$( window ).scroll(function() {
$(window).scrollTop() > 30) {
addArt();
}
});
window.onscroll = function() {
if (document.body.scrollTop > 30) {
addArt();
}
};
edit: added none jquery version

jQuery menu in need of additional functionality

I wanted to create a small and lean as possible menu that hides itself on scroll at certain viewport height, shows itself after You click a button, and I did, but I have 2 problems with it:
Here is a Fiddle for You to follow along.
When you show the menu by clicking the button it appears, but the only way for it to go away is if You scroll down or up. How can I make it dissapear if I click somewhere out of the #sideBar container e.g. the site.
When You refresh the page using a soft-refresh (F5) the menu appears because the browser understands that as if the page have been scrolled. Is there a way to bypass this as well?
Here is some code, just because the fiddle requires it:
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
} else {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
});
$(document).ready(function(){
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
});
Thanks in advance!

Test the target:
DEMO
function hideIt() {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
function showIt() {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
hideIt()
} else {
showIt();
}
});
$(function(){
if ($(document).scrollTop() < 400) showIt(); // show at start
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) hideIt();
});
});
Here is a shorter version
DEMO
function toggleIt(show) {
if (show) {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
else {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
}
$(document).scroll(function () {
var y = $(this).scrollTop();
toggleIt(y > 400);
});
$(function(){
toggleIt($(document).scrollTop()<400);
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) toggleIt(false);
});
});

I can help with the first question, you can change your JQuery code below so that when the parent 'content' container is clicked the menu slides up.
$(document).ready(function(){
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});
I'm not sure I follow the second question? Please can you provide more information on what you mean.

For Question 1, Just put the following code in ready function
$('#content').click(function(){
$('#sideBar').slideUp();
});
EDITED
For Question 2, put following code in ready function
$(document).trigger('scroll');
In short, your ready function should look like
$(document).ready(function(){
$(document).trigger('scroll');
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});

A child, combination of #mplungjan and #Gagan Jaura's responses seems to do the job:
function hideIt() {
$('#sideBar').slideUp("fast");
$('#menuButton').fadeIn();
}
function showIt() {
$('#sideBar').slideDown("slow");
$('#menuButton').fadeOut();
}
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 400) {
hideIt()
} else {
showIt();
}
});
$(function(){
showIt(); // show at start
$('#menuButton').click(function(){
$('#sideBar').slideDown();
});
$(document).on("click",function(e) {
var target = $(e.target);
var show = target.is("#sideBar") ||
target.is("#menuButton") ||
target.parent().is("#menuButton");
if (!show) hideIt();
});
});
$(document).ready(function(){
$(document).trigger('scroll');
$('#menuButton').click(function(){
$('#sideBar').slideDown();
})
$('#content').click(function(){
$('#sideBar').slideUp();
})
});

Why doesn't the pop up close when opened from inside an UpdatePanel

JQuery (inside the head function in my webform):
function DoThisEM() {
centerPopupEM();
loadPopupEM();
}
function DoThatEM() {
disablePopupEM();
}
var popupStatusEM = 0;
//loading popup with jQuery magic!
function loadPopupEM() {
//loads popup only if it is disabled
if (popupStatusEM == 0) {
$("#backgroundPopupEM").css({
"opacity": "0.7"
});
$("#backgroundPopupEM").fadeIn("slow");
$("#popupContactEM").fadeIn("slow");
popupStatusEM = 1;
}
}
//disabling popup with jQuery magic!
function disablePopupEM() {
//disables popup only if it is enabled
if (popupStatusEM == 1) {
$("#backgroundPopupEM").fadeOut("slow");
$("#popupContactEM").fadeOut("slow");
popupStatusEM = 0;
}
}
//centering popup
function centerPopupEM() {
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContactEM").height();
var popupWidth = $("#popupContactEM").width();
//centering
$("#popupContactEM").css({
"position": "absolute",
"top": windowHeight / 2 - popupHeight / 2,
"left": windowWidth / 2 - popupWidth / 2
});
//only need force for IE6
$("#backgroundPopupEM").css({
"height": windowHeight
});
}
$("body").on('click', "#popupContactCloseEM", function (e) {
//e.preventDefault();
alert('popupContactCloseEM');
disablePopupEM();
});
$("body").on('click', "#backgroundPopupEM", function (e) {
//e.preventDefault();
alert('backgroundPopupEM');
disablePopupEM();
});
GridView:
Popup (when clicked on any of the edit icon:
I am not sure why but when I click on the x or the background around the popup, the disablePopupEM function is not called to close it. I even added a test alert and I am not seeing that either.
Please help me resolve the issue.

For me that sounds very similar to this: You assign click handlers to elements which do not yet exist because the DOM did not finish loading yet (e.g. the JavaScript is initialized before your HTML).
I would try to attach the click handlers inside the $(document).ready() funtion, which will be called once the DOM is fully loaded - then the elements are available and they will be attached with your handler.
$(document).ready(function() {
$("body").on('click', "#popupContactCloseEM", function (e) {
//e.preventDefault();
alert('popupContactCloseEM');
disablePopupEM();
});
$("body").on('click', "#backgroundPopupEM", function (e) {
//e.preventDefault();
alert('backgroundPopupEM');
disablePopupEM();
});
});
As you see, you only need to surround it by that ready function.

this.attribute is not defined after being constructed

Hi there I made a very small jquery plugin:
$mandarina = {
mainCnt: $('#main'),
header: $('header.site-header'),
init: function () {
this.onScroll();
},
onScroll: function () {
$(window).scroll(function(e){
var scrollTop = $(window).scrollTop();
if(scrollTop > this.header.height()){
this.mainCnt.addClass('fixed-header');
}else{
this.mainCnt.removeClass('fixed-header');
}
});
}
}
$(function () {
$mandarina.init();
});
But when I scroll I get this error in console:
TypeError: this.header is undefined
[Parar en este error]
if(scrollTop > this.header.height()){
Any idea why?
weird thing is that this.header in the init function it does exist..

Inside the scroll callback, this is the window element rather than your $mandarina object. You need to save a reference to $mandarina via;
onScroll: function () {
var that = this;
$(window).scroll(function(e){
var scrollTop = $(window).scrollTop();
if(scrollTop > that.header.height()){
that.mainCnt.addClass('fixed-header');
}else{
that.mainCnt.removeClass('fixed-header');
}
});
}
... i.e. store the value of this in that, and use that instead of this inside the event handler.

try this
$mandarina = {
mainCnt: $('#main'),
header: $('header.site-header'),
init: function () {
this.onScroll();
},
onScroll: function () {
var $this= $(this);
$(window).scroll(function(e){
var scrollTop = $(window).scrollTop();
if(scrollTop > $this.header.height()){
$this.mainCnt.addClass('fixed-header');
}else{
$this.mainCnt.removeClass('fixed-header');
}
});
}
}
$(function () {
$mandarina.init();
});

this.header.height
you need to remove this

Call a function when window is resized

How can I call for this(or any) JS function to be run again whenever the Browser window is resized?
<script type="text/javascript">
function setEqualHeight(e) {
var t = 0;
e.each(function () {
currentHeight = $(this).height();
if (currentHeight > t) {
t = currentHeight
}
});
e.height(t)
}
$(document).ready(function () {
setEqualHeight($(".border"))
})
</script>

You can use the window onresize event:
window.onresize = setEqualHeight;

You can subscribe to the window.onresize event (See here)
window.onresize = setEqualHeight;
or
window.addEventListener('resize', setEqualHeight);

This piece of code will add a timer which calls the resize function after 200 milliseconds after the window has been resized. This will reduce the calls of the method.
var globalResizeTimer = null;
$(window).resize(function() {
if(globalResizeTimer != null) window.clearTimeout(globalResizeTimer);
globalResizeTimer = window.setTimeout(function() {
setEqualHeight();
}, 200);
});

You use jquery, so bind it using the .resize() method.
$(window).resize(function () {
setEqualHeight( $('#border') );
});