How do I remove/disable the scrollTop function with JavaScript / jQuery? - javascript

I'm trying to write a script that has several variable and functions. The script is for a navbar and it should do the following:
On scroll:change bg from transparent to solid, and change logo img.
On small screens:change bg from transparent to solid, and change logo img.
The problem is that I can get it to work with one or the other but not both.
What happens is the resize works on small screen UNTIL you scroll down and back up. When it hits the top it the background goes back to transparent.
Is there a way to remove the scrollTop function on smaller screens? I feel like removing/disabling this function would fix the problem.
*** Is there a way to do something like this? ***
if (width < 786) {
//REMOVE scrollTop;//?
}
I'm just trying to figure out how to remove the scrollTop function if the screen is small.
I have tried placing the functions in separate scripts, and also using #media css, which comes the closest to working so far, but the "green" logo disappears when scroll hits top.
$(document).ready(function() {
$(window).scroll(function() {
$(window).resize(function() {
var height = $('.first-container').height();
var scrollTop = $(window).scrollTop();
var width = $(window).width();
if (scrollTop >= 0 || width < 768) {
$('.nav-container').addClass('solid-nav') &&
$('.navbar-brand img').attr('src','images/new-green-sm.png');
} else {
$('.nav-container').removeClass('solid-nav') &&
$('.navbar-brand img').attr('src','images/new-white-sm.png');
}
});
});
});

Just run this when you want to test the width to remove the function.
if (width < 768) {
scrollTop = function(){};
};

You could just always set scrollTop to 0 if width < 768 instead of calling the scrollTop method :
$(document).ready(function() {
$(window).scroll(function() {
$(window).resize(function() {
var height = $('.first-container').height();
var width = $(window).width();
// Set scrollTop always to 0 if width < 768
var scrollTop = (width < 768) ? 0 : $(window).scrollTop();
if (scrollTop >= 0 || width < 768) {
$('.nav-container').addClass('solid-nav') &&
$('.navbar-brand img').attr('src','images/new-green-sm.png');
} else {
$('.nav-container').removeClass('solid-nav') &&
$('.navbar-brand img').attr('src','images/new-white-sm.png');
}
});
});
});
This way if will never execute the second part of your if-statement if width < 768, no matter what the value of scrollTop is.

Related

Issues with $(window).width() and scrolling

I am trying to get this code to only work if the device window is bigger than 960px, and it should only trigger when the window scrolls down 700px. The later part works however the first part does not.
The code works perfectly on where it fades in and then fades out, however I do not want it to do so on mobile devices, because the scroll point (700px) is too far down and is creating issues.
$(function () {
var header = $('.fadein');
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (($(window).width() < 960) && (scroll >= 700)) {
header.removeClass('.fadein').addClass('.fadeout').fadeIn();
} else {
header.removeClass('.fadeout').fadeOut().addClass('.fadein');
}
});
});
I think your main issue is accidentally using < 960 instead of > 960, but you might also change to checking innerWidth rather than width if you really are interested in the window's width and not just the screen's width.
For this demo I reduced the target values to 500 and 200 to work better in a SO snippet. (Resize your browser window and run the snippet again to see it working above and below the 500px threshold.)
console.log("width: " + $(window).innerWidth() );
$(window).scroll(function () {
const
div = document.getElementById("div"),
scroll = $(window).scrollTop();
if ( ($(window).innerWidth() > 500) && (scroll >= 200) ) {
div.style.backgroundColor = "yellow";
}
else {
div.style.backgroundColor = "white";
}
});
#div{ height: 300vh; border: 1px solid grey; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div"></div>
Did you try to split that if statement ?
For example (second if will fire only if width is at least 960px)
if($(window).width() >= 960) {
if (scroll >= 700) {
header.removeClass('.fadein').addClass('.fadeout').fadeIn();
} else {
header.removeClass('.fadeout').fadeOut().addClass('.fadein');
}
}

Get actual height of document with jQuery

I have a problem with my jQuery plugin, I want to display footer in specific way right before end of page. For this I get actual bottom position and compare it with height of entire body.
But there is a problem jQuery function height() return bad value. For example I know that site has height of 5515px but function returns to me a value: 8142px
I use the plugin mCustomScrollbar in few places on page, and I think that it may cause the problem. I can't disable it, because page has elements which require it to look good.
My code:
(function($){
$.fn.scrollingElements = function(){
var height = $(window).height();
var max_height = $(document).height();
var prev_top = $(window).scrollTop();
var prev_bottom = top + height;
$(window).scroll(function(){
var top = $(window).scrollTop();
var bottom = top + height;
console.log(max_height, bottom);
if(prev_top < height && top > height){
// console.log('show header', 'show sticky', 'show footer small');
}
if(prev_top > height && top < height){
// console.log('hide header', 'hide sticky', 'hide footer');
}
if(prev_top < 2*height && top > 2*height){
// console.log('show sroll top');
}
if(prev_top > 2*height && top < 2*height){
// console.log('hide scroll top');
}
if(prev_bottom < max_height - 100 && bottom > max_height - 100){
// console.log('show footer large');
}
if(prev_bottom > max_height - 100 && bottom < max_height - 100){
// console.log('show footer small');
}
prev_top = top;
prev_bottom = bottom;
});
$(window).resize(function(){
height = $(window).height();
});
}
})(jQuery);
Answering to Tommy Riordan:
changing $(document).height() to document.body.clientHeight didn't work still getting bad results. Tried using $('body').height() with same effect.
Please use
document
instead of window
for example :
$(window).resize(function(){
height = $(document).height();
});

Media queries and height & width defined in variable

I found this plugin online:
https://github.com/frenski/quizy-memorygame
As you can guess, it's a memory game in which you can choose the images to display on the cards. And it's great. But the thing is I'm trying to use media queries to make it more responsive, and it worked great until I realized that the width and height of the cards are defined not only in the CSS but also in a variable.
var quizyParams = {itemWidth: 156, itemHeight: 156, itemsMargin:40, colCount:3, animType:'flip' , flipAnim:'tb', animSpeed:250, resultIcons:true, randomised:true };
$('#tutorial-memorygame').quizyMemoryGame(quizyParams);
$('#restart').click(function(){
$('#tutorial-memorygame').quizyMemoryGame('restart');
return false;
});
How can I change the itemWidth and itemHeight depending on the size of the screen? Is that even possible?
I tried using a function like:
if(screen.width <= 480){
//change width and height to this
}else if (screen.width <= 780){
//change width and height to that
}else (screen.width <= 960){
//change width and height to this
}
But it didn't work...
All ideas are welcome! And thank you for your help.
Using if (screen.width <= 480) might not work onload, try use window.matchMedia() to match your CSS media queries:
if (window.matchMedia('(max-width: 480px)').matches) {
//...
} else {
//...
}
try this hope helpful you ....
$(document).ready(function() {
function checkWidth() {
var windowSize = $(window).width();
if (windowSize <= 479) {
console.log("screen width is less than 480");
}
else if (windowSize <= 719) {
console.log("screen width is less than 720 but greater than or equal to 480");
}
else if (windowSize <= 959) {
console.log("screen width is less than 960 but greater than or equal to 720");
}
else if (windowSize >= 960) {
console.log("screen width is greater than or equal to 960");
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});​

Adjusting widths of panels using JS

My site is www.to-hawaii.com. The length of the right panel is controlled by the length of the middle panel. In other words the middle panel will adjust to the length of the right panel which is naturally shorter. In some cases though the right panel is longer, see here http://www.to-hawaii.com/bg/ and this creates a strange scroll on the right. Is there a way to fix that? In other words if there is a way to have the script work like this: if the middle panel is longer than the right panel, match the right's panel width so it is as long as the middle panel and if the right panel is longer, match the middle panel's width so it is the same length as the right panel.
The function I am currently using to make the right panel width match the middle panel width is:
$(document).on('ready',function(){
if($(window).width() > 768){
var heightLeft = $(".leftpanel").height();
var heightMiddle = $(".midpanel").height();
if(heightLeft >= heightMiddle){
$(".rightpanel").css("height",heightLeft - 10);
$(".midpanel").css("height",heightLeft - 10);
}else{
$(".rightpanel").css("height",heightMiddle +2);
}
}
$(window).resize(function(){
if($(window).width() >= 768){
$(".rightpanel").css("height", "auto");
$(".midpanel").css("height", "auto");
var heightLeft = $(".leftpanel").height();
var heightMiddle = $(".midpanel").height();
if(heightLeft >= heightMiddle){
$(".rightpanel").css("height",heightLeft - 10);
$(".midpanel").css("height",heightLeft - 10);
}if(heightLeft < heightMiddle){
$(".rightpanel").css("height",heightMiddle +2);
}
}
if($(window).width() < 561){
$(".rightpanel").css("height", "auto");
$(".midpanel").css("height", "auto");
}
})
})
you could try something like this:
$(document).on('ready',function(){
var rightHeight = $('.rightPanel').height();
var leftHeight = $('.leftPanel').height();
var midHeight = $('.midPanel').height();
if (rightHeight > midHeight) {
midHeight = rightHeight;
$('.midPanel').css('height', midHeight);
}
else if (midHeight > rightHeight) {
rightHeight = midHeight;
$('.rightPanel').css('height', rightHeight);
}
// If window is resized
window.addEventListener("resize", adjustPanes);
function adjustPanes(rightHeight, midHeight) {
if (rightHeight > midHeight) {
midHeight = rightHeight;
$('.midPanel').css('height', midHeight);
}
else if (midHeight > rightHeight) {
rightHeight = midHeight;
$('.rightPanel').css('height', rightHeight);
}
}
});
Alternatively, you could set all three panels to the height of the wrapper div that you have created.
This would make them each the same length.
$(document).on('ready',function(){
var wrapperHeight = $('#wrapper').height();
$('.midPanel').height(wrapperHeight);
$('.leftPanel').height(wrapperHeight);
$('.righttPanel').height(wrapperHeight);
});

Get the height of a div jquery

I am trying to make a navigation, that sets the "active" class to links whenever it scrolls a specified ammount of pixels. But there is a div on the page, that get's its size based on user interaction.
This is the code for setting the active class.
$(function() {
//caches a jQuery object containing the header element
var header = $(".active");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >=760) {
header.removeClass('active').addClass("active1");
}
else { header.removeClass('active1').addClass('active');}
});
var header1 = $("#work");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 759 && scroll < 780) {
header1.removeClass('#work').addClass("active");
} else {
header1.removeClass("active").addClass('#work');
}
});
var header2 = $("#about");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 779 && scroll < 1450) {
header2.removeClass('#about').addClass("active");
} else {
header2.removeClass("active").addClass('#about');
}
});
var header3 = $("#contact");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 1449) {
header3.removeClass('#contact').addClass("active");
} else {
header3.removeClass("active").addClass('#contact');
}
});
});
How do I get the height of a div which has it's class set as auto, and then apply it in the code above ?
EDIT: I tried the $('#ID').height(); but it gets the height when the website is loaded, and it doesn't work after any user interacts with the div.
In basically get the height of the DIV
$('#ID').height();
it returns height.
I guess this is what you are looking for
Sample DEMO
if($("#ID").offset().top < $(window).scrollTop() + $(window).outerHeight())
If you create a fiddle possibly can do the same for you
Hope this helps, Thank you

Categories