webmaster

Friday, 23 September 2011

How to catch TAB key press with JavaScript in Firefox,Safari,Opare & IE

<html>
<head>
<script type="text/javascript">
var obj;
var TAB = 9;
function catchTAB(evt,elem)
{
obj = elem;
var keyCode;
if ("which" in evt)
{// NN4 & FF & Opera
keyCode=evt.which;
} else if ("keyCode" in evt)
{// Safari & IE4+
keyCode=evt.keyCode;
} else if ("keyCode" in window.event)
{// IE4+
keyCode=window.event.keyCode;
} else if ("which" in window.event)
{
keyCode=evt.which;
} else { alert("the browser don't support"); }

if (keyCode == TAB)
{
obj.value = obj.value + "\t";
alert("TAB was pressed");
setTimeout("obj.focus()",1);// the focus is set back to the text input
}
}
</script>
</head>
<body>
<input type="text" onkeydown="catchTAB(event,this);">
</body>
</html>

Thursday, 15 September 2011

To Change FILE input button style

There is a Big Mess while changing style of FILE input button in HTML through CSS. below is a trick to do that. i had put File input button below a normal html button with opacity 0 so that File button hides beneath the normal button and on click of the normal button file input gets clicked. also adjust the Left:15px of file button to make it exact below the normal button.

<style>
#upload_button {
-moz-box-sizing: content-box;
border-radius: 11px 11px 11px 11px;
background-color: #F2F2F2;
border-style: solid;
border-width: 1px;
cursor: pointer;
font-size: 11px !important;
line-height: 10px;
text-decoration: none;
padding: 0px 14px;
text-align: center;
width: 72px;
text-shadow: 0 1px 0 #FFFFFF;
border-color: #BBBBBB;
color: #464646;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}
#upload_button #my_files {
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
position: absolute;
left:15px;
width:100px;
}
#upload_button #pseudobutton{
inherit: none;
background-color:#F2F2F2;
width:69px;
height: 19px;
font-size:10px;
/*position: absolute;*/
border:none;
}
</style>

<div id="upload_button" >
<input type="button" id="pseudobutton" value="Open File">
<input type="file" name="my_files" id="my_files">
</div>

Monday, 22 August 2011

To Stick Footer to Bottom of page

Many times it requires to forcefully stick footer to bottom of page if content of web page is less this makes footer to appear at middle or top bottom section of page which is odd. so to make forcefully stick footer at bottom even if content of page varies , the following are the steps.

<html></body>
<div id="main">
    <div id="container">
    <div id="header">
            this is header, with logo and all
    </div>
    <div id="content">
            This is page content with less or variable text ,forms, images etc
       </div>
     </div>

     <div id="footer">
            this is footer...
     </div>
</div> 
</body>
</html>

Here #main is the div which encloses all the content of a page , inside main there is 2 div one is #container and other is #footer , we will concentrate on height and position of #main,#container and #footer div. the rest inner div header and content can be optional you can put any number of div's inside #container.

<style>

html,body{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:normal;
    color:#333;
    height:100%;
        /* this is important to give height to html and body */
    margin:0px;
    padding:0px;
}

#main{
    min-height:100%;
        /* important thing to give min height so that footer can go to bottom */
    position:relative;
        /* Position relative so that , in footer we can give position absolute */
    float:left;
    height:auto ! important;       /* for cross browser compatible */
    height:100%;                 /* have to give height 100% */
    width: 100%;
}

#container {
    float: left;
    margin: 1px 2px 20px 14px;
        /* you can give any margin according to your need */
    padding-bottom: 34px;
        /* only important thing the padding-bottom should be equal to footer height */
    width: auto;
}

#footer{
    bottom: 0 ! important;
        /* this will stuck footer to bottom of page */
    clear: both;
    color: #FFFFFF;
    height: 34px;
        /* height of footer , same as padding-bottom of container */
    position: absolute;
        /* position to settle down the footer */
    width: 100%;
}
</style>

Thursday, 4 August 2011

CSS Selectors

Below are examples of all of the CSS selectors For their precise definition please refer to the CSS specifications.

Universal

`*`	elements in the default namespace
`\|*`	elements in no namespace
`ns\|*`	elements in the namespace with prefix `ns`
`\|`	elements in any or no namespace

Type

`div`	`div` elements in the default namespace
`\|div`	`div` elements in no namespace
`ns\|div`	`div` elements in the namespace with prefix `ns`
`*\|div`	`div` elements in any namespace or in none

Descendant

`div p`	`p` elements that are within a `div` element
`* p`	`p` elements that are within any element (ie. not the root element)

Child

`div > p`	`p` elements that are the direct children of `div` elements
`p > *`	any elements that are the direct children of `p` elements

Direct Sibling

`div + p`	`p` elements that directly follow `div` elements
`p + *`	any elements that directly follow `p` elements

Indirect Sibling

`div ~ p`	`p` elements anywhere after `div` elements
`p ~ *`	any elements anywhere after `p` elements

Attribute

`*[href]`	elements with an `href` attribute
`*[align="right"]`	elements with an `align` attribute of `right`
`*[href^="http:"]`	elements with an `href` attribute beginning with `http:`
`*[href$=foo]`	elements with an `href` attribute ending with `foo`
`[href=foo]`	elements with an `href` attribute containing `foo`
`*[words~=foo]`	elements with a `words` attribute containing the word `foo`
`*[lang\|=en]`	elements with a `lang` attribute equal to or beginning with `en`

Class

p.intro p elements with a class attribute containing the word intro

ID

p#intro p elements with an id attribute of intro

Link

`:link`	elements that represent links
`a[href^="mailto:"]:link`	elements that link to an email address

Lang

`:lang(en)`	elements whose specified language is English
`q:lang(fr-CA)`	quotes whose specified language is French (Canadian)

Contains

p:contains("synergy") paragraphs containing the text "synergy"

Root

`:root`	the root element of the document
`html:root`	`html` root elements
`:root > *`	children of the root element

Empty

div:empty every empty div element

Not

`*:not(p)`	every element except `p` elements
`div:not(:empty)`	every non-empty `div` element
`a:not([href])`	every `a` element without a `href` attribute

First Child

div > :first-child the first child of a div element

Last Child

div > :last-child the last child of a div element

Only Child

div > :only-child the only child of a div element

First of Type

div > p:first-of-type the first p element child of a div element

Last of Type

div > p:last-of-type the last p element child of a div element

Only of Type

div > p:only-of-type the only p element child of a div element

Nth Child

`div > :nth-child(3)`	the third child of a `div` element
`div > :nth-child(even)`	every even child of a `div` element
`div > :nth-child(odd)`	every odd child of a `div` element
`div > :nth-child(3n)`	every third child of a `div` element

Nth Last Child

`div > :nth-last-child(3)`	the third last child of a `div` element
`div > :nth-last-child(even)`	every even last child of a `div` element
`div > :nth-last-child(odd)`	every odd last child of a `div` element
`div > :nth-last-child(3n)`	every third last child of a `div` element

Nth of Type

`div > p:nth-of-type(3)`	the third `p` element child of a `div` element
`div > p:nth-of-type(even)`	every even `p` element child of a `div` element
`div > p:nth-of-type(odd)`	every odd `p` element child of a `div` element
`div > p:nth-of-type(3n)`	every third `p` element child of a `div` element

Nth Last of Type

`div > p:nth-last-of-type(3)`	the third last `p` element child of a `div` element
`div > p:nth-last-of-type(even)`	every even last `p` element child of a `div` element
`div > p:nth-last-of-type(odd)`	every odd last `p` element child of a `div` element
`div > p:nth-last-of-type(3n)`	every third last `p` element child of a `div` element

Pseudo-elements

::before	This pseudo-element can be used with the content property to add generated content not present in the original document. For example, `p::before` can be used to insert text at the beginning of every paragraph element.
::after	This pseudo-element can be used with the content property to add generated content not present in the original document. For example, `p::after` can be used to insert text at the end of every paragraph element.
::marker	This pseudo-element is for applying style to list item markers.
::first-letter	This pseudo-element is for applying style to the first letter of an element.
::footnote-call	This pseudo-element is for applying style to footnote calls, the numeric anchors in the main text that refer to footnotes.
::footnote-marker	This pseudo-element is for applying style to footnote markers, the numeric markers placed in front of the footnote text.

reference from

http://www.princexml.com/doc/7.0/selectors/

WordPress Plugins

Friday, 23 September 2011

How to catch TAB key press with JavaScript in Firefox,Safari,Opare & IE

Thursday, 15 September 2011

To Change FILE input button style

Monday, 22 August 2011

To Stick Footer to Bottom of page

Thursday, 4 August 2011

CSS Selectors

CSS Selectors

Universal

Type

Descendant

Child

Direct Sibling

Indirect Sibling

Attribute

Class

ID

Link

Lang

Contains

Root

Empty

Not

First Child

Last Child

Only Child

First of Type

Last of Type

Only of Type

Nth Child

Nth Last Child

Nth of Type

Nth Last of Type

Pseudo-elements