Develop Reference

Get one jQuery media query to fire

I have three CSS #media queries and I need to run some JavaScript to measure the height of a div and move a second div on some screen sizes. The issue is that all of my queries are applying, obviously because they all return true. How can I adjust this so that only one of the conditionals fire in jQuery, similarly to CSS?
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function () {
console.log($(window).width());
if ($(window).width() <= 1024) {
console.log ('tab land');
}
if ($(window).width() <= 980) {
console.log ('tab port');
}
if ($(window).width() <= 479) {
console.log ('phone port');
}
});
});

Use else if and check from mobile upwards:
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function() {
console.log($(window).width());
if ($(window).width() <= 479) {
console.log('phone port');
} else if ($(window).width() <= 980) {
console.log('tab port');
} else if ($(window).width() <= 1024) {
console.log('tab land');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You could adjust your conditions:
//Responsive Adjustments
jQuery(document).ready(function($) {
$(window).resize(function() {
console.log($(window).width());
if ($(window).width() <= 1024 && $(window).width() > 980) {
console.log('tab land');
}
if ($(window).width() <= 980 && $(window).width() > 479) {
console.log('tab port');
}
if ($(window).width() <= 479) {
console.log('phone port');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How to hide logo at different scroll point depending on screen width

Trying to hide the logo on a sticky nav when it scrolls to 72 pixels, but on smaller screens it needs to hide when it gets to 150 pixels.
I tried to just hide it at 72 pixels but on the smaller screens it starts flashing because the element being hidden causes the scroll point to change and so it shows again, going into a loop.
jQuery(document).ready(function() {
if ($(window).width() <= 992){
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 150) {
jQuery('.fl-page-header-logo').fadeOut(500);
} else {
jQuery('.fl-page-header-logo').fadeIn(500);
}
} else {
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 72) {
jQuery('.fl-page-header-logo').fadeOut(500);
} else {
jQuery('.fl-page-header-logo').fadeIn(500);
}
});
});

You're not closing the jquery scrolling function. Its missing });
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 150) {
jQuery('.fl-page-header-logo').fadeOut(500);
} else {
jQuery('.fl-page-header-logo').fadeIn(500);
}
});
Can't really tell why it wouldn't work otherwise.
Anyways, try this. It worked for me and it's cleaner :
var windowsWidth = $(window).width();
if (windowsWidth <= 992){
fadeOutLogo(72);
} else {
fadeOutLogo(150);
}
function fadeOutLogo(offset){
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.fl-page-header-logo').fadeOut(500);
} else {
jQuery('.fl-page-header-logo').fadeIn(500);
}
});
}

How reverse animations made with scrollTop();

function firstAnimation() {
$('.etc(1)').fadeIn();
}
function secondAnimation() {
$('.etc(1)').fadeOut();
$('.etc(2)').fadeIn();
}
function thirdAnimation() {
$('.etc(2)').fadeOut();
$('.etc(3)').fadeIn();
}
function fourthAnimation() {
$('.etc(3)').fadeOut();
$('.etc(4)').fadeIn();
}
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
firstAnimation();
}
if ($(this).scrollTop() > 300) {
secondAnimation();
}
if ($(this).scrollTop() > 450) {
thirdAnimation();
}
if ($(this).scrollTop() > 600) {
fourthAnimation();
}
});
Guys, i'm using scrollTop() to animate a piece of my site, and i was wondering if i can reverse the animation if o scroll to the bottom, and not to the top.
I was searching but there isn't a scrollBottom in jquery.

First, set an additional requirement for each if statement to condition each event to a scroll range to prevent multiple events from being triggered. Second, add a .fadeOut() function to the next elements so that the effect is reversed when the user scrolls the opposite direction.
The code should look like:
function firstAnimation() {
$('.etc1').fadeIn();
$('.etc2').fadeOut();
}
function secondAnimation() {
$('.etc1').fadeOut();
$('.etc2').fadeIn();
$('.etc3').fadeOut();
}
function thirdAnimation() {
$('.etc2').fadeOut();
$('.etc3').fadeIn();
$('.etc4').fadeOut();
}
function fourthAnimation() {
$('.etc3').fadeOut();
$('.etc4').fadeIn();
}
$(window).scroll(function() {
if ($(this).scrollTop() > 1500 && $(this).scrollTop() < 3000) {
firstAnimation();
}
if ($(this).scrollTop() > 3000 && $(this).scrollTop() < 4500) {
secondAnimation();
}
if ($(this).scrollTop() > 4500 && $(this).scrollTop() < 6000) {
thirdAnimation();
}
if ($(this).scrollTop() > 6000) {
fourthAnimation();
}
});
Demo on JSFiddle

To scroll to the bottom of the document, try:
$(window).scrollTop($(body).height());

$(window).load(function() {
$("html, body").animate({ scrollTop: $(document).height() });
});

resize window in jquery

I have a tooltip that might be appear in 2 position : top & bottom
i want do this with jquery resize. when user resize his browser in with less than 768px , my tooltip appear on the top position and when greater than 768px appear on bottom position but resize() wont work!!
$(window).ready(function () {
if ($(window).width() >= 768) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'bottom'});
});
}
else if ($(window).width() <= 767) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'top'});
});
}
$(window).resize(function () {
var wi = $(window).width();
if (wi >= 768) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'bottom'});
});
}
else if (wi <= 767) {
$(document).ready(function () {
$(".green-tooltip").tooltip({placement: 'top'});
});
}
});
});

Something like this might work out for u mate.. :)
$(window).ready(function () {
if ($(window).width() >= 768) {
$(".green-tooltip").tooltip({
placement: 'bottom'
});
} else if ($(window).width() <= 767) {
$(".green-tooltip").tooltip({
placement: 'top'
});
}
});
$(window).resize(function () {
var wi = $(window).width();
if (wi >= 768) {
$(".green-tooltip").tooltip({
placement: 'bottom'
});
} else if (wi <= 767) {
$(".green-tooltip").tooltip({
placement: 'top'
});
}
});
Fiddle

Window width jquery with slice

Have this code:
$(window).resize(function () {
if ($(window).width() >= 320 && $(window).width() <= 480) {
$(".projects").slice(0, 8).css("margin", "10px");
} else if ($(window).width() > 480){
$(".projects").slice(3, 6).css("margin", "10px");
};
})
My question is:
The slice 3,6 the default. How can make this display without window resize as default on page load.
And how can do that if width greater than 480px then only do slice 3,6 all other slice is default option?

Put it in a named function.
Fiddle.
function slice_it() {
if ($(window).width() >= 320 && $(window).width() <= 480) {
$(".projects").slice(0, 8).css("margin", "10px");
} else if ($(window).width() > 480){
$(".projects").slice(3, 6).css("margin", "10px");
};
}
$(window).resize(slice_it);
slice_it(); // <--- on load
And if I read your second bullet point correctly:
function slice_it() {
if ($(window).width() > 480){
$(".projects").slice(3, 6).css("margin", "10px");
} else {
$(".projects").slice(0, 8).css("margin", "10px");
}
}
Edit:
As per last fiddle in comment. If that is correct you should consider using each as in:
function slice_it() {
if ($(window).width() > 480) {
$(".projects").slice(0, 8).each(function(i) { // Pass index "i"
if (i < 3 || i > 5) { // Here you check for index
$(this).css("margin", "");
} else {
$(this).css("margin", "10px");
}
});
} else {
$(".projects").slice(0, 8).css("margin", "10px");
}
}
In general, using .css("margin", ""); in effect resets style to default.
You could also drop the slice all together and loop by each on $(".projects").each(....
To break a jQuery .each loop return false. Example:
$(".projects").each(function(i) {
if (i > 7)
return false; // This aborts the each loop.
... do other stuff ...
});