Friday 30 November 2012

Analog Clock

Clock

code goes here :
step 1 : copy and paste below code in notepad and save as example.html
step 2 : open it in browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Clock</title>
<script type="text/javascript" >
var clocksize=200;
var colnumbers='ffffff';
var colseconds='fff';
var colminutes='fff';
var colhours='fff';
var numstyle = 2;
var font_family = 'helvetica,arial,sans-serif';
var localZone = 1;
var mytimezone = 0;
var dst = 0;
var city = '';
var country = '';
var fix = 1;
var xpos=0;
var ypos=0;
</script>
<script type="text/javascript" >
var dayname = new Array ('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'); var am = 'AM'; var pm = 'PM';

// you should not need to alter the below code
var pi = Math.PI; var d = document; var pi2 = pi/2; var rad = (+clocksize) / 2; var ctrX = (+xpos) + rad;
var ctrY = (+ypos) + rad; var hourln = 1; var minln = secln = 2; for(var i = 0; i < (rad / 2) + (rad / 16); i++) {hourln += 1;}
for(var i = 0; i < (rad / 2) - (rad / 8); i++) {minln += 2;secln += 2;} var font_size = rad / 4; var offset = 16; 
var clocknum = [[,1,2,3,4,5,6,7,8,9,10,11,12],[,'I','II','III','IIII','V','VI','VII','VIII','IX','X','XI','XII'],
[,'·','·','-','·','·','<span style="font-size:60%">|</span>','·','·','-','·','·','<span style="font-size:60%">||</span>']];
if (numstyle < 0 || numstyle > 2) numstyle = 0; function timeZone(now,loc,mtz,dst) {if (loc) {var dow = now.getDay(); var second = now.getSeconds();
var minute = now.getMinutes(); var hour = now.getHours();} else {now.setUTCMinutes(now.getUTCMinutes() + (mtz + dst)*60); var dow = now.getUTCDay();
var second = now.getUTCSeconds(); var minute = now.getUTCMinutes(); var hour = now.getUTCHours();} if (hour > 11) {moa = pm; hour -= 12;} else moa = am;
return [dow,moa,hour,minute,second];} function commonClock(n) {n.style.position = 'absolute'; n.style.top = '0'; n.style.left = '0';
n.style.visibility = 'hidden';} function displayClock() {if (!d.getElementById) return; var ctx = document.createElement('div');
if ( fix) {ctx.style.position = 'relative'; ctx.style.margin = 'auto'; ctx.style.width = (clocksize + offset * 2) + 'px';
ctx.style.height = (clocksize + offset * 2) + 'px'; ctx.style.overflow = 'visible';} var cn = []; for (var i = 12; i > 0; i--)
{cn[i] = document.createElement('div'); cn[i].id = 'cnum' + i; commonClock(cn[i]); cn[i].style.width = (offset * 2) + 'px'; cn[i].style.height =
(offset * 2) + 'px'; cn[i].style.fontFamily = font_family; cn[i].style.fontSize = font_size + 'px'; cn[i].style.color = '#' +
colnumbers; cn[i].style.textAlign = 'center'; cn[i].style.paddingTop = '10px'; cn[i].style.zIndex = 1000; cn[i].innerHTML = clocknum[numstyle][i];
 ctx.appendChild(cn[i]);} var mn = []; for (i = minln; i > 0; i--) {mn[i] = document.createElement('div'); mn[i].id = 'cmin' + i; commonClock(mn[i]);
 mn[i].style.width = '1px'; mn[i].style.height = '1px'; mn[i].style.fontSize = '1px'; mn[i].style.backgroundColor = '#' +
 colminutes; mn[i].style.zIndex = 997; ctx.appendChild(mn[i]);} var hr = []; for (i = hourln; i > 0; i--) {hr[i] = document.createElement('div');
 hr[i].id = 'chour' + i; commonClock(hr[i]); hr[i].style.width = '2px'; hr[i].style.height = '2px'; hr[i].style.fontSize ='2px'; hr[i].
 style.backgroundColor = '#' + colhours; hr[i].style.zIndex = 998; ctx.appendChild(hr[i]);} var sc = []; for (i = secln; i > 0; i--) {sc[i] =
 document.createElement('div'); sc[i].id = 'csec' + i; commonClock(sc[i]); sc[i].style.width = '1px'; sc[i].style.height = '1px'; sc[i].style.fontSize
 ='1px'; sc[i].style.backgroundColor = '#' + colseconds; sc[i].style.zIndex = 999; ctx.appendChild(sc[i]);} var am = document.createElement('div'); am.id
 = 'ampm'; commonClock(am); am.style.width = ((xpos + rad) * 2) + 'px'; am.style.fontFamily = font_family; am.style.fontSize = (font_size * 2 / 3) + 'px';
 am.style.color = '#' + colnumbers; am.style.textAlign = 'center'; am.style.paddingTop = '10px'; am.style.zIndex = 990; ctx.appendChild(am); var zn =
 document.createElement('div'); zn.id = 'zone'; commonClock(zn); zn.style.width = ((xpos + rad) * 2) + 'px'; zn.style.fontFamily = font_family;
 zn.style.fontSize = (font_size * 2 / 3) + 'px'; zn.style.color = '#' + colnumbers; zn.style.textAlign = 'center'; zn.style.paddingTop = '10px';
 zn.style.zIndex = 990; ctx.appendChild(zn); d.getElementById('clock_a').appendChild(ctx); for (var i = 12; i > 0; i--) {d.getElementById('cnum' + i)
 .style.top = (ctrY - offset + rad * Math.sin(i * pi / 6 - pi2))+'px'; d.getElementById('cnum' + i).style.left = (ctrX - offset + rad * Math.cos
 (i * pi / 6 - pi2))+'px'; d.getElementById('cnum' + i).style.visibility = 'visible';} updateClock();} function moveClock(l, e, f)
 {for (var i = l; i > 0; i--) {d.getElementById(e + i).style.top = (ctrY + i * Math.sin(f))+'px';d.getElementById(e + i).style.left =
 (ctrX + i * Math.cos(f))+'px';d.getElementById(e + i).style.visibility = 'visible';}} function updateClock() {var now = new Date();
 var theTime = timeZone(now,localZone,mytimezone,dst); d.getElementById('ampm').style.top = (ypos + rad/3)+'px'; /*d.getElementById('ampm')
 .innerHTML = theTime[1] + '<br />' + dayname[theTime[0]];*/ d.getElementById('ampm').style.visibility = 'visible'; if (!localZone)
 {d.getElementById('zone').style.top = (ctrY + (rad/10))+'px'; d.getElementById('zone').innerHTML = city + '<br />' + country;
 d.getElementById('zone').style.visibility = 'visible';} moveClock(secln, 'csec', pi * theTime[4] / 30 - pi2); moveClock(minln, 'cmin',
 pi * theTime[3] / 30 - pi2); moveClock(hourln, 'chour', pi * theTime[2] / 6 + pi * (+now.getMinutes())/360 - pi2); setTimeout('updateClock()', 100);}
 window.onload = displayClock;
</script>
<style>
body{background-color:#4A8CF7;}
#main_container{ margin:0 auto; width:300px; padding:0px; }
</style>

</head>
<body>
<div id="main_container">   
    <div id="clock_a" style=""></div>
</div>       
</body>
</html>

have fun thank you.....!

Thursday 29 November 2012

Share a link with Twitter and Facebook Widgets

To have below facebook widgets in your site ,visit here : https://developers.facebook.com/docs/reference/plugins/like/

here you have to generate your labels to get code,just copy the code and paste where you require.




for twitter

To have below twitter widgets in your site ,visit here : https://twitter.com/about/resources/buttons#tweet

here you have to generate your labels to get code,just copy the code and paste where you require.

thanks for visiting and share it please.


Reloading The Page

...use these to jump around or read it all

[Reload All By Itself]
[Reload From A User's Click]
[Use the Full URL?]
I started to get email asking for this effect right around the time Internet stocks took off. People wrote asking how the stock sites got their pages to reload all by themselves.
The answer is pretty easy so I usually just wrote and answered in the email. While going through my notebook of possible topics, this one came up as one that is asked about a fair amount so I thought I'd write up a quick tutorial.
The trick to reloading the page is to force the browser to not look into the cache, but rather to again make a connection to the Web and bring up the document from the server. Most people know it can be done by hand by holding the shift key and clicking the "Refresh" (on IE) or "Reload" (on Navigator) buttons. If you didn't know...now you do.
That's a proven method but it's not exactly very pretty to have text asking the user to hold and click. You want your site to do the trick either by itself, or by offering a method whereas the user simply clicks and the browser does it for them.
Below I have two methods. One will reload every so many second all on its own and the other will reload when the user asks for it.

Reload All By Itself

This one's nice and easy. I'll give you the code. Copy and paste it into the document you wish to reload. Once in there, change the number of seconds you wish the page to wait before starting the reloading process. This code goes in between the HEAD tags.
<META HTTP-EQUIV="refresh" CONTENT="15">
Right now, the command is set to reload every 15 seconds. I checked a couple of online sites and they were all set about the same. I found the sites displaying stock information were set to around five minutes or 300 seconds.
I don't have a refresh on this page because the darn thing would just keep refreshing and there's nothing on this page that will update.

Reload From A User's Click

I've seen this done a number of ways, but this is my favorite because it, again, forces the browser to load from the server. It is true that pages can become cached if they are reloaded a great many times, but I have had pretty good success with this. Try it:
Click to refresh the page
Here's the code:
<A HREF="javascript:history.go(0)">Click to refresh the page</A>
Rather than using a refresh command, I like to go to the history of the page and set it to zero. The zero is the current page since in JavaScript, lists (arrays) are numbered starting with zero. Here's the same effect in a button:
And the code:
<FORM>
<INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
</FORM>



Use the Full URL?

Again, it's possible that a page using the methods shown above can get cached and can stop reloading from the server. A Webmaster friend told me that if you simply set up a link to the current page but use the entire URL, the page would always reload from the server because the request starts at the domain. For example, the full URL of this page is:
http://www.htmlgoodies.com/tutors/refresh.html
If you use that full URL in each of the elements above, you'll lessen the chance the page will cache. Thus, the Meta Refresh would become:
<META HTTP-EQUIV="refresh" CONTENT="5; URL=http://www.htmlgoodies.com/tutors/refresh.html">
You would then change out the JavaScript formats above to simply go to the URL rather than looking at the history file. In fact, you could lose the JavaScript altogether and just make a simple A HREF link right to the current page. The trick is to use the full URL address so that the process starts at the very beginning.
Again, the effect is the same as you'll get with the code above. It just lowers the chance of the page getting stuck in cache.

That's That

Short, sweet and simple. The effect is useful if done correctly. Two methods of using the effect incorrectly are refreshing so that a counter increases and refreshing so that a new banner ad displays. You don't want to refresh your page unless there's a very good reason. There are programs out there that update banners without refreshing the entire page. The use of the refresh to display new counter numbers is just silly.
And yes, I have seen both usages or I wouldn't have thought to bring them up.
Enjoy!
[Reload All By Itself]
[Reload From A User's Click]
[Use the Full URL?]

Wednesday 28 November 2012

Ten more CSS tricks you may not know

Our article, Ten CSS tricks you may not know has proven to be such a success that we decided it was time to offer you ten more CSS tricks that you may not know.

1. Block vs. inline level elements

Nearly all HTML elements are either block or inline elements. The characteristics of block elements include:
  • Always begin on a new line
  • Height, line-height and top and bottom margins can be manipulated
  • Width defaults to 100% of their containing element, unless a width is specified
Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Inline elements on the other hand have the opposite characteristics:
  • Begin on the same line
  • Height, line-height and top and bottom margins can't be changed
  • Width is as long as the text/image and can't be manipulated
Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>.
To change an element's status you can use display: inline or display: block. But what's the point of changing an element from being block to inline, or vice-versa? Well, at first it may seem like you might hardly ever use this, but in actual fact this is a very powerful technique, which you can use any time you want to:
  • Have an inline element start on a new line
  • Have a block element start on the same line
  • Control the width of an inline element (particularly useful for navigation links)
  • Manipulate the height of an inline element
  • Set a background colour as wide as the text for block elements, without having to specify a width

2. Another box model hack alternative

The box model hack is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. A number of CSS-based solutions have been put forward to remedy this, so here's another one which we really like:
padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

The first width command is read by all browsers; the second by all browsers except IE5.x on PC. Because the second command comes second it takes precedence over the first - any command that comes second will always override a preceding command. So, how does all this work?
By placing empty comment tags (/**/) before the colons, IE5.0 will ignore the command. Likewise, by placing these empty comment tags after the colon, IE5.5 will ignore the command. By using these two rules in conjunction with each other, we can hide the command from all of IE5.x.

3. Minimum width for a page

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.
Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this work in this browser. First, we'll insert a <div> under the <body> tag, as we can't assign a minimum width to the <body>:
<body>
<div id="container">

Next we create our CSS commands, so as to create a minimum width of 600px:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this.
You might also want to combine this minimum width with a maximum width:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

4. IE and width & height issues

IE has a rather strange way of doing things. It doesn't understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height - go figure!
This can cause problems, because we may need boxes to be resizable should more text need to go in them or should the user resize text. If we only use the width and height commands on a box then non-IE browsers won't allow the box to resize. If we only use the min-width and min-height commands though then we can't control the width or height in IE!
This can be especially problematic when using background images. If you're using a background image that's 80px wide and 35px high, then you'll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully.
To resolve this problem, you can use the following code for a box with class="box":
.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

5. Text-transform command

One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word capitals.
This command is incredibly useful to help ensure consistency in style across an entire website, particularly if there a number of content editors. Say for example your style guide dictates that words in headings must always begin with capital letters. To ensure that this is always the case, use text-transform: capitalize. Even if site editors forget about the capitalisation, their mistake won't show up on the website.
It's also preferable to use text-transform: uppercase to capitalise words, as screen readers may pronounce shorter words in capital letters as acronyms. A great example of this is ‘CONTACT US’, which is pronounced as ‘contact U S’ by some screen readers.

6. Disappearing text or images in IE?

IE has a very strange bug where text or background images sometimes disappears from sight. These items are still actually there, and if you highlight everything on screen or hit refresh they'll often re-appear. Kind of strange, huh?
This problem mostly occurs on background images and on text next to a floated element. To remedy the problem, simply insert position: relative into the CSS command for the disappearing element, and for some bizarre reason that'll usually fix the problem. If this doesn't work (it sometimes doesn't), assign a width to the offending element in the CSS and that should fix the problem.

7. Invisible text

Sometime you may actually want to make text invisible. Invisible text can be especially useful for screen reader users, perhaps to assign a label to a form item or insert a heading ahead of a section. Don't want to change the visual appearance by inserting these? Make them invisible and no one using a visual browser knows that they're there.
You may also want to make text invisible if using a print or handheld CSS file, as some information may not need to be displayed on either of these mediums (see below for more on this).
To make text invisible you can use display: none - easy! This works fine for hiding text from handhelds (if CSS is supported) and printed web pages, but isn't so great for many screen readers. Screen readers are now becoming too clever for their own good, and some will actually ignore the any text that has the rule display: none assigned to it.
For screen readers users therefore, a new approach is needed: position: absolute; left: -9000px. This basically takes the text and positions it 9000px to the left of the left edge of the screen, essentially making it invisible.

8. CSS document for handhelds

A separate CSS document can be created for PDAs and mobile phones, and only activated when one of these devices is being used to access your site. More and more websites are creating separate CSS documents for printing, so web pages automatically become print-friendly when users choose to print them. You can also do the same for handheld devices.
The following command is used to call up the CSS document for handhelds:
<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />
CSS commands in the handheld CSS file override any equivalent commands in the main CSS document. So, what commands should you place in this file?
Ideally, you want handheld web users to avoid having to scroll across. To test this, open up your website in a regular browser window and resize it to 150px in width. Then, open up your main CSS file and insert some new commands at the very bottom of the document. The commands you place here should adjust the layout of the website so that it doesn't require horizontal scrolling at a 150px width. Then, open up a new document, cut and paste these new commands over, and save it as handheldstyle.css (or whatever name you want to give it).
What your website offers to handheld web users should be quite different to what it offers on traditional web browsers, as the user experience is quite different. For further information, a book such as Handheld Usability is a great read.

9. 3-d push button effect

Back in the early days of the web, 3-d buttons that appeared to become pushed in when moused over were all the rage. At that time, this could only be achieved through images and JavaScript, but now with the advent of CSS we can go all retro and re-create this effect:
Example link
The main CSS commands you'll need are:
a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Aside from these commands, you can insert any other commands to achieve the desired presentation effect - the only limit is your imagination!

10. Same navigation code on every page

Most websites highlight the navigation item of the user's location in the website, to help users orientate themselves. This is a fundamental requirement for basic usability, but can be a pain as you'll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is...
First of all, you'll need to assign a class to each navigation item:
<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

You'll then need to insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section. When in ‘Home’ it should read <body id="home">, in ‘About Us’ it should be <body id="about"> and in ‘Contact Us’ <body id="contact">.
Next, you create a new CSS rule:
#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}

This basically creates a rule that only takes effect when class="home" is contained within id="home", and when class="about" is in id="about" and class="contact" is in id="contact". These situations will only occur when the user is in the appropriate site section, seamlessly creating our highlighted navigation item.

Tuesday 27 November 2012

Dojo JavaScript Example

Get Started With Dojo

It’s becoming a desktop web. Reactive interfaces are blurring the lines between desktop applications and web applications, which in consequence, makes the web more powerful. It’s all built on JavaScript — a language known for making coding a chore.
The Dojo Toolkit helps you create these richer interfaces with its widgets, called Dijits. These user interface elements, from buttons to pop-up boxes, are easy to use and sometimes don’t even require JavaScript.
In this tutorial, we’ll look at how Dijits work and how Dojo can help you write some powerful web applications.

What you’ll need

  • HTML and CSS experience
  • A little JavaScript experience

How Dojo is Different

If you’re expecting yet another JavaScript framework, Dojo will surprise you. Where libraries like jQuery and Prototype focus on accessing the Document Object Model (DOM), Dojo creates a rich layer on top of the DOM.
In its core library, Dojo has some functions you would expect. The real power, and where this tutorial focuses, is creating rich interfaces. As it turns out, Dojo does this with often very little JavaScript.
Dojo also loads only the files it needs, when it needs them. So, if you only need the button widget, that’s all the JavaScript you’ll need to load. All this is done for you from a single Dojo file reference.
In the sections below, I’ll show how to add a couple widgets to your website using mostly markup. Then, for the JavaScript coders, I’ll show how Dojo still lets you use your programming skills to increase the mojo of Dojo.
Let’s get started.
Woohoo! You clicked and now you see this box.


Preparing the Dojo

Now that you know what’s up with Dojo, let’s use some of it. Before we can get down and dirty with it, we need to set the stage. Copy the following text to a new file.
01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02
03<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
04
05<head>
06
07    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
08
09    <script type="text/javascript">
10
11        // JavaScript and Dojo calls will go here
12
13
14
15    </script>
16
17
18
19    <style type="text/css">
20
22
23    </style>
24
25</head>
26
27<body class="tundra">
28
29<!-- HTML and Dojo tags will go here-->
30
31
32
33</body>
34
35</html>
Alternatively, copies of the code are hosted on the Dojo template Webmonkey code library or right click on this link and select Save Link As instead.
Chances are pretty good that the code looks familiar to you. It’s straight-forward HTML, but with three little hooks for Dojo’s JavaScript and CSS.

The Dojo JavaScript

As with any JavaScript framework or library, the first thing we have to do is include the code file. But, wait, we haven’t downloaded anything to include, right? Good observation!
With Dojo, you can load a single file from the AOL Content Delivery Network (CDN), and don’t have to host the file yourself. The file will be delivered fast, it will be appropriately cached and you don’t have to mess with downloading and unpacking the code. Cool!
1<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.2.0/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
2
3<script type="text/javascript">
4
5    // JavaScript and Dojo calls will go here
6
7
8
9</script>
The first line calls to the Dojo JavaScript and also prepares a message for Dojo. It says that we want Dojo to parse the page as soon as the page loads. That way, it can find the other pieces of Dojo code. We’ll write the other pieces—and the stuff within the second set of script tags—in later sections.
If you prefer to host the Dojo JavaScript files yourself, you can download the latest version. This tutorial will continue to use the hosted Dojo for its many conveniences, including letting you run each example as a single HTML file on your own computer.

The Dojo CSS

Since the big deal about Dojo is its stylized widgets (or Didjits), how things look is an important part of Dojo’s appeal. Design is controlled via CSS themes. You can create and alter your own themes, but the default one is called Tundra and can also be loaded from the AOL CDN:
1<style type="text/css">
2
4
5</style>
Like the JavaScript, you can host the file yourself if you want. Tundra, and two other themes, come packaged with the Dojo download.

The Dojo Class Name

At this point we have loaded the JavaScript and the CSS, but the widgets won’t look right without this next simple line:
1<body class="tundra">
Here I’ve given the class “tundra” to the HTML <body> tag. If you take a look at the CSS theme, you’ll see that just about every line begins with .tundra, so having everything within an element with class="tundra" is important.
At this point, we’ve done enough stage-setting. It’s time to start the Dojo-writing. In the next section, we’ll start out nice and slow by changing the way a simple button looks.

Create a Simple Button

For this first example, you’ll be styling an ordinary button. The Tundra CSS theme takes care of how it looks. Dijits, the widget-making part of the Dojo Toolkit, is used to transform the regular button into a special button.
You can the entire HTML file or follow along below to write or copy the important sections piece by piece.
The first thing you need to do is make sure the code that produces the button is loaded. The link to the Dojo JavaScript file we included earlier takes care of this for you, but since Dojo only gives you what you need, you need to tell it what you want.
Place this line inside the empty script tags in your file:
1dojo.require("dijit.form.Button");
Now Dojo is ready to create button, but we need to show it where. That happens in our HTML. Place this markup where you would like the button to appear:
01<button dojoType="dijit.form.Button" id="buttonTest">
02
03    Clicky
04
05    <script type="dojo/method" event="onClick">
06
07        alert('Clicky-click! You clicked and now you see this box');
08
09    </script>
10
11</button>
Save and reload your file in a browser. You should see a normal button for a moment, then a square button with a slight gradient. Something like this:


At a glance, the code looks like normal HTML, but you might have noticed some strange attributes and embedded JavaScript. Let’s look a little closer.
The <button> tag contains a dojoType attribute. This tells Dojo how we want to transform this object. We want to make it a button. Or, as Dojo calls it, a dijit.form.Button (remember that from the JavaScript?).
The non-tag content within the button makes up the text of the button. In this case, “Clicky.”
Finally, we have another script block. Its a special one, though, because it is of type dojo/method and declares the onClick event. We can put any JavaScript code within this block, but since it’s nested inside the button, it’s best to keep it short. If you need more than one or two lines, use a function. We’ll show you how in the final example.
In this case, we’ll just toss an alert function in there to make sure everything is working.
You’ve probably already clicked on the button by now. If for some reason you’ve held off, go for it. A default JavaScript alert box pops up annoyingly. That’s how you know it’s working!
Are you wondering if that box could be less annoying and look a little nicer? I was, too. And Dojo has an answer for you in the next section.

A Better Alert Box

I cringe whenever I see the alert function used on production websites. Even Google does it. And yet, when it comes down to examples, I still find myself often using the normal JavaScript alert function. It’s such a handy way to prove something’s happening.
Dojo has a much better alert box, called Dialog. In this section, we’ll trigger this new alert box with the same button we used on the previous section.
As with the previous sections, the impatient can download the entire HTML file here. To learn what each piece of code does, read on.
In the script section at the top of the page, add this line below the dijit.form.Button line:
1dojo.require("dijit.Dialog");
This tells Dojo that we’re going to be using the Dialog widget.
Now you can remove that alert line from the dojo/method script tag. Don’t you feel better already? Where you used to have the alert line, replace it with this line:
1dijit.byId('dialogTest').show();
Here we tell Dojo (via dijit) to grab an object with the id dialogTest and then display it with the show() function. This object does not exist yet. So, let’s create it.
This is the object that will become our Dialog. Paste this special <div> tag below your button (but before the ending body tag).
1<div dojoType="dijit.Dialog" id="dialogTest" title="Clicky-click!">Woohoo! You clicked and now you see this box.</div>
The dojoType may look familiar from the button code, which used a similar syntax. In this case, the type is dijit.Dialog. We also gave the div an id, dialogTest, which is the same as what we passed to dijit.byId above. Awesome! This stuff is starting to come together.
Have you saved the file and reloaded yet? Click the button and you’ll see a better alert box:

This is much better than the alert function in several ways. First, we have control over the text in the title bar of the box. Secondly, it doesn’t make an annoying beep that makes the user think something is wrong. Lastly, it looks a lot nicer because it blends in with other interface elements, thanks to Dojo theming.
Despite all these improvements, this alert box could get better. I’ll show you how in the next section.

Make Your Alert Box Programmatically

At this point, you’ve seen how Dojo can change the way interface elements look. If you’ve done much JavaScript programming in the past, one thing might have bothered you a little: we haven’t done much actual JavaScript programming.
The Dojo Button and Dialog were both created completely with HTML-like code, relying on Dojo itself to do the parsing. To have a truly useful alert box function, we don’t want to toss in a special div every time we want to display a message. For this, we need a programmatically-involved alert box!
Here’s the code now or read on for constructing it yourself.
Much of our code from the previous section will remain the same. Inside the script tags at the top of the code, we need to add a new function that I’ve written. I’m calling it dialogAlert:
01function dialogAlert(txtTitle, txtContent)
02
03{
04
05    var thisdialog = new dijit.Dialog({ title: txtTitle, content: txtContent });
06
07    dojo.body().appendChild(thisdialog.domNode);
08
09    thisdialog.startup();
10
11    thisdialog.show();
12
13}
We can call this new function as often as we like, much as we used to call the alert function. Instead of a single message, this alert box also uses a title.
The function, as you see, contains four lines. In the first, we create a new Dialog object with the title and content. It seems like we’re done, right? Not yet; we need to add it to the page (the second line), call the startup function (third line—more on this in a moment) and finally show the Dialog.
Why do we have to both call startup and show it? The functions do two totally different things. In startup, Dojo prepares the object for display, but also makes sure that it’s currently hidden. After startup is called, we’re exactly to the point that we were in the previous section before the button is clicked. Once /show is called (and we called that same function in the old Dialog code), the box is displayed for the user.
Now we have to call this new function. Replace the code inside the onclick event with this line:
1dialogAlert('Clicky-click!', 'Woohoo! You clicked and now you see this box.');
Save and reload. When you click the button, you should see the same dialog you saw in the previous section. Now it’s been created with JavaScript, without the need to add a special div to the markup.

The best part is that if you want to call it again, you can. You can also use different content for each time.
Copies of this code are hosted on the Webmonkey code library or right click on this link and select Save Link As instead.

Where to go From Here

This tutorial has given just a taste of what Dojo can do. You’ve restyled a button and created a better alert box in two ways. There are many other widgets, including sliders, date selection objects and even a full rich text editor.
The obvious place to go from here is to start incorporating these widgets into your user interfaces. The official Dojo documentation is a bit lacking for beginners, though the online Dojo book can be helpful. If you’re looking to create more widgets, there are some great examples at DojoCampus, including code.
If you need a little inspiration, check out Sites and AOL, which each make a healthy use of Dojo. Then, try it yourself, and let Webmonkey know what you make.

Monday 26 November 2012

Be Smart and Use Smart Objects

Save Time Using Photoshop Smart Objects

 
Those who are familiar with CSS and PHP know how good it is to only change one line and see all changes propagate through the elements you’ve changed.
Well, today we’ll see how to do something similar to this with Photoshop, so when your client asks you to change your background from 90% black to 92.37% black you can do it in no time.
%tutke

What are Smart Objects?

First of all, it is nice to know about the basics. Smart Objects are layers that store data as external sources, so you can make use of them in your document non destructively.
Think about them as one file linked with a layer, so if you make any changes to the layer (rotate, distort, apply filters and effects and many other things) your source file remains intact and you can always go back to the original version, but if you change your original source it will affect all layers that point to this “file”.
Another important feature is that you can have several smart objects pointing to the same source. So if you have, for example, a button that is repeated 10 times, you can make all those layers point to the same source, and when you change the source you’ll change all of them automatically (you can also make them not to propagate these changes by copying as new smart object, but we have to talk about this another time).
Finally, this is a nice feature also for the front-end developer since it makes much easier to keep transparency and a lot of other effects when you export objects to make better use of CSS techniques (and save time, of course).

Some use cases

We’ll use the cubicle free psd theme as our base theme so we will just edit it here in order to have a “smarter” approach. Also, all these techniques are much easier to do when you’re just starting your project, of course, so don’t worry too much if something just looks like it’ll need a work.

How to create smart objects, and our first smart button

First of all, let’s see how to create a smart object. You just have to select the elements you want to be part of the smart object source, right click them and select “Convert to Smart Object” as follows. After that a different icon will be shown, and you’ll know that it is definitely a Smart Object.
%tutke
In this layout we have simple buttons, but if you want to change it in the future it will be much easier.
Now we need to copy this element to use it in other places. Just press CTRL+J and you’ll have another smart object from the same source as the original, so if you change one you’ll change all of them.
Now let’s edit this button. So double click in the item’s icon and you’ll open the smart object as a Photoshop file.
After editing your element you must to save it in same location (just CTRL + S and you’ll be fine). So after some editing you’ll have both smart objects updated.

Easier Color Palette

So let’s say you like to try out all possible combinations before defining the best one. It is pretty hard to try out a lot of color combinations when you do it in the traditional way (layer fill). Well, but if you do it via smart objects it’ll be really easy to try out more and more combinations.
Again, looking at our sample layout, we don’t have many colors but almost any element there is orange. So let’s pick up the non-textual element and use this technique. This will be the changed objects:
I’ve created a small smart object with an orange square and put this square where is the slideshow orange arrow, and the orange “latest from blog” box. So by this time we’ll just have a common square in top of the box and the slideshow arrow.
Now you need to use this smart object square as background for anything you do. When you change the color of this smart object, all the elements that share this color will be updated also.
For example, to get the arrow the easiest way that I thought is to make it as a mask for our color smart object, via add vector mask tool (bottom of layer panel).
So, despite the fact that our basic smart object is just a square, when we mask it, it’ll just look like an arrow.
To get the box you’ll need 3 elements:
  • Bigger Box -  just resize the smart object
  • “Angular” shadow – distort and resize your object
  • Pixel perfect light effect – resize the basic smart object and then apply color overlay effect with blend mode overlay, opacity 60% and color #fff.
This is our final smart objects:
If you make all these things if you want to change your basic color palette you’ll just have to change that first color smart object (just pick any of the duplicated elements).

Marker, icons and “Photoshop Spriting”

You could also do all your icon set, markers or even text styles via Smart Objects. You’ll add them all in the same source and then do what I call “Photoshop Spriting”. I call it this because it has the same logic as CSS Sprites. All elements will be in a part of the smart object but you’ll just hide others with layer masks, as we’ve done with the arrow.
So, let’s say you have three icons from the same set (SEO, Web Development and print design) you just have to merge them all as one smart object, and when you use one, you’ll have to hide others. For the first icon your mask will look like this (hidden content shown in red area):
The same way you can store all your main headings or basic dummy text and when you need to change anything in your typography or text colors you’ll just have to edit one “file”: your smart object!

Saturday 24 November 2012

No Copy and Paste for source


In this post rightclick will not work.  

Secure your website with JavaScript, NO RIGHT CLICK for Images



Have you ever worked really hard on graphics for your site only to find later that someone has stolen them as their own. You can help encrypt and protect your site with the following HTML codes. No right click block is 100% effective, but they will help against novices.

Use the script below so when someone right clicks to save an image off your page, a message will come up letting people know that your information is copyrighted.

This script may not work in all browsers, and is not foolproof. If someone really wants something from your page they can find ways around it, but at least it's a warning to people who want to take your graphics. But it certainly is a great start.

Copy and paste the following code, and make sure it comes right after your <HEAD> tag:

<script language=JavaScript> var message="Function Disabled!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>

If you don't like using javascript, you can always use a span tag to position a transparent gif over the top of the image like the example code below. Don't forget, you will need to create a transparent.gif to implement this method.

<span style="background-image: url(images/my_image.jpg)"><img src="images/transparent.gif" width="200" height="150" border="0" alt="Protected Image."></span>


"NO RIGHT CLICK" for Source

Here is a handy little script which will not only protect your images from right clicking, but your whole page. Remember this only stops some visitors from viewing your source. There are ways around it and if someone really wants to view your source they may find a way. There is another trick below to protect your source code, so keep reading.


<script language=JavaScript> var message="Function Disabled!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>

Disable Copy and Paste for greater website security.
One of the most popular questions I recieve here at Hypergurl is "How do you stop visitors from stealing your webpage information?"
Below is a little trick that will stop your visitors from copying and pasting your webpage information. Anyone with experience may know a way around this trick. However it will make it hard enough to discourage them and get them moving on to easier targets.
Add the following html code to your BODY tag:
Here is how your BODY tag may look once implimented:
<body bgcolor="#FFFFFF" ondragstart="return false" onselectstart="return false">

ondragstart="return false" onselectstart="return false"

Make Your Source Code Vanish.
Now before I show you this last trick to protect your source, I would like you to visit this link http://www.hypergurl.com/norightclick.html  to view source code . Just click "View" then choose "Source"
How did I do that?
Place your cursor in front of the opening <html> tag and hit your enter button for a while. It will push your source code out of view and this will fool the fools. *smiles*

 

Try to copy the below image :



<html>
<head>
<script>
function rstrct()
{
    alert("you cannot copy image !");
}
</script>
</head>

<body >
<img src="http://us.cdn3.123rf.com/168nwm/creator76/creator760910/creator76091000017/5745825-plant-growing-currency-with-dollar-sign-on-white-background-vector-illustration.jpg" onmouseover="rstrct()" / >
</body>
</html>

How to create multiple themes in Web Application (JSP)


There are plenty of solutions for creating themes using javascript and css, but sometimes we are not sure how to implement that logic in a web application. Here I am sharing the steps that I used to implement different themes in my web application that uses struts2.0, tiles.
Mostly themes are cookies based, so the user must have cookies enabled in her browser. Usually we dont prefer to retain user's preference in the database.
Step 1.
Put hyperlinks for each theme in the page, so that user can select her theme. we are calling a javascript function and passing the theme name.
 Change your theme: 
  <a href="javascript:setTheme('Classic')">Classic</a> | <a href="javascript:setTheme('Standard')">Standard</a> | <a href="javascript:setTheme('Basic')">Basic</a> 

Step 2.
Write a javascript function setTheme(), This function will set the selected theme in the cookies, we are using one more javascript function setCookie() which is being called from setTheme(). 
After setting the theme to the cookies, we have to reload the page to let the selected theme show its colors :-)
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function setTheme(themeName){
        setCookie("myTheme",themeName,365);
        window.location.reload();
}


Step 3.
At this point we have set the selected theme in user's browser, now its the time to read the selected theme from cookies (from request object in jsp). based on theme we have to render the css style in the document.
Remember if the user has disabled cookies then you application may fail to load the css, hence we have to load default css at the beginning(first line in below code).
I am using struts2, so using ognl expression for context path, you can use according to your tech. Idea is to put the correct path of the css.

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/default.css" />
<%
String cookieName = "myTheme";
Cookie cookies [] = request.getCookies ();
Cookie myCookie = null;

if (cookies != null){
        for (int i = 0; i < cookies.length; i++){
                if (cookies [i].getName().equals (cookieName)){
                        myCookie = cookies[i];
                        break;
                }
        }
}
if(myCookie!=null){%>

 <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/styles/<%=myCookie.getValue()%>.css" />
<%
}
%>


Step4.
Above code will put default.css and user selected theme css (Basic.css or Standard.css or Classic.css) in html document.

Here is the trick for the css, prepare a default css, then create a separate css for each theme, put only the changed styles props in theme css. 
in code below I have put all required styles props in default.css and in Basic.css i have put only one style property ie. background-color: Blue; 
because when user select Basic theme we are only changing the back-ground color to blue, other properties remains the same.(put whatever properties you what to change)

moreover we are putting default.css in each page irrespective of theme selection. so we always have all the properties of the Body tag.

-----------------
default.css-----------------
body {
        border: 0 none #FFFFFF; 
        font-size: 11px;
        color: #222;
        font-family: arial,tahoma,verdana,sans-serif;
        line-height: 1.5em;
        background-color: Yellow;
        text-align: left;
        word-wrap: break-word;
}
-----------------
Basic.css-----------------
body {  
        background-color: Blue; }

-----------------
Standard.css-----------------
body {  
        background-color: Green;        }
-----------------
Classic.css-----------------
body {  
        background-color: Red;  }


Step 5.
Deploy your application and run. 
select the required theme and background color should change accordingly.