tag:blogger.com,1999:blog-51753796878301829642024-03-05T05:00:50.560-08:00Web Development & Design ResourcesA blog that provides articles on frontend, UI&UX design and useful resources for wed development and web designPurushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.comBlogger40125tag:blogger.com,1999:blog-5175379687830182964.post-86270140745616664052020-05-18T05:14:00.001-07:002020-05-18T05:33:53.551-07:00Understanding ReactJS lifecycle methods<div dir="ltr" style="text-align: left;" trbidi="on">
The <i><b>React lifecycle</b></i> method helps us in adding logic during different phases of component rendering.<br />
Let us look at the various <b><i>lifecyle </i></b>methods of ReactJS and understand when they will be triggered during the component render.<br />
<br />
Do remember that the below listed lifecycle methods is only applicable to class based components and not for functional components.<br />
<br />
<br />
<ol style="text-align: left;">
<li><span style="font-size: large;"><b>constructor()</b> </span><br />This is the first method that is triggered during the component's lifecycle, this method is usually used to initialize state or to make API calls before showing it to the user also note that<br />this method is called only once during the entire lifecycle of the component.<br /><br /></li>
<li><span style="font-size: large; font-weight: bold;">render()</span><br /> This is the most important method of class component. If we fail to write this method react will thrown an error it is a must have method in any class component this method primary purpose is to return the UI or the JSX we plan to render on the browser. This method is triggered after the constructor call and every time there is a change in the component state.<br /><br /></li>
<li><span style="font-size: large;"><b>ComponentDidMount()</b></span><br />This method is called after the first time invocation of the render method, We will also use this method to make API calls and store them in state do remember that this lifecyle method(i.e ComponentDidMount) will be called only once.<br /><br /></li>
<li><b><span style="font-size: large;">ShouldComponentUpdate()</span></b><br />This method is also called when there is a state change. if we return false inside this method the component will not be rendered on DOM.<br /><br /></li>
<li><span style="font-size: large;"><b>ComponentDidUpdate()</b></span><br />This method will be called every time there is a change in the component state or any change in the props from the parent component.<br /><br /></li>
<li><b><span style="font-size: large;">ComponentWillUnmount()</span></b><br />This lifecycle is method called when we switch from the current component to a new component using routes or we conditionally render this component based state. ComponentWillUnmount will also be called just once usually this called to clear any promise calls before switching to another component.</li>
</ol>
<br />
So based on this list above the most commonly used <b><i>lifecycle</i></b> methods are constructor, render and ComponentDidMount most of the logic we write will usually be in any one of these methods.<br />
<br />
There are also few other <b><i>lifecycle </i></b>methods like getDerivedStateFromProps() and getSnapshotBeforeUpdate() more information about these additional methods can be found on <a href="https://reactjs.org/docs/react-component.html" target="_blank">react documentation. </a><br />
<div>
<br /></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com0tag:blogger.com,1999:blog-5175379687830182964.post-17980752353885419702018-07-23T02:20:00.001-07:002020-05-16T01:53:11.434-07:00What are Directives in Angular JS<div dir="ltr" style="text-align: left;" trbidi="on">
Directives allows us to create custom HTML elements and to manipulate DOM(Document Object Model).<br />
There are three type of directives<br />
<br />
<b>1. Component directive</b><br />
Creates custom HTML elements or templates<br />
<br />
<b>2. Structural directives</b><br />
Allows us to add or remove elements on the DOM. ex: nGFor,ngIF<br />
<br />
<b>3. Attribute directives</b><br />
allows us to attached event listeners or style properties on elements<br />
<br />
to create a directive we will have to import it from @angular/core and define a selector once done we will have to add a reference to it on app.module.ts<br />
<br />
<br /></div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com0tag:blogger.com,1999:blog-5175379687830182964.post-45069070864808125572018-05-17T00:35:00.002-07:002018-05-17T02:35:30.550-07:00How to remove plus and minus characters from input type number<div dir="ltr" style="text-align: left;" trbidi="on">
Here is a solution on how to remove the plus and minus characters from the input type number and retain the existing value of the input field excluding the plus and minus symbols, i have used jquery for this hack this can also be achieved with plain javascript.<br />
<br />
Here is the code snippet which removes the plus and minus signs from number field<br />
<br />
<br />
<iframe height='320' scrolling='no' title='BxqXep' src='//codepen.io/purush97k/embed/BxqXep/?height=265&theme-id=dark&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/purush97k/pen/BxqXep/'>BxqXep</a> by Purushothaman (<a href='https://codepen.io/purush97k'>@purush97k</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
<br /></div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com0tag:blogger.com,1999:blog-5175379687830182964.post-79698531909328883402014-05-26T09:45:00.000-07:002014-05-26T09:45:34.346-07:00HTML5 | LocalStorage<div dir="ltr" style="text-align: left;" trbidi="on">
HTML5 LocalStorage a feature that's been added to HTML5 specification, which enables storing data on clients machine, which can be retrieved and manipulated for future use unless the user clears the cache from browsers.<br />
<br />
Though we can store data there is a limitation as in how much we can store, the current max size of storing is 5Mb, which is quite a big amount, lets look how to store and retrieve data on client's machine<br />
<br />
Storing data:<br />
To store data we use the native localStorage.setItem(key,value) method which expects two arguments as shown the key and the value like so:<br />
<span style="font-family: Courier New, Courier, monospace;">localStorage.setItem('user_name','purush');</span><br />
<br />
Retrieving Data:<br />
To Retrieve data we use the native localStorage.getItem(key) method which expects one argument as shown which is the key, lets retrieve the previously stored data<br />
<span style="font-family: Courier New, Courier, monospace;">localStorage.getItem('user_name');</span><br />
this will return 'purush'<br />
<br />
Clearing Data:<br />
To remove or clear stored data we can use either localStorage.removeItem(key) to remove single storage element or we can use the localStorage.clear() to remove all references of storage like so<br />
<br />
<span style="font-family: Courier New, Courier, monospace;">localStorage.removeItem('user_name'); // to remove single reference;</span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;">localStorage.clear();//to clear all references in storage</span><br />
<br />
<br />
<br />
Additional functions/methods for storage manipulation<br />
<br />
<span style="font-family: Courier New, Courier, monospace;">localStorage.length; // to get count of all stored references</span><br />
<span style="font-family: Courier New, Courier, monospace;">localStorage.key(0); // to retrieve stored references expects a index to be passed as argument</span><br />
<span style="font-family: Courier New, Courier, monospace;">window.onStorage(); // event thats triggered while saving </span><br />
<br />
<br />
Advantages of LocalStorage<br />
1.Enables us to serve relevant content to users based on their previous visit.<br />
2. Enables to save a state for a example a game level where users can continue playing from recent state.<br />
<br />
<br />
Drawbacks of localStorage<br />
<br />
1.Doesn't work on IE7 but can be made to work using shim or polyfills.<br />
2.If the user clears the cache the data is lost.<br />
3.Requires a domain name for localStorage to work properly.<br />
<br />
<br />
<br />
<br /></div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com4tag:blogger.com,1999:blog-5175379687830182964.post-37577854847181949472013-04-18T04:57:00.002-07:002013-04-18T04:57:45.957-07:00Remove Scrollbars from syntaxhighlighter <div dir="ltr" style="text-align: left;" trbidi="on">
It's easy to remove the scrollbars that's generated by the <i>syntax highlighter</i> plugin go to the CSS file you using provided in the plugin for example" shCoreDefault.css" or the cutom css theme file you're using.<br />
and find class<br />
<br />
<span style="font-family: 'Courier New', Courier, monospace; font-weight: bold;">.syntaxhighlighter </span><span style="font-family: inherit;">and comment or remove</span><b style="font-family: inherit;"> </b><br />
<b><span style="font-family: 'Courier New', Courier, monospace;">overflow: auto !important;</span></b><br />
<span style="font-family: inherit;"><br /></span>
<b></b><span style="font-family: inherit;">that's it the scrollbar's that's created by the plugin is gone and you'll get the default scroll bars of the browser window</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdexwi2oR0DosWocnCnz1cQN2ybzvlPuD2p-xVCGCTXphHML0ojJiig-7sMX6IAN4_XSgL4MaAQvKox9cxYkvqBL2pAg-KEOI8aIOhQx9j8yYriDp36pR_SzgBpadUvfLZsQC6xYg9-oY/s1600/syntaxhighlighter.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Remove Scrollbars from syntaxhighlighter " border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdexwi2oR0DosWocnCnz1cQN2ybzvlPuD2p-xVCGCTXphHML0ojJiig-7sMX6IAN4_XSgL4MaAQvKox9cxYkvqBL2pAg-KEOI8aIOhQx9j8yYriDp36pR_SzgBpadUvfLZsQC6xYg9-oY/s320/syntaxhighlighter.jpg" title="Remove Scrollbars from syntaxhighlighter " width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Comment the lines shown above</td></tr>
</tbody></table>
<span style="font-family: inherit;"><br /></span></div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com9tag:blogger.com,1999:blog-5175379687830182964.post-9150856978263026112013-01-18T22:20:00.000-08:002020-05-18T05:17:57.305-07:00CSS Sprites | What are They?<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-size: large;"><i>CSS Sprites</i></span> most web developers should have heard this term, so what is it ?.<br />
CSS Sprite bunch of other images transformed into one Big Image. The origin of the term "sprites" comes from old school computer graphics and the video game industry.<br />
<br />
<span style="font-size: large;">A</span>dding Sprites to our websites helps with webpage performance, since the webpage has to make only one request to the server, which will fetch the Sprite (the Big image) which includes all the other images that you want to use in your webpage. since the server makes only one request your page will load a lot faster compared to conventional way of linking each images separately.<br />
<br />
<span style="font-size: large;">H</span>ere is a demo on how to use CSS Sprites. further more there a many Sprite generators online to create CSS Sprites all you have to do is upload a bunch of images to these Online tools and they will generate the Sprite for you.<br />
<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5JQ-Zbdec1XDPoXQzPeRhQmxKSjLYVHeatq2KdlbtO5xj8QXzuglgeCtj0HPV0vrVhdmxMqy9NhzjfAmaY-m0BzOUFtSjFmE20RWVidm9rnSBjDX3evIPe77axfyEkwaPFPA8gdqxaY/s1600/signup.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="Signup Sprite image" border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5JQ-Zbdec1XDPoXQzPeRhQmxKSjLYVHeatq2KdlbtO5xj8QXzuglgeCtj0HPV0vrVhdmxMqy9NhzjfAmaY-m0BzOUFtSjFmE20RWVidm9rnSBjDX3evIPe77axfyEkwaPFPA8gdqxaY/s200/signup.png" title="Signup Sprite image" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Signup image</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ3wVc-tx-CqYyb-69Uu5pcumAPhxkh-Ecahdl3nbbrX6fL9OJo17n1TvQdNipUi6Rn9fozPqLc3yZv26hTjyQGnl_wcR9tbU0PFu1hD37a2MPXnnrmnzUJgyDjkauqSr7viXvzGlgTPg/s1600/confirmation.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Confirmation sprite image" border="0" height="54" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ3wVc-tx-CqYyb-69Uu5pcumAPhxkh-Ecahdl3nbbrX6fL9OJo17n1TvQdNipUi6Rn9fozPqLc3yZv26hTjyQGnl_wcR9tbU0PFu1hD37a2MPXnnrmnzUJgyDjkauqSr7viXvzGlgTPg/s200/confirmation.png" title="Confirmation sprite image" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Signup confirmation image</td></tr>
</tbody></table>
<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQ35K_oP3bb_1cTn6qamauN4CF3rZHEJz5XLc-J2GC8Vyen1Rwv2kOYGfpGcFwdKf5lcvpVKz8am31q97s0E40916FN_dcoJ0_7-NOTUR5sgMOBP56jAs5Mz7Nm_0_3KOeZchkzz9aLg/s1600/CSS+sprite.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQ35K_oP3bb_1cTn6qamauN4CF3rZHEJz5XLc-J2GC8Vyen1Rwv2kOYGfpGcFwdKf5lcvpVKz8am31q97s0E40916FN_dcoJ0_7-NOTUR5sgMOBP56jAs5Mz7Nm_0_3KOeZchkzz9aLg/s320/CSS+sprite.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Two images made into one image</td></tr>
</tbody></table>
<br />
<br />
<div style="text-align: left;">
As you see above the are two images called "<span style="text-align: center;">Signup image" and "</span><span style="text-align: center;">Signup confirmation image" are made into one Big Image using an online CSS Sprite Generator as you can see it above. Once we have our CSS sprite we can use it to our needs by specifying the CSS "background-</span><span style="text-align: center;">position" property</span><span style="text-align: center;"> like so. </span></div>
<div style="text-align: left;">
<span style="font-size: 13px; text-align: center;"><br /></span></div>
<div style="text-align: left;">
<span style="text-align: center;"><b><a href="http://jsfiddle.net/purush97k/P6Dcu/embedded/result/" target="_blank">View Demo</a> | <a href="https://sites.google.com/site/faqwebdevelopment/documents/Sprite%20%283%29.zip?attredirects=0&d=1" target="_blank">Download Code</a></b></span></div>
<div style="text-align: left;">
<span style="font-size: 13px; text-align: center;"><br /></span></div>
<div style="text-align: left;">
<span style="text-align: center;"></span><br />
<div style="text-align: left;">
<span style="text-align: center;"><span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b><!doctype html> </b></span></span></div>
<span style="text-align: center;">
</span>
<br />
<div style="text-align: left;">
<span style="text-align: center;"><span style="background-color: white;"><b><span style="font-family: "courier new" , "courier" , monospace;"><html></span><span style="font-family: "courier new" , "courier" , monospace;"> </span></b></span></span></div>
<span style="text-align: center;">
</span>
<br />
<div style="text-align: left;">
<span style="text-align: center;"><span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span> <head> </b></span></span></div>
<span style="text-align: center;">
</span>
<br />
<div style="text-align: left;">
<span style="text-align: center;"><span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> <title>CSS Sprites</title> </b></span></span></div>
<span style="text-align: center;">
</span>
<div style="text-align: left;">
<span style="text-align: center;"><span style="background-color: white;"><b><span style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;"><style></span><span style="font-family: "courier new" , "courier" , monospace;"> </span></b></span></span></div>
<span style="text-align: center;">
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> input{ width:300px; </b></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> height:70px; </b></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> background:url(result.png); </b></span></div>
<div style="text-align: left;">
<span style="background-color: white;"><b><span style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;">background-position: 0px 0px;</span><span style="font-family: "courier new" , "courier" , monospace;">} </span></b></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b><span class="Apple-tab-span" style="white-space: pre;"> </span> input:hover{ </b></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> background:url(result.png); </b></span></div>
<div style="text-align: left;">
<span style="background-color: white;"><b><span style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;">background-position: 0px -88px</span><span style="font-family: "courier new" , "courier" , monospace;">; </span></b></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> cursor:pointer;} </b></span></div>
<div style="text-align: left;">
<span style="background-color: white;"><b><span style="font-family: "courier new" , "courier" , monospace;"> </span><span style="font-family: "courier new" , "courier" , monospace;"></style></span><span style="font-family: "courier new" , "courier" , monospace;"> </span></b></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> </head> </b></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> </b></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> <body> </b></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> <input type="button" /> </b></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> </body> </b></span></div>
<div style="text-align: left;">
<span style="background-color: white; font-family: "courier new" , "courier" , monospace;"><b> </b></span></div>
<div style="text-align: left;">
<span style="background-color: white;"><b><span style="font-family: "courier new" , "courier" , monospace;"></html> </span><span style="font-family: "courier new" , "courier" , monospace;"> </span></b></span></div>
<div style="font-size: 13px; text-align: left;">
<br /></div>
</span></div>
<div>
<div style="text-align: left;">
<span style="font-size: x-small;"><br /></span></div>
<div style="text-align: center;">
<span style="font-size: x-small;"><br /></span></div>
<div style="text-align: center;">
<span style="font-size: x-small;"><br /></span></div>
<div style="text-align: center;">
<span style="font-size: x-small;"><br /></span></div>
<br /></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com28tag:blogger.com,1999:blog-5175379687830182964.post-59755017137925844102013-01-15T02:19:00.000-08:002013-01-15T02:19:35.672-08:00HTML5 Semantic Tags | What do they mean<div dir="ltr" style="text-align: left;" trbidi="on">
HTML markup has changed a lot especially when the WHATWG introduced <i>semantic tags. </i><br />
Semantic Tags? What do they mean. The Semantic Markup helps Humans and Machines to Interpret the HTML markup in a more meaningful way. Which helps the HTML markup to be structured in a more meaningful way. remember adding semantic tags to your HTML5 markup wont change the apperance of your page, but it Gives more meaning to your Markup. <br />
Here is a list of few HTML5 semantic tags.<br />
<br />
<ul style="text-align: left;">
<li><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace; font-size: large;"><section> </section></span></li>
<li><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace; font-size: large;"><article> </article></span></li>
<li><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace; font-size: large;"><header> </header></span></li>
<li><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace; font-size: large;"><nav> </nav></span></li>
<li><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace; font-size: large;"><aside> </aside></span></li>
<li><span style="background-color: black; color: white; font-family: Courier New, Courier, monospace; font-size: large;"><footer> </footer></span></li>
</ul>
<div>
<span style="font-family: inherit;">As you see above the above tags wont make our web pages pretty but it gives more meaning to the markup.</span></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com5tag:blogger.com,1999:blog-5175379687830182964.post-28526766817564159352013-01-11T21:54:00.001-08:002013-01-11T21:54:12.470-08:00How CSS3 Works<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="background-color: white; border: 0px; font-family: 'Free Serif', serif; font-size: 16px; margin-top: 8px; outline: 0px; padding: 0px; vertical-align: baseline;">
CSS works with HTML, but it’s not HTML. It’s a different language altogether. While HTML provides structure to a document by organizing information into headers, paragraphs, bulleted lists, and so on, CSS works hand-in-hand with the web browser to make HTML <span class="emphasis" style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><em style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">look</em></span> good.</div>
<div style="background-color: white; border: 0px; font-family: 'Free Serif', serif; font-size: 16px; margin-top: 8px; outline: 0px; padding: 0px; vertical-align: baseline;">
For example, you might use HTML to turn a phrase into a top-level heading, indicating that it introduces the content on the rest of the page. However, you’d use CSS to format that heading with, say, big and bold red type and position it 50 pixels from the left edge of the window. In CSS, that text formatting comprises a style—a rule describing the appearance of a particular portion of a web page. A style <span class="emphasis" style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><em style="background-color: transparent; border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">sheet</em></span> is a set of these styles.</div>
<div style="background-color: white; border: 0px; font-family: 'Free Serif', serif; font-size: 16px; margin-top: 8px; outline: 0px; padding: 0px; vertical-align: baseline;">
You can also create styles specifically for working with images. For instance, a style can align an image along the right edge of a web page, surround the image with a colorful border, and place a 50-pixel margin between the image and the surrounding text.</div>
<div style="background-color: white; border: 0px; font-family: 'Free Serif', serif; font-size: 16px; margin-top: 8px; outline: 0px; padding: 0px; vertical-align: baseline;">
Once you’ve created a style, you can apply it to text, images, headings, or other elements on a page. For example, you can select a paragraph of text and apply a style to instantly change the text’s size, color, and font. You can also create styles for specific HTML tags, so, for example, all first-level headings (<code class="literal" style="background-color: transparent; border: 0px; font-family: 'Ubuntu Mono', monospace; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><h1></code>tags) in your site are displayed in the same style, no matter where they appear.</div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com4tag:blogger.com,1999:blog-5175379687830182964.post-65823682314530927652012-12-27T07:19:00.000-08:002013-01-23T21:33:20.947-08:00jQuery Resources | Support and tutorial help <div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNormal">
jQuery has a number of Official and Nonofficial websites and
Online resources dedicated to it. Where you’ll find information like tutorials,
plugins download’s and more. It here will be sharing a few of these website
which valuable for jQuery lovers.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoListParagraphCxSpFirst" style="margin-left: 38.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]--><a href="http://jquery.com/" target="_blank" title="Jquery resources" title="Jquery resources">Jquery.com</a></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 38.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]--><a href="http://jqueryui.com/" target="_blank" title="Jquery resources">Jqueryui.com</a></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 38.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]--><a href="http://jquery4u.com/" target="_blank" title="Jquery resources">Jquery4u.com</a></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 38.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]--><a href="http://www.smashingmagazine.com/tag/jquery/" target="_blank" title="Jquery resources">Smashingmagazine.com</a></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 38.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]--><a href="http://archive.plugins.jquery.com/" target="_blank" title="Jquery resources">Jqueryplugins</a></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 38.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]--><a href="http://visualjquery.com/" target="_blank">Visualjquery.com</a>
</div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 38.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]--><a href="http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/" target="_blank">Jqueryvideo casts</a></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-left: 38.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]--><a href="http://marcgrabanski.com/" target="_blank" title="Jquery resources">marcgrabanski.com</a></div>
<div class="MsoListParagraphCxSpLast" style="margin-left: 38.25pt; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: Symbol; mso-bidi-font-family: Symbol; mso-fareast-font-family: Symbol;">·<span style="font-family: 'Times New Roman'; font-size: 7pt;">
</span></span><!--[endif]--><a href="http://www.digital-web.com/articles/jquery_crash_course/" target="_blank">digital-web.com</a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
forgive me if I have missed out any other useful resources .
do comment about any other resources so that I’ll add them to existing
resources.</div>
</div>Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com1tag:blogger.com,1999:blog-5175379687830182964.post-37307800652499290342012-11-28T03:17:00.000-08:002012-11-28T03:17:27.939-08:00Login form | Using CSS3 <div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="margin-bottom: 0in;">
<span style="font-family: Trebuchet MS, sans-serif;">Here is an awesome demo of a <i>login
form</i>, which makes good use of CSS3 and HTML5. In this demo, i have made extensive use of gradients, text-shadows and box-shadows to achieve a beautiful and modern looking login form. The design of this login form was originally taken for codrops.com, hope you'll like and use this login form in your projects.</span></div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
<span style="font-family: Trebuchet MS, sans-serif;"><a href="http://jsfiddle.net/purush97k/Kssze/embedded/result/" target="_blank">ViewDemo</a> | <a href="https://sites.google.com/site/faqwebdevelopment/documents/loginform.rar?attredirects=0&d=1" target="_blank">Download Source</a></span></div>
<div style="margin-bottom: 0in;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsfLbEdkq_pJL0nqTMnnuCPsl36dfjHAE0Mu3BIdJOzndCJzRpFQKHI42Iz-Ejg_py3e9a0uswdZeI9xVshEekjpapq11VQKXmpSV6nfKVhoJYId-N76kQEPr7TWMlfOlOLJS2BoNwYNw/s1600/login+form.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="login form" border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsfLbEdkq_pJL0nqTMnnuCPsl36dfjHAE0Mu3BIdJOzndCJzRpFQKHI42Iz-Ejg_py3e9a0uswdZeI9xVshEekjpapq11VQKXmpSV6nfKVhoJYId-N76kQEPr7TWMlfOlOLJS2BoNwYNw/s400/login+form.png" title="login form" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">login form</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDZOlE25abuf3lh9UyvKGS8LVKGwYwa80Mhht0yE3DxxxgK6Qb2wtzijTCEnfQ5uqHwRRHOre7bZRWrYuCcy6Zw_3ux9NIaXy_h2cmuE4WVdaoMCGapyZjdOvtGElmY2gTs4V54HtjrLo/s1600/login+form2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="login form using CSS" border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDZOlE25abuf3lh9UyvKGS8LVKGwYwa80Mhht0yE3DxxxgK6Qb2wtzijTCEnfQ5uqHwRRHOre7bZRWrYuCcy6Zw_3ux9NIaXy_h2cmuE4WVdaoMCGapyZjdOvtGElmY2gTs4V54HtjrLo/s400/login+form2.png" title="login form" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">login form Onfocus</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="margin-bottom: 0in;">
<br /></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com15tag:blogger.com,1999:blog-5175379687830182964.post-26837752167462273122012-11-27T04:43:00.000-08:002012-11-28T01:45:47.496-08:00Adding a button in HTML | styling a button<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="margin-bottom: 0in;">
To
add a <i>button in a HTML</i> page use <input> tags and specify
the type as button like so</div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
<span style="color: black;"><span style="font-family: Courier New, serif;"><input
type=”button” value=”submit” action=”submit.php”> </span>this
code will be rendered in browser like in Figure 1.1</span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_GNLq1Wo6pAMf5LelfjwGEX3HzlC7bIGQvo4w63M4OgWCu_414ryrwTqSfwmKl-WkQa206OYZUjKUcy8s7MUKb4f6YdFcWsua5XmIA_wTjB2oe8cJZZcSkBBs0Qqpz1PmkXxLf1Kpi_Q/s1600/Button.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="HTML Button" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_GNLq1Wo6pAMf5LelfjwGEX3HzlC7bIGQvo4w63M4OgWCu_414ryrwTqSfwmKl-WkQa206OYZUjKUcy8s7MUKb4f6YdFcWsua5XmIA_wTjB2oe8cJZZcSkBBs0Qqpz1PmkXxLf1Kpi_Q/s320/Button.png" title="HTML Button" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Add caption</td></tr>
</tbody></table>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-bottom: 0in; text-align: left;">
Further more if you wish to style this
button we can apply a set of CSS rules to make the buttons look
pretty here are a few examples:</div>
<div style="margin-bottom: 0in; text-align: left;">
<a href="http://faqwebdevelopment.blogspot.in/2012/11/15-simple-html-buttons-download.html" target="_blank">Download code for these buttons here</a></div>
<div style="margin-bottom: 0in; text-align: left;">
</div>
<div style="margin-bottom: 0in;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRYliR6lqLirWQbuBa7lBQq_xgthmn4vKYD9u_zu0yNPkVzy-90Tl1Sw05Su0JNFK7-_liJhE6ygBSiJ0xMzJO_3ApIpLNCgMEAUzdXLFX4LBSH-d_qPCJn7G_l5Q2gh2BmN-GFctCFI/s1600/HTML+buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="140" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZRYliR6lqLirWQbuBa7lBQq_xgthmn4vKYD9u_zu0yNPkVzy-90Tl1Sw05Su0JNFK7-_liJhE6ygBSiJ0xMzJO_3ApIpLNCgMEAUzdXLFX4LBSH-d_qPCJn7G_l5Q2gh2BmN-GFctCFI/s320/HTML+buttons.png" width="320" /></a></div>
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_GNLq1Wo6pAMf5LelfjwGEX3HzlC7bIGQvo4w63M4OgWCu_414ryrwTqSfwmKl-WkQa206OYZUjKUcy8s7MUKb4f6YdFcWsua5XmIA_wTjB2oe8cJZZcSkBBs0Qqpz1PmkXxLf1Kpi_Q/s1600/Button.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_GNLq1Wo6pAMf5LelfjwGEX3HzlC7bIGQvo4w63M4OgWCu_414ryrwTqSfwmKl-WkQa206OYZUjKUcy8s7MUKb4f6YdFcWsua5XmIA_wTjB2oe8cJZZcSkBBs0Qqpz1PmkXxLf1Kpi_Q/s1600/Button.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><br /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com8tag:blogger.com,1999:blog-5175379687830182964.post-9609856126001148142012-11-27T00:51:00.000-08:002012-12-02T01:09:27.405-08:0015 Simple HTML buttons | Download<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="margin-bottom: 0in;">
Here is a few simple looking <i>html
buttons</i> styled using CSS3 .</div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
<span style="font-size: large;"><a href="http://jsfiddle.net/purush97k/CD8XG/embedded/result/" target="_blank">See Demo</a> | <a href="https://sites.google.com/site/faqwebdevelopment/documents/15%20beautiful%20html%20buttons.html?attredirects=0&d=1" target="_blank">Download</a></span></div>
<div style="margin-bottom: 0in;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHG9kJIlfGBXvTygUc7-rH5XMD55CLEJnDPjS6nslhuTy5U1eFirIvAdrpDhyKhbaylSqjUzIm7irqBUpUddzX5VA4zR-ZMs5995JDbspkSldQ5Cy5OUSeOy1dW0d5ji9FjW9KADJpW0/s1600/simple+html+buttons.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="html buttons" border="0" height="181" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHG9kJIlfGBXvTygUc7-rH5XMD55CLEJnDPjS6nslhuTy5U1eFirIvAdrpDhyKhbaylSqjUzIm7irqBUpUddzX5VA4zR-ZMs5995JDbspkSldQ5Cy5OUSeOy1dW0d5ji9FjW9KADJpW0/s640/simple+html+buttons.png" title="html buttons" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">HTML buttons</td></tr>
</tbody></table>
<div style="margin-bottom: 0in;">
<br /></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com7tag:blogger.com,1999:blog-5175379687830182964.post-84335946321062285492012-11-16T02:05:00.000-08:002012-11-16T02:06:40.436-08:00Social media Icons | Icons Download<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="margin-bottom: 0in;">
<i><b>Social media icons free download </b></i>,
Download all social media icons in a Single PSD File and use it in
your web development and design projects</div>
<div style="margin-bottom: 0in;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg32wHlWolTdsB3vh7JSIY8ZzARuVjMDShG2N0NWuE1NpGm1EB5Xo8OfgTEWxHQRtN9bsEZ5z4ortsHCU1_zqPFeoVG0BkW2kqrrrT4-jvf1hwDIVOSZiPuxj0Ep-eHhnBbjsyThmHJ5hQ/s1600/Social+media+Icons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Social media Icons" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg32wHlWolTdsB3vh7JSIY8ZzARuVjMDShG2N0NWuE1NpGm1EB5Xo8OfgTEWxHQRtN9bsEZ5z4ortsHCU1_zqPFeoVG0BkW2kqrrrT4-jvf1hwDIVOSZiPuxj0Ep-eHhnBbjsyThmHJ5hQ/s320/Social+media+Icons.png" title="Social media Icons " width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
<b><a href="https://sites.google.com/site/faqwebdevelopment/documents/template.psd?attredirects=0&d=1" target="_blank">Download this Social Media Icons</a></b></div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
Credits: artimonier.tk and
Icondeposit.com</div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com4tag:blogger.com,1999:blog-5175379687830182964.post-70613752007269668182012-11-16T01:59:00.000-08:002012-11-22T01:47:26.198-08:00HTML Tags | Adding Scripts in HTML<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="margin-bottom: 0in;">
<i><b>Adding Scripts in HTML</b></i>
(i.e. JavaScript, Action script and others) requires the use of
opening and closing <script> tags. The script is entered
between theses tags.</div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
Here is an example:</div>
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;"><script></span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;">//this is just an example for adding
scripts</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;">$(document).ready(function(){</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;">$(‘h1’).click(function(){</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;">$(this).addclass(‘.animate’)</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;">});</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;">});</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;"></script>
</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<div style="margin-bottom: 0in;">
To included external script files we
have to included the ‘src’ attribute in the script tags like so</div>
<div style="margin-bottom: 0in;">
</div>
<br />
<br />
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;"><script
src=http:/faqwebdevelopmenet.js
type=”text/javascript”></script>
</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<div style="margin-bottom: 0in;">
In the above HTML code the ‘src’
attribute specifies the source location of the script file and type
attribute specifies the type of script being used. (Note: in HTML5
you don’t need to specify the type attribute the browsers will
automatically understand the type of script). </div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com0tag:blogger.com,1999:blog-5175379687830182964.post-82583941980350900982012-11-16T01:54:00.002-08:002012-11-22T01:47:38.365-08:00HTML Tags | Adding a link in HTML<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="margin-bottom: 0in;">
<i><b>Adding a link in HTML</b></i> is
fairly simple all we need to do is add the file location and link
title in between the opening and closing <a> tags.</div>
<div style="margin-bottom: 0in;">
like this:</div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
<span style="font-family: Courier New, Courier, monospace;"><a
href="http://fawwebdevelopment.blogspot.com">Link to my
Blog</a></span></div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
The above code will be rendered in a
browser like this:</div>
<div style="margin-bottom: 0in;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGZpleaRiZE9LFiVEKDkuIfLfeo8sz4qXgMQn-hjGRsq3zEdyKFBTv11FFTDgcrOxDd6CEt1KGp0dXGX8cAuS0WV9e5BZKhaAtNY94lGjzIe96GzZ6F9gBGIqn03nEUNJFODE2l6o5-zU/s1600/Adding+a+link+in+HTML.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Adding a link in HTML" border="0" height="142" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGZpleaRiZE9LFiVEKDkuIfLfeo8sz4qXgMQn-hjGRsq3zEdyKFBTv11FFTDgcrOxDd6CEt1KGp0dXGX8cAuS0WV9e5BZKhaAtNY94lGjzIe96GzZ6F9gBGIqn03nEUNJFODE2l6o5-zU/s320/Adding+a+link+in+HTML.JPG" title="Adding a link in HTML" width="320" /></a></div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
<br />
<br /></div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
</div>
<div style="margin-bottom: 0in;">
After adding the above code the browser
will change appearance of the link, the text color will be changed to
blue and text will be also underlined this is the default behavior by
browsers to indicate links. To style this links to appear the way you
want please read the tutorial on “how to style links”.</div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="margin-bottom: 0in;">
In the <i>HTML Code</i> “<span style="font-family: Courier New, Courier, monospace;"><a
href="http://faqwebdevelopment.blogspot.com">Link to my
Blog</a></span>”</div>
<div style="margin-bottom: 0in;">
<a> stands for Anchor text ,
“href” attribute specifies the file path .
</div>
<div style="margin-bottom: 0in;">
<br /></div>
<br /></div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com0tag:blogger.com,1999:blog-5175379687830182964.post-68997681598188771352012-11-05T03:06:00.000-08:002012-11-05T03:06:02.531-08:00Syntax for Inserting Linebreak, Horizontal line, Paragraphs and Headings in Html | HTML Elements introduction<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="line-height: 100%;">LineBreak : <br/> provides a single
line break</span></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<br />
</div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">Horizontal line: <hr> inserts a
Horizontal line</span></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<br />
</div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">Paragraphs: <p></p> inserts
paragraph element (note: if you forget to add the closing </P>
tag browsers will still render the paragraph but it is a good
practice to add the closing </P >tag).</span></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<br />
</div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">Headings :< h1></h1> headings
range from <h1 > to <h6> where h1 is the most important
heading and h6 is the least important heading you can use the heading
s as per your purpose like so:</span></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;"><h1>My Heading</h1> <h2>my
other Heading</h2> <h3>My Final Heading</h3></span></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com0tag:blogger.com,1999:blog-5175379687830182964.post-20798909956702601912012-11-05T03:04:00.000-08:002012-11-22T01:47:58.597-08:00Advanced Jquery easing | Demo and Download<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="line-height: 100%;">Swing and Jquery easing are included in the
Jquery core library but there are many other easing methods which are
included in the Jquery easing plugin, available in the Jquery plugin
repository.</span></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;"> Here are the other easing methods:</span></div>
<ul>
<li><div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">easeInCirc </span>
</div>
</li>
<li><div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">easeInOutExpo</span></div>
</li>
<li><div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">easeOutBack</span></div>
</li>
<li><div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">easeOutElastic</span></div>
</li>
<li><div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">easeOutBounce</span></div>
</li>
<li><div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">easeInOutElastic</span></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAGtq-dcvAzmr0s4VgaCaJ36dEeS9GJyWe8nOb71hOAFXmLao3jeO0NCCalDY3kC-96KbR389zapMzG8zNXrLsj6okOnQYmEWhi-OPGjaEDAzM3jcXWEONnWDgFes4rpLbvZm2NXndwig/s1600/jquery-easing-effects.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery-easing-effects" border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAGtq-dcvAzmr0s4VgaCaJ36dEeS9GJyWe8nOb71hOAFXmLao3jeO0NCCalDY3kC-96KbR389zapMzG8zNXrLsj6okOnQYmEWhi-OPGjaEDAzM3jcXWEONnWDgFes4rpLbvZm2NXndwig/s320/jquery-easing-effects.png" title="jquery-easing-effects" width="320" /></a></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;"><br /></span></div>
</li>
</ul>
<div style="line-height: 100%; margin-bottom: 0in;">
</div>
<br />
<br />
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">to use this easing methods we need to pass its
name to the animate function lets see an example which covers most of the
above said easing methods. </span></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
</div>
<h3 style="line-height: normal;">
<a href="https://sites.google.com/site/faqwebdevelopment/documents/advanced_easing.zip?attredirects=0&d=1" target="_blank"><span style="color: #6fa8dc;"><b>Download <u>DEMO</u> </b></span></a></h3>
<br />
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><br /></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><!
DOCTYPE HTML></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></head></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><script
type="text/javascript"
src="Scripts/jquery-1.7.2.min.js"></script></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><script
type="text/javascript" src="Scripts/easing.js"></script></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><style></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">p{
height:150px; overflow:hidden;}</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">#div1,#div2,#div3,#div4{
position:absolute; border:1px solid #999; border-radius:5px;
width:350px; padding:6px;}</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">#div1,#div3{
margin-left:5%; background-color:#00CCFF; }</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">#div2,#div4{
margin-left:50%; background-color:#FC0;}</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">#div3,#div4{
margin-top:55%;}</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">#div1,#div2{
margin-top:10%;}</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">#easeOutBounce{
margin-left:27%;}</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">p{
font-family:Calibri; font-size:20px; text-align:center;
font-weight:bold; }</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></style></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></head></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><body></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><div
id="div1"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><p>
I'm In love with Jquery </p></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></div></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><div
id="div2"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><p>
I'm In love with Jquery </p></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></div></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><div
id="div3"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><p>
I'm In love with Jquery </p></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></div></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><div
id="div4"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><p>
I'm In love with Jquery </p></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></div></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><div
id="butns"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><input
name="animate" type="button"
value="easeOutBounce" id="easeOutBounce"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><input
name="animate" type="button" value="easeInOutExp"
id="easeInOutExpo"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><input
name="animate" type="button" value="easeInOutExp"
id="easeOutCirc"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><input
name="animate" type="button"
value="easeOutElastic" id="easeOutElastic"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></div></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><script
type="text/javascript"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('#easeOutBounce').toggle(function()
{</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'+=70px'},
2000, 'easeOutBounce');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">},
function() {</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'-=70px'},
2000, 'easeOutBounce');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">});</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('#easeInOutExpo').toggle(function()
{</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'+=70px'},
2000, 'easeInOutExpo');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">},
function() {</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'-=70px'},
2000, 'easeInOutExpo');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">});</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('#easeOutCirc').toggle(function()
{</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'+=70px'},
2000, 'easeOutCirc');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">},
function() {</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'-=70px'},
2000, 'easeOutCirc');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">});</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('#easeOutElastic').toggle(function()
{</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'+=70px'},
2000, 'easeOutElastic');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">},
function() {</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'-=70px'},
2000, 'easeOutElastic');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">});</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></script></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></body></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></html></span></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com5tag:blogger.com,1999:blog-5175379687830182964.post-30655630029103309522012-11-05T02:49:00.000-08:002013-01-31T23:33:49.593-08:00How to add Jquery easing effects | Jquery tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="margin-bottom: 0in;">
Lets start with the a little
introduction, easing refers to the acceleration and declaration that
occurs during the course of an animation to give it a more responsive
and natural feel. There are two types of easing methods that the core
Jquery library supports, which are <i>Linear</i> and <i>Swing</i>
lets us see how to implement this easing methods, but before that
lets see a brief description on linear and swing easing methods.</div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">Linear easing:</span></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">Linear easing method accelerates and
deacclereates at a constant rate which makes it look fairly boring
but it is good to know the linear easing might comin handy. </span>
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2R-P1O9NGrfN9t-c9YFLWoW4LZcJKrUAZwRIoYJmGg1r2TQU658g1ynJEgGoGmiJSldhn9B0gZfax7jGPCkab_yRPQ3YQH1nbzY0MHYr_xS97QECsbFdDpg61r6FyVKdYv6NkpWva7c/s1600/Jquery+linear+easing.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Linear Easing" border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2R-P1O9NGrfN9t-c9YFLWoW4LZcJKrUAZwRIoYJmGg1r2TQU658g1ynJEgGoGmiJSldhn9B0gZfax7jGPCkab_yRPQ3YQH1nbzY0MHYr_xS97QECsbFdDpg61r6FyVKdYv6NkpWva7c/s200/Jquery+linear+easing.jpg" title="Linear Easing" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Linear Easing</td></tr>
</tbody></table>
<div style="line-height: 100%; margin-bottom: 0in;">
<br />
<br /></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">Swing easing:</span></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;">Swing easing method starts off slowly before
gaining speed and slows down again towards the end of the animation ,
which makes it look more natural compared to Linear easing</span></div>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;"><br /></span></div>
<br />
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0PEFZH0-B3upZ4da8_tqi1tQSb2ZksfSYysRl8O0eoZdbuBCQMdNYmnXFfNGz4Qpydw-Ulw5uSa96IuNbC_yyQkhkR6mkfpHokPmEJcpnUITrZRvyayxQz88ZkqMhjEVmLdqIstNh2yA/s1600/Jquery+Swing+easing.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Swing easing" border="0" height="117" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0PEFZH0-B3upZ4da8_tqi1tQSb2ZksfSYysRl8O0eoZdbuBCQMdNYmnXFfNGz4Qpydw-Ulw5uSa96IuNbC_yyQkhkR6mkfpHokPmEJcpnUITrZRvyayxQz88ZkqMhjEVmLdqIstNh2yA/s200/Jquery+Swing+easing.jpg" title="Swing easing" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Swing easing</td></tr>
</tbody></table>
<div style="line-height: 100%; margin-bottom: 0in;">
<span style="color: black;"><br /></span></div>
<div style="margin-bottom: 0in;">
<h3 style="text-align: left;">
<b><span style="color: #6fa8dc;"> <a href="https://sites.google.com/site/faqwebdevelopment/documents/easing_demo.zip?attredirects=0&d=1" target="_blank"><u>Download Demo</u></a></span></b></h3>
<br /></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"> <!
DOCTYPE HTML></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></head></span></div>
<div style="margin-bottom: 0in; margin-left: 0.5in;">
<div style="line-height: 100%;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><script
type="text/javascript"
src="jquery-1.7.2.min.js"></span></div>
<div style="line-height: 100%;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></script></span></div>
<span style="font-family: Courier New, Courier, monospace;"><span style="line-height: 16px;"><script type="text/javascript" src="easing.js"></script></span></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><style></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">div{
margin-left:5%; border:1px solid #999; border-radius:5px;
width:350px; padding:6px; position: absolute; }</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">#al{
margin-top:0%; margin-left:50%;}</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">p{
height:150px; overflow:hidden;}</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">#anim{
position:absolute; margin-top:18%; margin-left:42%;}</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">#swing{
position:absolute; margin-top:22%; margin-left:42%;}</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></style></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></head></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><body></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><div></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><p>
type some text here </p></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></div></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><div
id="al"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><p>
type some text here </p></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></div></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><input
name="animate" type="button" value="Linear"
id="anim"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><input
name="animate" type="button" value="Swing"
id="swing"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"><script
type="text/javascript"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('#anim').toggle(function()
{</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'+=150px'},
2000, 'linear');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">},
function() {</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'-=150px'},
2000, 'linear');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">});</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('#swing').toggle(function()
{</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'-=150px'},
2000, 'swing');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">},
function() {</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">$('p').animate({'height':'+=150px'},
2000, 'swing');</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;">});</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></script></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></body></span></div>
<div style="line-height: 100%; margin-bottom: 0in; margin-left: 0.5in;">
<span style="color: black; font-family: Courier New, Courier, monospace;"></html> </span>
</div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com3tag:blogger.com,1999:blog-5175379687830182964.post-74991029961914991752012-11-05T02:41:00.000-08:002012-11-05T02:50:47.375-08:00Selecting elements with Jquery | styling html elements with Jquery<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="margin-bottom: 0in;">
<span style="font-family: inherit;">We’ll be looking on how to select a
HTML element lets say for instance an <h1> tag and change the
background color and the font color when clicking it, let’s get
started.</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: inherit;">To select an element in Jquery we
simply pass the element’s name as a string parameter to the $
function (note the $ symbol is the short form for Jquery). Here is
how the code will look</span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivt0h0wxS6P8Cg9d2aY3F5aA0BFkjZGt4wh1Kz0iDOws84KMdO7lm4gKaF8W5a6QV9B-CGyZCX5Je8qXBSkiDx3TCQyLrL0AnPdrNz3U9bIhRpQelk-GrBiic0SRrFJ632muEqGyAClEY/s1600/styling+html+elements+with+jquery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Styling elements with jquery" border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivt0h0wxS6P8Cg9d2aY3F5aA0BFkjZGt4wh1Kz0iDOws84KMdO7lm4gKaF8W5a6QV9B-CGyZCX5Je8qXBSkiDx3TCQyLrL0AnPdrNz3U9bIhRpQelk-GrBiic0SRrFJ632muEqGyAClEY/s400/styling+html+elements+with+jquery.jpg" title="Styling elements with jquery" width="400" /></a></div>
<div style="margin-bottom: 0in;">
<span style="font-family: inherit;"><br /></span></div>
<div style="margin-bottom: 0in;">
<span style="font-family: inherit;"></span><br />
<a name='more'></a><span style="font-family: inherit;"><br /></span></div>
<div style="margin-bottom: 0in;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"><!
DOCTYPE HTML></span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"></head></span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"><script
type="text/javascript"
src="Scripts/jquery-1.7.2.min.js"></script></span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"></head></span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"><body></span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"><script
type="text/javascript"></span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;">$(document).ready(function()
{</span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"> $('h1').click(function(){</span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;">
$(this).css('background-color','#F00')//setting
a background color</span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"> $(this).css('color','#fff')
// setting font solor</span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"> </span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;">});//click
function end</span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;">});//document
ready function end</span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;">
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"></script></span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"><h1>click
me and change the Background</h1></span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"><br />
</span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"><style></span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"> h1{
border: 1px solid #999; border-radius:5px; width:510px; cursor:
pointer;}</span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"></style></span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"></body></span></div>
<div style="line-height: 100%; margin-bottom: 0in; text-align: left;">
<span style="color: #6fa8dc; font-family: Courier New, Courier, monospace;"></html></span></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com0tag:blogger.com,1999:blog-5175379687830182964.post-86750094900185544312012-10-23T08:45:00.002-07:002012-10-24T03:19:50.061-07:00How to remove the space between cells in tables | CSS tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNoSpacing">
Cell’s margin and padding property will have a default
value, so by setting the margin and padding to 0 wont remove the gap between
cells, to remove these gaps we have use the border-collapse property and set
the value to collapse.</div>
<div class="MsoNoSpacing">
</div>
<div class="MsoNoSpacing">
An example use of border-collapse property:</div>
<div class="MsoNoSpacing">
<br />
<a name='more'></a><br /></div>
<div class="MsoNoSpacing">
CSS Code:</div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">table{ border:2px #0CF solid; margin:10% auto 10% auto;
border-collapse:collapse;}</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">table td{border:2px #0CF solid;}</span></div>
<div class="MsoNoSpacing">
<br />
<br /></div>
<div class="MsoNoSpacing">
HTML Code:</div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><table width="200" border="0"></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <th
scope="col">Name</th></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <th
scope="col">Year</th></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <th
scope="col">Country</th></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>purush</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>1988</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>India</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Dave</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>1988</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>United States</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Jane</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>1989</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Canada</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Matthew</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>1999</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Japan</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Jane</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>1989</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Canada</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"></table></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="border collapse property using CSS" border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd4ywcUixYaT7JQS-GLs23ygc7tBqAdyPPEpF1ZEL3m-h8tsKA4pD78BLHJVBlUIo73B5eM4Ms1LdKhmI3Xe0UZUER1QxQ80yXGbOr1erNYONF_WOvu106ufRxDt3rkzKp0kM0SQRLxv4/s320/border+collapse+property+CSS.bmp" style="margin-left: auto; margin-right: auto;" title="border collapse property using CSS" width="320" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCgAjnqOiPoiNFSvt_VwfnJ8Ii_soVDC8HekZ2vdPzV_JgVLxKtnG34z0laXg7x9ZqgsmWUk4pE3HPo-wOIOfvr6y28zL8NetFJU1cxvTbWY4DiUg8ODRblvK_u8Eppul_IccpxFEG9Go/s1600/boder+collapse+using+CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="border collapse property using CSS" border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCgAjnqOiPoiNFSvt_VwfnJ8Ii_soVDC8HekZ2vdPzV_JgVLxKtnG34z0laXg7x9ZqgsmWUk4pE3HPo-wOIOfvr6y28zL8NetFJU1cxvTbWY4DiUg8ODRblvK_u8Eppul_IccpxFEG9Go/s320/boder+collapse+using+CSS.jpg" title="border collapse property using CSS" width="320" /></a></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<br /></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com3tag:blogger.com,1999:blog-5175379687830182964.post-55422896147049219362012-10-23T08:40:00.000-07:002012-11-22T01:48:26.428-08:00How to add Border to a table | CSS Tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
Adding border to tables is fairly simple here is an
Example<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-3JiR6RYMC2tVxsC5X9JIY-Awc5MMdCUhkcFsDJ90G-FMtTFV4TD1NS9spXDKgWL1GlpiIY21iuhBnTKe-t1tMDHuDMtvch-VaFttJBJuahu-JnRCIvXnmkbi3VElHoaBiGxAqORDM5Q/s1600/adding+border+to+tables.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="table border using CSS" border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-3JiR6RYMC2tVxsC5X9JIY-Awc5MMdCUhkcFsDJ90G-FMtTFV4TD1NS9spXDKgWL1GlpiIY21iuhBnTKe-t1tMDHuDMtvch-VaFttJBJuahu-JnRCIvXnmkbi3VElHoaBiGxAqORDM5Q/s320/adding+border+to+tables.jpg" title="adding border to table using CSS" width="320" /></a></div>
<br />
<div class="MsoNoSpacing">
HTML</div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><table width="200" border="0"></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <th
scope="col">Name</th></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <th
scope="col">Year</th></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <th
scope="col">Country</th></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>purush</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>1988</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>India</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Dave</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>1988</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>United States</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Jane</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>1989</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Canada</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Matthew</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>1999</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Japan</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Jane</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>1989</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">
<td>Canada</td></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </tr></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"></table></span></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
CSS Code:</div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><style></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">table{ border:2px #0CF solid; margin:10% auto 10% auto; }</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"></style></span></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com0tag:blogger.com,1999:blog-5175379687830182964.post-87335749479573808152012-10-23T08:35:00.000-07:002012-10-24T03:21:46.013-07:00How to create a Navigational menu using a list | CSS tutorial<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="MsoNoSpacing">
Transforming a list into a Navigational menu is one of
the most popular technique used these days, by just using CSS we can easily
transform a list in to visually attractive navigation menu.</div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
Here is an Example:</div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
HTML Code:<br />
<a name='more'></a></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><body></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><div id="nav"></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <ul></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <li><a
href="you_url">Rock</a></li></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <li><a
href="you_url">Jazz</a></li></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <li><a
href="you_url">Pop</a></li></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <li><a
href="you_url">Hip-Hop</a></li></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> <li><a
href="you_url">Metal</a></li></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> </ul></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"></div></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"></body></span></div>
<div class="MsoNoSpacing">
</div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
CSS Code:</div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><style></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">ul {</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> border-left:#333
15px solid;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> padding:0;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">}</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">ul li {</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> list-style-image:url(tri.png);</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> background:rgb(192,202,229);</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> width:150px;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> height:35px;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> border-bottom:2px
solid #0CF;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> padding:0;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> margin-left:25px;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> text-align:center;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">}</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">ul li a {</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> text-decoration:none;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> color:#666;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> font-family:Arial,
Helvetica, sans-serif;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> font-size:14px;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> font-weight:bold;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">}</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">ul li:hover {</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> background:#00FFFF;</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;">}</span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"></style></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdg3kaYRzUb81y97QN8LV7mCXvB8QKpwRPQFwy_ngYAL3pqwgKt3JGKM_2zdVFYWn4XKBHre6OCUOBYn1AgciV-j4_iLAr5OBQwfUeinrPJ_sIiuJ8jWPvhoaP7vfXsJYVvdnVrF8WZi4/s1600/navigation+menu+using+CSS.bmp" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Navigation menu using CSS" border="0" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdg3kaYRzUb81y97QN8LV7mCXvB8QKpwRPQFwy_ngYAL3pqwgKt3JGKM_2zdVFYWn4XKBHre6OCUOBYn1AgciV-j4_iLAr5OBQwfUeinrPJ_sIiuJ8jWPvhoaP7vfXsJYVvdnVrF8WZi4/s400/navigation+menu+using+CSS.bmp" title="Navigation menu using CSS" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<div class="MsoNoSpacing">
<br /></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com0tag:blogger.com,1999:blog-5175379687830182964.post-64576056546259457642012-10-09T03:14:00.000-07:002012-11-05T03:16:35.612-08:00How to rotate images on web pages | Using CSS<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNoSpacing">
To rotate images using CSS
provides something called CSS Transforms which can be used to rotate images
gently.<o:p></o:p></div>
<div class="MsoNoSpacing">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwSG6ZyI4L5pFFhX-0z9lpisInQnSWOmpsdJlx7h0RfgUNTtG0G3b9Gbwo3P547dAffEOJ4XwUL4x_hoWnPFQpITYRjwA1yr3Y3xdcd7AEp2YWW7qrNi7TEdd2Ak_nAL5AiCWgKw7g5dY/s1600/CSS+Transforms+image+rotation.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwSG6ZyI4L5pFFhX-0z9lpisInQnSWOmpsdJlx7h0RfgUNTtG0G3b9Gbwo3P547dAffEOJ4XwUL4x_hoWnPFQpITYRjwA1yr3Y3xdcd7AEp2YWW7qrNi7TEdd2Ak_nAL5AiCWgKw7g5dY/s320/CSS+Transforms+image+rotation.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">result after gently rotating the image using CSS transforms</td></tr>
</tbody></table>
<a name='more'></a><br /></div>
<div class="MsoNoSpacing">
<br />
Here is an Example that
demonstrates how to use the CSS Transforms:<o:p></o:p></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
HTML Code:<o:p></o:p></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"><body><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"><img src="myImage.jpg"
width="250" height="194" alt="myImage" /><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"></body><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
CSS Code:<o:p></o:p></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"><style><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<br /></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">body{ background:#000000;}<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">img{ border-radius:7px; <o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">margin-left:38%; <o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">margin-top:10%; <o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">transform:rotate(8deg); <o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">-webkit-transform: rotate(8deg);<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">-moz-transform: rotate(8deg);<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">-o-transform: rotate(8deg);<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">-ms-transform: rotate(8deg);}<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<br /></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"></style> <o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"></span><br />
<span style="font-family: Courier New, Courier, monospace;"></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<br /></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<br /></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<br /></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<br /></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com1tag:blogger.com,1999:blog-5175379687830182964.post-6955674746677334992012-10-09T03:11:00.000-07:002012-11-05T03:16:55.472-08:00How to create rounded corners to an Element | How to create border-radius using CSS <div dir="ltr" style="text-align: left;" trbidi="on">
To create rounded corners to an
element like an image for example or a<span style="font-family: Monospace821BT-Roman; font-size: 9pt;"> <div> </span>we have to use the <span style="font-family: Monospace821BT-Roman; font-size: 9pt;">border-radius property. </span>Here is an example:<span style="font-family: Monospace821BT-Roman; font-size: 9pt;"> </span><br />
<div class="MsoNoSpacing">
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYe7Ulvd4xiI5p_1N8-AGHhPapS3SE4Sk4oLElFRjctQSaFkrm5UoUbRWhdrDnWsS_cNKxin1tfsCzTldeHnHqgZCTac5_BR66Yr1bDh67sGMPJNP1qNNVJn1JUvrecU8dqhWPw2PadtM/s1600/addind+Borders+using+CSS.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="border radius using CSS" border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYe7Ulvd4xiI5p_1N8-AGHhPapS3SE4Sk4oLElFRjctQSaFkrm5UoUbRWhdrDnWsS_cNKxin1tfsCzTldeHnHqgZCTac5_BR66Yr1bDh67sGMPJNP1qNNVJn1JUvrecU8dqhWPw2PadtM/s320/addind+Borders+using+CSS.jpg" title="border radius using CSS" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Result after adding border radius</td></tr>
</tbody></table>
<a name='more'></a></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<br />
<br /></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
HTML
Code<o:p></o:p></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<br /></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"><body><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"><img src="myImage.jpg"
width="375" height="300" alt="MyImage" /><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"></body></span><span style="font-family: Monospace821BT-Roman; font-size: 9pt;"><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<br /></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<br /></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
CSS Code<o:p></o:p></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<br /></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"><style><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;">body{ background:#000;}<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;">img{ margin-left:25%;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;">margin-top:10%;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;">border-radius:10px;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;">-webkit-border-radius: 10px;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;">-moz-border-radius: 10px;}<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"></style></span><span style="color: red; font-family: Monospace821BT-Roman; font-size: 9pt;"><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"></span><br />
<span style="font-family: Courier New, Courier, monospace;"></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"></span><br />
<span style="font-family: Courier New, Courier, monospace;"></span></div>
<div class="MsoNoSpacing" style="margin-left: .5in;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com0tag:blogger.com,1999:blog-5175379687830182964.post-75053485150490613302012-10-09T03:07:00.000-07:002012-11-05T03:17:14.253-08:00How to add Drop shadow to Elements | Using CSS<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
CSS provides the box-shadow
property which allows us to add drop shadows effects to any elements , </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhIHhdvTz6-73Iu8QntytlrG_fvWnyqKOwNvnLASX2X-LNdo7p6peCxraconI5VCkaOQuISqtMfzMl5On7Dn8ChhV20u4LM_xjuB_GoNyEn6dESU6EXOC6nSjO_Lr1gDgCI6Pl5XIfnd4/s1600/box-shadow+using+CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhIHhdvTz6-73Iu8QntytlrG_fvWnyqKOwNvnLASX2X-LNdo7p6peCxraconI5VCkaOQuISqtMfzMl5On7Dn8ChhV20u4LM_xjuB_GoNyEn6dESU6EXOC6nSjO_Lr1gDgCI6Pl5XIfnd4/s320/box-shadow+using+CSS.jpg" width="320" /></a></div>
<a name='more'></a><br />
<br />
<br />
<div class="MsoNoSpacing">
Here is
an example:</div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
HTML Code:<o:p></o:p></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><body><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><div id="shadowBox"><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><p>FAQ Web-Development is a blog that intends to share
tutorial on HTML,CSS and Jquery.FAQ Web-Development is a blog that intends to
share tutorial on HTML,CSS and Jquery.FAQ Web-Development is a blog that
intends to share tutorial on HTML,CSS and Jquery.FAQ Web-Development is a blog
that intends to share tutorial on HTML,CSS and Jquery.FAQ Web-Development is a
blog that intends to share tutorial on HTML,CSS and Jquery.FAQ Web-Development
is a blog that intends to share tutorial on HTML,CSS and Jquery.FAQ
Web-Development is a blog that intends to share tutorial on HTML,CSS and
Jquery.FAQ Web-Development is a blog that intends to share tutorial on HTML,CSS
and Jquery.</p><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"></div><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"></body></span><span style="font-family: Monospace821BT-Roman; font-size: 9pt;"><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
<br /></div>
<div class="MsoNoSpacing">
CSS Code:<o:p></o:p></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><style><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"> #shadowBox{ <o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">width:350px;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">height:300px;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">margin-left:auto;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">margin-right:auto;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">border:2px solid #666;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">text-align:center;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">box-shadow:4px 4px 17px 7px #999;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;">margin-top:10%;<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 1.0in;">
<span style="font-family: Courier New, Courier, monospace;"> }<o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"></style></span><span style="font-family: Monospace821BT-Roman; font-size: 9pt;"><o:p></o:p></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></div>
<div class="MsoNoSpacing">
<span style="font-family: Monospace821BT-Roman; font-size: 9pt;"> <span style="color: red;"><o:p></o:p></span></span></div>
</div>
Purushothaman Rajuhttp://www.blogger.com/profile/01815844917308434999noreply@blogger.com2