Php Development » Html

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

htaccess hotlinker

mahesh chari — Sat, 12 Mar 2011 02:37:29 +0000

How to stop hotlinking our web assets like images, music , video other files?

I recently i launched my project that will generates funny logo of user’s name , i worked around one week to complete this php script generates the funny logo. After one or two weeks users directly linking their logo to my hosting server ,than downloading and hosting on their server.This is called hotlinking where visitors will use directly from our hosted web assets.

So i want stop this hotlinking from hotlinker with htaccess , thanks to apache htaccess rewrite rules .

Here is my small tweak to my htaccess file that prevents hotlinking.

RewriteEngine on
RewriteCond  %{HTTP_REFERER} !^$
RewriteCond  %{HTTP_REFERER} !^http(s)?://(www\.)?maheshchari.com [NC]
RewriteRule  \.(jpg|jpeg|png|gif)$ http://www.maheshchari.com/hotlink.jpg [NC,R,L]

In the above code snippet second and third lines are conditions , if the referrer is blank or maheshchari.com we allow images can be linked , if not we replace that images with hotlink.jpg image.

We can do this for not only images ,we can do it for other media files like mp3, video files, doc files also.

Remember:

You must replace the url to image or any doc file corresponding media type file.

You must allow some websites like facebook,google i.e famaous social networking sites, search engins.

for this you can add as many conditions you want like below

RewriteEngine On
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?google\.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?yahoo\.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?technorati\.com/ [NC]
 
with this method we can find the hotlinker also by redirecting to our mail sender php script the 
referrer.

htaccess directory index

mahesh chari — Sun, 06 Mar 2011 00:45:22 +0000

htaccess directory index

generelly when we access the directory on webserver, we get index.html or index.htm or default.asp or index.php.

in some situation we need to change the directory default page to other or specified page. We can set this with htaccess file on server . remember before going to view this tutorial , you have to check htaccess enabled by your web hosting provider.

open your favorite text editor and add following text to it and save as .htacces name .

DirectoryIndex mydirectory.html

So when you open some url like

http://www.yoursite.com/directory/

you will serve the mydirectory.html as default page.

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

favico tutorial

mahesh chari — Thu, 26 Nov 2009 12:28:16 +0000

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 32x32px.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

Adding GIF images as favicon

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.

hide javascript code from non javascript browser

mahesh chari — Wed, 26 Aug 2009 03:14:42 +0000

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.

<script type="text/javascript">

script>

check javascript disabled

mahesh chari — Tue, 21 Jul 2009 03:09:42 +0000

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

We show a alert ,warning message with Javascript itself if user browser doesn’t support

absolute vs relative path

mahesh chari — Sat, 18 Jul 2009 04:28:27 +0000

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

javascript source file

CSS file

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

javascript source file

CSS file

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

javascript source file

CSS file

if present document moved in to one deeper directory.

Examples: