FourTen Technologies, Inc.
Client Login | Toll-Free Sales & Support: +1 (877) 410-0410
New Service: Managed Hosting
Category: Company News
Posted by Andre Chambers on September 20th, 2009
Every Web application needs hosting, and one of the most common questions we get from our customers is, "Where should I host my app?" We're pleased to announce that beginning December 15th, 2009, FourTen will be offering managed Web hosting on brand new, state-of-the-art equipment, with 24 hour rapid support.
Our managed hosting is "fully" managed every step of the way, meaning we take care of everything, including monitoring, maintenance, and backup, and of course hosting with us makes it even easier to have us write updates to your applications.
Our network is being designed right now, and we're working on high-availability, high-security, and high-performance every step of the way. All systems are clustered and optimized for rapid failover (usually in the 1 to 5 second range) in the event of server failure. All network connections are also redundant and optimized for rapid failover in the event of ISP failue.
All the final details on our offering will be posted on the release date, right here on fourtentech.com.
Useful Scripts Collection: Rounded Corners with 2 Lines of JavaScript (No Images!)
Category: Tech
Posted by Jonathan Corbett on September 19th, 2009
The Web 2.0 rounded corner look is popular, and is a frequent request of our clients. Most solutions involve either images that you place in each corner of the containing "divs" to simulate the border being curved, or extremely long and complicated JavaScripts.
We don't like either approach: having to create images each time you want different look is a pain and a waste of bandwidth to download. We also don't like loading up pages with long and convoluted JavaScript; if we can't understand the JavaScript, we don't want to use it.
Therefore, we took an hour and a Red Bull and came up with a JavaScript function to round corners in just 2 lines of code (one is a bit long, but not as complex as it looks):
function FourTenCorners(theDiv, theWidth, howRound, bgColor){
theDiv.style.backgroundColor = 'transparent';
for(var x = 0; x <= howRound; x++) theDiv.innerHTML = '<div style="width:' + ((theWidth - (2 * howRound)) + (2 * (Math.sqrt((howRound * howRound) - (x * x))))) + 'px;height:' + (x == 0 ? '100%;padding:' + theDiv.style.padding.replace('px', '') : '1px') + ';background-color:' + bgColor + ';margin-left:auto;margin-right:auto;">' + (x == 0 ? '' : '</div>') + theDiv.innerHTML + (x == 0 ? '</div>' : '<div style="width:' + ((theWidth - (2 * howRound)) + (2 * (Math.sqrt((howRound * howRound) - (x * x))))) + 'px;height:' + (x == 0 ? '100%' : '1px') + ';background-color:' + bgColor + ';margin-left:auto;margin-right:auto;">');
}
The premise is that by creating smaller divs of 1 pixel in height centered on the top and bottom of the original div, rounded corners appear. Visually, let's use a little ASCII-art and say your original div looked like this:
XXXXXXXXXXXXXX X X XXXXXXXXXXXXXX
YYYYYYYYYYYY X X X X X X YYYYYYYYYYYY
This is done repeatedly -- the number of times specified in the howRound property, which is essentally the radius of the circle that would fit in your corner. Using that radius, we can calculate the exact width between the border at each pixel by thinking of the circle as having an inscribed right triangle in the visible quadrant (the quarter of the circle that makes up the corner), and use the pythagoream theorum with known hypotenuse and leg.The image to the right illustrates how the script would calculate the appropriate div width for a radius of 4 on the top left corner of an affected div. The bottom leg of each triangle is the distance sought; the left leg has the known height of 1, 2, and 3 in each respective triangle, and the hypotenuse is the radius, which must always be, in this case, 4.
The function takes 4 parameters: a reference to the div to be modified, the width of the div (in pixels only), the radius of the circle of the corner (integer values only), and the background color of the div (the script doesn't support background images, but if you're going to use a background image rather than a color, you may as well draw your corners in rather than using JavaScript).
Blog Posts by Month
- April 2010 (1)
- March 2010 (1)
- December 2009 (1)
- October 2009 (3)
- September 2009 (2)
- August 2009 (1)
- July 2009 (3)
Disclaimer: Blog posts are opinion and do not represent service offerings nor technical certainties, and FourTen will not be liable for their accuracy.