DD_roundies 0.0.2a available

January 2, 2009

Multiple border thickness support, multiple corner radii support, very INCOMPLETE support for IE8, full support for PNG background images in IE6:

http://www.dillerdesign.com/experiment/DD_roundies/

Advertisements

22 Responses to “DD_roundies 0.0.2a available”

  1. robmonie Says:

    Hey Drew… nice work man. I was just implementing this in an app today when I came back to your site and you’d released a new version!!

    Just a question… I’m using jquery to dynamically add classes to li elements that have corners applied. This is happening both on hover and onclick to simulate a selected element. I’m finding that the styles are not being applied for these classes in IE7. It appears that the SVG stuff isn’t able to detect changes to the underlying element style. Is this something that should work or you think might be coming ?

    cheers,
    rob

    • dillerdesign Says:

      Rob, I think I can envision what you’re saying, and I think I can envision why it wouldn’t work (it’s probably not just IE7 – IE6 probably does the same thing). I have a theory on how to fix it, but to be _sure_, do you think you could send me a test case? (URL or ZIP)

  2. rob Says:

    Hey Drew, I’ve forwarded you a couple of test cases by email.

    thanks again, rob

  3. rob cherny Says:

    drew thanks for all your hard work on this, it’s appreciated. as soon as i get out from under this project i’m on, i hope to blog about your new code!

  4. Jason Says:

    Wow… disregard that comment, totally wasn’t thinking and forgot to use conditionals so it doesn’t load in anything but IE.

  5. John V Says:

    Hi Drew – firstly I have to say I love this script – it’s great to finally have to do away with a “topround.png” and a “bottomround.png” for every panel with rounded corners.

    I am currently working on a page that uses your DD_roundies and it also has an accessibility stylesheet switcher. Unfortunately there were some hiccups with the implementation out of the box. The stylesheet switcher uses main stylesheet and an accessible/high contrast version.

    e.g. I applied DD_roundies for IE7 and less (using conditional comments):
    DD_roundies.addRule(“.welcome-message”, “10px”);

    the welcome message had some styles setting a background colour and image.

    Of course when switching to high contrast (where said div has no background colour or image set), the VML in IE screws up a little and doesn’t lose the background colour and image, and worse yet, the background image that was set to no-repeat started repeating.

    I figured that the styles for the VML weren’t being updated for whatever reason.
    I added the following snippet rule to my JavaScript, right after I activate the high contrast stylesheet (using jQuery):
    $(“.welcome-message”).css(“background”,”none”);

    This fixed my problems. I’m no expert on VML though, so I have no clue as to what was causing the problem.

    I hope that this helps out someone else who might run into similar problems.

  6. John V Says:

    Ah and as a quick little addition to the previous comment – when switching back to the normal stylesheet, I had to again use a similar statement. I decided to call the following for both:

    $(“.welcome-message”).css(“border”,”0px none”);

    (Of course I didn’t have borders on these elements to start with, so setting them to 0 in both cases had no visual impact. Try something else if you need borders – your mileage may vary)

  7. MarcoBR Says:

    Very Nice!

    Thanks Rob!

    Keep up the good work!!

  8. Jeffrey B Says:

    Hello Rob,

    I’m attempting to use DD-roundies 0.0.2a and I’m getting an error:

    Arg: Illegal input string in Vector2D

    I’m getting it in IE6 and IE7.

    Here’s the page where it’s happening.

    http://www.make-shades.com/roundies.php

    Any thoughts on how to avoid it?

  9. Bradlay Law Says:

    Hi Rob,

    I’m getting the “Arg: Illegal input string in Vector2D” error in IE6/7 when a date picker popup is brought up over an element with rounded corners applied. Any idea how I might avoid it short of not rounding the corners?

  10. Rodney Reid Says:

    Drew,

    Found a couple bugs – here are the fixes:
    —-
    vmlStrokeColor: function(el) {
    try { // trap error with StrokeColor
    el.vml.stroke.fillcolor = el.currentStyle.borderColor;
    } catch(err) {}
    },
    —-

    q

  11. Rodney Reid Says:

    Whoops – too quick on the reply. Here is one more:

    ——
    applyVML: function(el) {
    el.runtimeStyle.cssText = ”;
    if(el.currentStyle) { // sanity check
    this.vmlFill(el);
    // etc..
    // …to:…
    this.vmlOpacity(el);
    }
    ——
    (found in QA)

    These bugs are because someone is using the library in the wrong way — trying to round a for instance.

    With a large codebase it’s really hard to avoid these things.

    Soon(!) we will be releasing our web app with DD_Roundies on menus, floating windows, buttons, etc. to a public beta site.

    I’ll send you a link once it’s there.

    (the sanity check in applyVML() seems like it invalidates the earlier try/catch fix in vmlStrokeColor() )

  12. Rodrigo Gregorio Says:

    O melhor script para criar — curvas —

    Obrigado

  13. David Says:

    Great scripts, after trying several others, these just work!

  14. jzting Says:

    fantastic, thanks for this!

  15. Trevor Says:

    Hey Drew. I’m having the same issue as robmonie with on hover and classes being added with jQuery. Do you have a solution?

  16. Fredj A .Jad Says:

    Great job keep it up, and l’d like to thank you for your ‘js’

  17. Josh Daws Says:

    Excellent code. Thanks so much. I am having one problem. I can’t seem to get it to work with input tags. I saw that it has problems with textarea, but I didn’t see any listed problems with input tags. Any ideas?

  18. Josh Daws Says:

    Excellent code. Thanks so much. I am having one problem. I can’t seem to get it to work with input tags. I saw that it has problems with textarea, but I didn’t see any listed problems with input tags. Any ideas?

  19. Shauna Says:

    Really awesome, beautiful code. Thank you so much for writing this!

    However, I am trying to use this in conjunction with jQuery UI to make it rounded in IE, but whenever I turn DD Roundies on with jQuery UI it (1) Causes the ‘active’ tab or any ‘active’ elements in CSS to not behave correctly, so that the default tab is the ‘bright’ tab forever, while clicking on the other tabs pulls the correct content, the style never changes to reflect the current tab,

    and (2) My textboxes / inputs become read-only. It seems that this is a very crazy problem, and I haven’t read of others encountering it.

    Am I doing something very obvious wrong?

    Thanks so much for your time!

  20. Eddie Says:

    Dows DD_roundies currently work with the button element? I have the following code

    button.rounded
    {
    background:#0098FF none repeat scroll 0 0;
    border:medium none;
    color:#FFFFFF;
    cursor:pointer;
    font-family:”Helvetica Neue”,Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:900;
    height:30px;
    }
    .rounded {}

    ….
    Login

    …but only the text (“Login”) of the button is clickable. Any ideas?

    Thanks,
    Ed.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: