On my site, I have a sticky navbar that is always positioned at the top of my site, so even as you scroll down, it's still visible.
It's also transparent, and just contains some black text.
The problem is that on my page, there are several divs with varying background colors. So as I scroll down the page, the text in the nav looks fine as I overlay divs with lighter backgrounds, but it's really hard to read on darker ones.
I figure I have two options:
Change the nav text color based on if I'm overlaying a div with class "dark"
Change the nav text color based on the background color of the div beneath it.
Are either of these possible? Or is there another option I'm not aware of?
I just read about Midnight.js, a jQuery plugin that allows you to use data-attributes on the elements you scroll over to define how your navigation should look. Might be worth to give it a look.
Check out jQuery Waypoints. It's perfect for your problem. You can specify exact waypoints so that the moment a differently colored div hits your menubar, an event is fired. and in that event you can change the menubar color. And then you'd have another waypoint at the bottom of that div so you could reset the color.
http://imakewebthings.com/jquery-waypoints/
Related
The effect I want to achieve is an image in a div that has a coloured highlight on top (with some opacity to see through it) and when you hover over that image a certain radius around the mouse will have the highlight removed (think of shining a torch over a greyed out image to reveal a brighter around around the torchlight)
I don't know where to start with this because I wasn't sure about dynamically styling a portion of a div without setting proportional properties in css. I know i can achieve a 'blocky' version of this with on hover and styling sections of a div on hover but that means i would have to constrain the styling to seperate div elements and it would not be 'fluid' so I'm looking for some pointers to a js solution I can write (possibly on mouseover call a function that gets mouse position and gets radius around it but then I wasn't sure how to dynamically style that radial area?)
Are there any functions that allow this type of styling within a dynamic area?
The solution you're looking for might be achieved through CSS but using JavaScript mouse events can also help.
Like discussed in the comments section, you can use help of the mousemove event to somehow achieve what you desire.
For other users reference, here is the link to the codepen https://codepen.io/edupoch/pen/GIhJq
In the codepen above, instead of the zoomin cursor image, you can use some gif image with the effect you want and apply it using the above code.
Is there a simple way to trigger a hover event on all overlapping elements? I'd love to be able to do it with just CSS.
Here is a little example: jsFiddle
Basically I have a few rows of divs which will move with the page when I scroll. Then a single overlapping div with it's position set to fixed. Both sets of divs have a CSS:hover event to change their background color so they get highlighted when I mouseover them.
My goal is to make it so that when I mouse over overlapping it turns red AND whatever sample text div that is behind it turns grey.
The only way I can think of to do this right now is with javascript. And it's inelegant. Basically get the mouse position on the overlapping div, and loop through all the sample text divs to check if their position is under the mouse.
I'm using flexnav for a top menu bar and I can't seem to change the color of anything. I'd like to have a different background color, but no matter what I change in the css the appearance of the flexnav bar stays the same. It's a pretty generic grey-black with a darker black for hover items. I've changed the color setting for the menu buttons, the border, etc. but nothing seems to make a difference.
Is there some js that is overwriting the css maybe? I can't find the problem.
Is it possible to have a row of Links and when the mouse hovers over one of the links, the background fades into the background image set to that link.
Lets say theres 5 links [Coke][Burger][Cow][Chicken][Dog]
when you load the webpage there is just the original background, but then when you hover over [Chicken] the background image changes to a chicken, then if you hover over [Coke] Theres the cocacola logo as the background.
I think you get the idea?
well, I would do that by css using ids (#lnkCoke, #lnkBurger, etc.) and the :hover pseude-class
but if you want to do it by javascript I would use data attributes (Coke) and mouse events (onmouseover and onmouseout) to change the background image
long time listener, first time caller.
I have a matrix of icons that can be navigated horizontally in a carousel, and vertically as categories (which are rows of icons) that are detached/appended as the app cycles through the categories with up/down arrows.
I want to make the lowest row of icons fade in opacity (I have a black background) from the native colors of the icons into blackness as you go from top to bottom, to indicate that there are subsequent rows beneath. The only way I have been able to determine how to do this is using background: -webkit-gradient, as indicated here:
CSS3 Transparency + Gradient
I apply this to a DIV which I overlay above my lowest row. Unfortunately, I lose clickability of the items behind the overlaid div. I have to use the overlay, however, because the property is a background property.
Is there any other way I can implement a gradient opacity on a row of clickable icons that fades to black without sacrificing the clickability? I don't want an overlay that only covers the lower 25%/whatever either... I need an all-or-nothing solution to this. So far it's looking like "nothing" is my only option.
Thank you very much in advance.
Hmmm... two solutions come to mind.
First, you could use the overlay, and track mouse events on that element. Then, with some math, you could probably figure out what the underlying element is use jQuery to trigger the click of that element (ie. $("#icon14").click(); ).
The second option would be to draw out a companion transparent div with each icon you make in your matrix. Place it in exactly the same spot as the icon itself, but give it a css z-index that brings it above the overlay. This transparent div can now handle all the mouse events for you, and still live above the overlay.
If you go down this road, I'd look into using the .data() function that lets you quickly tack on variables to any jQuery object. You can set this companion div to be a property of the normal icons in the matrix, with something like $("#icon14").data('clickDiv', $("#icon14_click")); (though you'd probably want to assign these in a loop or something =)
Good luck!