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

How to detect if the scroll value is more then the windows height?

In my case the header become fixed on scroll, but only visible when when we scroll up a little bit, and when we scroll down it hides, thats all working fine.
Requirement: The header should only visible if i scroll up and the scroll should be at least of the windows height. For example if my windows height is 700 px, then the header should only visible once i scroll the page 700px up, and hides instantly when i scroll it down.
Thanks in advance.

Try this:
$(window).scroll(function(){
var containerHeight = $('.section-1').height();
var windowHeight = ( $(window).scrollTop() );
if( windowHeight > containerHeight ){
$(".header").removeClass('header-solid');
} else {
$('.header').addClass('header-solid');
}
});

Use this code:
Demo: http://output.jsbin.com/ricohevexu
<script>
$(window).scroll(function (e) {
var height = $(window).scrollTop();
var winheight = $(window).height();
if(height > winheight) {
// Do something
console.log("Scroll height is more that window height!");
}
});
</script>

1.get position relative to body
get offset position relative to parent element, if parent node is not body, continue.
2.get scroll position
it depends on how to scroll. if native scroll, get scroll value by element.scroll is ok. if use transform, have to get transform x or y value
3.body position - scroll position
example:
export const getBodyLeft = (e:HtmlElement) => {
let offsetLeft = el.offsetLeft;
const offsetParent = el.offsetParent;
if (el.offsetParent && el.offsetParent.nodeName.toUpperCase() !== 'BODY'){
offsetLeft += getBodyLeft(<HTMLElement>el.offsetParent);
}
return offsetLeft
}
export const getViewTop = (el: HTMLElement, view: HTMLElement) => {
const bodyTop = getBodyTop(el);
const scrollView = view || document.body;
let scrollTop = scrollView.scrollTop;
let transformTop = 0;
const transform = getComputedStyle(<Element>view).transform;
if (transform) {
const matrix = transform.match(/((-|\d|\.)+)/g) || [];
const len = matrix.length;
if (matrix && len > 0) {
transformTop = Math.abs(Number(matrix[matrix.length - 1]));
}
}
scrollTop += transformTop;
return bodyTop - scrollTop;
}

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

Animate element on scroll

I would like to animate a div when user scrolls the page.
For that, i implemented this code:
var slide = jQuery(".apresentacao-spc-01");
var opening = false;
var closing = false;
var pos = jQuery(window).scrollTop();
jQuery(window).scroll(function() {
var pos = jQuery(window).scrollTop();
console.log(pos);
if (pos > 100) {
if (!opening) {
opening = true; closing = false;
slide.stop().animate({
'opacity': 1,
'margin-left': '0px'
}, 700, function() {
opening = false;
});
}
} else {
if (!closing) {
closing = true; opening = false;
slide.stop().animate({
'opacity': 0,
'margin-left': '-1000px'
}, 500, function() {
closing = false;
});
}
}
});
The issue is:
Using "if (pos > 100) {", if the user resolution is big enough to show the element before he needs to scroll, he won't see the element unless he begins to scroll the page.
My question is:
How can I get a scroll animation that will be executed when the element is visible?
I mean: If the element is visible on page load, the animation automatically starts... If the element is not visible on page load, the animation waits the scroll reach the element to start...
Thanks.

There a few different things you could do. My first thought was to query the height of the viewport with something like this:
var viewportWidth = document.documentElement.clientWidth
, viewportHeight = document.documentElement.clientHeight
And then trigger the animation if it is taller than the distance the element is down.
A more dynamic solution would be to use a function that checks to see if the element is in viewport the automatically, that way you wouldn't need to worry about adjusting the height if you changed stuff on your page:
function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
credit to this response.
There is a use guide and further information in the link provided.
Good luck!

JS detect mobile & desktop width & resize AND reload

I have a function that detects the window width and based on that does jquery things that mobile would have and does jquery things for desktop. I have two functions, one that alters content resize and one on reload. What I am trying to do is combine the two into one function. The problem now is anything in the resize function just resizes. Even $("html").width();
Anyone have any ideas or solutions? Thanks.
//ON RESIZE
$(window).resize(function () {clearTimeout(this.id);this.id = setTimeout(checkTimer, 500);});
function checkTimer() {
var width = $(window).width();
//MOBILE
if (width < 640) {
mobileView();
}
//TABLET
else if (width > 640 && width <966) {
appendFix();
}
//DESKTOP
else if (width >966) {
appendFix();
}
};
//ON RELOAD
var width2 = $(window).width();
//MOBILE
if (width2 < 640) {
mobileView();
};
//TABLET
if (width2 > 640 && width2 <966) {
appendFix();
};
//DESKTOP
if (width2 > 966) {
appendFix();
};

Think I found the solution.
$(window).resize(function () {clearTimeout(this.id);this.id = setTimeout(mobileSize, 500);});
function mobileSize() {
sizes();
}
$(window).load(function() {
sizes();
});
function sizes() {
var width = $(window).width();
if (width < 640) {
}
else if (width > 640 && width < 966) {
}
else if (width > 966) {
}
}