Archive for the ‘ Javascript Effects ’ Category

Detect operating system user side in javascript


// This script sets OSName variable as follows:
// “Windows” for all versions of Windows
// “MacOS” for all versions of Macintosh OS
// “Linux” for all versions of Linux
// “UNIX” for all other UNIX flavors
// “Unknown OS” indicates failure to detect the OS

var OSName=”Unknown OS”;
if (navigator.appVersion.indexOf(“Win”)!=-1){
OSName=”win_styles”;
document.write(”);
}
if (navigator.appVersion.indexOf(“Mac”)!=-1){
OSName=”mac_styles”;
document.write(”);
}
/*if (navigator.appVersion.indexOf(“X11″)!=-1){
OSName=”UNIX”;
}
if (navigator.appVersion.indexOf(“Linux”)!=-1){
OSName=”Linux”;
}*/

The Beauty of jQuery


I’ll admit, I resisted the use of frameworks. I believe in understanding the core structure and building from it. But after 2 years of working with heavy Javascript, I decided it was time to test out some frameworks to speed up my work.
There’s about 100+ Javascript frameworks out there. Picking one was no easy task. I took about 2 weeks to test out a handful of frameworks and ended up choosing jquery.

It’s tiny. no overhead. It also has a well supported community. Which means plugins galore. And it based off of CSS syntax. So there’s very little learning curve.

And the best feature of all… it’s cross browser compliant!!

No more MSIE hacks or special code for Opera. Your complex Javascript will work on all browsers. That’s a saving of 2 weeks worth of programming already!

With MooTools and Prototype, you have to be careful not to use the same variable name as their API. But not with jQuery. It is completely isolated in it’s scope and won’t affect any global namespace.

Yahoo UI and Dojo, well those are big boys. And i mean HUGE files. I prefer small footprint over bulky features. In fact, I’ll stab my eye out before I use Dojo… but I’ll digress.

For more info : http://htmltree.com/the-beauty-of-jquery/

Web design tools and resources


Recently i found very large collection of links related to website creation.

  • Javascript
  • jQuery Essential & Specialized Widgets
  • jQuery “Extensions”
  • PHP/MySQL tools
  • Flash Components
  • Miscellaneous Tools (IETester, Spam protection tool, Create Facicons tool)
  • Web Development BookmarkletsSite
  • Grid Design
  • Content Generators (Lipsum, Preloader Graphics, Background maker)
  • Pixel Icons
  • PNG Support in IE (CSS Only)
  • Vector Icons
  • Backgrounds & Styles
  • Hosting
  • Browser Compatibility
  • CSS & HTML Techniques
  • Typography
  • Firefox Extensions
  • Essential Mac Software
  • SEO / Site Evaluation
  • Domain Searches
  • Analytics, Monitoring & Testing
  • Cheat Sheets (Web Technologies)

    Hope you find this list useful too    LIST HERE

Multiple Fancy File Uploaders


Have you ever want to upload multiple files at once, or see file upload progress, or style your upload elements, or control filetypes before upload ? Today i want to suggest you a collection of file uploaders ready to use in your web projects.

FancyUpload Multiple file Uploaders
They divided into 2 groups: uploaders not using flash & uploaders using flash

Solutions without flash

1. Ajax upload

ajaxupload Multiple file Uploaders

Very nice tool, flash-free. You can customize it as you want, also you can use drag&drop files on input
Works in: IE6/7, FF2/3, Safari, Chrome, Opera.
Has different versions for jQuery, Prototype, plus has independent version.
demo

2. jQuery Multiple File Upload Plugin

jQuery Multiple File Upload Multiple file Uploaders

Has many features, like using different validations, limit max files for upload, use different icons for different file types
demo

3. Ext.ux.FileTreePanel (Ext.JS extension)

FileTreePanel Multiple file Uploaders

demo

4. noswfupload

noswfupload Multiple file Uploaders

Multiple files upload without SWF objects, applets Java, or other third parts plug-ins, 100% browser and W3 compatibility thanks to graceful enhancement, no extra libraries dependency

demo

Solutions using flash

1. SWF Upload

swfupload Multiple file Uploaders

Popular solution, allows to customize all upload elements using XHTML & CSS, shows only file types you choose, has js callback function to every event.
demo

2. uploadify

uploadify Multiple file Uploaders

Has not so many features, as SWFUpload, but it uses jQuery 🙂
demo

3. FancyUpload

FancyUpload Multiple file Uploaders

FancyUpload – fully customizable uploader with progress bar. Require MooTools.
demo

4. Yahoo File Upload

Yahoo File Upload Multiple file Uploaders

demo

TreeView using javascript


TreeView Demo: Checkboxes and Radio Buttons for a Form

The layout used for this demo is just one of the many possible combinations of Treeview settings. Among te types of things you can change are:

  • Use a frameless layout
  • Have the nodes in the tree link to Web pages
  • Display folder and document icons
  • Activate highlighting for the current selection

See the other TreeView demos for more ideas.

Make your check box and radio button selections in the left frame and then click the “Get Values” button. The options you select are shown in this frame. Notice that the Hour group in the tree contains radio buttons; only one can be pressed at a time.

Days selected:
Time selected:

Instructions for configuring the TreeView script to show checkboxes are provided in the demoCheckbox*.* source files that are in the free download.

onRollover Expand Banner Using Javascript


Click here to download the Expandable Banner using Javascript