1

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?

Chuck Norris
  • 15,207
  • 15
  • 92
  • 123
  • 2
    I don't think you can do that. Check [this answer](http://stackoverflow.com/a/1220873/1216394). You need a loop of all elements. – Paulo Rodrigues Oct 03 '12 at 11:47
  • 1
    Sounds like it's going to be a lot of work since you're also generating HTML dynamically. IE8 usage is declining sharply; one of the rare occasions where time is on your side. Are you bound by requirements? – frenchie Oct 03 '12 at 11:52
  • Yes, the client wants border-radius effect in the places where previously images were used. I want to find some generic solution to avoid writing javascript in all pages. – Chuck Norris Oct 03 '12 at 11:55

2 Answers2

1

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.

Community
  • 1
  • 1
Armel Larcier
  • 15,747
  • 7
  • 68
  • 89
  • That approach does not seem to be supported cross browser and i believe the op is looking for a cross browser solution or he wouldn't be having this issue in the first place. – Shikyo Oct 04 '12 at 12:25
  • AFAIK he just wants to apply border radius in IE so detecting style changes is a real option. That's the way css3pie does it. The border-radius specific class is an obvious reasonable choice. – Armel Larcier Oct 04 '12 at 13:20
1

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");
});
Shikyo
  • 1,430
  • 1
  • 14
  • 25