Distance Finder ( Google Maps API )

Google maps is a free web mapping service application provided by Google. It offers lots of cool features (showing various map types, plotting points, showing routes, geocoding addresses). You can also add all these features to your website using the Google Maps APIs provided by Google. In this tutorial I will show you how to add some of these features to your site. Demo Download Script Creating...

FireBug in Internet Explorer

Firebug In Internet Explorer Working : Copy this Script  to the URL .. javascript:var%20firebug= document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);...

Php Pagination Script

<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1. Code to connect to your DB - place or include your code to connect to database.                                      ...

CSS transforms

Rotation <style type="text/css"> .rotation {     -moz-transform: rotate(-20deg);     background-color:#000;     width:500px;     height:500px;    -webkit-transform: rotate(-20deg);    -o-transform: rotate(-20deg);    margin:100px; } .skew {     -moz-transform: skewx(10deg) translatex(150px);   ...

CSS Text Shadow

Regular text shadow: p { text-shadow: 1px 1px 1px #000; } Multiple shadows: p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; } The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the...

Hiding Content for Accessibility

For years now, we've used a number of techniques for hiding content offscreen for accessibility purposes. We do this because the content is still accessible to screenreaders while being removed from the interface for sighted users. An article over at Adaptive Themes reviews a number of techniques for hiding content that were considered for inclusion on a Drupal 7 project (but certainly applicable...

Pure CSS Gradients

CSS Gradients One of the many cool CSS additions to come out of Webkit is the ability to specify gradients. Whereever you would normally specify an image using a url() syntax, you can specify -webkit-gradient instead. Probably the most likely scenario will be for background images but you could use it for border-image or list-style-image, too. background-image: -webkit-gradient(linear, 0 top, 0...

Using jQuery for Background Image Animations

#code7 { width:500px; background-color:#fff; padding:10px; } After reading Dave Shea's article on CSS Sprites using jQuery to produce animation effects, I felt like playing around with things to see what could be done but accomplish it with a simpler HTML structure (no need for adding superfluous tags) and simpler code, too. Changing the position of the background image felt to be the best...

Text Rotation with CSS

#code { width:506px; padding:10px 0px 10px 10px; color:#006699; font-size:15px; overflow:auto; height:500px; background-color:#FFFFFF; font-family: "Courier New", Courier, monospace; } CSS <style type="text/css"> body     {     margin:0px;     padding:0px;     } #main     {     float:left;   ...

Control.ScrollBar : Pure JavaScript/CSS scroll bars for Prototype

Download full source c...

cross-browser gradient backgrounds without images

cross-browser gradient backgrounds without images  Summary This experiment allows for gradient backgrounds on elements by defining a six character hex value for the start and end color as part of the class attribute. No background-images are required. This has been tested and verified to work in MSIE6, Firefox 1.0.7, Safari 2.0.1, Opera 7.5 &amp; 8.5 on Windows 2K, XP and OS X. How it Works The...

Html 5 [CANVAS tag]

What is HTML5?HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However, most modern browsers have some HTML5 support.    What is Canvas? The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control...

Font Embedding in HTML (compatible for all Browsers including IE6)

Font FormatsGenerally speaking, these days, a font on our system is going to be one of two formats: TrueType (with a .ttf file extension) or OpenType (with a .otf file extension). While it would be nice to be able to just throw a font like this on the web and link it up, we're hit with two major limitations. Licensing, and Browser Support  Browser SupportWhich leads me into the other major...

Rounded Corners in Webkit (Pure CSS)

Much like Mozilla Firefox, Webkit allows developers to create pure CSS rounded corners in all browsers that use the Webkit engine, including Apple's Safari and Google's Chrome. Check out how easy implementing rounded corners can be! .sample {   -webkit-border-radius:10px; /* all corners */   -webkit-border-top-left-radius:15px; /* top left corner */   -webkit-border-top-right-radius:50px;...