Develop Reference

jQuery Autocomplete list hidden under the div underneath

I have a <section> tag containing two main divs. The upper div wraps an input to which a jQuery autocomplete widget is assigned. However, the autocomplete list shows under the lower div, making it useless.
I have already tried setting the z-index of both the input and the div to the value that would make it visible, applying the !important annotation, but nothing seems to work. What could be the reason?
Is this really an issue with the z-index? Note that the bottom div contains a widget with animations (drop down menu), if it has any relevance to the problem.
These are the solutions that I tried:
autocomplete suggestion list wrong z-index, how can i change?
jQuery autocomplete suggestion box hidden behind Bootstrap Nav bar
jQuery AutoComplete displaying behind elements after first use
Here's a code that use to fix it, to no avail:
//top div
.tag-filtering-input{
z-index: 4000 !important;
}
//bottom div
.categories-container{
z-index: 3000;
}

Keep caret showing in div after losing focus

Solved. The answer to the question bellow was given to me by #freedomn-m and to found there: Set focus on div contenteditable element
For a Rich Text Editor using an editable div:
I wish the caret to be showing again in the div after, for example, a click on the font size selector. I thought that giving back the focus to the div would be enough but it isn't. Maybe I could save the position of the caret and set it back at its right position after the interruption. But something tells me there must be a much easier way to do that... Maybe something in jquery? So far I've got that:
$("#fontSizeChanger").change(function(){
var newSize = $("#fontSizeChanger").val();
$("#editor").css("font-size", newSize);
$("#editor").focus();
});
"fontSizeChanger" is the id of a drop-down box and "editor" the id of the div.
Any ideas?
Update: What I really want is to see the caret blinking in the div after for example I clicked on a button outside of it.

Issue with z-index positioning of elements in html page

I'm using a jquery autocomplete function in this page:
link
If, for example, you type a 't' in the "Enter entity name" text field, a list of items is displayed. The problem is that the full list is obscured by the chart. How do I specify the z-index value for the dynamically displayed part of the auto complete element? I tried putting a z-index value in the div but that didn't work.

the element has to be absolutely positioned for z-index to work

How do I stop a textarea from scrolling to the top whenever I change its value

I'm making something where a textarea gets more and more text appended. In firefox, the textarea scroll back up to the top each time.
I currently have something like textarea.scrollTop=1000000; to scroll it back down each time it changes, but it still goes up to the top for a very short time.
Is there any way to stop it doing so?

I ran into this problem, too. It happens in IE and Firefox but not Opera and Chrome.
I thought of hiding the momentary jumps to the top by "double-buffering" changes to the textarea:
Create two textareas with the exact same properties and dimensions. Only one of these is visible; the other one is hidden.
Append text to the hidden textarea: set [the value of the hidden textarea] to [the value of the visible textarea] + [text to append]. (The textarea will automatically scroll to the top, but this textarea is hidden!)
Scroll the hidden textarea to the bottom: set scrollTop to a high integer value like (-1 >>> 1).
Swap the hidden textarea with the visible one. Now the new text is shown, sans jumping to top!
You can swap the hidden/visible textareas by using one of two methods:
Use absolute positioning to place the textareas on top of each other in conjunction with toggling their visible property.
Swap the actual DOM elements. I'm not sure if this will introduce a new type of "flicker." You may have to create a div to contain the visible textarea so the layout of the page doesn't keep changing...

i thing that is problem of adding the content via the script, paste your code which append text to your textarea

JQuery UI slide effect creates a new line

I want to enable an effect on my web app where a user clicks an "Edit" icon and a text box elegantly slides out horizontally immediately to the right of the icon. Currently it is sliding out, but not very elegantly, because when I click on the icon for some reason a new row is created in the browser below where I clicked (and all content below is bumped down). The text box slides out, and then bizarrely jumps back up to where I originally wanted it to go, and the new row created disappears.
Please note, however, that if I put the textbox on its own line so that it is fully left-justified against the margin, that it works just fine. But I want it to scroll it to the right of the icon.
This behavior is the same for IE8 and Firefox.
Here is the HTML:
<img src="../images/edit.gif" onclick="toggleNotebox()" style="cursor:pointer"/>
<span id="AddText" style="display:none">
<input name="AddNoteText" id="TextBox" onkeypress="return addNote(event);" />
</span>
And here is the relevant Javascript:
function toggleNotebox() {
var options = {};
$('#AddText').toggle('slide', options, 500);
}
Here is the jsbin.com URL to see this behavior in action: http://jsbin.com/alopu/edit

Try putting a float: left on both elements.
http://jsbin.com/uzoqo
edit: for some reason the above works but if you try to edit it it doesn't show my changes to the code. not sure what happened.

Inline elements, which spans and inputs are by default, don't honour explicit widths. So jQuery's either changing the display of the animated element to block, or wrapping it in a block element so that that element can be animated.
That's why Samuel's change works - floated elements honour widths.