There is a big headache among web developers with image caching. If you are using the same name while updating the image in the server, browser will not update it as quickly as you updated. This might occur in most cases where you update the image but not the file name. Confused? Let’s Make it clear,,

For example you have an image named “datasheet.jpg”. You are displaying this image on the webpage.

<img src="datasheet.jpg" />

Let’s say, if you are updating this image and leave it with the same name “datasheet.jpg”. Then also you image tag will be same.

<img src="datasheet.jpg" />

In many cases, browser will not know there is a new version of the same image and it will tend to display the content from the web cache. Even no-cache headers are not helping in these type of occasion (I tried and tired). So the returning visitor will see the same old image.

The simplest solution is to change the image filename. But how you will create a different name for an image that is in same name. Ok. Do it simply.

<img src="datasheet.jpg?mtime=1257316941" />

Do this -> Append a Query Sting

When you attach query sting in end of image file name, browser will treat it as a different file name and looks for the web server for new. This will not make the browser to display the cached content.

How to generate an optimized version of Query String for Image file name?

Using simply random value as query string will lead the browser to load the new version of image regardless of updated version. This will make the loading time of the web page too long even if the correct version of image is there on cache. This will become overhead. To overcome this issue, we can generate the query string using file modified time. So the query string will not be changed until file is modified next time. Once the file is modified, the query string will be changed and browser will load the new version.

Generate filename with query string using file modified time (PHP)

Use the filemtime($path) function to generate file modified time.

echo '<img src="datasheet.jpg?mtime=' . filemtime(="datasheet.jpg)  . '" />';

this will generate something similar to this

<img src="datasheet.jpg?mtime=1257316941" />

This will work for all types of browser including IE, FF, GC and all others.
I hope this will be useful for you. Don’t forget to leave a comment if you find any mistake on me.

It is pleasure for me to share the codes that I have written for a banner. This is completely using Javascript/jQuery and CSS. Easy to customize and easy to install. Actually I was adopting the design from CISCO and IBM websites. I am not much good in Adobe Flash animation. It is the main reason to build this in Javascript. LOL.

.

Highlits:

• 100% pure Javascript/jQuery
• Fast Loading
• Auto animate banner
• Easy to use link buttons
• Enable or disable any texts
• Easy to integrate with PHP, ASP.NET and any other servers

Demo

Click here to see a demo

Download

Link 1

Screenshot :

Screenshot 1

.

Screenshot 2

.

Screenshot 3

Installation:

Installation instruction found in source file.

This is not 100% complete. Please give me your feedbacks. I will make any changes for the improvement.

• Use it for free & Please give me a link back if you like.

Bugs & Fixes

• Dropdown Menu problem
• Adding link to Large image in Banner

.

It is a challenge among many CSS designers to get the CSS page works same as they expected in all and every browsers. Different browsers render some of the CSS tags in different ways and some are omitted completely. No one will forget the IE 6 as a big headache and a bug full browser ever. It’s behavior torches all CSS designers. Thanks Microsoft they upgraded themselves with IE7.

Centering a layer is not that much harder part. It is simple but it is the start of most web page. So it is worth knowing the right syntex that works with almost all browsers today. Following is a sample style that works in all browsers.

CSS Style

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

 
body {
    margin: 0px;
    padding: 0px;
    text-align:center;
}
 
#outerWrapper {
    width:900px;
    margin:0 auto;
    border:1px #999 solid;
}

The Body

1

<div id="outerWrapper"></div>

Cool ! It is working fine. By the way, I have a absolute positioned layer. Will this work with this idea. No problem buddy. There is nother technique using the negative margin.

1
2
3
4
5
6

#outerWrapper{
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

Check wheather is this work for you. Probably it should.