Develop Reference

Bring an element in front of others that have the same z-index

The user can press a button to create new divs on the screen. Each div is the same and has the same z-index. Newer elements display in front of older elements. The user has the ability to drag around the elements. I would like it so that when a user drags an element, that element is now permanently in front of the other elements (until a different one is created/dragged).
Is it possible to do this without keeping track of z-index somewhere in JS and increment it on creation/click? I'd like to avoid this if possible. Is there some way I can use jQuery or something to make a clicked element act as if it was recently created (which I guess is just determined by position in the DOM?)

I assume you are doing something like
container.appendChild(newDiv)
Now, when you click and drag an element, you can move it to the front.
var parent = recentlyClicked.parentElement // or container
parent.insertBefore(recentlyClicked, parent.firstChild)
This inserts your desired div as the first child of its parent, which will move to the top.
Edit: it appears that elements later in the DOM are the ones that are shown on top. In that case, you'll probably want to append the child instead.
recentlyClicked.parentElement.appendChild(recentlyClicked)

On click you could add a class to the element where the CSS targeting that class has a slightly higher z-index. This is probably the cleanest way to do it (no keeping track of z-indexes, just toggling the existence of that class on mouse down & mouse up.
Another idea (not sure if it'd work, but might be fun to try) would be to add a tabindex="0" to all the elements. They can now receive focus. Then in your CSS add a ":focus" state selector targeting those elements. Increase their z-index with that. I don't recall if the focus happens on mouse down or after a full click. It might bring along other side effects line outlines on the element you don't want. And mess with the usability of the tab key on your website. I'd probably not use this unless it's somehow really much simpler in a non-production circumstance.

What's faster, to hide/show an HTML element, or to delete/insert it?

I am developing a navbar where the selected button is marked by a triangle. Do I put a triangle in every button of my navbar and keep all but one triangle invisible (or visible but same background as the button)? Or do I delete the triangle and reinsert it in the new button?
I understand the performance impact would probably be negligible, but I am learning my ropes, so mostly asking out of curiosity (and wanting to learn the best practices)

I would do this sort of thing with CSS. Create an "active" class, then add/remove the class with javascript. This is cleaner and will let you have more control over the styling of your chosen indicator (in this case, a triangle).

.normal{
//normal css for all tabs
}
.normal.active{
//triangle CSS for active one
}
now on selection by using JS add active class on particular tab and remove from others.

There should be a space for your triangle on every menu item. It should just be set to visible on hover. Setting something from invisable to visable takes almost no time. Its better practice than deleting and loading images on a selection.

Toggle two side button css

I create a css button with some tutorial jsfiddle.net/EC2Eh/12/ but this is based on
jquery mobile. How to create a similar button just with javascript that will work like that button, and also where I can change a color of button and dimension.
Here on this jsfiddle.net/EC2Eh/12/ I can't change any color, dimension and so. So can you please tell me is there some tutotial to build this button bar (radio button) that will work just like that but where I can change all things.
Thanksa lot!
and sorry abut my english is not very well but I;m leasen hard.

just 3 steps you have to follow:
take 2 divs
adjust height ,width
give the divs rounded border
change color on MouseHover event and onClick event

Download firebug for firefox, right click on the element in the fiddle and copy out all the css for that element and apply it to your button.

How to receive click events on a div covered by an empty cell of a html table?

In a web page, I have several overlapping html tables (set by using css style position:absolute). In the cell of one of these tables, there is a div element defined, with a click event on it (using jquery).
Here is the problem : if a div element is covered by an empty cell of another overlapping table, the div element wont receive click events anymore. One of the conditions to make this happened is that the covered div have to be set in DOM structure before the covering table.
See this jsfiddle for a better example. As you can see, red element dont receive click events anymore (because covered by the top empty cell of table containing blue element).
I know it sounds strange to have a page like this, but the reason is that in the real application these tables are ui-draggable (thus they can overlap), and the table structure is used to display small organizational charts).
Notes :
I cannot just exchange tables position in DOM or add a z-index on one of the tables to solve the issue, because as said earlier the tables are draggable (using jquery-ui) thus user can change the situation (blue can overlap red or red can overlap blue).

The only way to do this with CSS, without modifying HTML, is to set pointer-events:none; to the overlapping table, and then pointer-events: all; to the specific TD that is blue.
See this fiddle.

Crossfading Submit Button on Hover

I want to customize my submit button so that, when the mouse hovers over it, it crossfades to a new background-image position in my sprite. I can easily get it to switch to that position, but I'd like to have it slowly fade instead.
There are tons of articles on how to do this for simple links, but they all essentially position the other images over the button area, and then fade opacities correspondingly. This doesn't seem possible with a submit button, since input elements don't seem to be able to contain child elements (ie. the other background sprites). Ideas?

I am not sure if this is what you are looking but take a look anyway
http://snook.ca/archives/javascript/jquery-bg-image-animations
DEMO: http://snook.ca/technical/jquery-bg/
anyway, you can still add a click listener event using jquery to any div and make it act like a submit button.
$("div.submit").click(function() {
document.forms[0].submit();
});
add the css, for the mouse over
div.submit:hover {
pointer: cursor;
}

I don't know for sure but if you make the buttons container (a div sized to exactly match the button) you can give it a background image and then fade out the buttons opacity. Can you give an example of the two states you are trying to blend between? It would help give a more specific answer.

There is no consistent way to do this in CSS across all major browsers.
For something like that, you really want jQuery.
Here's a working jsFiddle that shows one example of how you can do this. Just update the fade var to change the timing of the fades.