Nav sub menu not staying visible when hovered over in firefox browser? - javascript

My nav is positioned at the bottom of the page, and the sub menu appears above the nav.
I also have a bit of jquery which fades out the content when the nav is hovered on. However I think this query is interfering with the sub menu, as it doesn't stay when one hovers over it, this seems only in firefox browser?
please have a look here on a firefox browser http://intelligen.info/index.html
$("#nav").hover(
function () {
$(".index-content").fadeTo(700,0.3);
},
function () {
$(".index-content").fadeTo(700,1);
}
);

Your gap is set way to high, using bottom leaves whitespace between the hover and the element you are hovering over. Also, I wouldnt use jQuery for adding CSS elements such as fading. You can use transitions to do that.
#nav li:hover nav {
bottom: 12px; /** Change to 12 to fix **/
display: block;
left: 0;
position: absolute;
}

Related

Filter: blur is causing transparent background

I am making an off-canvas nav for my site on mobile view. When I click the hamburger menu the below is expected to happen:
off canvas nav slides in from the side (translateX(100vw) -> (0vw))
Everything other then the nav and header logo will be blurred (having trouble here)
Hamburger menu changes in to an X
However when I click the hamburger icon the nav slides in but for some reason the background is transparent and I can't figure out what is causing this behavior.
I don't know which part of my code is causing the problem so I don't know which part to post. I got a setup and as you can see the bg for the nav is transparent after it slides out....
https://codepen.io/tomokiota/pen/jOxRNza
body.blur main > * {
filter: blur(5px) brightness(0.7);
pointer-events: none;
user-select: none;
z-index: -1;
}
z-index:-1
on the main tag wasn't being applied because my offcanvas nav had a position of fixed but my main didn't have any specified position value.
After setting position of relative to main, problem was solved.

How to keep div visible when hovering another div

I found a few similar threads here after a good while of searching, but none of them was in the same situation as me, so i decided to ask.
I got this drop-down menu that gets the height 460px when i hover over a tab, and loses the height when unhovered. I need the menu to stay there even when the mouse is moved from the tab over to the menu.
Like this: http://jsfiddle.net/muo4ypvc/
I can accomplish this by setting the menu position to relative, however i need the position to be absolute in order to adjust the z-index.
When i try to set the position to absolute, the menu won't keep the 460px height on hover, it only has the height when the tab is hovered. I've also tried some other things like wrapping all the html in a container, and put that as the mouseleave element, but with no success. How can i make it stay on both tab and menu hover?
html
<div id="tab">
<a id="tab">Categories</a>
<div id="menuDropdown">
<div id="innerDropdown">
<!-- menu content -->
</div>
</div>
</div>
js
$(document).ready(function() {
var inner = $('#innerDropdown')
var rolldown = $('#menuDropdown');
$('#tab').mouseenter(function() {
rolldown.toggleClass('show');
if(rolldown.hasClass('show'));
setTimeout(showInner, 130); /* waits 'til drop-down animation is finished */
function showInner(){
inner.toggleClass('show');
}
});
$('#tab').mouseleave(function() {
inner.toggleClass('show');
rolldown.toggleClass('show');
});
});
css
#menuDropdown {
position: absolute;
transition: (some long ass transition code);
}
#menuDropdown.show {
height: 460px;
}
#menuDropdown.hide {
height: 0px;
}
#innerDropdown.show {
display: block;
animation: fadein .15s;
}
I wrapped your html into another div to show that the wrapper keeps its height, but I'm not sure I understand what you're trying to do and what doesn't work. I basically just added position: absolute:
.description {
position: absolute;
}
See demo: http://jsfiddle.net/4tb29u6h/1/

Side by side fixed divs - one is overriding the other

http://codepen.io/justinturner/pen/VjyWJE
The linked codepen has a fixed header div.
I'm using javascript to add a menu div on the left when the hamburger icon is clicked. This is also a fixed div.
When the menu div is added, the header div seems to revert to relative positioning, and jumps to the top of the main content div. Scroll down just a hair and then click the hamburger, you'll see what I mean.
What issue am I running into here? When a user clicks the hamburger, I want the header to remain fixed and translate directly to the right like the rest of the content.
<em>too much code to paste</em>
According to the spec and other similar questions here on SO, fixed elements and translates don't "play" well together.
As a workaround you could:
1) Use transitions (eg. on the left property) instead of transform (translateX)
2) Remove the position:fixed button from the container which uses transforms
Following the first suggestions from above (using left instead of translateX), edit your code to the following and the issue should no longer persist.
.o-wrapper.has-push-left {
left: 300px;
}
.o-wrapper {
position: relative;
transition: left 0.3s;
}
#header-wrapper {
transition: left 0.3s;
}
.has-push-left #header-wrapper {
left: 300px;
}
DEMO

Filmstrip Style Image Gallery

I am trying to figure out how to create an image gallery like the one illustrated below so I can place it onto my website. I am wondering if anyone can point me in the right direction for a tutorial? I have found a lot of nice galleries that will display my images, but none of them displays the images like in the filmstrip style I am after.
Requirements of gallery:
When clicking on the arrows, the gallery strip will either shift
left/right by one picture
Hovering over the image will darken the image, and display some
caption about the image
I just answered a question where someone was using carouFredSel. This jQuery plugin looks like it would work pretty well, though I do not think it has the built-in hover effect. To be honest though, that is the easier part.
The trick is to make the width slightly larger than the images to show, which leads to the partial images on each side.
Here is a jsfiddle to illustrate.
UPDATE:
The OP asked if the page nav links could be repositioned. I modified the jsfiddle to work this way. The additions were as follows:
.list_carousel {
position: relative;
}
#prev2 {
position: absolute;
top: 35px;
left: 0;
}
#next2 {
position: absolute;
top: 35px;
right: 0;
}
If you have a relatively positioned container element, you can absolutely position child elements. I added relative positioning to the list_carousel container, then I could absolutely position the nav arrows within the container. Change the top value to position vertically, and left/right to position horizontally.
I also removed the pager all together, as it was not a requirement based on the original example. If you change the page arrows to images it is pretty much what you want.
MORE UPDATES
I decided to take it one step further and make the hover effect work more like the example. See the new jsfiddle. The changes are:
Added span wrappers around all text within list items
Added $(".list_carousel li span").hide(); to hide all the spans
Modified hover event to toggle spans
I also added some CSS to position the span text:
.list_carousel li {
position: relative;
}
.list_carousel li span {
position: absolute;
bottom: 0;
display: block;
text-align: center;
width: 100%;
}
FINAL UPDATE (I PROMISE!)
I decided to go all in and add the transparency layer too: jsfiddle
Hover modifications:
$(this).prepend($("<div class='hover-transparency'></div>")); and $(this).find("div:first").remove(); to add/remove transparency layer on hover in/out.
CSS modifications:
.hover-transparency {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.60);
}
These style the transparency layer. Change to suit your taste.
Something like jCarousel should do the trick. Once you have the carousel functionality in place, you can add in the hover affect via CSS and a span that contains the caption.
I was just looking at ContentFlow Plugin which is JavaScript based.
They include a separate library of additional plugin you can use that takes care of your Slideshow requirements, in particularity this one HERE. When you use the mousewheel over the 3 images, it scrolls by 1. That said, you can mod the plugin to do the same when the arrow buttons are clicked.
Sample plugin markup looks like:
{
shownItems: 3, //number of visible items
showCaption: true // show item caption
width: 100, // relative item width
height: 100, // relative item height
space: 0.4 // relative item spacing
}
To address that the captions should be visible only on mouse hover, I would set showCaption to always be true along with using a jQuery .hover(); Event Listener that will use .show(); and .hide(); on the caption Class Name .caption when required. Also, using jQuery to set the opacity can be done within the .hover(); event too.
The latest version of ContentFlow v1.0.2 supports multiple instances on the same webpage if that's ever required.

JavaScript: Nav Bar Drop Down inside List Item

Can someone please provide insight into how I can replicate the functionality shown in this example.
Specifically, the navigation bar (first tab) > Watches. The user can hover over the link and a full screen width dropdown is displayed and hides after either when a user clicks on a link or mouses out. I am creating a similar menu type drop-down and need this to function across all platforms and browsers, including ie7.
Appreciate the insight.
Nothing terribly fancy there, or that would require modern browsers, just using typical :hover psuedo-class to show the the menus, which are initially hidden.
There is a wrapper #navigation that sets position: relative (this allows children to be absolutely positioned relative to it). Then there is a <nav> tag inside there used to center. Then inside of that is a ul.level-1 with li's that are display: inline which are the main menu items. Then within those are the menus you are fond of, which are absolutely positioned down a bit and are 100% width.
Then the bit that displays the menu:
// level two menu hidden by default
div.level-2 {
display: none;
}
// show level-2 when hovering parent menu item
ul.level-1 li:hover div.level-2 {
display: block;
}

Categories

Resources