I have this Div that shows up on button click and then lies over some other content, where the button to show the content lies too. I want to hide this div again by scrolling. I have some code which works, but only with limitations which makes it unusable.
I tried the following code:
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.hidden-content').fadeOut();
}
});
This actually works but here is the problem: The button I use to show the content does not work anymore while hover-animations in this div still works everywhere. So I do not think this is a problem about a hidden div with a high z-Index value what lies above of everything.
I also tried the following code based on some help of the user Ned Hulton for hiding this div on a button click which worked perfectly fine, but I didn't get the translation for the scroll event right as it seems.
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.hidden-content').animate({"opacity":"0"}, function(){
$(this).css({"zIndex":"-1"})
});
});
And maybe it will also help if I show you the code to make the div appear by a click on a button:
$('.clickable-content').click(function(e) {
$('.hidden-content').css({
"opacity":"1",
"z-index": "9"
});
});
Hope someone can help me out! Thak you for reading!
Related
Here is a link to the site in progress -- http://barret.co/resources/testsite12345/
There is almost nothing on the site yet as I am working on the skeleton, so inspecting element should be very easy to pinpoint what's wrong.
I'm working on a slide out menu from scratch but am fairly new to jQuery. Basically, what I have now is working, but not exactly how I'd like it to be. as you can see, when you click the menu button in top left, it slides the panel left and back to the right. I'd like for this panel to initially be hidden upon viewing the page, and then slide out when menu is clicked.
Also, is there an easy way to close this panel if a user clicks onto the main page? The only way it closes now is if the menu button is clicked again.
Any help is very much appreciated.
Thanks in advance!
I think you simply had a mixup with the classes.
Add this to your #left-menu css:
right: 300px;
and then use this:
jQuery(document).ready(function($) {
$('#menu-container #right-menu').click(function(){
var hidden = $('#left-menu');
if (! hidden.hasClass('visible')){
hidden.animate({"right":"0px"}, "slow").addClass('visible');
} else {
hidden.animate({"right":"300px"}, "slow").removeClass('visible');
}
});
}); // end
Add the following: $(".logo").hide() to the $(document).ready(function () {});
I have a menu that is hidden from view (for mobile) using CSS:
#filter-column {
position:absolute;
left:-400px;
}
When the user clicks a link I want to hide everything else except that menu which will slide in from the left. I want the reverse to happen when the layer is closed.
I have the following jQuery:
// Show/hide filters on mobile //
$("#openMobileFilters").click(function(){
$("#filter-column").animate({left:'0'},600).css('position', 'relative');
$('#results-container, #footer').addClass('hidden-xs');
});
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'},600).css('position', 'absolute');
$('#results-container, #footer').removeClass('hidden-xs');
});
The problem is when I click to hide the menu the content shows before it is actually hidden. Is there a better way of doing this?
Without seeing this in action in a fiddle, I can only suggest you move the removal of the hidden class to the complete function of animate
$(".closeFilters").click(function(){
$("#filter-column").animate({left:'-400px'}, 600, function() {
$('#results-container, #footer').removeClass('hidden-xs');
}).css('position', 'absolute');
});
Currently, you are showing the content while the animation is going on which is why you see the content right away.
you have to put the code you want to be executed after the animation in the complete callback .. for example:
$("#filter-column").animate({
left:'-400px',
complete: function() {$('#results-container, #footer').removeClass('hidden-xs');}
}, 600)
I have a simple onScroll function, which shows a DIV when the scroll (down) height is 100 for example, and then if scrolled up soon as it reach 100 it hides the div, works perfect.
However, if I scroll down quickly and while its showing the DIV if I quickly scroll up & down 2 three times, it doesn't catch the event, even if its up again, it still shows the DIV, but again if I scroll even 1 pixel down, it hides it and if reaches 100 then it shows DIV again.. I hope I made it clear, I dont have an online demo as I am working on localhost.. below is my function that I am using standalone in the template within just <*script> tag..
jQuery(document).scroll(function ($) {
var y = jQuery(this).scrollTop();
var hoffset = 100;
if (y > hoffset) {
// show div
} else {
// hide div
}
});
Can someone please guide me to right direction, what other best approaches can be done for this, basically I am doing this for header nav div..
regards
Do you want like this? See my Fiddle
I use fadeIn() and fadeOut() instead.
The only way I found to stop animation, while its in the process is below and works..
jQuery('.thedivclass').stop(false, true).slideDown();
Hi i try to display a div when i scroll to bottom of my page and hide it when its not on the bottom.
The alert message work when at the bottom page but setting css visible or trying with fadeIn or out not work. I need little help to see what i did wrong.
Also on IE 9 the div "#loadSection" its hidden but i still able to put my cursor on it and click when other browser work correctly.
here my code.
$(window).scroll(function() {
if ($(window).scrollTop()+$(window).height() > $(document).height()){
$("#loadSection").fadeTo(0,0).css('visibility','visible');
alert("bottom");
}else{
$("#loadSection").fadeTo(0,0).css('visibility','hidden');
}
});
The problem is that the fadeIn/Out happens with every bit of scroll and it's causing the div to flash. Here's a CSS animated option:
$(window).scroll(function() {
if ($(window).scrollTop()+$(window).height() >= $(document).height()){
$("#loadSection").addClass('visible');
}else{
$("#loadSection").removeClass('visible');
}
});
DEMO:
http://jsfiddle.net/Eh53d/
The visibility property allows an element to remain on the page and take up space. To solve your issue in IE where you're still able to mouse over it, use the display property instead.
To your main issue, try the following:
var loadsection = $("#loadSection");
if ($(window).scrollTop() >= $(document).height() - $(window).height()){
if ( loadsection.is(':hidden') ) loadsection.fadeIn();
}else{
if ( loadsection.is(':visible') ) loadsection.fadeOut();
}
fadeIn and fadeOut will utilize the display property, which will completely remove the element when it's not visible. Also, you're fading to zero opacity in both of your fadeTo calls, so even if though visibility is being set, the element is still completely transparent.
I've been stuck on this particular problem. I would like to use a toggle menu for mobile widths on a website that I'm working on. Basically, it works nicely as I can show you on this CodePen.
The code for showing/hiding the menu via a toggle button with JavaScript works below.
$(document).ready(function() {
//Menu Open Seasame Action
$('.site-nav-btn').click(function() {
$('.site-nav ul').slideToggle('fast');
$(this).find('span:hidden').show().siblings().hide();
});
//Hide site-nav content.
$(".site-nav ul").hide();
});
My problem is that I would like to hide the toggle button and the toggle function when the width exceeds say, 480 pixels wide but keep the site-nav ul visible. I've been trying to do this via this code combined with the one above, and somehow it just doesn't work.
$(function() {
if ($(window).width() > 480) {
$('.site-nav-btn').css('display','none');
$('.site-nav ul').show();
}
else {
$('.site-nav-btn').css('display','block');
$('.site-nav ul').hide();
}
});
I'm not really that proficient in JavaScript so if anyone could point out why it didn't work alongside the solutions that would really be helpful.
Attach your checking function to $(window).resize() and fix the selectors. See this fork of your CodePen.