Develop Reference

Tooltip display difficulties

I'm trying to resolve a problem that I encountered with the creation of a tooltip interface in a website I'm developing. I constructed the tooltips with help of HTML, CSS and JavaScript. The script is pretty simple as you can see in the fiddle underneath, and is based on a toggle behaviour, on witch a trigger element open a pop-up tooltip.
jsFiddle
Now! My problem is that i can't figure out how to place the trigger on the top of everything so they are not hidden by the pop-ups! Let me explain. Since the pop-up, even when they are off, sometimes cover the trigger elemets they (the triggers) just result not clickable. is like they are hidden behind invisible pop-ups. Here is a link of how is right now online.
http://271116.lucamule.com/studio-1
I hope you can see the problem! Does anyone know how to resolve this?

You've changed the .pop-ups to "block" as soon as it initializes. $("div.pop-up").css({'display':'block','opacity':'0'})
If you want to show/hide, I would recommend using .fadeIn/.fadeOut: http://api.jquery.com/fadein/

Can't trigger a jquery function with scroll on a particular div

Short version: This works
$(document).on("click",".Container",function(){})
This does not:
$(document).on("scroll",".Container",function(){})
Long version:
I'm sorry but posting a code snippet isn't feasible as it's a complex app-like interface but I'll try to explain the issue to the best of my abilities:
Mobile responsive website that loads different interfaces depending on screen real-estate.
Smallest interface composed of 3 parts - navigation at the top, search at the bottom and content in the middle.
Content is mostly loaded during use and not at page load.
I need to trigger a function when the content is scrolled, both up and down and on the fly not just past a certain point.
I can still scroll, it just doesn't trigger as an event.
I've tried everything I've found to no avail, from my short experience and what I've been reading I think it might have to do with how scroll doesn't bubble up the same as click, but I have no idea what I should do or try with that information.
While it doesn't seem to influence my problem (removing it doesn't solve the issue) I should disclose that I'm using hammer.js to simulate touch events as it might influence the solution.
Thanks in advance for all the help.
Beyond this point I'll edit with suggestions that didn't work--

I think it's because the scroll event doesn't bubble and you are adding the listener as delegated, you should add it directly:
$('.Container').on('scroll',function(){});
More info about this in:
https://api.jquery.com/on/

With help from #A. Wolf and #M.Doye I found something that works. While it doesn't help understand what was wrong at least its working.
document.addEventListener('scroll',function(event){
if(event.target.className==='Container'){
insert magic spell here
}
},true);

How can I manually highlight an item in a JQuery UI menu?

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.

Jquery drop down menu strange behavior

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.

IE 6 select controls(Combo Box) over menu

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.