google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank
Guest, register






5 JavaScript tools Make Web Design Easier If you are a web designer and you don't want to use the poppular JavaScript frameworks such as jQuery, YUI, ... for your litle works, then you should look these JavaScript tools in this JavaScript article. They're much smaller and much more specialized, but they still solve your problems quickly. And evidiently, they are free to download & use.


Label: 5, JavaScript tools, Web Design, web designer, jQuery, YUI, solve, download

Free iPage Web Hosting for First Year NOW



If you're still looking for a reliable web host provider with affordable rates, why you don't take a little of time to try iPage, only with $1.89/month, included $500+ Free Extra Credits for the payment of 24 months ($45)?

Over 1,000,000+ existisng customers can not be wrong, definitely you're not, too! More important, when you register the web hosting at iPage through our link, we're going to be happy for resending a full refund to you. That's awesome! You should try iPage web hosting for FREE now! And contact us for anything you need to know about iPage.
Try iPage for FREE First Year NOW

4. Render Interactive 3d Shapes with Raphael JS

  • Created by: Dmitry Baranovskiy
  • License: MIT
  • Usage: Draw SVG shapes on the page
  • Size: 58.4kb (compressed)
  • Compatibility: All (all common versions from all common vendors, including IE6)
  • View Demo
  • Download

Ok, so this library isn't quite so small, but there's a reason for that; the library does a huge range of things and adds complete SVG control to a web page. Frankly, its power is awesome. Imagine being able to draw smooth curves across a web page and create custom shapes on the fly - Raphael does that.

You can do rounded corners that are completely cross-browser with no images (other than those actually drawn by the library), you can create faded reflections for any images, rotate the images dynamically and much more. As all paths are drawn using SVG elements, you can attach JavaScript events to them so that people can interact with the images on mouseover or click (or any other JS events). The possibilities are endless and the API provides a wide range of different methods that make working with the library a pleasure.

Usage

The library must of course be linked to:

<script type="text/javascript" src="/javascript/article/5_JavaScript_tools_Make_Web_Design_Easier/raphael.js"/>

This is it, there are no other dependencies. Now we can begin creating our SVG shape:

<script type="text/javascript">
  var canvas = Raphael(50, 50, 620, 100);
  var shape = canvas.rect(0, 0, 500, 100, 10);
  shape.attr("fill", "#fff");
  canvas.text(250, 50, "Using Raphael to create custom shapes\ndrawn on the fly is extremely easy").attr("font", "20px 'Arial'");
 </script>

The library is made to be easy to use and we've only used a tiny fraction of its capabilities in this example. The page that this is used on should appear like this:

Raphael

5. Progressively Enhance Your Site into the Future with Modernizr

Modernizr

It's an exciting time for web development with CSS3 and HTML5 advancing by the day, but it's also a frustrating time because we've got all these advanced new technologies coming out with very little support. We want to start using all the great new HTML5 and CSS3 features, but most of the new HTML5 elements for example are only supported in maybe a single browser.

Modernizr is a tiny little library which simply tests whether the current environment supports a series of advanced features, such as the new <audio> and <video> elements. A JavaScript object is then created by the library which contains Booleans indicating whether each feature is supported. So if the current browser does support the new

The library also adds class names to the <html> element that we can target with CSS in order to hide certain elements to the page, so when the <audio> element is supported, <html> element will receive the class name .audio. When browsers that don't support it view the page, the element will get the class .no-audio.

This is incredible because it means that we can safely add these new features to our pages for the browsers that do support them, without causing chaos in the browsers that don't. In the nature of progressive enhancement, we can create an accessible and broadly support core of content, and then progressively add more and more features for browsers that support them.

Usage

Let's see it in action to display some nice CSS3 effects; first we just link to the very tiny library using the standard <script> element:

<script type="text/javascript" src="/javascript/article/5_JavaScript_tools_Make_Web_Design_Easier/modernizr-1.0.min.js"></script>

Then we can add the following CSS:

.no-audio #audioContainer { display:none; }

This will ensure that browsers which do not support the <audio> element do not see it. The element does provide a built-in fallback for browsers that don't support it, but this way is better. The body of the page could then look something like this:

<div id="audioContainer">
      <audio id="audio" src="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg" controls"true"></audio>
 </div>
<a id="linkToAudio" href="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg">Link to the audio</a>

Once this is done we can detect whether the browser supports HTML5 audio and show or hide the link to the media (we could easily do this using just the CSS, but this way we get to see the Modernizr object in action):

if (Modernizr.audio) {
  var audioLink = document.getElementById("linkToAudio");
  audioLink.style.display = "none";
}

This is all we need; capable browsers will see the <audio> element but not the link, while less capable browsers will see the link and not the <audio>:

Conclusion

Each of these libraries caters to a very specific problem; they're generally much smaller than more well known and general purpose libraries, but just as useful for their specialized purpose. Each of them can aid us in one way or another when developing web sites from either easing development in IE6, using non-standard fonts without cumbersome replacement techniques, to detecting support for the latest CSS3 and HTML5 technologies or generating complex and interactive images.

JavaScript by day


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web