I have a fairly standard menu, consisting of an unnumbered list. On mouseover on the first level of the menu, I want to show the second level, preferably using a nice animation.
My first though was to use jquery.ui.show like this: $(this).find("ul.subnav").first().show('blind', '', 600);
This works, but for some reason the animation sets the bakground to transparent so that the "dropdown" has white text on white background until the animation is done. At the end of the animation, the background is set to dark gray.
My nest test was with the following functions: $(this).find("ul.subnav").first().slideDown(600); $(this).find("ul.subnav").first().show(600);
Again, this works, and the animation is actually not bad, except for the fact that only the first menu item is displayed until the animation is done.
I'm working on a menu system where I want a <ul> to show as a dropdown when the users does a mouseOver on <li> in another <ul>. I thought I'd use position to set the position of the dropdown (so it actually looks like a menu). What I want is the dropdown's top left corner to start at the same place as the bottom left corner of the wrapping listitem.
Unfortunately the positioning fails in several different ways: * In firefox it seems like the dropdown's are offset with approximatly -100 25 pixels * the first item in the list has a different offset on the left side compared to the other items * The offset in IE is not the same as in FF
I have a table with 7 columns that is slow when i use the tablesorter. Profiling with firebug in firefox shows that one row takes approx 3,75ms to implement, i only use the zebra widget, no default sorting. At 1000 rows we are talking 3.75 sekond before the user sees anything. Is there any way to optimize the speed for this thing? I don't need to show all the 1000 rows at the same time, but it needs to be sortable.
I have a table full of cells where i want the user to be able to click on a cell to convert it to an input box for editing (ala excel editing). When the user leaves the "cell" (onblur event) i want to check the content of the input for any changes, and if changed post it to the server with an .ajax call. In FF it works almost perfectly, except if i click fast from cell to cell, then it somtimes "misses" and altough the previous is converted back to text and saved to db, the new one is not "selected". In IE7 when i click in a "cell" it gets converted just fine, i can type and when i leave the "cell" it updates correctly. However, if i click in a "cell", then tries to click in the "cell" again (after its converted to an input), IE7 comes with "Error 'undefined' is null or not an object." on this line: var cellOldValue = $(event.target).html(); Here is the relevant code: Setup the event handler: $('tbody td').click(function(event){cellClicked(event);}); Here is the function: function cellClicked(event){ if ($('#selected') != null && $('#selected').length > 0){ // blur event still firing setTimeout(cellClicked(event),25); //wait until the blur event is done before converting the next field } var cellOldValue = $(event.target).html(); // IE7 bug when clicking on the same cell twice? $(event.target).html('<input id="selected" type="text" value="' + $ (event.target).html() + '"/>'); $(event.target).children("input:first").focus(); $(event.target).children("input:first").blur(function (event){ if (cellOldValue != $('#selected').val()){ var i = 0; // find the index of the cell, could have used cellIndex but it apparently has some problems in som browsers var td = $(event.target).parent(); while (td.prev().length != 0){ td = td.prev(); i++; } cellPostData($(event.target).parent().parent().attr("id"), i, $ ('#selected').val()); //save data } $(event.target).parent().html($('#selected').val()); //remove the input at set the new value in the cell }); }