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.
Related
I have a slideshow that’s using jQuery cycle2. I’ve included a jsfiddle with a mockup of how it needs to function in my project: https://jsfiddle.net/b1tfx58o/2/
It has navigational links on the side and it has a red small box on the edge that’s supposed to move to align with the nav link. For example if I click “slide 2” than the red box will slide down and stay there like it does for slide 1. If I click either slide 1 or slide 3 than it will move to be in the middle of the border line for that link. You should also be able to click on the red box to make it go to the next slide. I have that part working but not moving it when I click the links. Any help on this would be much appreciated!
The script so far(checking the JSfiddle will make more sense):
var icon = $('.icon');
var slideshow = $('.cycle-slideshow');
icon.on('click', function(e){
e.preventDefault();
slideshow.cycle('next', function(){
});
});
You need to add click listeners to each list link, to run a function that .getBoundingClientRect() of 'this', referring to the link clicked, then use the 'top' value from getBCR to change the top position of your icon element. You'll likely have to combine it with window.scrollY for your project.
See here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & good luck
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");
I'm trying to get the arrows for my jCarousel to show only when I mouse over the container (I will have multiple containers in same page)
But I have no idea how to even approach this.
Does anyone have any hints as to how this can be done?
It would be greatly appreciated!
First you have to hide your arrows by default, so in CSS do:
.arrow-class {display:none;}
Then use jquery to show when you hover over the image
$(".image-class").hover(function(){
$(".arrow-class").show(); //this happens when you mouse in
},
function(){
$(".arrow-class").hide(); //this happens when you mouse out
});
I have a fixed navigation at the top of the page that has links that smoothly scroll you around to different sections (IDs) of the page via jQuery.
Would there be any possible way to have a css class (e.g. .current) appended to the navigation links depending on what section of the page you're at?
For example, when I click "About", it'll scroll down to the About section and also make the navigation text orange as long as you stay in that section?
I've seen this done somewhere a while ago but I don't remember the website or even how to describe this behavior to search for it.
EDIT: Here's a link to something siliar to what I'm looking for:
http://www.fat-man-collective.com/hello.php
The icons change depending on your position on the page.
Script:
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}
</script>
HTML:
About
[...]
<div id="about">
[...]
</div>
Any help is greatly appreciated.
This would be possible by examing the offset()* function of the desired element and then coding to respond accordingly. You can track the offset of an element, and depending on the resulting offset, you would apply or remove the appropriate classes accordingly.
*See the documentation for offset()
When you click on a section in the navigation, just modify the class so that the style is what you want it to be.
Secondly, you'll need to add an event handler on the scroll event that similar modifies the nav's class.
Try this:
function goToByScroll(id){
$('ul#nav li a').removeClass('active'); // elements in menu
$(this).addClass('active');
$('html,body').animate({scrollTop: $("#"+id).offset().top - 50},'500');
}
Four years later...for those that have the same question since hopefully the OP has solved his problem by now.
Check out Bootstrap's ScrollSpy plugin, which "is for automatically updating nav targets based on scroll position." For an example of using the ScrollSpy plugin see this detailed tutorial on how to make a floating, updating navbar (like the Bootstrap site uses).
I have this menu (# jsFiddle) where this will happen given the following mouse events:
Hover on Movies
Then start dragging mouse to mouseover on Movie library
While dragging you accidentally touch the Home menu item
Causing the Home submenu to appear and hiding the Movies submenu.
This is not the desired effect i want. So im seeking some assistance. How can i solve this so that if im dragging my mouse and i accidentally touch some of the other menu options, the javascript will be smart enough to know that it shouldn't hide the selected submenu.
Can i add some kind of delay on the hover? All help is appreciated!
You can use hoverIntent to throttle mousein/mouseouts events to prevent accidential firing (you need this I think...). Check examples on hiverIntent's site. You'll like it.
I think this plugin fits exactly for what you want to do : http://cherne.net/brian/resources/jquery.hoverIntent.html
I hope this is what you want. If not, i'm sure it will guide you to the final solution
$().ready(function(){
$('ul.menu').hover(function(event){
var hoverItem = event.target;
//hide other ul's submenu
$(hoverItem).siblings('li').children('ul').stop(true,true).hide()
//show current submenu
$(hoverItem).children('ul').stop(true,true).fadeIn()
},function(event){
//console.log(event.target);
$('ul.menu li').children('ul').stop(true,true).delay(1500).fadeOut()
})
});
Hope to have helped you. Cheers