Archive for the ‘Web’ Category
CSS Guide
Hi here i have deiscussed some of the selectors used in CSS.These are the notes which i have prepared thought of sharing with friends,
Different Types Selectors
a) Type Selectors
b) Class Selectors
c) ID Selectors
d) Descendent Selectors
e) Child Selectors
f) Universal Selectors
g) Adjacent Sibling Selectors
h) Attribute Selectors
i) Pseudo Classes
j) Pseudo Elements
Type Selectors
Type Selector precedes ID Selector
<html> <style type=”text/css”> p { background-color: #3399FF; } #con { background-color: #FFFF66; } </style> <body> <p>Naveen</p> <div id=con><p>Sadhana</p></div> <p>Praveen</p> </body> </html> <html>
Class Selectors
<html> <style > input.text { background-color: #3399FF; border: medium dotted groove } </style> <body> <pre> <input size=”14″ > <input size=”14″ > <input size=”14″ > <input value=”Submit” /> </pre> </body> </html>
ID Selectors Similarly to class selectors, id selectors enable you to select an element based on the id attribute: #page-title h1 { text-align: right; } the class selector used a period (.), the id selector relies on a hash (#). In this rule, you selected the h1 element that has an id attribute whose value matches the text after the hash. <html> <style type="text/css"> #con p { background-color: #CCCC99; } </style> <body> <p>Naveen</p> <div id="con" > <p>Sadhana</p> </div> <p>Praveen</p> </body> </html> Descendant Selectors <html> <style type="text/css"> a { background-color: #FFFF99; } li a { background-color: #FF99FF; } </style> <body> <li><a href=" ">Bananas</a></li> <li><a href=" ">Cherries</a></li> </body> </html> Universal Selector * { font-family: Verdana, Arial, sans-serif; } Attribute Selector <html> <style type="text/css" > input[type=text] { background-color: #3399FF; border: medium dotted groove } </style> <body> <pre> <input type="text" size="14"> <input type="text" size="14"> <input type="text" size="14"> <input type="button" value="Submit" /> </pre> </body> </html> Using an attribute selector, it would be very easy for you to hone in on all input elements whose type attribute exactly matched “text”:- input[type=”text”] { border: 1px solid #C00; } The advantage to this method is that the <input type=”submit” /> element is unaffected, and the border is applied only to the desired text fields. Pseudo Selector a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: gray; }
Embedding Media Player in HTML
Hi this is the standard code which is available to embed media player in html ,it took some time to find the solution.The path of a music file should be given at a place where the text is blue. <html> <head> <title>Media Player</title></head> <body> <object id="MediaPlayer1" width="180" height="200" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft® Windows® Media Player components." type="application/x-oleobject" align="middle"> <param name="FileName" value="YourFilesName.mpeg"> <param name="ShowStatusBar" value="True"> <param name="DefaultFrame" value="mainFrame"> <param name="autostart" value="false"> <embed type="application/x-mplayer2" pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/" src="\\Your Path" autostart="false" align="middle" width="210" height="280" defaultframe="rightFrame" showstatusbar="true"> </embed> </object> </body> </html>
About Metatag
Metatags are for us to define our website to outside users.We can declare title,keywords etc.
There are two types of meta tags
(a)HTTP-EQUIV
(b)NAME
(a)HTTP-EQUIV
These tags are equivalent to http,Say for example if u click hyperlink which begins with http://
you are actually asking to transfer using http protocol.In additional what HTTP-EQUIV Metatags does is ,it
define additional information to be sent to the browser in the http header.This gives the web site creator additional;
control over his data.
(b)NAME
The NAME is acvtually used to define information which is to be referenced outside the document.Here is the actuall
data is passed to search engines.
Metatags must be placed b/w <Head> —–</HEAD> tags before the body
Note:
(a)On framed pages,be sure and include the metatags on the frameset page and the framed pages.
(b)An important note some people copy someones else’s Metatags and they have punished in the court(like trademarks etc.).
Attributes:
http-equiv=”name” content=”value”
Value Description and example
content -language Specifies the language.
content -script-type Defines scripting language used.
content -style-type Defines type of style sheets used.
content-type Specifies type of data within document.
expires Expiration date of the document.
ext-cache Define Netscape external cache.
imagetoolbar This turns off Internet Explorer’s image toolbar that appears when you hover over an image
page-enter Specifies the transition effect that is to be performed when the page is loaded.
page-exit Specifies the transition effect that is to be performed when the page is unloaded.
pics-label Includes rating information so content filters can do their job.
pragma Do not locally cache documents.
refresh Indicates the document displays for a specified amount of time before switching to a new URL.
set-cookie Sets the name and value for a persistent cookie.
site-enter Specifies the transition effect that is to be performed when the site is loaded.
site-exit Specifies the transition effect that is to be performed when the site is unloaded.
window-target Specifies the name of the frame for the current page.
name=”value”
Name and description of the element that is being set.
Value Description and example
abstract Define a secondary description.
author Records the name of the author of the document.
classification Classify the site into the appropriate category.
copyright Used to include copyright information in the document.
description Some search engines pick up this description to show with the results of searches.
distribution Declares whether a document is available to the web or on an intranet.
doc-class Indicates completion status of document.
doc-rights Indicates copyright status of document.
doc-type Specifies type of document.
expires Expiration date of the document.
generator The name of the program that created the document.
googlebot Define pages to be excluded from googebot indexing.
keywords Inform search engines what your web site or page is about.
MSSmartTagsPreventParsing Use this tag to prevent any Microsoft product from automatically generating smart tags.
owner Define the owner of the page or site.
progid
rating A simple rating for a site.
refresh Indicates the document displays for a specified amount of time before switching to a new URL.
reply-to Email address of contact for document.
resource-type Indicates the type of web resource.
revisit-after Defines how often search engine spiders should revisit your site.
robots Define pages to be excluded from robot indexing.
Text to Speech Using JavaScript
Check this sample code to convert Text to Speech Using JavaScript………..It works only in IE Becoz ActiveX is supported only in Internet Explorer.
<html>
<head>
<title>Text to speech Using JavaScrip</title>
<script type=”text/javascript” language=”javascript” src=”Speech.js”>
</script>
</head>
<body>
<input type=”text” id=”t1″/>
<input type=”button” id=”bt1″ name=”Speek Loud” value=”Speak Loud” onclick=”speakLoud()”/>
</body>
</html>
// JavaScript Document
Speech.js
function speakLoud()
{
var Obj = new ActiveXObject(“Sapi.SpVoice”);
var string=document.getElementById(“t1″).value;
alert(“You have entered”+string);
Obj.Speak(string, 1 );
}
Deter Users from Submitting a Form Twice
Hi in this article is I would like to explain what happens when a user clicks or submits the form, when user clicks the form the form is processed in the server and some action is going to take place but this might take place some milliseconds or even seconds depending upon the server load. If suppose user clicks a form multiple times assuming the form is not processing which is actually processing, so we should make them know they have actually clicked , preventing them to submit twice.
A user can be made to know that a form is submitted and is in processing in two ways.
a) By disabling a button when it is clicked once.
b) By freeing the page when the form is under submission.
By Disabling a Button when it is Clicked Once.
In this technique I use simple JavaScript technique to disable the button when a user clicks it once and displaying an text instead making user aware the form is under process.
| <html><head>
<title>By Disabling a Button when it is Clicked Once.</title> <script> function processButton(b) { b.disabled = true; b.value = ‘Submitting’; b.form.submit(); } </script> </head> <body> <form method=”get” action=”Disable.php”> <p> Name:<input > <input value=”Submit” onclick=”processButton(this);” /> </p> </form> </body> </html> |
By Freeing the page when the form is under submission.
This is most widely used technique where you will come across in many of the professional sites. I use bit of CSS for freezing the forms etc.
I use three CSS class to freeze and un freeze the form and vice versa.
a) FreezePanelOff : This Panel is the default style of the div tag this executes when you run the .html file.
b) FreezePanelOn : This panel gets activated only once the user clicks the button, once user clicks the button we are getting the id of both outer and inner div tag and check for its its existence and than later we are making the panel visible and gives necessary style.
c) InnerFreezePanel : This panel also gets activated once the user clicks the button it displays a rectangular style with a message .
What exactly Happens when a user Clicks a Button
Step 1:When a user clicks a button two things is going to take place the class which is set initially (FreezePanelOff) which is actually hidden should be visible and necessary styles should be given.
Step 2: The inner class displays in the center of the screen with necessary style sheet making the form freeze.
Freeze.html
| <html><head><title></title><style>
.FreezePanelOff { visibility: hidden; display: none; position: absolute; top: -100px; left: -100px; } .FreezePanelOn { position: absolute; top: 0px; left: 0px; visibility: visible; display: block; width: 100%; height: 100%; background-color: #3fe34; z-index: 999; filter:alpha(opacity=85); -moz-opacity:0.85; padding-top: 20%; } .InnerFreezePanel { text-align: center; width: 66%; background-color: #171; color: White; font-size: large; border: dashed 2px #111; padding: 9px; } </style> <script > function FreezeScreen(msg) { scroll(0,0); var outerPane = document.getElementById(‘FreezePanel’); var innerPane = document.getElementById(‘InnerFreezePanel’); if (outerPane) outerPane.className = ‘FreezePanelOn’; if (innerPane) innerPane.innerHTML = msg; } </script> </head> <body> <input value=”Submit” onclick=”FreezeScreen(‘Data is under process’);” />
<div align=”center” > <div > </div> </div>
</body> </html> |
Image zooming using mouse scroll
Hi recently i got a task from my friend to code for zooming image using JavaScript for his project….I tried a lot to do his work finally i did his work taught of sharing with u……………
firstly we have to check for the value of mouse scroll and than later
based on the mouse up and down of mouse scroll we have to code……………..I took lot of help from Internet to code this stuff…………..just try it out…………….
| <html><head>
<title>Image Zooming using Mouse Scroll </title> <script src=”zoom-image.js”> </script> </head> <body> <img src=”../../../img.jpg” width=”133″height=”142″ /> </body> <div> </div> </html> |
zoom-image.js
| function zoomin(){
alert(“Zoom In”); if(parent.document.body.style.zoom!=0) parent.document.body.style.zoom*=1.2; else parent.document.body.style.zoom=1.2; } function zoomout() { alert(“Zoom Out”); if(parent.document.body.style.zoom!=0) { parent.document.body.style.zoom*=0.833; } else { parent.parent.document.body.style.zoom=0.833; } } function handle(delta) { if (delta < 0) { alert(“Mouse Back”); zoomout(); } else if(delta > 0) { alert(“Mouse Front”); zoomin(); } else { alert(“notinh”); } } /** Event handler for mouse wheel event. */ function wheel(event) { var delta = 0; if (!event) event = window.event; if (event.wheelDelta) { delta = event.wheelDelta/120; if (window.opera) delta = -delta; } else if (event.detail) { delta = -event.detail/3; } if (delta) handle(delta); if (event.preventDefault) event.preventDefault(); event.returnValue = false; } if (window.addEventListener) /** DOMMouseScroll is for mozilla. */ window.addEventListener(‘DOMMouseScroll’, wheel, false); /** IE/Opera. */ window.onmousewheel = document.onmousewheel = wheel; |
DOM Using AJAX
In this article i will tell how to create DOM programmatically.Before creating DOM Elements i have given a sample program which i going to create using DOM
<body>
Hello Dude! Here’s a cool list of colors for you:
<br/>
<div id=”myDivElement”>
<ul>
<li>Black</li>
<li>Orange</li>
<li>Pink</li>
</ul>
</div>
</body>
Know i am going to create the above program using JavaScript by declaring as a string.
<html>
<head>
<title>Client Side Techniques</title>
<script type=”text/javascript” src=”call.js”></script>
</head>
<body onload=”process()”>
Hai see the beautiful list of colors
<br/>
<div id=”myDivElement” />
</body>
</html>
Call.js
function process()
{
var string;
string = “<ul>”
+ “<li>Black</li>”
+ “<li>Orange</li>”
+ “<li>Pink</li>”
+ “</ul>”;
myDiv = document.getElementById(“myDivElement”);
myDiv.innerHTML = string;
}
Know i will create the above program using DOM
<html>
<head>
<title>DOM Demo</title>
<script type=”text/javascript” src=”Dom-Demo1.js”></script>
</head>
<body onload=”process()”>
<br/>
<div id=”myDivElement” />
</body>
</html>
function process()
{
text=document.createTextNode(“Here is a cool list of colors:”);
ul=document.createElement(“ul”);
liBlack=document.createElement(“li”);
textBlack=document.createTextNode(“Black”);
liBlack.appendChild(textBlack);
liOrange=document.createElement(“li”);
textOrange=document.createTextNode(“Orange”);
liOrange.appendChild(textOrange);
liBlue=document.createElement(“li”);
textBlue=document.createTextNode(“Blue”);
liBlue.appendChild(textBlue);
ul.appendChild(liBlack);
ul.appendChild(liOrange);
ul.appendChild(liBlue);
myDiv = document.getElementById(“myDivElement”);
// add content to the <div> element
myDiv.appendChild(text);
myDiv.appendChild(ul);
}
AJAX Introduction
AJAX Introduction
In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the “Submit” button to send/get the information, wait for the server to respond, then a new page will load with the results.
Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.
With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object. With an HTTP request, a web page can make a request to, and get a response from a web server – without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.
Arguments and Parameters
The words arguments and parameters are often used interchangeably in the literature, although the Standard makes a clear distinction between the two. The distinction is chiefly important when discussing functions and templates.
Argument
An argument is one of the following: an expression in the comma-separated list that is bound by the parentheses in a function call; a sequence of one or more preprocessor tokens in the comma-separated list that is bound by the parentheses in a function-like macro invocation; the operand of a throw-statement or an expression, type, or template-name in the comma-separated list that is bound by the angle brackets in a template instantiation. An argument is also called an actual parameter.
Parameter
A parameter is one of the following: an object or reference that is declared in a function declaration or definition (or in the catch clause of an exception handler); an identifier from the comma-separated list that is bound by the parentheses immediately following the macro name in a definition of a function-like macro; or a template-parameter. A parameter is also called a formal parameter.
The following example demonstrates the difference between a parameter and an argument:
void func(int n, char * pc); //n and pc are parameters
template <class T> class A {}; //T is a a parameter
int main()
{
char c;
char *p = &c;
func(5, p); //5 and p are arguments
A<long> a; //’long’ is an argument
A<char> another_a; //’char’ is an argument
return 0;
}
HTTP
HTTP is the standard protocol for communication between web browsers and web servers. HTTP specifies how a client and server establish a connection, how the client requests data from the server, how the server responds to that request, and finally, how the connection is closed. HTTP connections use the TCP/IP protocol for data transfer. For each request from client to server, there is a sequence of four steps:
(a) Making the connection
The client establishes a TCP connection to the server on port 80, by default; other ports may be specified in the URL.
(b) Making a request
The client sends a message to the server requesting the page at a specified URL.
(c) The response
The server sends a response to the client. The response begins with a response code, followed by a header full of metadata, a blank line, and the requested document or an error message. Assuming the requested document is found, a typical response looks like this:
(d): Closing the connection
Either the client or the server or both close the connection. Thus, a separate network connection is used for each request. If the client reconnects, the server retains no memory of the previous connection or its results. A protocol that retains no memory of past requests is called stateless; in contrast, a stateful protocol such as FTP can process many requests before the connection is closed. The lack of state is both a strength and a weakness of HTTP.
