Develop Reference

the div doesn't come back to its place when the div the window is resized

the div moves without problem below 768, but when I resize above it does not return to its original place.
jQuery(document).ready(function($) {
$(window).resize(function(){
if ( $(window).width() < 768) {
$('#div_block-61-89').detach().prependTo('.offcanvas-inner');
};
});
});
any help please

What you need is store original position of the element before it's moved and than restore it to that position if window size is less than 768
jQuery(document).ready(function($) {
$(window).resize(function() {
const div = $('#div_block-61-89');
const domPos = div.data("domPos");
if ($(window).width() < 768) {
if (!domPos) //store position
div.data("domPos", {el: div.next()||div.parent(), func: div.next() ? "before" :"append"});
div.prependTo('.offcanvas-inner');
}
else if (domPos) //less than 768
{
//restore position
domPos.el[domPos.func](div);
//remove stored position
div.data("domPos", null);
}
}).trigger("resize");//check resize on startup
});

jQuery to find height of H3 after each prepend has added them all

Any ideas what I am doing wrong here? I have tried adding within the each as well but ended up being like 415px in height which was incorrect as only 2 lines of text so should be around 40px.
As you will see it creates the H3 heading in the each, but what I need to do after the the each is complete is find the highest heading so I can then set the height of all the others.
$(document).ready(function() {
// rebuild product options display
$('.rebuild_options .ty-product-options .ty-product-options__item').each(function(i, obj) {
var option_title = $(this).find('.ty-product-options__item-label').text().replace(":", "");
var option_html = $(this).find('.ty-product-options__item-label span a').attr('title');
var $option_content = $(option_html);
var option_html_text = $option_content[0].innerHTML;
var option_html_img = $option_content[1].innerHTML;
$(this).find('.ty-product-options__box').hide();
$(this).find('.ty-product-options__item-label').addClass('input-text cm-hint');
$(this).find('.ty-product-options__item-label').attr('title',option_html_text);
$(this).find('.ty-product-options__item-label').html(option_html_img);
$(this).find('.ty-product-options__item-label').prepend('<i class="option-status-icon ty-icon-star-empty"></i>');
$(this).find('.ty-product-options__item-label').prepend("<h3 class='option-heading'>"+option_title+"</h3>");
});
var maxHeight = 0;
$('.ty-product-options__item-label h3').each(function(i, obj) {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
$(this).height(maxHeight);
});
});

$('.ty-product-options__item-label h3').each(function(i, obj) {
if ($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
}).height(maxHeight);
You should assign the height to all h3's after calculating max by chaining it after the each function.

How to apply .on('load'), .scroll(), and .resize() to a sticky scroller

I have a functionality that sets the top position of a div (#sticky) on load and on scroll. But of course the variables will change as the size of the page changes, so I have need for the .resize() event.
When I run the code on page load and on scroll, it works fine but if I resize the page, then scroll the top position of #sticky gets set to 0.
How do I correct this problem?
$(document).ready(function(){
sticky = $('#sticky'),
stickyPadding = 80;
if($(sticky).length && ($(window).width() >= 900)){
$(sticky).css('position','relative');
$(window).on('load',function(){
getStickyMeasurements();
stickEl()();
$(window).resize(function(){
getStickyMeasurements();
});
$(window).scroll(stickEl());
});
}
});
function getStickyMeasurements(){
elHeight = $(sticky).outerHeight();
initialElToTop = $(sticky).offset().top;
dynamicStickyLimiter = $('.entry-content-extra').length ? $('.entry-content-extra').offset().top : $('footer').offset().top
stickyLimit = dynamicStickyLimiter - initialElToTop;
}
function stickEl(){
return function(){
elTopModifier = $(window).scrollTop() - initialElToTop;
if( stickyLimit <= (elTopModifier + elHeight + stickyPadding)){
stickyTopResult = stickyLimit - elHeight;
}else if($(window).scrollTop() + stickyPadding >= initialElToTop){
stickyTopResult = elTopModifier + stickyPadding;
}else{
stickyTopResult = 0;
}
$(sticky).css('top', stickyTopResult + 'px');
}
}
Also, I know the scope of my variables needs work, so if you include that in part of your answer, that would be helpful as well (but not required of an accepted answer).

Only execute JS if the screen size is more than 1024px?

I have a sidebar that becomes position:fixed when the bottom of the div is visible (followed this tutorial). My problem is I only need the JS to work if the screen size is more than or equal to 1025px.
I know I need something along the lines of if($(window).width() > 1025), but I can't figure out where that needs to be. I'm not great with JS so any help would be appreciated.
Demo
JS
$(function () {
if ($('.leftsidebar').offset()!=null) {
var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
var height = $('.leftsidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 100;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',winHeight-height-gap +'px');
}
else if (y+winHeight>footerTop) {
// if so, add the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',footerTop-height-y-gap+'px');
}
else
{
// otherwise remove it
$('.leftsidebar').removeClass('leftsidebarfixed').css('top','315px');
}
});
}
}

This should work:
var flag = false;
// This will keep on checking for window size while you are scrolling.
$(window).on("scroll", function() {
if (flag){
// Do whatever you want here
alert("hey");
}
});
$(window).on("resize", function() {
if ($(window).width() >= 1025){
flag = true;
} else {
flag = false;
}
})

From my comment: Just put that if($(window).width() > 1025) inside the function provided to the scroll event.
e.g.
$(window).scroll(function (event) {
if ($(window).width() > 1024) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y + winHeight >= top + height + gap && y + winHeight <= footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight - height - gap + 'px');
} else if (y + winHeight > footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop - height - y - gap + 'px');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/3w5dt/31/
Notes:
not that 1 PX matters, but you did say > 1024px, hence changing 1025 to 1024 :)

First of all you should have a look at the jQuery documentation. The $.browser function was removed in jQuery 1.9. This can end up in serious problems in your code.
Just add something like the follwing code in the first if condition:
if (!msie6 && $('.leftsidebar').offset()!=null && $(window).width() > 1025 ) {
...
}
That should be all. If you want, that javascript should react on window resize just add something like the following
$(window).on('resize', function( event ) { /* code here */ }).trigger('resize');

if(screen.width >= 1024)
{
$(window).scroll(function (event) {
//Write your function code here
});
}
I hope it will help you.

How do I add class to body when div height is smaller than window?

I'm trying to add a class to the body if a certain divs height is smaller than the users window size. Here is my current jQuery script. It doesn't work very well, and I don't get any errors. Not sure what I'm doing wrong.
Thanks
jQuery(document).ready(function($) {
var $window = $(window);
var $pageHeight = $('.wrap').height();
function checkWidth() {
var windowsize = $window.height();
if (windowsize < $pageHeight) {
$('body').addClass('need-padding');
}
}
checkWidth();
$(window).resize(checkWidth);
});

Try this... no need to create separate function :
$(window).resize(function(){
var $windowHeight = $(window).height();
var $blockHeight = $('.wrap').height();
if ($blockHeight < $windowHeight ) {
//console.log($windowHeight+" Window Height");
//console.log($blockHeight+" Block Height");
$('body').addClass('need-padding');
}
});

Generally, the code looks ok. But if your $('.wrap') has margins or borders, you might want to use use .outerHeight() instead of .height().

Here's a fiddle that shows what's going on:
http://jsfiddle.net/4fqb8t1q/
$(document).ready(function() {
checkWidth();
$(window).resize(checkWidth);
});
function checkWidth() {
var $pageHeight = $('.wrap').height();
alert($(window).height() + " < " + $pageHeight);
if ($(window).height() < $pageHeight) {
$('body').addClass('need-padding');
}
}