Php Development » css

textarea resize disable

mahesh chari — Fri, 30 Sep 2011 22:36:54 +0000

How to disable text area re size icon for chrome or webkit browsers.

Recently when i was implementing new application , i was asked to remove the text area resize feature and text area glow when user focuses on the text area. Thank god it doesn’t took much effort. it can be done with simple CSS tweaks.
i placed the following CSS code in my page and it solved

.exampletextarea {
resize:none;
outline:none;
}

horizontal scroll

mahesh chari — Fri, 22 Jul 2011 21:28:19 +0000

how to scroll the window horizontally scroll?

I got asked by my coleague to horizontal scroll the window , let me explain the scenario , page width is 1500px with a 1500px image in back ground and it should be always centered on page load and window resized. i got a solution thanx to jQuery.scrollTo plugin.



how to center the window for small screen






  This container has 1500px width  and centered into the view port.
   if this container is seen in less than 1500px  ,
   it should be scrolled to the centered on
  page initializes and window resizes

Demo

input hidden ie7

mahesh chari — Mon, 18 Jul 2011 09:19:51 +0000

IE7 form hidden input field bug fix

Every HTML form may have hidden input fields. Generelly every web browser will render this input hidden field as display:none . but in ie7 it will have small gap. since we can’t replace or change the position of the input hidden fields ,if they come from any CMS it is hard. here is a simple trick that will fix the ie7 bug.

.hiddeninput {
display: none;
width: 0px;
height:0px;
margin: 0px;
padding: 0px;
font-size: 0px;
line-height: 0px;
}

scrollbar css

mahesh chari — Wed, 06 Jul 2011 16:55:23 +0000

Remove or hide default scroll bar in IE

By default Windows Microsoft Internet Explorer (IE) for all versions have a scrollbar on textareas, even there is no content in .Because IE will treat default CSS overflow property value is scroll. For other browsers it is auto.

So to fix this we should have this to our CSS .

#fixedtextarea {
	overflow:auto;
}

Out put

Ie css hack reference

mahesh chari — Fri, 04 Dec 2009 04:07:24 +0000

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

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.


This shows up in anything but IE

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 {}

css image rollover

mahesh chari — Tue, 23 Jun 2009 17:25:05 +0000

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



image rollover with css

Download Script

image-rollover-css

css opacity tutorial

mahesh chari — Wed, 10 Jun 2009 13:23:40 +0000

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

.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




CSS opacity tutorials and example

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

round corners with css sprites

mahesh chari — Wed, 10 Jun 2009 12:18:00 +0000

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.

Steps

Download Script/Source Code
here we make the 16degrees rounded corners.for that we use 32x32px(twice the corner size) circle image as shown below.

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.




Round Corners With CSS





  
  
  
  


  
    Rounded Corners Example 
    Rounded Corners with CSS sprites Tutorials.

Download Script/Source Code

css sprites image preloding

mahesh chari — Tue, 26 May 2009 12:36:17 +0000

Image pre loading with css and image sprites

We discussed image pre loading with javascript in my previous post.but it can’t be use full when javascript disabled browsers (off course use disables).So i got one idea how to implement without javascript for image preloading .

With Hidden Div Element

here the trick ,we know that browser loads all the assets (images,audio,embed elements ) as they appear in the HTML document.So we create a dive and hide and make it null style element .put the images which you want to load .

using css image sprites

for tri state button we need three image for each state (normal, hover, focus) by default we load normal image back ground. when we hove first time the second image loaded . so we use images sprites. as shown

Sample Sprite image for tri state buttons

Download Example Source code

image-preloading-with-css-sprites source code

Example for HTML




Image Preloading With CSS and Sprites



 image-preloading-with-css-sprites
    
begin your work here.
Preloading with images sprites example tri state button.

  button1 
  button2 
  button3

Css sample