Develop Reference

JQuery function with media width

I created a JQuery script, which fade in a sidebar, when scrolling down for 500px. This is working without any errors. However, I tried to wrap it in another function, which checks the media size. The fade in should only work, if the media size is greater than 1024. It does not work and I don't get any error in the console. Can you pls help me?
jQuery(function($) {
function checkPosition() {
if (window.matchMedia('(min-width: 767px)').matches) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$("body").addClass("right_side_menu_opened");
$(".side_menu").addClass("nav-fade");
}
else {
$("body").removeClass("right_side_menu_opened");
$(".side_menu").removeClass("nav-fade");
}
});
} else {
}
}
});

You have wrapped the whole JS inside a function which never gets called.
You should
remove the function declaration (function checkPosition())
or call the function (checkPosition())
Removing the declaration:
jQuery(function($) {
if (window.matchMedia('(min-width: 767px)').matches) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$("body").addClass("right_side_menu_opened");
$(".side_menu").addClass("nav-fade");
}
else {
$("body").removeClass("right_side_menu_opened");
$(".side_menu").removeClass("nav-fade");
}
});
} else {
}
});
Calling the function:
jQuery(function($) {
function checkPosition() {
if (window.matchMedia('(min-width: 767px)').matches) {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$("body").addClass("right_side_menu_opened");
$(".side_menu").addClass("nav-fade");
}
else {
$("body").removeClass("right_side_menu_opened");
$(".side_menu").removeClass("nav-fade");
}
});
} else {
}
}
checkPosition();
});
Note: if you want to check viewport size, you could use $(window).width(); to get the width of viewport.

Script not running in modal window

I've got a script that changes the background when an anchor touches the top of the page.
https://jsfiddle.net/u9pexc4v/
var targetOffset = $("#anchor-point").offset().top;
var $w = $(window).scroll(function () {
if ($w.scrollTop() > targetOffset) {
$(".projectTitle").addClass("topper");
} else {
$(".projectTitle").removeClass("topper");
}
});
However, it does not work when it's inside the modal window.
https://jsfiddle.net/qhrmtass/

I believe you need to attach the scroll event to the element that's scrolling.
$('.remodal').scroll(function () {
console.log('Scrolling...');
if ($('.remodal').scrollTop() > targetOffset) {
$(".projectTitle").addClass("topper");
} else {
$(".projectTitle").removeClass("topper");
}
});
Updated fiddle

jQuery function (Window resized)

Here is my code :
jQuery(document).ready(function (e) {
resized();
jQuery(window).resize(resized);
function resized() {
wd = parseInt(jQuery(window).width());
if (wd >= 992) {
var wrhei = jQuery(document).height();
jQuery('#menu').height(wrhei);
}
}
});
I want to call function when I resize the page without refreshing the page just when I resize function happen

Here is the code / approach, I am using in my project and it works great.
Call the $(window).resize function in the document ready event as shown below,
$(document).ready(function () {
$(window).resize(function () {
Resized();
});
});
function Resized()
{
//your code here
}

You can try :
jQuery(window).on('resize', function(e) {
wd = parseInt(jQuery(window).width());
if (wd >= 992) {
var wrhei = jQuery(document).height();
jQuery('#menu').height(wrhei);
}
});

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.

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') );
});