Saturday, December 31, 2011
Friday, December 30, 2011
Live Clock
Description: An extremely versatile cross browser live clock script. Every aspect of it is configurable, from specifying whether to just display the time, the time plus date, to the clock's font size/color, and more. The ultimate live clock script this is!
Directions:
Step 1: Add the below code where you wish the clock to appear on the page:
<script language="javascript" src="liveclock.js">
/*
Live Clock Script-
By Mark Plachetta (astro@bigpond.net.au©) based on code from DynamicDrive.com
For full source code, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/
</script>
Step 2: Inside the <BODY> tag itself, throw in the following onLoad event handler, as follows:
<body onLoad="show_clock()">
Step 3: Finally, you have a big decision to make. This script requires one of the below two .js files to operate...which one to download depends on how you wish the script to display itself. The first .js file allows you to display not only the time, but date as well, while the later, just the time. There's a 3k size difference between the two files, just so you know:
Download ONE of the following two files, and upload to the directory where your webpage resides (click on file, or click with shift key depressed in NS):
liveclock.js (6k)
liveclock_lite.js (3k)
Should you choose the later, make sure to change the reference in the code of Step 1 to correctly reference its name. Furthermore, both files require some editing inside to configure the clock's style, which you can do through any text editor, such as Windows Notepad.
Thursday, December 29, 2011
What is Firebug?
What is Firebug?
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Always at your service
Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.
Inspect and edit HTML
Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
Monitor network activity
Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner's servers taking a siesta? Firebug breaks it all down for you file-by-file.
Debug and profile JavaScript
Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
Quickly find errors
When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.
Explore the DOM
The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.
Execute JavaScript on the fly
The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol' fashioned command line for JavaScript complete with very modern amenities.
Logging for JavaScript
Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.
Just the way you like it
Using Firebug gives a lot of possibilities for web development to your hands. Though you're feeling something is not working as you would like it to? No problem. Firebug offers a lot of options to adjust it to your needs.
Search and you shall find
Sometimes you know what you're looking for, but you can't see it in the panel. Using the quick search box in Firebug's toolbar you can search inside Firebug's panels and see the results highlighted as you type.
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Always at your service
Inspect and edit HTML
Monitor network activity
Debug and profile JavaScript
Quickly find errors
Explore the DOM
Execute JavaScript on the fly
Logging for JavaScript
Just the way you like it
Search and you shall find
Wednesday, December 28, 2011
Nice Story
एक लड़का एक नाई की दुकान में गया और, नाई ने अपने ग्राहक से फुसफुसाते हुए कहा ये दुनिया का सबसे मूर्ख बच्चा है तुम देखो मैं अभी कैसे साबित करता हूँ!
नाई ने अपने एक हाथ में 10 रूपए का नोट रखा और दूसरे में 2 रूपए का सिक्का, तब उस लड़के को अपने पास बुलाया और कहा बेटा तुम्हें कौन सा चाहिए?
बच्चे ने 2 रूपए का सिक्का उठाया और बाहर चला गया!
...
नाई ने कहा मैंने तुमसे क्या कहा था ये लड़का कुछ भी नहीं जानता, बाद में जब वो ग्राहक बाल कटवा कर बाहर निकला तो उसे वही बच्चा दिखा जो आइसक्रीम की दुकान के पास खड़ा आइसक्रीम खा रहा था!
अरे बेटा क्या मैं तुमसे एक बात पूछूँ? तुमने 10 रूपए लेने के बजाय 2 रूपए का सिक्का क्यों लिया?
बच्चे ने अपनी आइसक्रीम चाटते हुए जवाब दिया, अंकल जिस दिन मैंने 10 रूपए का नोट ले लिया उस दिन खेल खत्म!
Moral of the story
zaruri ye nhi ki aap kya sochte ho
zaruri ye he ki samne wala kya soch raha he
Pull out image using CSS3 keyframe animation
CSS3 animation can be fine tuned and broken up into "frames", thanks to the @keyframes rule. Currently supported in FF5+, Safari, Chome, and possibly IE10, the following uses CSS3 keyframes to create a pull out image that is revealed when the mouse rolls over an image. In IE, it degrades well in both IE8 and IE9.
See Demo Online
The CSS:
<style>
.pulloutimage{
position: relative;
}
.pulloutimage img{
position: absolute; /* absolute position and stack images inside container */
left: 0;
}
.pulloutimage img.ondemand{ /*CSS for image shown on demand */
opacity: 0;
visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}
.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}
@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
0%{ /* Start of animation */
z-index: -1;
opacity: 0;
}
50%{ /* Half way point, move image to right edge of container */
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{ /* 51% point, stack animating image on top of original image */
z-index: 2;
}
100%{ /* Final point, move animating image back so it's on top of original */
left: 0;
box-shadow: 8px 8px 15px gray;
}
}
@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
-webkit-animation-name:revealfromright; /* specify animation keyframe */
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;
visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;
z-index:2;
}
.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
opacity:0.5;
}
</style>
The HTML
<!--dimensions of each container should be set to original image's dimensions -->
<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="http://www.dynamicdrive.com/dynamicindex4/desert.jpg" />
<img class="ondemand" src="http://www.dynamicdrive.com/dynamicindex4/forest.jpg" />
</div>
<br />
<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="http://dynamicdrive.com/dynamicindex14/stadium.jpg" />
<img class="ondemand" src="http://www.dynamicdrive.com/cssexamples/media/horses.jpg" />
</div>
See Demo Online
The CSS:
<style>
.pulloutimage{
position: relative;
}
.pulloutimage img{
position: absolute; /* absolute position and stack images inside container */
left: 0;
}
.pulloutimage img.ondemand{ /*CSS for image shown on demand */
opacity: 0;
visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}
.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}
@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
0%{ /* Start of animation */
z-index: -1;
opacity: 0;
}
50%{ /* Half way point, move image to right edge of container */
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{ /* 51% point, stack animating image on top of original image */
z-index: 2;
}
100%{ /* Final point, move animating image back so it's on top of original */
left: 0;
box-shadow: 8px 8px 15px gray;
}
}
@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
-webkit-animation-name:revealfromright; /* specify animation keyframe */
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;
visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;
z-index:2;
}
.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
opacity:0.5;
}
</style>
The HTML
<!--dimensions of each container should be set to original image's dimensions -->
<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="http://www.dynamicdrive.com/dynamicindex4/desert.jpg" />
<img class="ondemand" src="http://www.dynamicdrive.com/dynamicindex4/forest.jpg" />
</div>
<br />
<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="http://dynamicdrive.com/dynamicindex14/stadium.jpg" />
<img class="ondemand" src="http://www.dynamicdrive.com/cssexamples/media/horses.jpg" />
</div>
Tutorial FInish Now Enjoy A Nice Effect of Images :)
CSS3 animated vertical slanted menu
CSS3 lets you animate virtually any CSS property, so instead of directing changing into a property, the browser slowly morphs into the new value instead. This is done via CSS3's "transition" property, which is supported in IE10+, FF3.5+, Chrome/Safari, and Opera 10+. With that introduction out of the way, this is a vertical list menu that uses CSS3 animation to gradually expand the selected menu item horizontally so to highlight it. It also employs the CSS border trick to create a cross browser slanted left edge. The final result is a sleek vertical list menu that uses nothing but pure HTML markup!
See Demo
See Demo
The CSS
<style>
ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background: black; /* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}
ul.svertical li{
text-align: right; /* right align menu links */
}
ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68); /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}
ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */
}
</style>ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background: black; /* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}
ul.svertical li{
text-align: right; /* right align menu links */
}
ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(127, 201, 68); /* initial background color of links */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}
ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */
}
The HTML
<ul class="svertical">
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/">Coding Forums</a></li>
</ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com/">Coding Forums</a></li>
</ul>
Subscribe to:
Posts (Atom)