We Keep Coding

How can I stop jQuery UI dialogs from getting squashed?

I have a fairly simple div element which I want to turn into a popup via jQuery UI. The HTML is basically
<div id="login_form">
<table> ... </table>
</div>
Without any jQuery involvement, it renders fairly naturally like this (the green background comes from the div and fits around its contents):
When I make it into a popup with this code:
$(document).ready(function()
{
$("#login_form") .dialog (
{
autoOpen: false
});
$("#login_or_sign_up") .click (function()
{
$("#login_form") .dialog ("open");
});
});
It renders like this.
Yuck.
I'm fairly sure the reason is simply that I haven't included the jQuery UI CSS files. I don't want to include the jQuery UI CSS files.
By inspecting the popup I notice that jQuery has created another div which surrounds the one I provided, and this is styled to have a width of 300px. I expect this is the problem -- jQuery UI has picked a size which is too small and the inner elements are not reducing themselves to fit.
Can I make jQuery dialog-ify my div without shrinking it?
If not, I can probably work around this by adding width:100% styles to the inner elements individually. In that case, is there a general workaround which will not require me to alter any of the inner elements?

.dialog({ width: 'auto' }) works.

changing top position for all elements of a class using jquery

I have a multiple div's which have a onmouseover action which generates the top for them .It is OOTB js file so I cannot change it .Is there a way that I can change the top values of the div elements with the same class to another value after the onmouseover event has fired .SO lets say this event creates the pop up with the top 123 and I want the top to be 23 .Is it possible .
Thanks

If you are talking about using jQuery UI to create dialogs on every mouseover event and you are trying to change the dialogs position by changing it's top property then you will need to use the dialogs position option like this:
$("#popup").mouseover(function(){
$(this).dialog({
position: [123,23]
});
});
This will create a dialog with a left property of 123px and top of 23px. Alternatively, if you insist on using the css method then you could do it to the div which is wrapped around #popup when the dialog is created:
$(".ui-dialog").css("top", "23px");
For more info on the dialog position option: http://api.jqueryui.com/dialog/#option-position
NOTE: This question is very ambiguous and since I can't comment yet, I have had to do a lot of guessing.. I was killing time :)

Button resizable jquery magic margin

I have created a button using the <button></button> tags. I applied .resizable() jQuery and it looks fine. But when I inspect element the button, it occupies the whole div with its margin-right though the margin-right is set to 0px. I've looked in the css and overrode some parts to fix it but I didn't succeed. What's causing it?
It is very similar to this: http://jsfiddle.net/nagwW/13/
If you inspect element the button, it occupies the whole row but how could I just limit the width with respect to its real width?

If you are using jQuery UI resizable function then you have to place the button element inside the element being resized, because jQuery UI's default functionality adds a div with class name "ui-resizable-handle". The clickable resize handle that you see.
<div id="resizable" class="ui-widget-content">
<button>Resizable</button>
</div>
See this JS Fiddle that I changed from jQuery UI:
http://jsfiddle.net/truthreveller/mX7Ej/3/

How to apply function to all elements having border-radius property

The idea is making some border-radius effect in IE 7/8, so I've decided to use jquery.corner.js library. To make it more generic I want to write some script which applies corner() function to all elements within a page having border-radius property.
For example, for this element
.someElement
{
border-radius:10px;
}
function must do the following
$(".someElement").corner("10px");
The problem is that I want to apply rounded corners to all elements, including dynamically added elements and elements which are inheriting border-radius property among some action(hover, click, etc.). Is this possible?

You need to declare a function that applies you css on every change.
To detect css style changes, see here:
Event detect when css property changed using Jquery
Then you need call that function on style change and on dom tree change (every time you append something into the page)....
I would advise you use a specific class to apply border radius css. This way you can select the rounded elements via jQuery class selectors.

You should have a generic css class that is used on all elements that have rounded borders and then use that class in your selector.
You will have to do this in a document ready handler. This will of course only apply rounded borders to elements that currently exists. If you want to cover elements loaded with ajax you can do the following:
$(document).ajaxSuccess(function(e, xhr, settings)
{
$(xhr.responseText).find(".class-that-applies-rounded-borders").corner("10px");
});

Hover over a hidden element to show it

Is there any way to hover over an element that's already hidden. I am trying to mimic what Steam does with their arrow navigation on their home page. You'll notice that when you first get to the page, there are no arrows showing:
Then when you hover over the area where there should be an arrow, it shows itself:
I've tried setting my divs that contain the arrow images to display: none and have also tried visibility: hidden but neither seems to work with the hover or mouseover methods in jQuery. I would have thought visibility: hidden would make it work, but that doesn't seem to be the case. Is there any other way I can hide these divs from the start but still be able to have hover events work on them?

Set it to zero opacity instead:
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
http://jsfiddle.net/mblase75/bzaax/

You cannot hover over an invisible element or an undisplayed element. You can hover over a visible element and then use that to show a different previously hidden element. Or you can hover over a transparent element and make it opaque.
Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.
CSS:
#it {
opacity: 0;
width: 500px;
height:500px;
}
#it:hover {
opacity: 1;
}
Here is an example of showing one element when another is hovered over:
HTML:
<div id="me">Hover over me to display something else</div>
<div id="else">Something else</div>
jQuery:
$("#me").hover(function(){
$("#else").show();
},function(){
$("#else").hide();
});

Use the .fadeTo jQuery method to change the opacity of the element on hover state.
The jQuery site contains an example but something like this should suffice
$("element").hover(//On Hover Callback
function() {$(this).fadeOut(100);} ,
//Off Hover Callback
function() {$(this).fadeIn(500);})
From the jQuery Hover page.

You could set it to opacity: 0.
In order to make it cross-browser you probably would like to do it with jQuery tho.

One way to do this is by using an alternate hit-test div, such that it has no content, but when hovered over it shows the "arrow" div. When the "arrow" div (or the hit-test div) is exited, then the "arrow" div would be hidden once again.
Alternatively, you could use the same div for the hit-test and the "arrow", such that a background image is used for the visual elements of the div. When hovered, you could instruct the image's offset to be set to a position which would show the "arrow". When exited, you would set the offset of the background to a position where the arrow image would not longer be shown.
And, finally, if the content will always be in the same position as the hit-test area, you could set the opacity of the div to zero, and toggle accordingly.

You could set the opacity of the elements to 0. That would allow them to receive the hover events (actually mouseenter and mouseleave), but as a practical matter, make them invisible to users.