We Keep Coding

Intelligent resizing background

Excuse me for this, probably spoony, question. But when skinning controls/elements I'm usually using the following concept (I don't know the correct name, but I first saw it when creating custom WinXP themes). The basic idea is to set up a sort of margins in the image that restrict resizing, only the inner parts are allowed to stretch.
http://img42.imageshack.us/img42/6188/image7rq.jpg
When using this method in my regular programming work life is easy, I just BitBlt the four corner and then StretchBlt the remaining parts into place. However I'm no expert on HTML and I cannot find anything on the internet about it. It's kinda difficult to search when you don't exactly know the name of the concept...
a) How is this method called?
b) Does anyone know how to do this using HTML, CSS, Javascript, etc.? Preferably I would like the background of a DIV element to be themed like this. It's the intention to not spend the rest of this day slicing images in Photoshop ok, that makes me feel so utterly miserable..

There's several ways to approach this. If you are allowed to target newer browsers and allow old browsers to degrade to square corners and non-gradient backgrounds, check out the new CSS 3 features.
If, however, you need to be able to support old browsers, you're going to have to fire up Photoshop, create some background images, and nest some html elements. If your background only has to scale in one direction (verically or horizontally) check out the sliding door technique.

Wouldn't be easier to use css instead? Check thishttp://jonraasch.com/blog/css-rounded-corners-in-all-browsers or do a search for 'css rounded box' or 'css rounded corners'

Border Radius for IE8

I have a problem with border radius on IE8, till now I used pie.js but I don't recommend this js library because is buggy. If you have a small site with not many html pages, it is more than ok to use that library, but if you have a heavy application in which many different frameworks are used, then is impossible to use that. Same behavior for CurvyCorners or other mega libraries.
So if anyone can help me with a small jQuery or javascript plugin to do just border-radius on IE 8 I'll be grateful for life.

Try this:
requires:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.corner.js"></script>
Javascript:
$('.box').corner();
HTML:
<div class="box">Hello</div>
CSS:
box{
width:150px;
height:28px;
padding:10px;
}
more examples:
http://jquery.malsup.com/corner/

Short of using the libraries that you described in your question, I don't think you can do curved corners in IE8.
If you really wanted them, you could probably use an image to give the curved corner effect, at the cost of increased bandwidth and messy code.

According to Microsoft:
Other Rounded Corners Solutions
We would like to point out the abundance of alternate solutions available on the Web. In addition to individual rounded corners solutions, there are also sites with frequently updated lists of rounded corners solutions that are compatible with multiple versions of Internet Explorer and other browsers.
Listed here are a few of our favorite sites for aggregated rounded corners solutions. They are presented in no particular order, and the inclusion of any link does not imply endorsement by Microsoft of the site.
CSS-Discuss Wiki, RoundedCorners:
http://css-discuss.incutio.com/?page=RoundedCorners
SmileyCat, CSS Rounded Corners "Roundup":
http://www.smileycat.com/miaow/archives/000044.php
CSS Juice, 25 Rounded Corners Techniques with CSS:
http://www.cssjuice.com/25-rounded-corners- techniques-with-css/

Check out this post: http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
It covers specifically rounded corners and box shadow in IE7/8.
and also below with so many examples
http://blue-anvil.com/jquerycurvycorners/test.html

I have used the border-radius.htc in the past.
The only pain is that the CSS Urls are relative to the CSS file. HTC are relative to the page.
you can download the demo here.

Why don't you use css' :before and :after pseudo classes to add curved corners.
Your comment on Tom Will's answer suggested that you have a lot of form inputs right?
Well I assume that they will be mostly uniform in width.
Just create some classes like curved-std-width, curved-lge-width, curved-sml-width and then you can do this in your CSS:
.curved-std-width:before {
height: 5px;
background: url('curved-top-5px.png');
}
.curved-std-width:after {
height: 5px;
background: url('curved-bottom-5px.png');
}
Something like that should work pretty well without you having to go and add endless html before and after form inputs.
Otherwise you can probably do it using jQuery as well:
$(':input').before('<div class="left-top-corner"></div><div class="right-top-corner"></div>').after('<div class="left-bottom-corner"></div><div class="right-bottom-corner"></div>');
And then style appropriately.

Why don't you use jQuery's corner plugin?
You can easily apply corners to any element with a specific classname or ID; for example:
$("#box1").corner();
It also allows you to decorate or modify the type of corner effect you want adorning your elements.
You can also use other JavaScript solutions like CurvyCorners or even some CSS solutions. Another option is to use JavaScript to wrap <div> elements your form inputs and use CSS's background-image to emulate the look of rounded corners. For instructions on this last solution, see this tutorial.

This is ugly but might work if you know beforehand the background color of the input fields (which can be a problem with submit buttons): http://jsfiddle.net/563c5/1/
I have no idea how it will behave when rendering lots of input fields in an average computer.
IE8 supports inline CSS images, and you need only 1 small image for all four rounded corners. Any solution relying on corner images may actually require just a few extra bytes of bandwidth.

I would recommend giving Modernizr a go, the great thing about it is you can use it to substitute most (if not all) unsupported CSS3 in older browsers. I have used it on a number of large web apps without any dramas.
You can also look at the jQuery UI library that I believe has some rounded corners scripts.
I hope this helps... good luck!

you should use the alternate pie.htc, its similar thing but less buggy, and either way i don't recommend it.
Heavy use of css3 elements on these non css3 comply browsers, don't perform good, chances is that their system are not up to date too causing them extremely laggy. So it is good for them to degradation to a normal corner.
If you really want it to look good on ie, you best of using image sprite backgrounds, or you going to change to drive away a number of your visitors for lagging issues.

Not sure if it was covered by previous contributors, but I used mainly dd_roundies library, and for rounded corners alone it worked ok. Mixing corners with IE filters usually was too much to ask though.

Have you tried this: http://jquery.malsup.com/corner/

Use this : http://css3pie.com/
PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
Supported CSS3 Features
border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

You can use image with round corner to border a div. Example:
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml
Or you make some magic like:
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Just another JavaScript-based solution: Nifty Corners Cube. It is released as GNU GPL and doesn't need jQuery.

Use this code to get rounded corner in IE 6+
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="http://malsup.github.com/jquery.corner.js</script>
<script>
$('#logo-navsection').corner( function() {
$("this").css("border-top", "0px 0px opx 10px")
});
</script>

Rounded corners in IE 7+ with/without JavaScript?

To create rounded corners on my container elements I use this CSS:
border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;
However, IE does not appear to recognize and interpret the border-radius property (at least version 7-8, apparently its slated for version 9).
Is there a workaround for this that's doable entirely in CSS (no script, no extra markup)?
For JavaScript/jQuery solutions: I'd use a solution based on these if I could include a single script that would read my CSS, interpret the border-radius properties (including border-top-left-radius, border-top-right-radius), and apply the corners accordingly. Does this exist?

As far as I know for IE<9 there is no way to do this in pure CSS.
It has been documented that IE9 has border radius support.
There are Javascript workarounds available, but as you said you don't want to implement them, you're a bit stuck.
Unless you want to use images, this works well if you have static size elements, but doesn't work if they change size.
Other than that, I am not aware of any pure CSS solution without a lot of hacky markup.
Update:
I already linked to a resource that can do this for you, the CurvyCorners jQuery will detect the use of -webkit-border-radius and moz-border-radius on DOM elements and duplicate the effect in IE using a series of small DIVs with no images. You can also tell it to apply the effect to specific elements.
Update #2:
After Spudley's suggestion of checking out CSS3Pie, I would very much suggest this as the way to go as it uses the CSS property behaviour which only applies to IE, so it won't screw with the rest of the browsers, also this means no hacky markup added to your page (Curvy Corners adds many small divs) and no use of images.
Hope it helps :)

You ask for a way to do it without scripting and without any extra markup. This simply isn't possible. The feature is missing from IE7/8, and the only way to get IE to do it is by simulating the feature either with scripting or markup.
The best options are ones which only affect IE and are invisible to other browsers. This means that CSS3Pie stands head and shoulders above all the other options, because the technique it uses is only supported by IE. It also allows you to specify your border radius in CSS in the same way as for other browsers, making it more consistent.
Personally, I'd go for this solution every time. It's by far the cleanest solution you'll find for IE. Forget about any jQuery or pure javascript solutions; they almost all have issues of one sort or another, and as for markup options that involve corner graphics; just don't even think about it!
The real benefit that CSS3Pie has over other common solutions is that it uses a vector-graphics based solution, rather than pasting loads of divs into your document as CurvyCorners and others do. This means that the rounded corners CSS3Pie generates are smoothly drawn and works properly with background graphics on both the element itself and those behind it. Most other solutions have serious issues in these areas.
I don't know why you'd object to using scripting - especially HTC-based ones like this which don't get in the way of the other scripts. The absolute worst case is that a user has scripting turned off. And in that case, all they get is square corners; it's not the end of the world.

you can use .htc for border radius. link1 for htc files link2 for htc files
I suggest to have a look at this site. CSS3 Please

The scripting / jQuery solution you are talking about does exist, take a look at jQuery Curvy Corners.

How does one round TABLE corners with JS or CSS?

I've got a plain html table, and I'd like to round its corners in some way that is more automated than creating a different image for each foreground/background combination. Oh, and it absolutely must work with IE7. Anyone know of such a library?

Here's a nice round-up of rounded corners techniques both with and without JavaScript:
CSS Rounded Corners 'Roundup'. If you're primarily targeting IE7, you'll want to avoid anything that requries CSS3. You'll also want to consider your priorities. For example, is it more important to you to have the best looking rounded corners (e.g. really good anti-aliasing) or is it more important to you to avoid a JavaScript dependency? Do you need to put rounded corners on objects whose size can change or only on objects of a fixed size?

You could use Rico Corner (requires prototype)
It's used on SlimTimer

Google Maps style scrolling anyone?

I am looking for some JavaScript plugin (preferably jQuery) to be able to scroll through an image, in the same way that Google Maps works.
I can make the image draggable but then I see the whole image while dragging even if the parent div is overflow:hidden.
Any help would be greatly appreciated!

(I'm super late to this now dead party, but hey, I found this page via a search so...)
Scrollview plugin suggested by mooware didn't work for me.
However Dragscrollable did:
http://plugins.jquery.com/project/Dragscrollable
Try out the demonstration

I may be a little late to the party, but I was just looking for the same thing. What I stumbled upon is scrollview for jquery, it works perfect and does exactly this google maps-like drag-to-scroll for overflowed divs.

Check out the Google Maps Image Cutter It can take any image or digital photo and cut it into tiles which are displayed on a Google Map. Might be a quick way to do what you need...

You could use the google maps api...they allow for you to use it with custom images. And you can choose if the controls show up or not.
EDIT: Found a decent tutorial on how to do this.
http://mapki.com/wiki/Add_Your_Own_Custom_Map

For a good description of the underlying technology have a look at Chapter 4 (if I recall correctly) of the Pragmatic Programmers' book Pragmatic Ajax.
You'll see how the image slicing and dicing works under the covers. And the zooming.

This has less to do with javascript and more to do with the CSS coding.
Try a few experiments with just HTML and CSS to get the image to clip properly, then add the javascript to move it around.
If you can't get it to clip with HTML, or move with the javascript post the simplest demonstration of the problem here for us to debug.
Without the code we're shooting in the dark.

Google Maps uses images sliced into blocks which are dynamically loaded as the user pans in different directions. The Google Maps Image Cutter Paul Dixon mentions is the tool you want for this.
If you just want to pan one large image, rather than have the additional complexity of slicing the image up into blocks, then instead of using the CSS overflow property, you should use the clip property. This is supported on all browsers worth thinking about, down to IE4 if I remember correctly.
One point to note: the CSS2.1 spec shows examples with the rect values separated by commas. However this isn't supported by IE6 (perhaps not IE7, either). However all other browsers understand the version without commas. So instead of
clip: rect(5px, 40px, 45px, 5px);
you should use
clip: rect(5px 40px 45px 5px);
for compatibility.
You need a container <div> set to position:relative around the <img> element, which you then set to position: absolute.
So the basic technique is to update the top and left values as the user drags, use these together with the defined width and height of the view onto the image to create the appropriate rect() string, and update the top, left, and clip properties of the <img> element's style property.
Don't do what I did and leave out the "px" after the values in the rect() string. It took me ages to realise why it wasn't working :-)