Develop Reference

If window width doesn't work on resize

I've created a function that has to run only if the window is wider than 769px. It works when the page loads, but not on resize...
It looks like this:
$(window).on('load resize', function () {
if ($(window).width() >= 769) {
...funcion...
}
});
EDITED:
Full code below
$(window).on('load resize', function () {
if ($(window).width() >= 769) {
var $element = $('#cont_quote');
var $follow = $element.find('.img_quote');
var followHeight = $element.find('.img_quote').outerHeight();
var height = $element.outerHeight() - 300;
var window_height = $(window).height();
$(window).scroll(function () {
var pos = $(window).scrollTop();
var top = $element.offset().top;
// Check if element is above or totally below viewport
if (top + height - followHeight < pos || top > pos + window_height) {
return;
}
var offset = parseInt($(window).scrollTop() - top);
if (offset > 0) {
$follow.css('transform', 'translateY('+ offset +'px)');
}
})
}
});
HTML:
<section id="cont_quote">
<article class="cont_q">
Lorem ipsum
<img class="img_quote" src="img">
</article>
</section>

Try something like this:
$(document).ready(function(){
$(window).resize(function(){
if ($(window).width() >= 769) {
...funcion...
}
}
}
You can change on ready or on load, depending on what you need, but the the function should trigger on window resize.

I think you can try this solution this is just javaScript
var onWindowResize = function(e) {
width = e.target.outerWidth;
//uncomment if need height = e.target.outerHeight;
if(width >= 769) {
//remove alert just added for debug
alert("if");
}
else{
//remove alert
alert("else");
}
}
window.addEventListener("resize", onWindowResize);

restart function scroll on resizing

I'm trying to run a scroll function on desktop. I perform calculations to position a block on the page according to the user's screen size.
I'm looking in all directions, I do not see how to do that when I resize the size of the screen the function is restarted.
methods: {
handleScroll: function() {
let hW = $(window).height();
let WW = $(window).width();
let position = $(window).scrollTop();
$(window).scroll(function() {
let scroll = $(window).scrollTop();
if (
scroll > position
&& WW >= 768
){
// thing...
console.log('down');
} else if(
scroll < position
&& WW >= 768
// thing...
){
// thing...
console.log('up')
}
position = scroll;
});
}
},
mounted () {
this.handleScroll();
}

jQuery detect DPI change

I try now for half a day to detect a DPI change with jQuery.
The scenario is the following:
I have a MacBook Pro (Retina) and a regular screen connected to it. When I move my browser window from the regular one to the MacBooks I want to detect the DPI change.
Obviously events like
$(window).resize(function() {
if (window.devicePixelRatio && window.devicePixelRatio >= 1.3) {
// do retina
} else {
// do standard
}
}
and
$(document).resize(function() {
if (window.devicePixelRatio && window.devicePixelRatio >= 1.3) {
// do retina
} else {
// do standard
}
}
dont work for this, since the resolution just changed physically.
Is there any way to realize this?

I have just tried with my second monitor having a different resolution.
When I move the browser from the first to second screen and back I have to resize the browser so your approach is correct:
var width = screen.width;
var height = screen.height;
$(window).on('resize', function(e) {
if (screen.width !== width || screen.height !== height) {
width = screen.width;
height = screen.height;
console.log('resolution changed!');
}
});
But, if you don't want to adjust the browser height or width this event will be never triggered. In this case another approach can be used as a workaraound:
two functions in order to:
on time basis test the current browser resolution against the old one
stop this timer
use the event
(function ($) {
var width = screen.width;
var height = screen.height;
var idTimer = null;
$.fn.startCheckResolution = function (interval) {
interval = interval || 50;
idTimer = setInterval(function () {
if (screen.width !== width || screen.height !== height) {
width = screen.width;
height = screen.height;
$(this).trigger('resolutionChanged');
}
}.bind(this), interval);
return this;
};
$.fn.stopCheckResolution = function () {
if (idTimer != null) {
clearInterval(idTimer);
idTimer = null;
}
};
}(jQuery));
$(window).startCheckResolution(1000).on('resolutionChanged', function(e) {
console.log('Resolution changed!');
// $(window).stopCheckResolution();
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

How about using transition events and a media query
CSS:
body {
transition:font-size 1ms;
font-size:1em;
}
#media only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
body {
font-size:1.1em
}
}
JS:
$("body").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
$(document).trigger('dpiChange', {pixelRatio: window.devicePixelRatio})
});
$(document).on('dpiChange', function (e, data) {
if (data.pixelRatio >= 1.3) {
// do retina
console.log('retina')
} else {
// do standard
console.log('standard')
}
})
JSBIN:
http://jsbin.com/siramo/1/edit?html,css,js,console
Great Retina Specific Media Query Tutorial:
https://css-tricks.com/snippets/css/retina-display-media-query/

Disabling Mousewheel JS horizontal scroll under certain screen size

I'm using .mousewheel to translate my downwards scroll into horizontal scroll on desktop, however for mobile I want to disable this behavior. I have tried the following:
if ( $(window).width() > 480) {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * -0.5);
e.preventDefault();
});
}
else {
$("html, body, *").bind("mousewheel", function() {
return false;
});
}
But no success, the horizontal scrolling works fine but the body content is still locked in place on mobile.

To get the viewport width:
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
Then you can just make a small change to your if statement:
if (viewportWidth > 480) { ... }
Full code example
This includes a little "fix-up" with the way that the scroll translation was happening - I couldn't get the previous way to work.
var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (viewportWidth > 480) {
$('body').mousewheel(function(e) {
$(this).scrollLeft($(this).scrollLeft() - e.deltaY);
e.preventDefault();
});
} else {
$("body").on("mousewheel", function() { return false; });
}

Resize image depending on window height

As per the title, I want to be able to reduce image size when window height becomes smaller.
It's working for reducing part but I want it to get the original height back when window height is greater than specified.
I know this part $('.model').height(); is wrong.
$(window).on('load resize', function() {
var h = $(window).height();
if (h < 850) {
$('.model').height(600);
} else {
$('.model').height();
}
});

You can try to store the height of .model in a variable and restore it like this:
var originalHeight = $('.model').height();
$(window).on('load resize', function() {
var h = $(window).height();
if (h < 850) {
$('.model').height(600);
} else {
$('.model').height(originalHeight);
}
});

try putting height back into (the default) "auto" when you want the original size back?
$(window).on('load resize', function() {
var h = $(window).height();
if (h < 850) {
$('.model').height(600);
} else {
$('.model').css("height","auto");
}
});