I have a page that requires 2 divs to get fixed position once certain scrolling has occured. Issue is i need to use 2 different codes for each one, because I can't place them on same div.
This is the jquery code I use.
<script>
$(document).ready(function() {
if (window.XMLHttpRequest) {
window.onscroll = function() {
if ($('body').scrollTop() > 534 || $('html').scrollTop() > 534) {
if ($(window).height() > 20) {
$('#wrappernav').addClass('wrappernavstatic');
}
}
else {
$('#wrappernav').removeClass('wrappernavstatic');
}
};
}
});
and I need to add another one for another div but for 250px. But when i put both on same page, it gets conflicted and only the second one is working with the first's details.
<script>
$(document).ready(function() {
if (window.XMLHttpRequest) {
window.onscroll = function() {
if ($('body').scrollTop() > 300 || $('html').scrollTop() > 300) {
if ($(window).height() > 20) {
$('#wrappernavfilter').addClass('wrappernavfilterstatic');
}
}
else {
$('#wrappernavfilter').removeClass('wrappernavfilterstatic');
}
};
}
});
How can I both mix them to be active?
You can use .scroll() to bind both handlers:
$(window).scroll(function () {
// ...
});
Rather than being limited to just 1 with window.onscroll:
window.onscroll = function () {
// ...
};
So, for the 1st snippet in your question:
<script>
$(document).ready(function() {
if (window.XMLHttpRequest) {
$(window).scroll(function() {
if ($('body').scrollTop() > 534 || $('html').scrollTop() > 534) {
if ($(window).height() > 20) {
$('#wrappernav').addClass('wrappernavstatic');
}
}
else {
$('#wrappernav').removeClass('wrappernavstatic');
}
});
}
});
Related
I have the following jquery code that is aimed at running one function when the window is large (>=1024) and another when it is resized and small.
The console.logs appear as expected on resize, but the functions do not change. Meaning, if the browser was loaded in large size, when resized, the large function is still used.
(Resize code used from https://stackoverflow.com/a/4541963/1310375 and https://stackoverflow.com/a/9828919/1310375)
var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
$(window).on('resize', function(){
var win = $(this); //this = window
waitForFinalEvent(function(){
console.log('Resize...');
if (win.width() >= 1024) {
console.log('large');
$('.header-navigation-menu > div > ul > li').on({
mouseenter: function() {
console.log('waitEnterExit');
waitEnterExit(this, true);
$(this).children('.nav-menu-div').addClass('open');
},
mouseleave: function() {
waitEnterExit(this, false);
},
});
function waitEnterExit(el, inside) {
var button = $(el);
setTimeout(function() {
var hovered = button.is(':hover');
if (hovered && inside)
button.children('.nav-menu-div').addClass('open');
else if (!hovered && !inside)
button.children('.nav-menu-div').removeClass('open');
}, 500);
}
}
if (win.width() <= 1023) {
console.log('small');
$('.menu-link-button').on({
click: function() {
$(this).parent().children('.nav-menu-div').slideToggle();
}
});
}
}, 500);
});
You are doing it in a wrong way, try the below steps and code,
First separate all functions and event bindings from window resize event.
Then check window's width and toggle the elements which are to be hide(if visible)
function waitEnterExit(el, inside) {
var button = $(el);
setTimeout(function() {
var hovered = button.is(':hover');
if (hovered && inside)
button.children('.nav-menu-div').addClass('open');
else if (!hovered && !inside)
button.children('.nav-menu-div').removeClass('open');
}, 500);
}
$('.header-navigation-menu > div > ul > li').on({
mouseenter: function() {
console.log('waitEnterExit');
var win = $(window);
if (win.width() >= 1024) {
console.log('large');
waitEnterExit(this, true);
$(this).children('.nav-menu-div').addClass('open');
}
},
mouseleave: function() {
if (win.width() >= 1024) {
console.log('large');
waitEnterExit(this, false);
}
},
});
$('.menu-link-button').on({
click: function() {
var win = $(window);
if (win.width() <= 1023) {
console.log('small');
$(this).parent().children('.nav-menu-div').slideToggle();
}
}
});
$(window).on('resize', function() {
var win = $(this); //this = window
waitForFinalEvent(function() {
if (win.width() >= 1024) {
console.log('large');
$('.menu-link-button').parent().children('.nav-menu-div').slideUp(); // hide it any way on large screen
} else {
$('.header-navigation-menu > div > ul > li .nav-menu-div').removeClass('open'); // hide it in small screens
}
console.log('Resize...');
}, 500);
});
If window>= 1024 and $('.menu-link-button') is sliding up again and again then check a condition for its visibility like
if (win.width() >= 1024) {
console.log('large');
$('.menu-link-button').parent().children('.nav-menu-div').is(':visible') // if visible then slideup
&&
$('.menu-link-button').parent().children('.nav-menu-div').slideUp(function(){ // hide it any way on large screen
$(this).hide();/*make it hide after slide up*/
});
} else {
$('.header-navigation-menu > div > ul > li .nav-menu-div').removeClass('open'); // hide it in small screens
}
I want to hide .isi-jumo-link when .indication is fully visible in the viewport. Currently it only disappears once .indication is at the top of the viewport.
User needs to scroll from the top and once .indication is fully in view then .isi-jump-link will disappear.
$(window).on('scroll', function () {
if ($(this).scrollTop() >= $('.indication').offset().top) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});
Just to note... using a fixed scrollTop in my case will not work.
You could check if the both the top and the bottom of your indication is within the viewport:
$(window).on('scroll', function () {
var bottomIsVisible = $(this).scrollTop() + $(this).height() >= $('.indication').offset().top + $('.indication').height();
var topIsVisible = var topIsVisible = $(this).scrollTop() <= $('.indication').offset().top;
if (bottomIsVisible && topIsVisible) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});
You need to add the height of the .indication <div> also to the equation:
$(window).on('scroll', function () {
if ($(this).scrollTop() >= ($('.indication').offset().top + $('.indication).height())) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});
I have the following jQuery to vertically center text next to an image but it only loads after the page is re-sized.
$(window).load(function () {
$(function () {
var changeheight = function () {
$('.vertical-align').height($('.featurette-image').height());
}
$(window).on('resize', function () {
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
})
})
});
Remove window resize and should work on load
$(window).load(function() {
var changeheight = function() {
$('.vertical-align').height($('.featurette-image').height());
}
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
});
Idk why OP deleted his answer but it was correct. I had to remove window resize
The following code is correct:
$(window).load(function() {
var changeheight = function() {
$('.vertical-align').height($('.featurette-image').height());
}
if ($(window).width() > 765) {
changeheight();
} else {
$('.vertical-align').height('auto');
}
});
I'm new to jquery and have put together the following code to make a DIV appear after a set scroll-down amount. If scrolling back up, the DIV disappears. Optionally, once the DIV has appeared, there is a link to close it. This all works as intended, apart from that I only want the script to run once. At the moment if I scroll back up, the yellow box appears again. How can I ensure the box stays closed? As another option, could I integrate cookies or localStorage?
Many thanks! Russ.
Javascript:
$(function () {
var target = $(".box");
if ($(window).scrollTop() > 30) {
target.hide();
}
$(window).scroll(function () {
var pos = $(window).scrollTop();
if (pos > 30) {
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
}
});
$('a.close').click(function () {
$($(this).attr('href')).slideUp();
return false;
});
});
Here is the jsfiddle link to my code: jsfiddle link
You can remove the class to ensure the box stays enclosed with removeClass(). Or directly $(".box").remove() after your animation.
You can store this choice with cookie but if the client deletes his cookies, it's lost.
You can remove event scroll from window and for localStorage do something like that:
$(function () {
var target = $(".box");
if ($(window).scrollTop() > 30) {
target.hide();
}
$(window).scroll(function () {
var pos = $(window).scrollTop();
if (pos > 30) {
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
}
if(localStorage['noNotification'] == 'true'){
$(window).off('scroll');
}
});
$('a.close').click(function () {
$($(this).attr('href')).slideUp();
$(window).off('scroll');
localStorage['noNotification'] = 'true';
return false;
});
});
try this http://jsfiddle.net/AbwXu/4/
var notdisplayed=true;
$(function(){
var target = $(".box");
if($(window).scrollTop() > 30){
target.hide();
}
$(window).scroll(function(){
var pos = $(window).scrollTop();
if(pos > 30 && notdisplayed){
target.stop(true, true).fadeIn('slow');
} else {
target.stop(true, true).fadeOut('slow');
notdisplayed=false;
}
});
$('a.close').click(function() {
$($(this).attr('href')).slideUp();
notdisplayed=false;
return false;
});
I've this function:
$(function() {
$(window).scroll(function(e) {
var sl = $(this).scrollLeft();
var lbl = $("#waypoints");
if (sl > 0) {
lbl.show('');
}
else {
lbl.hide();
}
if (sl > 750) {
lbl.html("<p>now passed 750</p>");
}
if (sl > 1000) {
lbl.html("<p>now passed 1000</p>");
}
});
});
Which work when i scroll the browser window. But I need to adjust it, so that it is set for a div (#main) which scrolls inside another div (.content) which has a fixed width and css overflow enabled.
I've tried $(#main).scroll(function(e) { no joy ...
thanks for reading, any help would be awesome.
Try to change to class:
$(function() {
$('.content').scroll(function(e) {
var sl = $(this).scrollLeft();
var lbl = $("#waypoints");
if (sl > 0) {
lbl.show();
}
else {
lbl.hide();
}
if (sl > 750) {
lbl.html("<p>now passed 750</p>");
}
if (sl > 1000) {
lbl.html("<p>now passed 1000</p>");
}
});
});
Here's a JSFiddle
I don't see what's the problem here - it's working (I mean the scroll events are fired, as you can see by scrollLeft value that is changing) http://jsfiddle.net/DTKeX/2/