June 9, 2009 by acidmartin
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:
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>
Posted in Browsers, Forms, HTML5, Tips and Tricks, Web Development | Tagged c:\fakepath, fakepath, file upload fakepath, HTML5, input type file fakepath | Leave a Comment »
June 6, 2009 by acidmartin
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
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
Posted in AJAX, Acid.JS, CSS, Forms, Image Galleries, JavaScript, News, Rounded CSS Corners, Search, Website Widgets and Parts | Tagged acid.js, AJAX, ajax library, ajax toolkit, ajax tools, browser gui, CSS, css tricks, custom checkboxes, custom radiobuttons, customdialogs, form skinning, form styling, Forms, javascript library, js library, selectbox replacement, website controls, website widgets, xmlhttprequest | Leave a Comment »
June 5, 2009 by acidmartin
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.
Posted in AJAX, Content Management, Forms, Website Widgets and Parts | Tagged ajax booking form, ajax form, ajax hotel booking form, ajax hotel reservation form, hotel reservation form, php hotel booking form, php hotel reservation form, web 2.0 form | 3 Comments »
June 4, 2009 by acidmartin
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
}
Posted in Browsers, CSS, CSS Hacks, Tips and Tricks | Tagged css hack, IE css hack, IE8 css hack, Internet Explorer 8 CSS hack, Internet Explorer 8 hack, Internet Explorer CSS hack | Leave a Comment »
May 17, 2009 by acidmartin
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.
Posted in AJAX, Forms, Website Widgets and Parts | Tagged alert skin, checkbox skinning css, colorpicker, combo css, combobox skin, confirm skin, form control styling, form css, form decoration, form skinning, form themes, html form css, input file css, prompt skin, radiobutton skinning css, searchbox, select css, select skin, skinnable forms, upload styling | Leave a Comment »
May 17, 2009 by acidmartin
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
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
Posted in AJAX, Acid.JS, CSS, Forms, Image Galleries, JavaScript, News, Rounded CSS Corners, Search, UX, Web Development, Website Widgets and Parts, XHTML, XML | Tagged acid.js, AJAX, ajax cms, ajax guestbook, ajax library, ajax toolkit, ajax tools, browser gui, cms, CSS, css tricks, custom checkboxes, custom radiobuttons, customdialogs, form skinning, form styling, Forms, guestbook, javascript library, js library, selectbox replacement, website controls, website widgets, xmlhttprequest | Leave a Comment »
May 16, 2009 by acidmartin
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.
Posted in Forms, Tips and Tricks, Website Widgets and Parts | Tagged CSS, file input skinning, file upload, form decoration, form skinning, Forms, JavaScript, skinnable forms, type file skinning | 3 Comments »
May 14, 2009 by acidmartin
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.
Posted in Deals and Promotions, News | Tagged acid.js, AJAX, ajax cms, ajax guestbook, ajax library, ajax toolkit, ajax tools, browser gui, cheap AJAX scripts, cheap programming, cheap scripts, cms, CSS, css tricks, custom checkboxes, custom radiobuttons, customdialogs, form skinning, form styling, Forms, guestbook, javascript library, js library, selectbox replacement, website controls, website widgets, xmlhttprequest | 1 Comment »
May 10, 2009 by acidmartin
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
Posted in AJAX, CSS, Forms, Image Galleries, JavaScript, News, Rounded CSS Corners, Search, Tips and Tricks, Web Development, Website Widgets and Parts, XHTML, XML | Tagged acid.js, AJAX, ajax cms, ajax guestbook, ajax library, ajax toolkit, ajax tools, browser gui, cms, CSS, css tricks, custom checkboxes, custom radiobuttons, customdialogs, form skinning, form styling, Forms, guestbook, javascript library, js library, selectbox replacement, website controls, website widgets, xmlhttprequest | 2 Comments »
May 7, 2009 by acidmartin
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
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
Posted in AJAX, Acid.JS, CSS, Forms, Image Galleries, JavaScript, News, Rounded CSS Corners, Search, UX, Web Development, Website Widgets and Parts, XHTML, XML | Tagged acid.js, AJAX, ajax cms, ajax guestbook, ajax library, ajax toolkit, ajax tools, browser gui, cms, CSS, css tricks, custom checkboxes, custom radiobuttons, customdialogs, form skinning, form styling, Forms, guestbook, javascript library, js library, selectbox replacement, website controls, website widgets, xmlhttprequest | 1 Comment »
Older Posts »
