Fixing the Browser History (Back and Forward buttons) in AJAX Websites

Here is a small script that utilizes the JavaScript location.hash property to handle the broken back and forward browser buttons in AJAX websites.
For the demo we need is a simple AJAX callback function, the hash handling function and a couple of HTML pages to include in our one-page website via the XmlHttpRequest.
1. getcontent(file) – the argument of the function is the [...]

Read Full Post »

CSS Hack for Safari and Google Chrome: Redux

As body:nth-of-type(1) and body:first-of-type are supported by FireFox 3.5x, the hack that I wrote about in this post cannot be used anymore. You may try the following one, which targets only Google Chrome and Safari:
@media screen and (-webkit-min-device-pixel-ratio:0)
{
 div
 {
  color: red; /* The text will appear red only in Safari and Google Chrome */
 }
}

Read Full Post »

Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome

WebKit browsers (Safari, Chrome, Konqueror) have vendor-specific implementation of the CSS appearance property, as well as full support for the :checked and :disabled pseudo classes. The property is called -khtml-appearance and it’s default value is visual. When set to none, it turns the specified control(s) to a blank slate, and this, combined with :checked, :hover and :disabled facilitates [...]

Read Full Post »

The Mystery of c:\fakepath Unveiled

Have you tried to manipulate the string that is returned by the value attribute of a file upload input (<input type=”file” />) under Internet Explorer 8? Did you get the strange c:\fakepath string? Relax - there is nothing wrong with your code, and although this is quite confusing, it has its justifiable reasons. Here is a screenshot of a [...]

Read Full Post »

CSS Hack for Internet Explorer 8

Notwithstanding the improvements in the CSS support in Internet Explorer 8, there may be cases when a CSS hack for that particular browser is necessary. Here is one that works in IE8 Standards Compliance Mode:
.classnameOrElement
{
 color /*\**/: blue\9
}
And another one that will be applied in all IE versions:
.classnameOrElement
{
 color: blue\9
}

Read Full Post »

Styling File Upload Inputs with ButtonReplacement.JS

Here’s a quick and dirty way to style file upload (<input type=”file” />) boxes with a few lines of JavaScript and ButtonReplacement.JS, so they look like this:

instead of this:

The Init Script:
<script type=”text/javascript”>
  uploadjs.init(‘100′, ‘Browse for File…’); // width and text of the “Browse…” button
  </script>
The HTML – any number of file input boxes:
<form id=”Form1″ action=”" method=”post”>
   <input type=”file” name=”File1″ [...]

Read Full Post »

AJAX Scripts Collection 2008-2009

Here is a collection of several (mostly) AJAX scripts created between 2008 and 2009 that you may find useful:
Browser History and Bookmarks in AJAX Websites

Fixing the Browser History (Back and Forward buttons) in AJAX Websites – a small script that makes use of the JavaScript location.hash property to handle the broken back and forward browser buttons in [...]

Read Full Post »

Creating Style Tag with JavaScript and Adding Rules to It

Sometimes, when working with dynamically created objects on the client, it is needed to style these elements in a specific way. Due to the nature of these objects (for example – unique IDs) , they cannot be styled in the classic way, though. The document.createElement method of JavaScript can be used to create <style>…</style> tag and [...]

Read Full Post »

Using the IE8 X-UA Compatibility Meta Tag Properly

Internet Explorer 8 is out, with a couple of rendering modes, that will take time to handle. As you know, IE8 renders pages in standards compliance mode by default, and the X-UA compatibility tag has been a good idea of Microsoft, as it gives a chance to developers who have not optimized their websites for IE8 to [...]

Read Full Post »

10 Dirty CSS Tips and Tricks

Here is a collection of 10 CSS tips, tricks in blogposts I have written during the last year that you may find useful:
01. Better Image Scaling and Resampling in Internet Explorer
02. Setting Opacity and Other Filters in Internet Explorer 8
03. The 32 External CSS Files Limitation of Internet Explorer and More
04. Unobtrusive CSS Loading Indicator for Images
05. CSS: Filtering and Distinguishing Google Chrome and Safari
06. [...]

Read Full Post »