I am using a JQuery UI menu. It works great, but now I have a problem- I need to manually highlight an item from the menu, so it opens and becomes grey as though it has been selected (see below).
I've tried to force the click manually...
$('#menu a:contains("Saarland")')[0].click();
...but this just selects the item and closes the menu.
Can anyone suggest a way to do it?
Update: I've created the example on jsFiddle.
Instead of clicking on it, you need to make sure that you mousemove it.
$('#menu a:contains("Delphi")').eq(0).mousemove();
$('#menu a:contains("Saarland")').eq(0).mousemove();
Have a look the above code, play around with it. Best of luck!
Tip: You might also want to try and give IDs to your elements, for better scoping.
I'm not sure who this will help, but I've found a workaround.
I set the ui-state-focus and ui-state-active classes manually (jsFiddle).
It's pretty ugly but it seems to be the best solution there is.
Related
I have an idea for an website which needs this kind of technique. It's compared to the fade-in technique but in my opinion this fits the design better. Is there anyway to disable scroll options and only scroll to an anchor when its button is clicked. If anyone got a link to a tutorial it would be really helpfull as I can't get it clear myself.
To disable scroll options, you can use the css overflow rule like this:
overflow-y:hidden;
To add function to your buttons, you'll have to use js event listeners that are set to listen for clicks:
document.getElementById("t1").addEventListener("click", scrollDown);
After that, you can use javascript or jquery to scroll the page to whatever anchor depending on page position/clicks that have already happened etc.
Here's a thrown together jsFiddle of what it sounds like you're trying to do:
JsFiddle
I use a lot of divs in that example, but the only important thing for function is the id of elements used.
Hope this helps!
Im reading through the jquery docs, and Im thinking outterHeight/outterWidth is what I am looking for. But not really sure how to use it for my needs.
Overall I have an element I want to add a submenu to, on click, I want this menu to line up directly under the trigger element. But I need the right edge of the menu element to line up with the right edge of the trigger element. Which the lining up piece of it, I'm sure a little trial and error will get me there its just finding those outter edges and where they are as far as the window/screen/what ever is concerned. So I can nudge them into place.
Key reason I am going this route is cause this menu element is attached to a handful of trigger elements scattered through the UI, and are dynamically recreated for the given trigger element.
Anyway anyone know a good way to achieve my goal? Is outterHeight/width my ideal solution?
I think a better solution would be to use offset or position like the jQuery UI datepicker does it for example. You create your menu at body level and you position it according to the offset of the element that triggers the menu.
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.
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.
I'm experimenting with pop-down menus (inside floating DIVs). Making them appear with onmouseover attributes is no problem, but I'm not sure how I can make the menu close properly.
I'm dealing with an image that has links mapped over it with <map>. I want people to see a menu when hovering over a link.
I figured the best way to know when to close the menu is wait until the mouse is no longer hovering over the HTML element that called the menu or the menu itself, then wait one second, and then close the menu.
Is my idea something that can be implemented, perhaps with some jQuery? Or is there a better and more efficient alternative?
I will throw my recommendation behind the jQuery hoverIntent plugin. Should be up and running quickly, very configurable, and no need to roll your own code.
I did some additional digging myself. http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
I need to somehow combine this with a <map> that makes parts of an image invoke a drop-down menu. Do you think this can get the job done?
with jquery:
$("your-menu-button-selector, your-menu-selector").bind("mouseleave", function(e){
clearTimeout($(this).data("mouseleaveTimeout"));
$(this).data("mouseleaveTimeout", setTimeout(function(){
//your code
//closeMenu();
}, 1000)); //one second
});
you also want to clear the timeout when opening the menu!
$("your-menu-button-selector, your-menu-selector").bind("mouseenter", function(e){
clearTimeout($(this).data("mouseleaveTimeout"));
//your code
//openMenu()
});
I understand it now, you can have the same thing apply also to the link and the menu box so that when hovering the options, it does not disappear.