jquery dialog with rounded corners

Question

Hi,

I am having trouble implementing this, I have tried several variations of the corner() function from jquery.corner.js. Can someone please paste a sample of what the code would look like, and where it should reside, in the page which is calling the dialog or the dialog itself?

Thanks, Natasha

Answer 1

Examples using images for corners, and using plugins that allow rounded corners without images...

http://docs.jquery.com/Tutorials:Rounded_Corners

Answer 2

give a try to jquery.ui. The dialog control has already with rounded corners. With jquery ui all you have to do is just add the class "ui-corner-all" to an html item to enable rounded corners (except internet explorer).

Answer 3

Which corner plugin are you using? If it is this one: JQuery Corner Plugin then it appears to be very easy. If you have a div on your page that requires the rounded corners for example, it has the id of "cornered" then I would imagine the code would be simple:

<script language="javascript">
    $(document).ready(function() {
        $("#cornered").corner();
    });
</script>

The above code needs to be referenced or placed in the same page as the div/element requiring the rounded corners.

Answer 4

A bit of an oddity with corner(): it likes to use the background color of whatever Element the Element you're trying to round as the background color for the rounded corners. So, if you're trying to round a white box and it's originally on a blue background, it will use blue to round in the corner.

Make sure to call corner() after your Element winds up where it's supposed to be; otherwise, you're going to wind up with the wrong-colored corners on there.