Showing/hiding bootstap's .hidden-xs in jQuery - javascript

I'm trying to create an 'up' button, which will take user to the very top of the landing page. jsFiddle
I would like this button to be shown only on devices with large screens, so I'm using bootstrap3's hidden-xs class. This class applies display: none!important for small devices and display: block!important for large screens.
But now, I would like to make this button visible only, when scrolled down at least 50 pixels.
So, I would like to do something like:
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() < 50) {
// Near top.
$('#scrollUp:visible').slideUp();
}
else {
$('#scrollUp:hidden').slideDown();
}
});
});
jQuery's slideUp() and slideDown() apply display: none and display: block, but without !important.
This means that display: block!important applied by .hidden-xs is more important than css applied by slideDown() and slideUp().
It worked great until I started using .hidden-xs.
I tried $.animate({'display': 'none!important'}) instead of $.slideUp, but then I get another problem -- jQuery isn't properly selecting elements with :hidden. jsFiddle
Do you have an idea, what may I do wrong? Is there a way to do this nicely?
Thanks in advance!

Try
(function () {
var timer;
$(window).scroll(function () {
clearTimeout(timer)
timer = setTimeout(function () {
if ($(window).scrollTop() < 50) {
// Near top.
console.log('If elemnt is visible it should be hidden here');
$('#scrollUp:visible').stop(true, true).slideUp(function () {
$(this).removeClass('hidden-xs');
});
} else {
console.log('If element is hidden it should be displayed here');
$('#scrollUp:hidden').addClass('hidden-xs').stop(true, true).slideDown(function () {
$(this).css('display', '')
});
}
}, 100);
});
})()
Demo: Fiddle

Related

jQuery scroll function only works once

I am trying to add a class to the header if the user scrolls past the div #home - and remove the class when you scroll back to the top.
The issue is, when you scroll past the div it adds the class but when you keep scrolling and then scroll back up, the class does not get removed. The event is only firing once...
I created this jsFiddle here - https://jsfiddle.net/breezy/9evksr7y/
It works in my jsFiddle file but not on my actual web page, I've also tried this...
$(window).on( 'scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() > 400) {
// alert("made it!");
header.addClass('fixed');
clearInterval(interval);
} else {
header.removeClass('fixed');
}
}, 250);
});
But it still does not work. Any idea what I am doing wrong?
Thanks
Edit: The issue was that one of my other functions in the same document was conflicting w/ this scroll function.
So I made some minor tweaks to the code. Not sure what the issue was but this seemed to work for me on my webpage.
$(window).on('scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
if ($(window).scrollTop() > target) {
header.addClass('fixed');
} else {
header.removeClass('fixed');
}
});

Execute function only if window width is greater than something else don't

function dropdownHover() {
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
}
$(window).on('resize', function(event){
var windowSize = $(window).width();
if(windowSize > 992){
dropdownHover();
}
});
I need this function dropdownHover() to fire only when window is greater than 992px, both on load and on resize, else if window is < 992px, both on load or on resize i dont want to fire this function on hover i want regular bootstrap dropdown on click. I tried to do this with css but i cant add animation on dropdown because its just display: none/block. I also tried to add class on resize to fire this function if element has that class else dont but it doesnt work either.
Edit: Final working version
$('.dropdown').on('mouseenter', function(){
if(!$(this).is('.open') && $(window).data('wide'))
$('.dropdown-menu', this).dropdown('toggle').hide()
.stop(true, true)
.delay(200)
.fadeIn(function(){
this.style.display = '';
}).find('a').on('touchstart click', function (e) {
e.stopPropagation();
});
}).on('mouseleave', function(){
if($(this).is('.open') && $(window).data('wide'))
$('.dropdown-menu', this).dropdown('toggle');
});
$('.dropdown').on('click', function(e){
if( $(window).data('wide')) {
$('.dropdown-menu', this).dropdown('toggle');
} else {
$('.dropdown-menu', this)
.stop(true, true).slideToggle()
.closest('.dropdown').removeClass('open');
}
});
// not entirely necessary. Not sure which is faster: this or just checking the width in all three places.
$(window).on('resize', function(){
$(window).data('wide', $(window).width() > 992);
// reset the open menues
$('.dropdown').removeClass('open');
$('.dropdown-menu').css({
display: '',
left: '',
position: '',
});
// because we are checking the width of the window, this should probably go here although this really should be a media query style
$('.dropdown-menu.pull-center').each(function() {
var menuW = $(this).outerWidth();
if ($(window).width() > 1000) {
$(this).css({
left: - menuW / 2 + 60 + 'px',
position: 'absolute'
});
} else {
$(this).css({
left: '',
position: ''
});
}
});
}).trigger('resize');
Initial Solution
Your question is twofold. First, you need it to not show the menu at smaller sizes. For that, you check on resize what the window width is. The problem is that it only works once. It triggers the event listeners for hover and it doesn't kill those event listeners if the screen is then larger at some point. For that, you can set a flag. There are a lot of ways to do this, but for my answer, I've chosen to use jQuery .data() method.
$(window).on('resize', function(event){
var windowSizeWide = $(window).width() > 600; // reduced for testing purposes
jQuery('ul.nav li.dropdown').data('dropdown-enabled', windowSizeWide);
}).trigger('resize');
Then when we listen for the hover events (which are mouseenter and mouseleave events), we simply return out of the function if the screen is too small.
jQuery('ul.nav li.dropdown').on('mouseenter', function() {
if(!jQuery(this).data('dropdown-enabled')) return;
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}).on('mouseleave', function() {
if(!jQuery(this).data('dropdown-enabled')) return;
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
}).find('.dropdown-menu').hide();
Finally, you also want the event to trigger on load. You can do that by simply adding .trigger('resize') as seen in the first snippet. You can see a functioning demo here: http://jsfiddle.net/jmarikle/xw9Ljshu/
Possible Alternative Solution
Alternatively, you can also use CSS to handle this with media queries. The simplest way to do this is to force display: none on smaller screens. I don't recommend completely hiding the element because it becomes inaccessible at that point, but this is the general idea:
#media(max-width: 600px) {
ul.dropdown-menu {
display:none !important;
}
}
Note that !important is used because jQuery adds inline styles when you fadeIn or fadeOut.
Second demo: http://jsfiddle.net/jmarikle/xw9Ljshu/1
window.screen.availWidth to get the window size. i am yet not tested your code.But i think this will ok.
function dropdownHover() {
jQuery('ul.nav li.dropdown').hover(function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn();
}, function() {
jQuery(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut();
});
}
$(document).ready(function(){
$(window).on('resize', function(event){
var windowSize = window.screen.availWidth;
if(windowSize > 992){
dropdownHover();
}
});
})

jQuery toggle class and change it on click

I have the following code in my JS file:
jQuery("document").ready(function (e) {
var menu = e(".menu-container");
var button = e(".menu-functions");
e(window).scroll(function () {
if (e(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function(){
if(button.hasClass('collapse'))
{
button.addClass('expand');
button.removeClass('collapse');
}
if(button.hasClass('expand'))
{
button.addClass('collapse');
button.removeClass('expand');
}
});
});
Now I need to make it so that the part under the // problem area starts to work. I reckon there's a toggleClass in jQuery, right? Some advanced conditions could do the trick, however I'm still learning and I need some help. I also need to find a way to animate() the .menu-container div whether the button state is expand or collapse:
If the button was clicked while it had the expand class
animate the menu from bottom to top with 98px;
If the button was clicked while it had the collapse class
animate the menu from top to bottom with 98px.
EDIT - JSFIDDLE:
jsfiddle.net/rcdhnh7L
Try it like this instead. Don't use e as the var for jQuery, that's just strange. And I simplified the problem area to directly grab the elements you want instead of iterating an existing collection.
jQuery("document").ready(function ($) {
var menu = $(".menu-container");
var button = $(".menu-functions");
$(window).scroll(function () {
if ($(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse').addClass('expand').removeClass('collapse');
$('.menu-functions.expand').addClass('collapse').removeClass('expand');
});
});
Or this should work as well:
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse, .menu-functions.expand').toggleClass('expand collapse');
});

Fade Elements In on Scroll down and Fade out on up Scroll

I am trying to achieve a scroll fadeIn within a specific section in this case section with the id is test.
The fadeIn works fine without the if statement, but I would think I need to have it to identify the section. What I am also struggling to do is have the same class fadeOut when the mouse scrolls back up.
I am fairly new at Jquery and would appreciate the assistance.
css
.third_third { display:none; width: 100%; height: 150px; margin-bottom: 3%; }
jquery
$(document).ready(function() {
if ($('section#test:visible')) {
$(document).scroll(function() {
$('.third_third').css("display", "inline-block").fadeIn(2000);
});
});
});
Make the div appear after a certain amount of pixels scrolling down. The fadeIn transition is done using CSS.
This would be your jQuery code:
var $document = $(document),
$element = $('.fixed-menu'),
className = 'hasScrolled';
$document.scroll(function() {
if ($document.scrollTop() >= 100) {
$element.addClass(className);
} else {
$element.removeClass(className);
}
});
Here i set up a jsFiddle as example
Please indent your code! makes it much easier to read.. Maybe try something like this: http://jsfiddle.net/j5q0tu86/4/
$(document).ready(function () {
$('.wrapper').bind('mousewheel', function (e) {
if (e.originalEvent.wheelDelta < 0) {
$('.third_third').stop(true, true).fadeIn(300);
console.log('Scrolling Down');
} else {
$('.third_third').stop(true, true).fadeOut(300);
console.log('Scrolling Up');
}
});
});
To identify your element, use this :
$(document).ready(function() {
$(document).scroll(function() {
$('section#test.third_third').css("display", "inline-block").fadeIn(2000);
});
});

Fade in/out div scrollTop

I have a floating menu that i want to fade in when you start to scroll down the page, then fade out when you are back at the top of the page. I have got it working without the fade, but im not sure how to add the fades. Any help appreciated. Thanks.
$(document).scroll(function() {
$('#floatingnav').toggle($(this).scrollTop()>250)
});
css
#floatingnav {
position:fixed;
display:none;
}
You can use fadeToggle with some duration as an argument(just incase you want) instead of plane toggle.That will do your job.
$(document).scroll(function() {
$('#floatingnav').fadeToggle($(this).scrollTop()>250)
});
You can try this to test if div has reached top
$(window).scroll(function () {
var d = $('div'); // this is your fixed div
if (d.offset().top > 250) {
d.fadeIn();
} else {
d.stop().fadeOut();
}
});
TEST FIDDLE
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 250) {
$("#floatingnav").fadeIn();
} else {
$("#floatingnav").stop().fadeOut();
}
});

Categories

Resources