I have a site and when someone clicks the contact link, in the nav, a contact box appears and slides down. The nav then moves down to remain below the contact box (that just appeared). The issue is when you click the contact link again the toggle hides the contact box but leaves the nav down where it would be if the contact box was still visible. Here is the code:
contactBarBtn.click(function (e) {
search_close();
contactBar.toggle();
navbarFixedTop.animate({ top: contactBar.height() }, 'slow'),
contactBar.animate({ top: '0' }, 'slow'),
contactCorner.css('display', 'block'),
e.preventDefault();
return false;
});
Any ideas?
I found the solution.
contactBarBtn.click(function (e) {
if (jQuery('.contact-bar-corner').css('display') == 'block') {
search_close();
navbarFixedTop.animate({ top: '0' }, 'slow');
contactBar.animate({ top: -contactBar.height() }, 'slow');
stickyHeader.removeClass('sticky');
contactCorner.css('display', 'none');
e.preventDefault();
return false;
}
else if (jQuery('.contact-bar-corner').css('display') == 'none') {
search_close();
contactBar.show();
navbarFixedTop.animate({ top: contactBar.height() }, 'slow');
contactBar.animate({ top: '0' }, 'slow');
stickyHeader.addClass('sticky');
contactCorner.css('display', 'block');
e.preventDefault();
return false;
}
});
The problem is top: contactBar.height() will run before contactBar.toggle() has finished -- in fact, it will run almost right away. So instead, you need to move that into the toggle to get called when the toggle animation is finished:
contactBar.toggle(function() {
navbarFixedTop.animate({ top: contactBar.height() }, 'slow');
});
Also, the lines should end with ; not , as the commenter mentions!
Related
i have the following mobile menu code i have been using for a while. it works fine. i have an animation via css added so when the menu button is clicked it adds an animation for a smooth scroll - however i am noticing it does not work on the very fist click - all clicks after the first does work. also if you see something gross in my jquery code do let me know, i am new to jquery and trying to learn by doing.
any help, or insight into something i am over looking, trying to resolve this would be greatly appreciated.
jQuery(function() {
//show the menu when button is clicked
jQuery('#menu_btn').click(function() {
if(jQuery('#menu').is(':visible')) {
jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
jQuery("#menu").css('display', 'none');
jQuery('#menu_close').css('display', 'none');
});
} else {
jQuery("#menu").css('display', 'block');
jQuery('#menu').animate({ left: '0' }, 'slow', function(){
jQuery('#menu_close').css('display', 'block');
});
}
});
//close menu when X button is clicked
jQuery('#menu_close').click(function() {
jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
jQuery("#menu").css('display', 'none');
});
});
callOnResize();
});
jQuery(window).resize( function(){
callOnResize();
});
function callOnResize() {
var winwidth = jQuery(window).width();
if (winwidth < 760) {
jQuery( '#menu' ).css({ display: 'none' });
jQuery('#menu').animate({ left: '0' }, 'slow');
} else if (winwidth >= 760) {
jQuery( '#menu' ).css({ display: 'block' });
}
}
the html of the menu is a very simple ul li view being output by wordpress
<div id="menu">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.
Your menu div "#menu" should not be displayed by default "display:none".
The script should be something like this:
jQuery('#menu_btn').click(function() {
if(jQuery('#menu').is(':hidden')) {
jQuery("#menu").css('display', 'block');
jQuery('#menu').animate({ left: '0' }, 'slow', function(){
jQuery('#menu_close').css('display', 'block');
});
});
} else {
jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
jQuery("#menu").css('display', 'none');
jQuery('#menu_close').css('display', 'none');
}
});
I've build a menu that collapse after you scroll down more than 250px from the top and returns to its original state when you go back to the top. But my website has some anchorlinks that link to the middle of the home page. When i go directly to these links the menu doesn't work. I have to scroll first. Is their a way to fix this?
This is the code i used:
<script>
jQuery(function () {
jQuery('.fixed').data('size', 'big');
});
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 250) {
if (jQuery('.fixed').data('size') == 'big') {
jQuery('.fixed').data('size', 'small');
jQuery('.fixed').stop().animate({
top: '-125px'
}, 600);
jQuery('.navbar-nav').stop().animate({
top: '15px'
}, 600);
jQuery('.dmbs-header-img').stop().animate({
opacity: '0'
}, 200);
jQuery('.logo-simple').stop().delay(200).animate({
top: '120px'
}, 600);
}
} else {
if (jQuery('.fixed').data('size') == 'small') {
jQuery('.fixed').data('size', 'big');
jQuery('.fixed').stop().animate({
top: '0px'
}, 200);
jQuery('.navbar-nav').stop().animate({
top: '0px'
}, 200);
jQuery('.dmbs-header-img').stop().animate({
opacity: '1'
}, 100);
jQuery('.logo-simple').stop().animate({
top: '-50px'
}, 200);
}
}
});
</script>
Just trigger the scroll event on anchor click (or on any other event you need).
jQuery('a').click(function(){
jQuery(window).scroll();
});
or
Move your code inside a function and call it on scroll, or on anchor click:
function checkScroll(){
if(jQuery(window).scrollTop() > 250)
{
// Your code
}
else
{
// Your code
}
}
jQuery(window).scroll(function(){
checkScroll();
});
jQuery('a').click(function(){
checkScroll();
});
The second solution may give you more flexibility.
I am trying to achieve the "back to top" feature on a page through simple jquery. The "BACK TO TOP" button appears/disappears as expected.
When it appears if I click on it, I expect it to go to the top of the page, instead nothing happens. I am not sure what's going wrong.
Here's the code:
css:
#btoTop {
padding: 15px 10px;
background: #1f242a;
color: #fff;
position: fixed;
bottom: 0;
right: 15px;
display: none;
cursor:pointer;
cursor:hand;
width:130px;
height:40px;
}
html:
<div id='btoTop'>BACK TO TOP</div>
js:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
Note: If I call the click function inside the $(window).scroll(), I am able to click the button. But it flickers and doesn't work well with window resize.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
});
});
You're binding click on your button every single time you scroll, which is unnecessary. You should change it:
$(document).ready(function () {
$(window).scroll(function () {
if( $(window).scrollTop() > 0 ) {
$("#btoTop").fadeIn("slow");
} else {
$("#btoTop").fadeOut("slow");
}
});
// Bound a single time
$("#btoTop").click(function ( event ) {
event.preventDefault();
console.log("Clicked the button");
$("html, body").animate({scrollTop:0 },"slow");
});
});
This might not be the problem, but should be changed to avoid strange behaviours in your code.
I figured out the button was not yet available in the DOM when I was trying to click it.
Adding a timer on it worked pretty good. Hope this helps someone out there with similar issue...
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$("#btoTop").fadeIn("slow");
}
else {
$("#btoTop").fadeOut("slow");
}
});
$timeout( function() {
$("#btoTop").click(function(event){
event.preventDefault();
$("html, body").animate({scrollTop:0 },"slow");
});
}, 500);
});
i'm trying to achieve a Scroll to Top button that fades in at a certain point on the page and fades out at a certain point...I have the fadeIn function working properly but can't seem to get the proper syntax for the click event fadeOut; it just disappears once you get to the top, instead of fading out if you're <= 675px. Any help is greatly appreciated!
HTML:
</div>
BACK TO LOGIN
</div>
jQuery:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('html, body').animate({
scrollTop : 0
}, 800);
return false;
});
});
I think your question isn't so clear but maybe you mean that when click on the scrollToTop button it doesn't disappear until the scroll reach to top of page, it's because when your animation function is running the .scroll can't runs so fast that disappear button when reach to 675px but you can fadeout button as soon as click on it using this code:
jQuery: $(document).ready(function() {
var isClicked = false;
$('.scrollToTop').css("display","none");
$(window).scroll(function() {
if (isClicked == false){
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
}
});
$('.scrollToTop').click(function() {
isClicked = true;
$('.scrollToTop').fadeOut(500);
$('html, body').animate({
scrollTop : 0
}, 800, function(){
isClicked = false;
});
});
});
The isClicked variable is added to prevent blinking button (you can remove it to figure out what i'm saying).
Also i add this line:
$('.scrollToTop').css("display","none");
because it seems that you don't need a "Scroll To Top" button when page load for first time and you are on the top of page.
Check JSFiddle Demo
this is my script, I'm using a toggle so I can animate a sliding menu.
$("div.show-menu").click().toggle(
function() {
// first alternation
$("#slideover").animate({
right: "512px"
}, 300);
$(".menu-button").html('close menu');
}, function() {
// second alternation
$("#slideover").animate({
right: "0"
}, 300);
$(".menu-button").html('open menu');
});
Though I really need the toggle to work using 2 elements on the page. For example see below...
<div class="show-menu one">open menu</div> // this is element one
<div class="show-menu two">open menu</div> // this is element two
I need it so, if element one get's click first, you can close the menu using element two on the first click. What is happening now is that you have to click element two twice in order for it to close the menu - vice versa
I guess this is the toggle coming into play, any help would be great thanks.
Cheers
Josh
$('.show-menu').on('click', function () {
//check the state of the .menu-button, if it's closed then run the open animation, if it's open then run the close animation
if ($(".menu-button").html() == 'close menu') {
$("#slideover").animate({
right: "0"
}, 300);
$(".menu-button").html('open menu');
} else {
$("#slideover").animate({
right: "512px"
}, 300);
$(".menu-button").html('close menu');
}
});
.on() is new in jQuery 1.7 and replaces .bind() in this instance, if you are using jQuery < 1.7 then use .bind().
What about
$('.show-menu').on('click', function () {
if ($("#slideover").css("right") == '512px') {
$("#slideover").animate({
right: "0"
}, 300);
$(".menu-button").html('open menu');
} else {
$("#slideover").animate({
right: "512px"
}, 300);
$(".menu-button").html('close menu');
}
});