I've added jQuery function that shows and hides navbar when scrolled. I also want to hide a div when the button 'start' is clicked. After i add new function none of them works longer. I have tried to add it to various places, but I still get no result at all. So how do I add multiple functions and make them to work?
Heres my code:
<script>
// function that hides text on click
(function($) {
$('#start').click(function() {
$('.lead').hide());
});
});
// my original function that stopped working after i added new one
(function($) {
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$(function() {
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
</script>
I think the problem is in the closing tag of the function you're adding.
Try like this:
(function ($){
$('#start').click(function(){
$('.lead').hide();
});
}(jQuery));
// my original function that stopped working after i added new one
(function ($) {
$(document).ready(function(){
$(".masthead").css("background-color","inherit");
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color","black");
} else if($(this).scrollTop() === 0){
$('.masthead').fadeIn();
$(".masthead").css("background-color","inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
At least, closing bracket is wrong here. $('.lead').hide());
Tip: always check developer console first. Have fun coding.
Edit : Note that you have an extra closing bracket in the first function $('.lead').hide());.
You can use the following. Both functions can be combined in to a single block. And you can use $(document).ready() directly. If there is a problem with name conflict for $ use jQuery.noConflict();
<script>
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$('#start').click(function() {
$('.lead').hide();
});
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if ($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
</script>
Related
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);
});
});
To further clarify this problem, here's the current situation: http://jsfiddle.net/Laqqw/1/
I need to hide the bottom element, when ANY of the navs are opened. And when all the navs are closed, the bottom element would show up again.
toggle() doesn't work, because it sometimes ends up not showing the bottom element when all the navs are closed.
I tried using if else with no sensible results. Am I missing something here?
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300);
$("footer").toggle(300);
$("#nav1, #nav2, #nav3").click(function() {
$(this).data("clicked", true);
if ($("#nav1, #nav2, #nav3").data("clicked")) {
$("footer").hide(300);
} else {
$("footer").show(300);
}
});
});
});
Try this,
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300, function(){
if($("p:visible").length == 0)
$("footer").show(300);
else
$("footer").hide(300);
});
});
});
Check jsfiddle
try like this:
$(document).ready(function() {
$("p").hide();
$("h1, h2").click(function() {
$(this).next().slideToggle(300);
$("footer").toggle(300);
$("#nav1, #nav2, #nav3").click(function() {
$(this).data("clicked", true);
if ($("#nav1, #nav2, #nav3").data("clicked")) {
$("#footer").hide(300);
} else {
$("#footer").show(300);
}
});
});
});
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();
}
});
Using this script:
<script>
$(function() {
$(window).scroll(function(){
$('#Your element id').slideUp('slow');
});
});
</script>
Is it possible only to perform the action after the user has scrolled 100px or more?
You do need scrollTop as said. It would be wise to include an 'else' function as well, so that when you scroll back to the top the toggled element gets hidden again. As such:
$(document).ready(function() {
$('#scrollDiv').hide();
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('#scrollDiv').fadeIn('slow');
}
else {
$('#scrollDiv').fadeOut('slow');
}
});
});
Here is a quick jsfiddle
You can use .scrollTop() to get how far the page has been scrolled
<script>
$(function() {
$(window).scroll(function(){
if($(this).scrollTop() > 100) {
$('#Your element id').slideUp('slow');
}
});
});
</script>
I got this small JavaScript using jQuery that slides down a ul when an image is clicked:
$(document).ready(function () {
$('img.menu_class').click(function() {
$('ul.the_menu').slideToggle('medium');
});
});
I was wondering if I could modify it to recognize when the mouse leaves the ul/image and make it slide back instead of having the user click on the image again. If I use something else than click() it would (naturally) only apply to the image and won't recognize the ul as an object. Any suggestions?
you can use jquery mouseout()
Try this
$('img.menu_class').bind('mouseleave',function() {
$('ul.the_menu').slideToggle('medium');
});
or
$('img.menu_class').bind('hover',function() {
$('ul.the_menu').slideToggle('medium');
});
Use this code.
This is my updated code
Use this code to slidedown ur list once mouse hover on image and remains open
$(document).ready(function () {
$('img.menu_class').bind('hover mouseleave',function() {
$('ul.the_menu').slideDown('medium');
});
//to close ul
$('#id_of_close_element').bind('click',function() {
$('ul.the_menu').slideUp('medium');
});
});
This is the whole code (added some image swapping to the whole thing), working at all major (updated) browsers at the moment. Not very clean and probably could be done easier but it works:
$(document).ready(function() {
$('ul.menu_body').hide();
if ($.browser.msie && $.browser.version < 8) {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
$('.menu_body').css("font-weight","normal");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
} else {
$('.dropdown').click(function() {
if ($('ul.menu_body').is(':hidden')) {
$('ul.menu_body').fadeIn('medium');
$('.menu_head').attr("src", "layout/buttonhover.png");
} else if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
$('.dropdown').mouseleave(function() {
if ($('ul.menu_body').is(':visible')) {
$('ul.menu_body').fadeOut('medium');
$('.menu_head').attr("src", "layout/servbtn.png");
}
});
}
});