Topic: CSS WTF

[ober]

I have a div that I'm trying to position and show (it's a hover menu) and I'm using JQuery to do it.  The thing is, I can watch it make the changes using Firebug and it changes the display of the item and it goes to display:block but it still shows as hidden in Firebug and it's obviously not appearing on the page.  Any ideas???

Code: [Select]

        var $more1 = $("#more1"), pos, width;

       
        function showMoreMenu(menu, id) {
            pos   = $("#"+id).offset();
            width = $("#"+id).width();
            height = $("#"+id).height();
            menu.css({ "left": (pos.left - 5) + "px", "top":(pos.top + height) + "px" }).prependTo("#"+id).show();           
        }
       
        function hideMoreMenu(menu) {
            menu.hide();
        }
       
        $("#arrow1").mouseover(function() { showMoreMenu($more1, "arrow1"); });
        $("#arrow1").mouseout(function() { hideMoreMenu($more1); });

[ober]

The even more strange thing is... if I comment out everything in showMoreMenu and change it to:

menu.show();

It works.  So it's like it doesn't like the chaining or something.

[micah]

is it because you're prepending the menu TO arrow1 instead of arrow1 TO the menu?

what if you just change "prependTo" to plain old  "prepend"

[ober]

Ok, got it sorted.  Apparently you must prependTo the contents of an element.  I was trying to prepend the menu to an img tag and you need to prepend to the contents of a div or a span or something.  I change it to a span and now it's working.  It's not putting it in the right position, but whatever.

[Mike]

the prependTo looks right.  He wants attach the menu to the element that caused the hover.

I would probably change the order of the chaining though.  Try show().prependTo()

BTW there is a offset() function you can use instead of building the css part

Code: [Select]

menu.offset({left: pos.left - 5, top: pos.top + height})

edit: Ah, you posted in the meantime.  Yeah, prepending to an img tag doesn't work too well :P