My Problem (Fiddle)
My problem is that on my jquery animated dropdown menu, when you hover over the "Other" link, the sub menu does not appear. When using firefox to 'Inspect Element', I find height is animated, and the width appears to be alright, yet all I see is the left border.
I noticed that if I have that particular section display as a block, when you animate the first menu it is shown, but upon entering the unordered list, it disappears (ex). I imagine it is somehow related to this, but I can not figure out what is causing this.
Any incite into what I'm probably just overlooking would be great, and of course much appreciated.
Notes:
I have had this problem in Firefox, Chrome, Opera, and IE.
It's designed such that it could work with only css. The the first .each is overriding default css hover behavior.
the empty span holds the arrow image.
only relevant code is posted. However, you may view my site here
If you have any tips on making something more efficient, always welcome.
http://jsfiddle.net/sailorob/4cdTV/5/
I've removed your CSS for simplicity's sake and simplified your functions by utilizing jQuery slideUp and slideDown, which essentially handle many of the css properties you were managing with your functions. From here, I think it would be fairly simple to work back in some of your CSS.
When utilizing javascript/jQuery/animation on menus, I highly suggest using timers (setTimeout) for firing mouseenters and 'leaves. This way, your menu is more forgiving when a user accidentally moves their mouse a few pixels out of the menu and it closes.
Well, in debugging the JS and CSS I found that if you remove ALL the JS you have, the drop down menu with sub menus work fine. The Other li opens up the ul below it just fine. Note, it doesn't animate without the JS though.
Here's a forked fiddle.
I tested it in latest Chrome and Firefox.
Related
I am new to javascript and jquery. In the online course i am doing, we are learning to make our mobile menu appear and disappear by having it add a modifier to the selector element when you click the menu icon (.nav-bar__menu-content to .nav-bar__menu-content--is-visible, for example). When i go to chrome inspect, i can see that the js is working because the modifier is being added and then removed when i click on the menu icon. However, the actual content is not appearing and then disappearing. I'm not sure why? There doesn't seem to be a specificity issue and i am pretty sure i am targeting the proper selector. Any help is appreciated and also sorry if my language is confusing. I'm new to this.
code
I'm looking for a way to do an effect which is most likely a combination of things, the base of it would be something like this:
http://nikestadiums.com/
As you can see, when you scroll down, a div is actually sliding up. I am not sure there is such a plugin, and if there is, is it possible to resize and maybe re-position elements as you scroll down?
I've seen the post:
How to make div scroll down with a page once it reaches top of page?
and I know of sticky elements http://imakewebthings.github.com/jquery-waypoints/sticky-elements/
Is it even possible to do something like this? If yes, can you give me links/examples please?
And of course I need to make it super super smooth like the Nike one...ha
Here is a jsfiddle, but I can't get it to work right.
http://jsfiddle.net/3U2Gj/65/
Thanks.
I've modified your JSFiddle. I tested it in Chrome, Firefox, and IE7+.
http://jsfiddle.net/t0nyh0/aMXRq/3/
I've cleaned it up a bit and moved all your "states" into classes. On scroll, it simply uses JQuery to add and remove classes based on the scroll position.
Note that there is no animation, if you wish to animate it, you can use class transitions to animate. See more here: http://docs.jquery.com/UI/Effects/ClassTransitions.
In regards to entering full mode on keydown, you can again create an "expand" class and apply it upon keydown. You can then structure your CSS as follows:
.minState3.expand { }
and to show the button again
.minState3.expand button { display:block; }
Doing it this way allows you the flexibility to define how it looks based on the different states.
I need a little help...
After read and search for a while I discover a good jQuery plugin to deal with the selectbox custom style problems. I made some small modifications to make it work as I want. The plugin hide the custom select and append some div and ul tags.
In Firefox 3.6.10 it works really nice, but in Chrome (6.0.472.63), Opera (10.62) when I tried to scroll down the selectbox list (in this case the div with an overflow) it disappears.
It looks like a bug, could you check it please? Try to look around line 182:
.blur(function() {...}
I tried to make an example so I cleaned a lot of my custom CSS and make it all clear for anyone who wants to analyse it.
view example HERE and please try it on FF and Chrome/Opera
PS: I didn't pay much attention to IE... It will be another fight, but i'll keep it for later!
Any help would be appreciated! Thanks for your time!!
Cheers from Portugal
Yeah, it does look like a bug. I'm not sure exactly what the appear and disappear mechanics are for this control, but it looks like when I try to scroll the drop-down area, the .blur() style event is firing for the parent control, but no .focus() style event is firing for the child control.
You might try delaying the drop-down disappearance by a second for .blur() style events, then only hide the drop-down if the .scrollTop() of the drop-down hasn't changed (this gives the user a delay between when they grab that scroll bar in order to actually scroll it, and it won't hide if they do so). That's a massive work-around, but without studying the code a lot more closely it's hard to know if there's a better approach.
Please check this site: pixeli.ca/works/italia
There I work on the site. The problem is when I just open this address, it doesn't show two panels using jScrollPane properly - these look like narrow horizontal stripes with content inside them. Then I click any of the top nav bar items and it becomes what it should be - all looks fine. What can I do to make it work right way from the beginning?
Seems like there is something related to jQuery hide() function. When I turn it off in the document, it works well. Did anybody face something like this before?
Yes, I have solved the issue. So, there is a simple animation effect implemented in the site through jQuery fadeIn function. It shows elements gradually first time, then sets a cookie so this animation doesn't work anymore.
Here is a piece of code where I made it work:
setTimeout(function () {
loadContent('about');
$('#doc2').fadeIn(1000);
}, 7000);
The #doc2 div is the main container for content and I noticed that when it is visible and I load content using my function loadContent('about') it works fine but doesn't work right way if #doc2 is hidden. I just added this function to be executed the same time as fading in #doc2 and now it works well. If you have any questions regarding it, please feel free to ask.
In IE 6 select control(combo box) is displaying on top of menus. I checked some Javascript menus, mmmenu, but all are getting under select control. It's not fixable by assigning Z-Index. Is there any other solution.
This is a well-known bug with IE6 with trying to absolutely position divs on top of select controls.
There are workarounds involving iframe shims, but there is no good answer. The iframe shim answer is to place an iframe underneath whatever div you're trying to place above a select, with the iframe being the same size. Unfortunately, this is a huge pain in the ass.
I suggest using a javascript menu system which already uses iframe shims, such as YUI menus (and I assume jQuery).
Most of the major javascript libraries have easy to implement solutions to this problem. We use jQuery, and the bgiframe plugin is very easy-to-use and solves the problem.
Daniel is definitely right. This is an ugly issue.
However, there may be another solution. If you are using multi-tiered menus that pop open and closed, it is possible to write JavaScript code that literally hides the problematic SELECT elements when the popup is opened (style the element to have a visibility of hidden). Then when the menu closes you can unhide that same SELECT control.
Then you just have to write code that detects which SELECT objects get in the way of a particular menu before it opens. It's not trivial code, but it's definitely possible to write. Then I'd just wrap the entire chunk of code in a conditional that checks to see if the user is on IE as there's no need to run this on Firefox or Safari.
The problem is that SELECT are "windowed" elements in IE6, and their z-index is above all the other non-"windowed" components. If you absolutely must have something above a combox, you might want to put it inside another windowed compnent, such as an IFRAME, and set the component's z-index to be higher than that of the combobox.
I must admit, this isn't a pretty solution.