Feeds:
Posts
Comments

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 file input control manipulated with JavaScript:

FakePath

According to the specifications of HTML5, a file upload control should not reveal the real local path to the file you have selected, if you manipulate its value string with JavaScript. Instead, the string that is returned by the script, which handles the file information is c:\fakepath.

This requirement is already implemented in Internet Explorer 8 – the real path to the file will be shown only if the page that contains the control is added to the trusted sites collection of the browser.

Below is some code to play with. Notice that this will not work on localhost pages. The page should be uploaded on a production server.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Testing the FakePath String</title>
</head>
<body>
<form id="Form1" action="" method="post">
<input type="file" /><input type="button" onclick="alert(this.previousSibling.value);" value="select file and press the button" />
</form>
</body>
</html>

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

The latest additions are in red. Removed or discontinued scripts are stricken out.

Content Management

Website Widgets and Parts

  • SearchBox.XML 1.0 – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
  • ContextMenu.XML – Replace the original browser context menu of Internet Explorer and FireFox with this custom skinnable AJAX menu
  • Skinnable Web 2.0 Buttons 3.0 – Create great looking Web 2.0 buttons with ease
  • PageAnnouncement.XML 1.0 – Display important announcements on your websites with this cool, fully customizable and easy configurable script
  • AntipixelButtons.XML 1.0 – Create 16 x 80 pixels web-badges only with CSS

Layouts

Form Related Scripts

Image Related Scripts

JavaScript Routines JavaScript Routines is a collection of useful scripts that can facilitate and accelerate the JavaScript development. This version of Acid.JS includes the following scripts:

  • addClassName.js
  • attachDomEvent.js
  • BackgroundImageCache.js
  • compatMode.js
  • detachDomEvent.js
  • document.getElementById.js
  • getElementsByClassName.js
  • getElementStyle.js
  • isChrome.js
  • isIE6.js
  • isSafari.js
  • loadScript.js
  • loadStylesheet.js
  • pageLoad.js
  • pageUnload.js
  • relExternal.js
  • removeClassName.js
  • splitStringToArray.js
  • toggleElement.js

Visit the home of Acid.JS

Download the latest version of Acid.JS

Almost two years after the first release of my AJAX Hotel Reservation Form, the new version is finally out – totally rewritten, full of cool features and capable to suit the design of any website with its 12 skins.

Here’s what’s this all about:

AJAX Hotel Reservation Form is full featured AJAX solution for websites that provide online room reservations.

It is skinnable, highly customizable, localizable, crossbrowser and ultra fast. The admin panel of the script allows to review the current reservations, send confirmation emails and delete old reservations. Whenever a new reservation has been sent, you will receive a notification emal, and a a confirmation email will be automatically sent to the person that has made the reservation.

The installation and the configuration of the script is easy, and your form can be up and running on your website within minutes.

Click here to view online demo of AJAX Hotel Reservation Form. You may download the script from this link.

Requirements: PHP, Apache Web Server.

Below are a couple of screenshots of the public and the admin side of the script.

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
}

There are numerous solutions for form control styling on the Interet based on the popular JavaScript libraries.

Here’s a quick reference to scripts created by me, that implement state-of-the art form control styling with a small footprint and without using  jQuery, Y!UI, MooTools or any other JavaScript libary.

 - SelectBoxReplacement.JS – Unobtrusive and almost codeless way to give the ordinary HTML combobox form controls (<select>...</select>) cool looks and appeal.
 - ButtonReplacement.JS – Unobtrusive and almost codeless way to give the ordinary HTML buttons (<input type="button | submit | reset" /> and <button type="button | submit | reset">...</button>) cool looks and appeal.
 - CheckBox.XML - Skin the checkboxes in your forms.
 - RadioButton.XML - Skin the radiobuttons in your forms.
 - SpinBox.JS – Codelessly turn the ordinary text inputs (<input type="text" />) into skinnable and multifunctional spinboxes.
 - Upload.JS – Quick and dirty way to add style to the file input boxes (<input type="file" />) of your forms.
 - Upload.XML - Create stylish file upload (<input type="file" />) boxes with this AJAX script.
 - SearchBox.XML – Integrate any number of web search engines in your websites with this cool skinnable AJAX script.
 - ColorPicker.JS – Multifunctional, fast and skinnable color picker.
 - Skinnable Browser Dialogs – replace the boring and impossible to style default browser alert, prompt and confirm with this cool script.

These scripts are included in the latest version of Acid.JS – The AJAX Tools and Widgets Library as well.

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

The latest additions are in red. Removed or discontinued scripts are stricken out.

Content Management

Website Widgets and Parts

  • SearchBox.XML 1.0 – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
  • ContextMenu.XML – Replace the original browser context menu of Internet Explorer and FireFox with this custom skinnable AJAX menu
  • Skinnable Web 2.0 Buttons 3.0 – Create great looking Web 2.0 buttons with ease
  • PageAnnouncement.XML 1.0 – Display important announcements on your websites with this cool, fully customizable and easy configurable script
  • AntipixelButtons.XML 1.0 – Create 16 x 80 pixels web-badges only with CSS

Layouts

Form Related Scripts

  • Upload.JS 1.0 – Quick and dirty way to add style to the file input boxes of your forms
  • SelectBoxReplacement.JS 1.1 – Unobtrusive and almost codeless way to give the ordinary HTML combobox form controls cool looks and appeal
  • ButtonReplacement.JS 1.3 – ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons cool looks and appeal and yet keep their native functionality
  • ColorPicker.JS 1.0 – Multifunctional, ultra fast and skinnable color picker
  • SpinBox.JS 2.1 – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
  • CheckBox.XML 5.0 – Style the checkboxes of your forms
  • RadioButton.XML – Style the radiobuttons of your forms
  • Skinnable Browser Dialogs 3.0 – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
  • Upload.XML 1.0 – Add style to the file upload textboxes of your forms

Image Related Scripts

JavaScript Routines JavaScript Routines is a collection of useful scripts that can facilitate and accelerate the JavaScript development. This version of Acid.JS includes the following scripts:

  • addClassName.js
  • attachDomEvent.js
  • BackgroundImageCache.js
  • compatMode.js
  • detachDomEvent.js
  • document.getElementById.js
  • getElementsByClassName.js
  • getElementStyle.js
  • isChrome.js
  • isIE6.js
  • isSafari.js
  • loadScript.js
  • loadStylesheet.js
  • pageLoad.js
  • pageUnload.js
  • relExternal.js
  • removeClassName.js
  • splitStringToArray.js
  • toggleElement.js

Visit the home of Acid.JS

Download the latest version of Acid.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" />
   <input type="file" name="File2" />
   <input type="file" name="File3" />
   <input type="file" name="File4" />
  </form>

The JavaScript:

var brjsSkin = 'WeMakeSites'; // Set skin to ButtonReplacement.JS
var brjsFolder = 'Scripts'; // Root folder of ButtonReplacement.JS
var brjsEnabled = true; // Is ButtonReplacement.JS enabled or not? (true | false)
var isIE = window.ActiveXObject;
var uploadjs = {};
uploadjs.init = function(width, text)
{
 if(window.addEventListener)
 {
  window.addEventListener('load', function(event)
  {
   initUploadJs(width, text);
  }, false);
 }
 if(window.ActiveXObject)
 {
  window.attachEvent('onload', function(event)
   {
    initUploadJs(width, text);
   }
  );
 }
};
function initUploadJs(width, text)
{
 var uploadinputs = $tag('input');
 for(i = 0; i < uploadinputs.length; i ++)
 {
  if(uploadinputs[i].type == 'file')
  {
   var parent = $create('span');
   var upload = uploadinputs[i];
   var fakewrapper = $create('span');
   
   parent.className = 'UploadJsWrapper';
   upload.className = 'UploadJsRealUpload';
   parent.style.width = width + 'px';
   
   if(isIE)
   {
    upload.style.display = 'none';
    fakewrapper.innerHTML = [
     '<input type="button" value="' + text + '" onclick="this.parentNode.previousSibling.click();" style="width: ' + width + 'px;" />'
    ];
   }
   else
   {
    fakewrapper.innerHTML = [
     '<span><!-- / --></span><input type="button" value="' + text + '" style="width: ' + width + 'px;" /><span><!-- / --></span>'
    ];
   }
   upload.parentNode.insertBefore(parent, upload);
   parent.appendChild(upload);
   parent.appendChild(fakewrapper);
  }
 }
 replaceButtons();
}

And a little bit of CSS:

<style type="text/css">
  .UploadJsWrapper
  {
   display: inline-block;
   overflow: hidden;
   position: relative;
   height: 22px;
   padding-right: 10px;
  }
  .UploadJsRealUpload
  {
   position: absolute;
   display: block;
   float: left;
   -moz-opacity: 0;
   opacity: 0;
  }
  </style>

The full example is available for download here. If you have missed the demo link – here it goes again.

Alternative way for styling file input boxes is provided by Upload.XML – a skinnable AJAX control for creating file upload lists.

Here’s the deal:

Choose three cool scripts developed by WeMakeSites.NET for your own projects and purchase them for USD40! This is the summer deal of 2009 and will continue from May 14 until September 14, so be sure to compile your creative dev bundle soon.

If you are interested in purchasing TinySite.XML, the AJAX content management system, you may have the Standard version for USD50 (instead of USD150), the Full version for USD100 (instead of USD200) and the Developer version with source code for USD500 (instead of USD700). By purchasing your selection you will be entitled to free upgrades with the next version of each of the scripts you have purchased.

Interested? Please, contact us, and let us know, by stating your selection of scripts or TinySite.XML version.

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

Content Management

Layouts

AJAX Libraries

Form Related Scripts

  • SelectBoxReplacement.JS – unobtrusive and almost codeless way to give the ordinary HTML combobox form controls cool looks and appeal
  • ButtonReplacement.JS – ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons cool looks and appeal and yet keep their native functionality
  • ColorPicker.JS – Multifunctional, ultra fast and skinnable color picker
  • SpinBox.JS – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
  • CheckBox.XML – Style the checkboxes of your forms
  • RadioButton.XML – Style the radiobuttons of your forms
  • Skinnable Browser Dialogs – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
  • Upload.XML 1.0 – Add style to the file upload textboxes of your forms

Website Widgets and Parts

  • SearchBox.XML – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
  • ContextMenu.XML – Spice-up your webpages with cool skinnable and multifunctional context menus
  • Skinnable Web 2.0 Buttons – Create great looking Web 2.0 buttons with ease
  • PageAnnouncement.XML – Display important announcements on your websites with this cool, fully customizable and easy configurable script
  • AntipixelButtons.XML – Create 16 x 80 pixels web-badges only with CSS

Image Related Scripts

Get most of the website widgets and tools I’m developing in a single package that is regularly updated. Whenever a new script or script update is available, it will be included in the download file. To stay informed and up-to-date with Acid.JS, please, subscribe to my RSS feed.

The latest additions are in red. Removed or discontinued scripts are stricken out.

Content Management

Website Widgets and Parts

  • SearchBox.XML 1.0 – Integrate any number of web search engines on your websites with this brand new skinnable AJAX script
  • ContextMenu.XML – Replace the original browser context menu of Internet Explorer and FireFox with this custom skinnable AJAX menu
  • Skinnable Web 2.0 Buttons 3.0 – Create great looking Web 2.0 buttons with ease
  • PageAnnouncement.XML 1.0 – Display important announcements on your websites with this cool, fully customizable and easy configurable script
  • AntipixelButtons.XML 1.0 – Create 16 x 80 pixels web-badges only with CSS

Layouts

Form Related Scripts

  • SelectBoxReplacement.JS 1.1 – unobtrusive and almost codeless way to give the ordinary HTML combobox form controls cool looks and appeal
  • ButtonReplacement.JS 1.3 – ButtonReplacement.JS is an unobtrusive and almost codeless way to give the ordinary html buttons cool looks and appeal and yet keep their native functionality
  • ColorPicker.JS 1.0 – Multifunctional, ultra fast and skinnable color picker
  • SpinBox.JS 2.1 – Codelessly turn the ordinary text inputs into skinnable and multifunctional spinboxes
  • CheckBox.XML 5.0 – Style the checkboxes of your forms
  • RadioButton.XML – Style the radiobuttons of your forms
  • Skinnable Browser Dialogs 3.0 – Replace the boring and impossible to style default browser alert, prompt and confirm with this cool script
  • Upload.XML 1.0 – Add style to the file upload textboxes of your forms

Image Related Scripts

JavaScript Routines JavaScript Routines is a collection of useful scripts that can facilitate and accelerate the JavaScript development. This version of Acid.JS includes the following scripts:

  • addClassName.js
  • attachDomEvent.js
  • BackgroundImageCache.js
  • compatMode.js
  • detachDomEvent.js
  • document.getElementById.js
  • getElementsByClassName.js
  • getElementStyle.js
  • isChrome.js
  • isIE6.js
  • isSafari.js
  • loadScript.js
  • loadStylesheet.js
  • pageLoad.js
  • pageUnload.js
  • relExternal.js
  • removeClassName.js
  • splitStringToArray.js
  • toggleElement.js

Visit the home of Acid.JS

Download the latest version of Acid.JS

Older Posts »