Develop Reference

Fix issues jQuery UI Dialog Box

here's the link to my dialog (click here)
I tried to fix the below in order to referring to the official website dialog (click here) but I can't find how to do that:
I need to :
bring back the cross sign (x) at right side of the dialog,
and add the small exclamation image,
change background color of the title frame only,
and buttons (Delete all items & Cancel), the frame that surrounds them must be like here (with space "High, Down, Left, Right").

Looking at the chrome dev tools, it seems you image files for icons are not loading.
Sort this out and this will fix your icon problems (close button and exclamation image).
Set what ever color you want using following css.
.ui-draggable .ui-dialog-titlebar {
background: red;
}
For Dialog buttons use following css
.ui-button {
padding: .4em 1em;
}

How to trigger bootstrap's mouseover effect programmatically

In twitter bootstrap, some elements get "greyed out" when the mouse hovers over them. This is true of buttons and linked list group items. Two examples are here: http://imgur.com/a/ABhkT#0
Can this effect be triggered programmatically? If so, how?

Yes, Using the 'onmouseover' attribute. It is quite similar to the 'onclick', except obviously for hovering instead.
Like the 'onclick', you will have to include a java script function that would change the css style for that element.
Depending on what you are trying to have this effect on, you could either put it right into the tag that is the object, or use <span></span>.
Ex:
<div onmouseover="fade()">
<p>text to fade</p>
</div>
Javascript:
function fade(){
code to change style
}
should be straight forward, this would fade everything inside the div (including the background)

Ok, I figured it out.
If the effect were being caused by a css class, one could simply apply the class to the element, like this:
$('<my_element>').addClass('bootstrapMouseoverGrey')
This doesn't work, though, because the effect isn't caused by a class. It's caused by a pseudoclass. Pseudoclasses can't be added programmatically.
One workaround is to create a new actual class with the exact same definition as the pseudoclass. In my case, the pseudoclass is a.list-group-item:hover, defined in bootstrap.css.
a.list-group-item:hover,
a.list-group-item:focus {
text-decoration: none;
background-color: #f5f5f5;
}
I edited bootstrap.css to make a new (actual) class, bootstrapMouseoverGrey, with the same definition as the pseudoclass.
a.list-group-item:hover,
a.list-group-item:focus,
.bootstrapMouseoverGrey {
text-decoration: none;
background-color: #f5f5f5;
}
Now, I can just add this class to an element using the line at the top of the answer. This gives me the result I want. Works like a charm!

Using jQuery:
var event = jQuery.Event('<event_name>');
event.stopPropagation();
$('<selector>').trigger(event);
Taken from the docs.

On hovering mouse to close button hand is not appearing

I have written piece of javascript for close button, but when i hover my mouse to close button mouse icon is not changing to hand, so i am not able to close it, however hand appears at some points of the close button
I am facing this issue on firefox and chrome
IE is working fine
Below is some part of it
href="javascript:closeWin()"
keephref="javascript:closeWin()"
style="cursor: default;
Below is its css
element.style {
cursor: default;
}

The default is the normal arrow. Pointer is the hand.
style="cursor: pointer;
element.style {
cursor: pointer;
}

Add CSS cursor:pointer; which shows a pointing hand cursor.
If you are using <a> tag then dont add cursor:default; to it because an <a> tag already displays pointing cursor.

If you want to show hand cursor use this CSS for your close anchor
a.close {
cursor: default; /* modern browsers */
cursor: hand; /* old IE - property is ignored by others */
}

If the tag is a link, remove the style since the href will give the hand
Close
I do not know what you need the keephref for, but it is not recommended to use javascript: protocol for a link

As AlienArrays and Zword said, the default cursor means normal arrow cursor.
If you want the default browser behaviour over an element, use:
style="cursor: auto;"
You can also use the pointer value if you want to force "hand" style cursor, ie. to indicate that something that normally is not clickable will perform an action when clicked.

You can check :hover attribute in css
#element :hover
{
cursor:pointer;
}

Is it possible to give the cursor z-index?

I am guessing no, but it would be really sweet to be able to set the z-index of the cursor with CSS or Javascript.
Let's say you've got some buttons and you want to add a semi-transparent image on top of the buttons for effect. Or in my current case, some SVG paths that have hover and click actions. If I could set the button or SVG z-index to 0, my cursor's z-index to 1 and the image overlays z-index to 2, that would be pretty sweet! The mouse would be going under the overlay and still be able to click on the buttons. It would be even more spectacular to set the visual z-index (which layer the cursor appears to be), separate from the effective z-index (which layer the cursor actually is). So the cursor could appear to be on top of the overlay, but still be able to click on the buttons underneath.
I have my doubts, but I thought I would check if anyone has heard of someone doing this or something like it.

Since no answer has been accepted, I want offer the right answer.
The pointer-events: none is the solution.
See simple CSS example:
.emotion_message {
pointer-events: none;
background-color: rgb(144,238,144,0.5);
height: 20%;
width: 94%;
position: absolute;
top: 40%;
color: darkgreen;
padding: 1%;
text-align: center;
border-radius: 10px;
margin-left:3%;
margin-right:3%;
}
In this example, I wanted to display a chart, with a static summary box over the top, but I wanted the cursor to interact with the chart underneath. I also added opacity to the background-color, so the user can both see and interact with the submerged element (in this case the chart). Now the user sees the box, but the cursor does not.
Thanks #FabricioMatte for this answer in the comments.

You can play with the cursor:none;
See a related Q: Is it possible to put the mouse cursor behind an element or does the mouse cursor have an z-index?

There is no such thing as a cursor z-index.. what you can do is have a jQuery hover function that gets the object that the cursor is hovering over, which in return allows you to find the objects z-index. So really instead of wanting a cursor to have z-indexes, just have hover states.
Then have custom cursors depending on location. Which as everyone is saying cursor:none would be fun to play with for this. Say you want to go under a alpha block, you could just render a cursor under that alpha block to get the effect of the cursor being under it.

Change cursor color on web page?

Is it possible to change the color of the mouse pointer, so it matches the theme of your web site?

Not the color. You can create your own cursor image though, and apply it in css with the cursor property:
body {
cursor: url(myCursor.cur);
}
This page is relevant.

The "cursor" CSS property can be given the URL of an image to use:
.foo { cursor: url(whatever/cursor.cur) auto;
Different browsers have differing support for this; Opera has none I think.