Php Development » Html http://www.maheshchari.com Just another WordPress weblog Sun, 23 May 2010 05:10:57 +0000 http://wordpress.org/?v=2.9 en hourly 1 Ie css hack reference http://www.maheshchari.com/ie-css-hack-reference/ http://www.maheshchari.com/ie-css-hack-reference/#comments Fri, 04 Dec 2009 04:07:24 +0000 mahesh chari http://www.maheshchari.com/?p=381 CSS difference Between IE6,IE7,IE8

As a designer we experience the most bizzare conditions with internet explerer because it doesn’t follow w3 standereds mostly while rendering elemets and Box Model where moslty other Gecko browsers follow same.Even i am very good at programming ,i experience difficult to find IE issues,wasted more time on CSS issues than programming.So i came up with reference for IE and instructions how to handle them to keep in mind reference for me (us).Even there is difference between IE versions also.So below is the reference

Selector Type Examples & description IE6 IE7 IE8
Child Selectors: 
body>p,ul>li
 No Yes Yes
Chained Classes 
	.class1 .class2 .class3,
	or like class=" class1 class2 class3"
 No Yes Yes
Attribute Selectors 
a[href=xyx],input[type=radio]
 No Yes Yes
Adjacent Sibling Selectors 
h1+p,li+ul,ul+li
 No Yes Yes
General Sibling Selectors 
h1~p,li~ul,ul~li
 No Yes Yes
Pseudo-Classes and Pseudo-Elements 
a:hover span ,li:first p
 No Yes Yes
Chained Pseudo-Classes 
a:first-child:hover ,  a:active:hover
 No Yes Yes
:hover on Non-Anchor Elements 
p:hover
 No Yes Yes
:first-child Pseudo-Class 
div li:first-child
 No Yes Yes
:focus Pseudo-Class 
a:focus
 No Yes Yes
:before and :after Pseudo-Elements 
.class:before,.class:after
 No Yes Yes
Min-Height & Min-Width 
#box {  max-height: 500px;  min-width: 300px;  }
 No Yes Yes
Transparent Border Color 
#box {  	border: solid 1px transparent;  }
 No Yes Yes
Fixed-Position Elements 
#box {  	position: fixed;  }
 No Yes Yes
inherit 
#box {  	display: inherit;  }
 No No Yes
Border Spacing on Table Cells 
table td {  	border-spacing: 3px;  }
 No No Yes
Vertical Position of a Table Caption 
table {  	caption-side: bottom;  }
 No No Yes
Clipping Regions 
#box {  	rect(20px, 300px, 200px, 100px)  }
 No No Yes
Alternative Values for the Display Property display property values other than block,none,inline,inline-block. No No Yes
Handling of Collapsible Whitespace 
	p { 	white-space: pre-line;  }  
	div { 	white-space: pre-wrap;  }
 No No Yes
@import 
@import url("styles.css";) screen;
 No No Yes
Quote Characters for Generated Content 
	q {quotes: "'" "'"; } 
	q:before {content: open-quote;} 
	q:after {content: close-quote; }
 No No Yes
!important 
ul {margin-left:0 !important}
 No Yes Yes
         

Handling Issues

In the most cases IE6 doesn’t support all selector types to other IE7,IE8.

Even though IE7,IE8 both support much same selectors,they have difference in box model and rendering elements.

In the case of IE7 it just need to add special IE7 css fix style like below 

<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
		<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->
		<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
		<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

in the case IE6,we can’t handle totally with seperate CSS file fix like above example,it needs some layout tweaks also.

We can show elements with conditions as below specified. 

<![if!IE]>
This shows up in anything but IE
<![endif]>

It is better to avoid special characters in selecter name like "_","-",even they support mostly browsers.

Hadling CSS fixes with special selectors

Only IE6 and below
* html {}

IE7 and below

*:first-child+html {} * html {}

IE7 only

*:first-child+html {}

IE7 and Modern Browsers only
html>body {}

Recent Opera versions 9 and below

html:first-child {}

]]> http://www.maheshchari.com/ie-css-hack-reference/feed/ 0 favico tutorial http://www.maheshchari.com/favico-tutorial/ http://www.maheshchari.com/favico-tutorial/#comments Thu, 26 Nov 2009 12:28:16 +0000 mahesh chari http://www.maheshchari.com/?p=374 How to Add fav icon to your web site

What is fav icon?

a favicon is really nothing more than a tiny png image with a .ico extension and sized to 16x 16 or 32 x 32.

How to create fav icon?

So, the first thing you need to do is to create the image that you want to use; whatever you use, don’t make it too complex because small detail tend to get lost when re sized to a tiny 16 by 16 pixels.Create a image that sized square model image.then you should re size to 16×16 px or 32×32px.here we can use photoshop , corel draw and gimp ..etc.before saving the image just add extension ico,instead of regular images gif,png,jpg.

Why should i give ico extension name?

Mostly modern browsers supports any format of image,but it must compatibly with older browsers also.you can give regular formats like favicon.gif,favicon.png,favicon.jpg also.

Where should i keep this icon on server?

Moslty browser search for favicon in root folder,so if you keep this icon on root directory like ,www ,public_html directory on server.
you can keep this icon not only root directory ,its your choice.if so you have to add small html code shwon below in header of each page of site. It works on your local server also.

1
2
3

  	<head>
	<link rel="shortcut icon" href="favicon.ico" >
	</head>

Adding GIF images as favicon

1
2
3
4

  	<head>
	<link rel="shortcut icon" href="favicon.ico" >
	<link rel="icon" href="animated_favicon.gif" type="image/gif" >
	</head>

in the above code we use two type of favicons . favicon.ico for old browsers don’t support gif images.
animated_favicon.gif is for modern browser supports.

]]> http://www.maheshchari.com/favico-tutorial/feed/ 1 hide javascript code from non javascript browser http://www.maheshchari.com/hide-javascript-code-from-non-javascript-browser/ http://www.maheshchari.com/hide-javascript-code-from-non-javascript-browser/#comments Wed, 26 Aug 2009 03:14:42 +0000 mahesh chari http://www.maheshchari.com/?p=368 hide JavaScript code from non-JavaScript browsers

Here we learn how to hide the javascript code from non javascript browsers , javascript disabled browsers and mobile browsers .Non javascript browsers renders the javascript code as generel text without exucuting the code. So we must aware how to hide the javascript from these browsers.

  

1
2
3
4
5

<script type="text/javascript">
<!--
alert("This alert box is hidden from non javascript browsers.!!");
//-->
</script>
]]> http://www.maheshchari.com/hide-javascript-code-from-non-javascript-browser/feed/ 0 check javascript disabled http://www.maheshchari.com/check-javascript-disabled/ http://www.maheshchari.com/check-javascript-disabled/#comments Tue, 21 Jul 2009 03:09:42 +0000 mahesh chari http://www.maheshchari.com/?p=326 Check Browser Javascript enabled

JavaScript is a small, lightweight, object-oriented, cross-platform scripting language.JavaScript is used in millions of Web pages to add functionality, validate forms, detect browsers, and much more.With some reasons the web browser don’t support Javascript ,like user intentially disables,some mobile browsers version don’t support.Then it must we check the whether user’s web browser has Javascript enabled.Here we discuss how to handle non Javascript browser.

We show a alert ,warning message if user browser don’t hav Javascript enabled.using <noscript> HTML tag. just add bellow code to any where in the body section.<noscript> element will be rendered by those Javascript disabled browsers. 

1

<noscript><font face=arial>JavaScript must be enabled in order for you to use maheshchari.com in standard view. However, it seems JavaScript is either disabled or not supported by your browser. To use standard view, enable JavaScript by changing your browser options, then <a href="">try again</a>. </font></noscript>

We show a alert ,warning message with Javascript itself if user browser doesn’t support <noscript> HTML tag.below example code demonstrates.

1
2
3
4
5

<div id="nojs"><font face=arial>JavaScript must be enabled in order for you to use maheshchari.com in standard view. However, it seems JavaScript is either disabled or not supported by your browser. To use standard view, enable JavaScript by changing your browser options, then <a href="">try again</a>.</font></div>
<script>
//if script enabled warning message hidden.
document.getElementById('nojs').style.display="none";
</script>

 

We create seperate UI or seperate web site for those Javascript disabled browsers. below example redirects the user automatically if Javascript disabled.

1
2
3
4
5
6
7
8

<html>
<head>
<noscript>
<meta http-equiv="refresh" content="0;URL=http://mobile.maheshchari.com" />
</noscript>
</head>
<body></body>
</html>

 

]]> http://www.maheshchari.com/check-javascript-disabled/feed/ 2 absolute vs relative path http://www.maheshchari.com/absolute-vs-relative-path/ http://www.maheshchari.com/absolute-vs-relative-path/#comments Sat, 18 Jul 2009 04:28:27 +0000 mahesh chari http://www.maheshchari.com/?p=311 Absolute vs Relative file paths

In this article,we observe the importence of absolute and relative file path of internet files that are placed in own domains or other domains. html document can be rendered atleast a document file. these files are linked to a document like CSS,Javascript,images,flash files.A path basically tells a web browser, where another file is located.

Types of paths

  • Absolute path
  • Site root relative path
  • Document relative path

Absolute Path

These are absolute server paths, they are relative in regards to your http document directory.generelly we place them with URL of the site.main advantages of these absolute path are we can manipulate the dynamicall genereated MIM types,that results in caching the assets,avoiding the caches.we can move document in site directory where ever. we can refer regard less of the sites.

Examples:-

image

<img src="http://www.maheshchari.com/images/image.jpg" width="120" height="110" />

javascript source file

<script src="http://www.maheshchari.com/images/javascriptsrcfile.js" type="text/javascript" ></script>

CSS file

<link href="http://www.maheshchari.com/images/style.css" rel="stylesheet" type="text/css" />

 

Site root relative path

These are semi absolute paths, in the main absolute path from above examples we replace http://www.maheshchari.com/images/ with just / .but these assets can be accesed to single working domain only.

Examples:-

image

<img src="/images/image.jpg" width="120" height="110" />

javascript source file

<script src="/images/javascriptsrcfile.js" type="text/javascript" ></script>

CSS file

<link href="/images/style.css" rel="stylesheet" type="text/css" />

Document relative path

these are document relative path,assuming present working document in site root directory.below examples works.main disadvantage of these document relative path,if we move the present working document

Examples:-

image

<img src="images/image.jpg" width="120" height="110" />

javascript source file

<script src="images/javascriptsrcfile.js" type="text/javascript" ></script>

CSS file

<link href="images/style.css" rel="stylesheet" type="text/css" />

 

if present document moved in to one deeper directory.

Examples:

<img src="../images/image.jpg" width="120" height="110" />

 

 

]]> http://www.maheshchari.com/absolute-vs-relative-path/feed/ 0 css image rollover http://www.maheshchari.com/css-image-rollover/ http://www.maheshchari.com/css-image-rollover/#comments Tue, 23 Jun 2009 17:25:05 +0000 mahesh chari http://www.maheshchari.com/?p=210 image rollover effect with css background image

Here we use basic css back ground image to get rollover effect.the logic is simple and we can find it in comments in script itself.

  • we create a empty link
  • set back ground as test1.jpg and display to block and height and width to 150px.
  • build a suido selctor hover to link and set back ground image to test2.jpg
  • this works even javascript disabled browsers also

Download Script

image-rollover-css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html>
<head>
<title>image rollover with css</title>
<style type="text/css">
<!--
#imagerollover a {
	background-image: url(test2.JPG);
	display: block;
	background-repeat: no-repeat;
	height: 150px;
	width: 150px;
}
#imagerollover a:hover{
	background-image: url(test1.JPG);
}
-->
</style>
</head>
<body>
<div id="imagerollover"><a href="#test">&nbsp;</a></a></div>
</body>
</html>

Download Script

image-rollover-css

]]> http://www.maheshchari.com/css-image-rollover/feed/ 1 javascript image rollover http://www.maheshchari.com/javascript-image-rollover/ http://www.maheshchari.com/javascript-image-rollover/#comments Tue, 23 Jun 2009 17:00:25 +0000 mahesh chari http://www.maheshchari.com/?p=206 image rollover effect with javascript image object
  • we create a image object with new Image();
  • set a source attribute to test1.jpg.
  • create onmouseover even function ,then set image object src to test2.jpg
  • create onmouseout event function,then set image object src to test1.jpg
  • to test click even we can see a small alert box.

Download Sorce Code

image-rollover-javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<html>
<head>
<title>Image Roll over</title>
</head>
<body>
<div id="imagerolover"></div>
<script>
var myimage=new Image(); //create a image object
myimage.src="test1.jpg";//initially set test1.jpg as src attribute
//onmouseover set test2.jpg as src
myimage.onmouseover=function(){
this.src="test2.jpg";
}
//on mouseout set test1.jpg src again
myimage.onmouseout=function(){
this.src="test1.jpg";
}
//create click event 
myimage.onclick=function(){
alert('U clicked me');
}
//get imagerolover div element by id and append the image
document.getElementById('imagerolover').appendChild(myimage);
</script>
</body>
</html>

Download Sorce Code

image-rollover-javascript

]]> http://www.maheshchari.com/javascript-image-rollover/feed/ 0 css opacity tutorial http://www.maheshchari.com/css-opacity-tutorial/ http://www.maheshchari.com/css-opacity-tutorial/#comments Wed, 10 Jun 2009 13:23:40 +0000 mahesh chari http://www.maheshchari.com/?p=174 tutorial for Cross Browser Compatible CSS opacity

At earlier stage of CSS the opacity property of element is big issue to make compatible with all browsers.but now CSS3 almost modern browsers support this property.Even though it takes time to rule CSS3 the web world.Here we see example.

Download Source Code

css-opacity-source code-example

CSS Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.toggleopacity img {
	filter:alpha(opacity=50); 
	-moz-opacity:0.5;
	opacity:0.5;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
 
.toggleopacity:hover img {
	filter:alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
}

HTML Code

1
2
3
4
5
6
7
8
9

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS opacity tutorials and example</title>
</head>
<body>
<a href="#yourlink" class="toggleopacity"> <img src="round.jpg" alt="My round" width="32" height="32" /> </a> <a href="#yourlink" class="toggleopacity"> <img src="round.jpg" alt="My round" width="32" height="32" /> </a>
</body>
</html>

Setting Opacity of element with Javascript

Below Javascript function set the element opacity to at desired level for given element.
if opacity is 0 specified ,it hides the element as there no need to display the element further.

function changeOpac(opacity, id) {
	var object = document.getElementById(id).style;
	if(opacity == 0)
	{ object.display = 'none'; }
	else
	{ object.display = 'block'; }
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

Download Source Code

css-opacity-source code-example

]]> http://www.maheshchari.com/css-opacity-tutorial/feed/ 1 round corners with css sprites http://www.maheshchari.com/round-corners-with-css-sprites/ http://www.maheshchari.com/round-corners-with-css-sprites/#comments Wed, 10 Jun 2009 12:18:00 +0000 mahesh chari http://www.maheshchari.com/?p=158 round corners with css sprites

We know that all modern web browsers supports rounded corner elements but it doesn’t work in IE6.we know that all majority users are IE6 after the fire fox in organizations.here we use CSS sprites technique ,we already discussed about the advantage of the CSS sprites in my previous post.

css-sprite-rounded-corner-example

Steps

Download Script/Source Code
here we make the 16degrees rounded corners.for that we use 32×32px(twice the corner size) circle image as shown below.
example image with 32x32px size
we create four corner divs in a container divs and place them at every corner and with a given image is back ground.
Below example is self explanatory with comments in it. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Round Corners With CSS</title>
<style type="text/css">
<!--
.roundeddiv { 
	width: 400px;
	position: relative;
	background-color: #006702;
	padding: 0px;
	display: block;
}
<!-- Here we use on class common for all corners that shares commen properties-->
.corner {
	background-image: url(round.jpg);
	position: absolute;
	height: 16px;
	width: 16px;
	background-repeat: no-repeat;
	overflow: hidden;
	z-index: 1;
	margin: 0px;
	padding: 0px;
}
h3 {
	margin: 0px;
	padding: 0px;
}
 
.container {
	position: relative;
	padding: 16px;
}
<!-- we come from top right as anti clock wise -->
<!-- Top Right Corner  -->
.tr {
	top: 0px;
	right: 0px;
	background-position: -16px 0px;
}
<!--Bottom Right Corner -->
.br {
	right: 0px;
	bottom: 0px;
	background-position: -16px -16px;
}
 
<!--Bottom Left Corner -->
.bl {
	left: 0px;
	bottom: 0px;
	background-position: 0px -16px;
}
<!--Top Left Corner -->
.tl {
	background-position: 0px 0px;
	left: 0px;
	top: 0px;
}
 
-->
</style>
</head>
<body>
<div class="roundeddiv">
<!-- start corner divs -->
  <div class="corner tr"></div>
  <div class="corner bl"></div>
  <div class="corner br"></div>
  <div class="corner tl"></div>
<!-- end corner divs -->
<!-- start content -->
  <div class="container">
    <h3>Rounded Corners Example </h3>
    <h3>Rounded Corners with CSS sprites Tutorials. </h3>
  </div>
<!-- end content -->
</div>
</body>
</html>

Download Script/Source Code

]]> http://www.maheshchari.com/round-corners-with-css-sprites/feed/ 0 hack password http://www.maheshchari.com/hack-password/ http://www.maheshchari.com/hack-password/#comments Wed, 27 May 2009 11:38:41 +0000 mahesh chari http://www.maheshchari.com/?p=128 how to hack stored passwords in web browser for websites.

 

Yes ,you can hack any stored password in any browser ,any web site with in five seconds.Even you don’t know any basic programming language.but it works for only stored passwords in browser only.

Gmail ,Orkut Account before hackOrkut,Gmail forma after hack

hack stored password for Orkut ,Gmail and Google Account

Open the login page of the orkut that stored ,then paste the below code in URL bar or Address bar,simple you can see the password

1

javascript:document.getElementById('Passwd').type='text';void(0);

hack stored password for Yahoo mail

yahoo mail hackyahoo mail password hack

Open the login page of the yahoo that stored ,then paste the below code in URL bar or Address bar,simple you can see the password 

1

javascript:document.getElementById('passwd').type='text';void(0);

hack any web site password

Yes ,again it is true you can hack any sites password,simple follow the below steps.
1.open login page of any web site that stored .

open login page of any site that stored

open login page of any site that stored

2.Open context menu by right clicking on the page,then select view source from that you can see a new window that has code,search for
a word type=”password” ,beside you can find id also password-hack-source-code


then replace with password with that id
paste it in address bar of the browser,then press enter or return key on your key board. browser-password-hack

3.Its done you can see hidden password password-hacked-any-site

Please note this article is informative purpose only.!!!

So don’t store your passwords on any public computer.

]]> http://www.maheshchari.com/hack-password/feed/ 7