I have a div called "navbar_menu". When clicked I want the div "nav_overlay" to fade in and then when clicked again, I want it to fade back to not being visible.
At the moment I have set the div 'nav_overlay" to 'display: none' and then using the following javascript, it shows itself when "navbar_menu" is clicked.
$(document).ready(function(){
$(".navbar_menu").click(function(){
$("nav ul").toggleClass("showing");
$("#nav_overlay").fadeTo("fast", 0.8);
});
});
The tag "nav ul" is just a menu that is sliding when "navbar_menu" is clicked. The point is to have an overlay covering the content when the menu slides out and then when the menu slides in again, the overlay disappears.
I'm thinking that I need an if statement testing whether the div is visible or not? I'm just wonering if there is anyone who can help with the best solution for this.
Thanks very much.
Something like this should work:
$("#nav_overlay").fadeToggle()
See the documentation for the options.
PS: I assuming that the overlay has necessary styles to cover the whole page with position: fixed or something.
if( $('#your-element').is(":visible") ){
// #your-element is visible.
} else {
// #your-element is not visible
}
That should test if something is visible or not but a link or jsfiddle to your html as well would be helpful.
Assuming CSS class 'showing' only makes the element appear. You can use the .toggle function to make it hide and reappear on its own.
http://api.jquery.com/toggle/
http://api.jquery.com/fadetoggle/
// Will automatically hide/display element
$("nav ul").toggle();
// Same as toggle but with fade effect
$("#nav_overlay").fadeToggle("fast");
Related
Thanks in advance to anyone who can help me with this.
I am trying to have the background of my website darken when the navigation menu drops down.
I can get it to work great when I hover over the menu after it's dropped, but not just by the menu dropping.
I have a div id "darkness" with an opacity of 70%.
Here is my javascript:
$('.dropdown-menu').hover(function(){
$('#darkness').fadeTo(200, 1);
}, function(){
$('#darkness').fadeTo(200, 0, function(){
$(this).hide();
});
});
Greg Fielding Hi there.
A good way to do this would be to use toggleClass and place a wrapper around the content.
Here is the code I use for this sample.
$(document).ready(function(){
$(".collapsed").click(function(){
$("#coverthishere").toggleClass("coverall");
});
});
Here is a working Fiddle of this sample.
You will see I use the menu class collapsed as the trigger here.
And I target the ID coverthishere to add/remove the class .coverall.
This will still allow the menu to be on top and the cover to below the menu but on top of the body.
Hope this helps.
I was wondering, for all you javascript and jquery guru's what would be my best way to tackle this problem. What I have is a navigation that is hidden via CSS to the bottom of the screen. I've managed to have it working as a toggle fine - which you can see here http://jsfiddle.net/olichalmers/Lby7vfdf/.
var body = $("body"); $("#menuBtn").click(function() {
body.toggleClass("showMenu");});
This obviously means that the menu slides up and down.
What my problem is is that I want to animate the menu up on the initial click, and then when you click the button again to close it I want the navigation window to slide up. Then when you click it again to open it, it is appearing from the bottom again. I've been trying to get my head around how this would work and what I think is that it would be two classes (one for hide menu, and one for show menu) which would be added and removed from the body. I have a jsfiddle here http://jsfiddle.net/olichalmers/twqd2yj0/
var body = $("body"); $("#menuBtn").click(function() {
if (body.hasClass("hideMenu")) {
body.removeClass("hideMenu").addClass("showMenu");
}
else if (body.hasClass("showMenu")) {
body.removeClass("showMenu").addClass("hideMenu");
}});
This is probably shocking in it's attempt to come to a solution to this problem. I'm using jquery but maybe it is a javascript solution using an event listener that is needed here? My jquery and javascript knowledge is patchy at best as i'm still in the midst of learning so please go easy if I appear very dumb!
Hope i've been clear enough. Thanks.
May I suggest a different approach?
Create your bottom menu in a separate DIV, located at very top of your HTML (directly under BODY tag). Make that DIV position: fixed -- that takes it out of the "flow" and positions it relative ot the viewport (the screen), not to any other divs or to the web page itself. Now, you can move it up/down based on some trigger.
Here is a code example:
jsFiddle Demo
HTML:
<div id="botttrig"></div>
<div id="bottmenu">The menu is here</div>
<div id="wrap">
<div id="content">
<p>Content goes here</p>
<p>Hover over small box at bottom left</p>
</div>
</div>
jQuery:
$('#botttrig').hover(
function(){
$(this).fadeOut();
$('#bottmenu').animate({
'bottom': '0px'
},500);
},
function(){
//do nothing on hover out
}
);
$('#bottmenu').hover(
function(){
//do nothing on hover in
},
function(){
$('#bottmenu').animate({
'bottom': '-80px'
},500);
$('#botttrig').fadeIn();
}
);
See this jsFiddle for another example. I removed the trigger box, and left the top 10px of the menu visible at screen bottom. Upon hover, slide the menu up. You may wish to increase the z-index on the #bottmenu div to always display it above the other DIVs on the page, so that it is always visible.
http://jsfiddle.net/twqd2yj0/4/
I've used slideToggle() and added display:none; to #navHold
I am using mCustomScrollbar script for custom scroll bar effect now I want to scroll page on specific class element. Class position is not fixed, It can be top or bottom.
In my example I have one anchor link and I want to page scroll to active class. Page will scroll only when user click to anchor.
Here is my JS Code:
$( "#scroll" ).click(function() {
//scroll page to active class
});
$("#content_1").mCustomScrollbar({
scrollButtons: {
enable: true
}
});
Here is my JSFiddle: http://goo.gl/6dpT7l
Note: Scroll position is not fixed. It can be anywhere UP/Down.
Any Idea? How to do this?
Thanks.
In your fiddle, it seems to be as simple as scrolling to the paragraph in question's position().top attribute. Replace your alert with this:
$("#content_1").mCustomScrollbar('scrollTo', $('.active').position().top);
I have a jquery code that works like so... When you hover over a block, a new div slides up and a red block div fades out, then when you leave the hover area the div then slides back down and the red block div fades back in. Everything works fine, here is the jsFiddle:
http://jsfiddle.net/Gsghr/119/
The only problem is when the new div slides up that says "the first item needs to toggle up", the div should stay in its place if your mouse hovers over that div. Instead, as soon as your mouse leaves the div area for the "item 1" grey block div, the other div (that says "the first item needs to toggle up") will disappear.
I tried changing the hover area for the divs via CSS like so, but it did not work...
#coltab li:hover + #coltab ul li, #coltab ul li:hover {
display: block;
}
Maybe I was doing that wrong. But again, it should work so when you hover over the div that says "the first item needs to toggle up". that div should stay in its place and not slide back down. Again, here is the jsfiddle, http://jsfiddle.net/Gsghr/119/ and any help would be appreciated. :)
Also if you hover over the divs multiple times in a row there is jumping and the whole function of the hover might even mess up, if anyone could fix that or has an explanation for it that would be awesome.
Change the z-order of the div you want to stay up so that it's higher than the red div. If that's not visually desirable then try using an invisible div with a higher z-order that matches the same size of the div you want to stay up.
The jumping is just coming from how many times the hover is called. I don't know the exact answer to this question but I imagine you can use "undelegate" to keep the events from stacking.
I am also a recent Jquery enthusiast, but I suggest using mouseenter and mouseleave methods.
The mouseleave method will not let the event get down to the child level, and hope that should do the trick.
Check the example demo here: http://api.jquery.com/mouseover/
Tc, Amit
I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
http://www.karenmillen.com/
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
Would the .slideDown() method work?
if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();
after that use $("#div_Id").slideDown('slow');
this will work
Check out slideToggle
Here's what i have so far:
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.
In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.