The rounded corners from hell and VML
I have this very precise requirement I am working on: a collapsable panel that has rounded corners of fixed size and a background image or a gradient, both needed to stretch with the panel, which would be vertically resizable by javascript. Also, the HTML 4.01 Transitional DocType will be used on pages. The only respite given is that the solution should work only on Internet Explorer.
I have first tried some jQuery alternatives, but I am not happy with them. Even if the rounded corners would have been what I was looking for (and they were not), the background stretching is a difficult feat to master in HTML. Even so I have cropped up something that takes the entire content of the panel and relatively positions it over an absolutely positioned image that is then stretched by javascript to its needed dimensions. However, all this relative and absolute positioning requires a lot of event driven javascript (when the events themselves are not really there, so I must also create new browser events!) and it has been shown to break either layout or functionality like the one for collapse.
Enter VML, an obscure web technology from Microsoft that has a RoundRect object that can have a fill of an image OR a gradient, stretched to the full size of the element. Can you see it? I was already planning the blog entry, detailing the masterful ASP.Net control that would change the world of web development forever.
Back to real life now. First of all, the RoundRect element does have an arcSize property that determines the percentual size of the rounded rectangle. By percentual, I mean that resizing the element would lead to larger corners. I don't need that. Another nice surprize was that I can't either read or write the arcSize property from Javascript, it throws an error. People have complained about it before and their solution was to disconnect the element from the DOM, change the arcSize, then add it back into the DOM. It didn't work for me.
After wasting about half a day with this, I concluded that the RoundRect was a lost cause. Enter Shape! A Shape is a VML element that can take any shape determined by a path. The path has interesting primitives like qx and qy which mean "draw an arc to this position". It appears that a Shape can easily take the place of the RoundRect. What was even nicer, the path attribute could be changed at will by javascript.
I was extatic, finally having solved the problem that had haunted me for days, until I noticed that, unless I specify the width in pixels, the shape would behave really strange. I was commited not only to a panel that needed to be defined as percentual or expanding with the content, but also to HTML 4.01 Transitional DOCTYPE. In this particular situation, placing two shapes in a table, let's say, even if the table size was specified or, indeed, the sizes of the TD elements, in percentages or pixels, the shape would just expand to its maximum possible width.
I got stuck here. The control worked perfectly when the width was specified in pixels. Anything else just throws a big wrench into the works and makes it wanna go boom. In a fit of anger, I just replaced the obsolete doctype with the modern XHTML 1.1 one. And it worked, but only on Internet Explorer 8, not any of the previous versions of the browser.
Therefore my only option now is toeither abandon the technology completely or to convince people to change the DocType for all their legacy pages. How fun is that?!
And before you write the usual crappy "Microsoft sucks! Internet Explorer sucks!", try giving me a solution for my request that would at least work in another browser. Was it so difficult to recognize the need for a stretched background image and custom shaped containers ?!
I have first tried some jQuery alternatives, but I am not happy with them. Even if the rounded corners would have been what I was looking for (and they were not), the background stretching is a difficult feat to master in HTML. Even so I have cropped up something that takes the entire content of the panel and relatively positions it over an absolutely positioned image that is then stretched by javascript to its needed dimensions. However, all this relative and absolute positioning requires a lot of event driven javascript (when the events themselves are not really there, so I must also create new browser events!) and it has been shown to break either layout or functionality like the one for collapse.
Enter VML, an obscure web technology from Microsoft that has a RoundRect object that can have a fill of an image OR a gradient, stretched to the full size of the element. Can you see it? I was already planning the blog entry, detailing the masterful ASP.Net control that would change the world of web development forever.
Back to real life now. First of all, the RoundRect element does have an arcSize property that determines the percentual size of the rounded rectangle. By percentual, I mean that resizing the element would lead to larger corners. I don't need that. Another nice surprize was that I can't either read or write the arcSize property from Javascript, it throws an error. People have complained about it before and their solution was to disconnect the element from the DOM, change the arcSize, then add it back into the DOM. It didn't work for me.
After wasting about half a day with this, I concluded that the RoundRect was a lost cause. Enter Shape! A Shape is a VML element that can take any shape determined by a path. The path has interesting primitives like qx and qy which mean "draw an arc to this position". It appears that a Shape can easily take the place of the RoundRect. What was even nicer, the path attribute could be changed at will by javascript.
<v:shape strokecolor="blue" strokeweight="1" coordorigin="0 0" coordsize="203 103" style="width:200px;height:100px"The code above is a 2 pixel rounded corner rectangle of size 200 by 100. To add a stretched background image or gradient, a v:fill element must be added as a child of the shape and you are done!
path="m 2,0 l 198,0 qx 200,2 l 200,98 qy 198,100 l 2,100 qx 0,98 l 0,2 qy 2,0 e"></v:shape>
I was extatic, finally having solved the problem that had haunted me for days, until I noticed that, unless I specify the width in pixels, the shape would behave really strange. I was commited not only to a panel that needed to be defined as percentual or expanding with the content, but also to HTML 4.01 Transitional DOCTYPE. In this particular situation, placing two shapes in a table, let's say, even if the table size was specified or, indeed, the sizes of the TD elements, in percentages or pixels, the shape would just expand to its maximum possible width.
I got stuck here. The control worked perfectly when the width was specified in pixels. Anything else just throws a big wrench into the works and makes it wanna go boom. In a fit of anger, I just replaced the obsolete doctype with the modern XHTML 1.1 one. And it worked, but only on Internet Explorer 8, not any of the previous versions of the browser.
Therefore my only option now is to
And before you write the usual crappy "Microsoft sucks! Internet Explorer sucks!", try giving me a solution for my request that would at least work in another browser. Was it so difficult to recognize the need for a stretched background image and custom shaped containers ?!
Comments
Be the first to post a comment