Scripts Guru

Flickr’s Flash file uploader is one of the most functional uploaders a developer can think of.

It supports:

• Multiple file selection in a single "Open File" dialog.
• File extension filters for easier selection.
• Upload progress tracking.
• Filename, size, date created, date modified, and author can easily be extrated.

This flash file uploader is avaliable as the YUI Uploader component.

You can also include additional data in the upload POST request.

And, upload component provides faster file upload on broadband connections due to the modified SEND buffer size.

Requirements: YUI Library
Website: http://developer.yahoo.com/yui/uploader/
Demo: http://developer.yahoo.com/yui/examples/uploader/ind...
Download: http://developer.yahoo.com/yui/download/

This is the 4th part of their web development icon sets. Click here to find their all free icons.Package: 60 icons
Sizes: 24×24
File Types: .png, .ico, .tif, .gif, .bmp
Colors: Colored with and without shadows, with a subtle gray shade and transparent. .Bmp, .gif formats are optimized for lighter backgrounds

Website: http://www.icojoy.com/articles/26/

Specially, patterns are high quality, can be previewed & downloaded in different colors.

Currently, you can find 100 patterns and 6 small icon sets.

The script presents the images with a fade-in, fade-out effect.

To ensure all images are loaded before the user makes any interaction, the MooTools Assets component is used.

These include zoom, magnify and thumb features.

These JavaScript solutions do not rely on JavaScript framework, they are well-documented and some have installation instructions for other like Joomla, Drupal, osCommerce & more.

They are free only for non-commercial use and need a license for commercial websites.

Requirements: No Requirements
Compatibility: All Major Browsers
Website: http://www.magictoolbox.com
Via: http://ajaxian.com/archives/magic-toolbox-high-quali...

It uses XML to store the data, almost every setting is configurable and has a submenu feature which is kinda unique.

Configuration options o

f this Flash XML accordion menu:

• Background images of any menu items
• Dimensions of the whole menu
• Dimensions of the menu items when they are active (unfolded)
• Transparency animation levels of menu items
• Almost any setting for each menu item, such as colour, position, size, transparency etc.
• Menu items’ header texts and link URLs
• Choice of targeting simple URLs, frames or named windows
• Addition of submenus to any menu’s item using XML
• The look of submenu’s background panels
• Speed of animation
• Custom images for submenu’s button images
• Ability to always display menu item’s text headers or only display them when the item is active
  
  Website: http://www.fameid.com
  Demo: http://www.fameid.com/menu/index.php?option=com_cont...
  Download: http://www.fameid.com/menu/index.php?option=com_cont...
  

The Flash slider simply displays an image and a descriptive text with a link to the URL wanted. The slider can be controlled via the next-previous & pause buttons.

You can find the steps for creating this Flash news slider as a tutorial and download the source files.

Design of the slider is inspired from the LaNacion.com website.

Website: http://www.faustocarrera.com.ar/v2/index.php/archive...
Demo: http://works.faustocarrera.com.ar/news_slider/

Here are few examples from DaPino:

With over 70% of all attacks now carried out over the web application level.

Web application firewalls are used to create an external security layer to improve security, detection, and prevention of attacks before they hit web applications.

Web servers are well-equipped to log traffic for marketing analyses, but they are not good when it comes to logging of traffic to web applications.

ModSecurity is a web application firewall for Apache which makes full HTTP transaction logging possible, allowing complete requests and responses to be logged.

This web application firewall has an easy to use rule engine which creates the core of the system.

ModSecurity can monitor the HTTP traffic in real time, has other features like parallel text matching, Geo IP resolution, credit card number detection, support for content injection, automated rule updates, scripting & more.

Requirements: Apache
Website: http://www.modsecurity.org/
Download: http://www.modsecurity.org/download/direct.html

There are many Lightbox-type scripts which are built with different JavaScript frameworks and have different features.

planetOzh has created a nice comparison matrix for these Lightbox clones. You can sort the scripts and see their features easily.

Consider that the list does not include all the Lightbox scripts and may be missing the latest information but will definitely give you an idea and save your research time.

Website: http://planetozh.com/projects/lightbox-clones/

Designers Toolbox has very nice resources for designers like banner, paper, envelope sizes, etc.

Besides them, you can find PSD image files of form elements for Firefox, Safari & Internet Explorer. As the looks of form elements differ between operating systems, Designers Toolbox provides images of both Windows & Mac environment.

Like this Mac OS X Scroller Image in Firefox:

And this buttons in Windows & Internet Explorer

Using real form element images makes it easier to imagine what will it be when converted to HTML. So, definitely give it a try.

Website: http://www.designerstoolbox.com/designresources/elem...

Flashmo.com is presenting free flash templates which you may find useful.

These flash templates include very nice ones including 3D Curve Wall, 3D Spiral Carousel or Flashmo 63 Effect.

You can download the source FLA files and can edit them to fit your needs.

P.S. Flashmo MP3 Player is a very nice one too.

Website: http://www.flashmo.com

Sava is a beautiful open source content management system, built with Coldfusion, that helps you manage your site content easily.

Besides the standard CMS functions, Sava has marketing features like targeted messaging, user tracking, integrated email marketing and more.

Sava can manage multiple websites, generate SEO friendly URLS, has powerful personalization & user administration capabilities.

This Coldfusion powered CMS also offers pre-built CSS layouts and templates that will help you using semantically-correct, logically structured XHTML that’s easy for you to control and easy for your client to use without blowing up layouts and formatting.

Sava can use both MySQL or MSSQL for storing data.

Requirements: Coldfusion support, MySQL or MSSQL
Website: http://www.gosava.com
Download: http://www.gosava.com/go/sava/download/

The majority of these tools are generators that create all sorts of useful graphics. These tools range from Background generators to a rounded corner generators. Below is the list of Web 2.0 Generators.

Background

• Background Image Maker - Background Image Maker allows you to create backgrounds with the choice of stripes, gradients, and dot background style.
• Stripe Designer - Stripe Designer allows you to create any type of stripe or texture you want, with any color you want.
• Stripe Generator - Stripe Generator allows you to create a stripe background of any size and color. You can even add up to 5 colors for the stripes.
• Tartan Maker - Tartan Maker which is created by the same people who did Stripe Generator allows you to create a yarn like design.
• My Cool Button - My Cool Button is an online tool that you can create a button that you want. My Cool Button features 3 shapes, 50+ fonts, 170+ icons.
• Buttonator - Buttonator is a button generator that allows you to create many different variations of buttons.

• ButtonGenerator - ButtonGenerator allows you to create single buttons and has an option to buttons for navigation.

Domain

• MakeWords - MakeWords is a domain name generator that creates random words that you either supply or you don’t. It lets you know what domain name is available.
• NameBoy - NameBoy creates domain names based on a word that you want in your domain. It then tells you what domain is available.
• Dot-o-mator - Dot-o-mator is a web 2.0 domain name generator that allows you to select words and then have it combine them to form a domain name.

Favicon

• Favicon Generator - Favicon Generator takes an image that you upload and makes it into a favicon.
• Favicon.cc - Favicon.cc allows you to create a favicon icon online without having to upload any file.
• Favicon Editor - FaviconEditor allows you to upload a photo or you can create a favicon.

Gradients

• Gradient Maker - Gradient Maker allows you to generate a gradient of 3 types, with instant previewing so you get exactly what you had in mind.
• Gradient Texture Generator - Gradient Texture Generator allows you to create up to 4 different types of gradients with any colors that you want.
• Online Gradient Image Maker and Button Generator - This generator is the most in depth I’ve seen it has so many different options. It is a must see for any one.
• Web 2.0 Logo Creator - Web 2.0 Logo Creator generates a web 2.0 logo. All of the logos that this generator creates will have all the same styling.
• Logo Creator - Logo Creator has a few different styles to choose from and it works pretty well.
• Logo Generator - Logo Generator allows you to create logos with any color you want and with any background. You can even add a symbol to the logo.
• Web 2.0 Stylr - Web 2.0 Stylr is another Logo creator that allows you to change the gradient of the text and the background color.

Rounded Corners

• RoundedCornr - RoundedCornr is a very in depth rounded corner generator. RoundedCornr has 4 different types of rounded corners and the output gives you CSS and html.
• Cornershop - Cornershop creates 4 rounded corner graphics and gives you the css and html to implement the corners. You specify the color and radius of the rounded corners you would like.

This is a sliding top menu built with jQuery which can be fired through the open & close buttons or with any tag with the related class name.

You can also use it as an info box, login area & more.

Click here to see the final working demo of this jQuery sliding menu.

It presents the menu when closed like this:

And when opened:

Sliding menus are very effective in areas where we have limited space .

Step 1 - HTML:

<div id="sliderWrap">

<div id="openCloseIdentifier"></div>

<div id="slider">

<div id="sliderContent">

Isn’t this nice?

</div>

<div id="openCloseWrap">

<a href="#" class="topMenuAction" id="topMenuImage">

<img src="open.png" alt="open" />

</a>

</div>

</div>

</div>

Step 2 - CSS:

<style type="text/css">

body {

margin: 0;

font-size:16px;

color: #000000;

font-family:Arial, Helvetica, sans-serif;

}

#sliderWrap {

margin: 0 auto;

width: 300px;

}

#slider {

position: absolute;

background-image:url(slider.png);

background-repeat:no-repeat;

background-position: bottom;

width: 300px;

height: 159px;

margin-top: -141px;

}

#slider img {

border: 0;

}

#sliderContent {

margin: 50px 0 0 50px;

position: absolute;

text-align:center;

background-color:#FFFFCC;

color:#333333;

font-weight:bold;

padding: 10px;

}

#header {

margin: 0 auto;

width: 600px;

background-color: #F0F0F0;

height: 200px;

padding: 10px;

}

#openCloseWrap {

position:absolute;

margin: 143px 0 0 120px;

font-size:12px;

font-weight:bold;

}

</style>

With the CSS file there are few major points:

• #slider has to be positioned absolutely, so it can overlay the other content.


• #slider has a negative top-margin which hides it.


• #sliderContent is positioned absolutely to not to crack the open/close buttons


• #openCloseWrap holding the buttons are positioned absolutely too.
  

Step 3 - jQuery / JavaScript:

<script type="text/javascript">

$(document).ready(function() {

$(".topMenuAction").click( function() {

if ($("#openCloseIdentifier").is(":hidden")) {

$("#slider").animate({

marginTop: "-141px"

}, 500 );

$("#topMenuImage").html(’<img src="open.png"/>’);

$("#openCloseIdentifier").show();

} else {

$("#slider").animate({

marginTop: "0px"

}, 500 );

$("#topMenuImage").html(’<img src="close.png"/>’);

$("#openCloseIdentifier").hide();

}

});

});

</script>

The main trick is changing the top margin of #slider and update the open / close images.

We have an empty element named openCloseIdentifier which shows us whether the menu is open or closed. We simply hide it when the menu is open and show when it is closed.

Then all we do is:

if openCloseIdentifier = hidden then close the menu or if openCloseIdentifier = visible then open the menu.

Sliding effect can be fastened by changing the 500 value in JavaScript to a smaller number or else.

Vista-like Ajax calendar is an unobtrusive, slick calendar script which looks and functions similar to the Vista taskbar calendar.

It is built with Mootools and PHP and has datepicker functionality.

Features of this Mootools calendar:

• Vista look-and-feel
  • Quick navigation by switching between months, years and decades without drop-down boxes
  • Smooth transition animations
• Customizable features
• Datepicker functionality
• Easily changeable date labels (e.g. different languages)
• Lightweight (compressed 8,50kB)
  
  Requirements: Mootools 1.11+
  Compatibility: All Major Browsers
  Website: http://dev.base86.com/scripts/vista-like_ajax_calend...
  

iRadeo is a free online radio application that can be used to stream MP3 / WAV files.

This online radio application automatically detects and streams the files that are uploaded to a specified directory.

One great feature of iRadeo is the embedding support which lets your visitors stream your radio via a simple JavaScript code.

Features of this free online radio script:

• Streams - Supports both MP3 and WAV file formats
• Auto-Detects - Auto detect MP3 file information through the ID tags (both ID3v1 and ID3v2) and will display in the player
• Customization - Easy to customize through a single CSS file
• Embed - Easly allow listeners to embed your player on their site with just few lines of code
• Shuffle - Option to allow files to stream randomly (no file from same single artist or album will be played twice in a row)
• Limit Skips - Option to limit number of skips allowed per session.
• Auto-Play - Option automatically start streaming once page is loaded

iRadeo is coded with PHP and uses the SoundManager 2 JavaScript sound API (see WRD post) for the controls.

Requirements: PHP
Compatibility: All Major Browsers
Website: http://www.iradeo.com/
Download: http://www.iradeo.com/download.php

Currently I’ve made two formats of this set, which is a 16x16 version and a 12x12 version.

Download Them Below

bwpx.icns, is a set of 250 quality black and white icons created by Paul Armstrong Designs.

Every icon in the set is very detailed and clear.

Within the set, you can find any icon an application may require like arrows, baskets, documents, comments, users, photos, etc.

Icons are 18px*18px size and in GIF format.

Website: http://paularmstrongdesigns.com/projects/bwpx-icns/
Via: http://sharebrain.info/brainpicks/bp_icons/bwpxicns-...

Let me first explain what Lightbox is. Lightbox is a simple, unobtrusive script used to overlay images on the current page. Since it is written in Ajax the page never reloads. Below is a List of 8 Lightbox scripts that all differ from the original.

1. LightBox 2: In Lightbox 2 you are able to group images together to form a slideshow and it has some fancy transitions. Lightbox 2 only allows the use of Images. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library.
2. ThickBox 3.1: ThickBox is very similar to Lightbox but it allows the use Text content in the box, inline frames, and a login module. ThickBox was built using the super lightweight jQuery library. ThickBox doesn’t have Transitions.
3. MultiBox: Is like lightbox but it supports flash, video, mp3s, and html. MultiBox is built with MooTools.
4. GreyBox: GreyBox can be used to display websites, images and other content. Since this script is written without the use of frameworks it is very lightweight. It’s only 22 KB! This is my favorite script because I don’t like using frameworks in my sites.
5. SexyBox: SexyBox is also written without a framework and what I’ve seen it allows the use of text. I’m not sure if SexyBox can work with images since I have not used it.
6. ShadowBox.js: Shadowbox supports all of the most popular web media formats including images, QuickTime, Windows Media Player, Flash, Flash video, HTML, and even external web pages. Shadowbox supports a host of options that make it highly configurable. I highly recommend this script. It is one of the best.
7. LightView: LightView also supports all of the most popular web media formats including images, QuickTime, Windows Media Player, Flash, Flash video, and HTML. The Difference is LightView uses Prototype and Scriptaculous.
8. GMapsOverlay: GMapsOverlay is very unique from the rest of these. It only works with Google maps but it allows you to set the location on the map. It is built on MooTools.

Using PHP to let the user switch to a different CSS file is nothing new. But it is one of the things that I am often asked about, so I thought it would be good to have a write-up to refer people to in the future.

As I mentioned this will work when JavaScript is disabled. It will not work when cookies are disabled, however. Nothing bad will happen, but it simply won’t work and the user will be returned to the same page they were on. Just to make you aware of that right from the start.

I use this style switcher to let visitors switch between two different layouts (“Zoom” and “Normal”) here on 456 Berea Street. If you want to let the user choose between more than two stylesheets you will need to come up with a different solution.

I wouldn’t call myself a PHP expert by any means, so if you think my code could be improved in any way, please let me know.

To switch styles, all you need to do is activate the link to the styleswitcher. As you may have noticed if you have tried that, the URL that invokes the styleswitcher is always the same: /styleswitch/. The link leads to a php file that looks like this:

1. <?php


2. $layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "main" : "zoom";


3. setcookie("layout", $layout, time()+31536000, '/');


4. $ref = (isset($_SERVER['HTTP_REFERER'])) ? $_SERVER['HTTP_REFERER'] : "http://{$_SERVER['SERVER_NAME']}/";


5. header("Location: $ref");


6. ?>
   

Here’s what happens, line by line:

• Line 2: If the layout cookie exists (the browser has been here before) and has the value “zoom” (the user has switched to Zoom layout), $layout is set to “main”. Otherwise $layout is set to “zoom” (the browser doesn’t accept cookies, the style switcher has not been used with this browser, or the user has switched to Normal layout). Note that “main” and “zoom” are the file names (except for the .css extension) used for the respective styles. Change these values to match your file names.


• Line 3: The value of $layout is stored in a cookie.


• Line 4: If a referer header exists, its value is stored in $ref. If it doesn’t exist, $ref is set to “http://{$_SERVER[‘SERVER_NAME’]}/” as a backup to redirect the browser to the home page.


• Line 5: The browser is redirected to the URL stored in $ref.
  

On all pages a check is performed to decide which stylesheet to load:

1. <?php


2. $layout = (isset($_COOKIE['layout']) && ($_COOKIE['layout'] == "zoom")) ? "zoom" : "main";


3. ?>
   

If a cookie exists and its value is “zoom”, $layout is set to “zoom”. Otherwise, $layout is set to “main”. At this point $layout contains the name of the CSS file that should be loaded.

Finally, when loading the main style sheet the value stored in $layout is inserted instead of the file name in the @import path:

1. <style type="text/css" media="screen,projection">


2. @import '/css/<?php echo $layout; ?>.css';


3. </style>
   

And that’s it. Use it, spread it, improve it.

Download

Want to watch FLV files on your desktop? Then Click Here to download the desktop FLV player by LongTail.TV. FREE Download!

Documentation

1. All supported flashvars (variables) you can set to customize the player.
2. All supported playlist formats you can use, plus some implementation info.
3. A large list of all third-party plugins for the FLV Media Player.
   
4. A tutorial on embedding the player in your site.
5. A tutorial with all functions of the javascript API.
6. A tutorial on adding captions and an audiodescription (accessibility).
7. A tutorial on FLV encoding and video formats.

This is another coda slider built with jQuery (check YCodaSlider 2.0 - wrd post). As the use of them are becoming common, it is better we have different choices.

To run this coda slider, along with jQuery you need the following plugins:

• scrollTo
• localScroll
• serialScroll
  

  Some features of this coda slider:

• Degrades perfectly without JavaScript enabled
• Hitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigation
• Any link on the page that refers back to a panel should trigger the effect and highlight the right navigation - this should happen without any extra work.

Besides the codes, you can find how this coda slider is built in detail.

Requirements: scrollTo, localScroll, serialScroll jQuery plugins
Compatibility: All Major Browsers
Website: http://jqueryfordesigners.com/coda-slider-effect/
Demo: http://jqueryfordesigners.com/demo/coda-slider.html

More PNG Icones Downlodes click

More PNG Icones Downlodes click

More PNG Icones Downlodes click

More PNG Icones Downlodes click

More PNG Icones Downlodes click

More PNG Icones Downlodes click

More PNG Icones Downlodes click

This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. I had seen a similar looking feature on the mootools homepage and set out the replicate the functionality as a standalone script and as lightweight as possible. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.

The front-end markup for the script is a simple unordered list as in the example below…

<ul id="sm" class="sm">

<li><img src="images/1.gif" alt="" /></li>

<li><img src="images/2.gif" alt="" /></li>

<li><img src="images/3.gif" alt="" /></li>

<li><img src="images/4.gif" alt="" /></li>

</ul>

To build the accordion call the function below onload…

slideMenu.build('sm',200,10,10,1)

The first parameter is the id of the unordered list you would like to bind the accordion to. The second is the width you would like the accordion selection to expand to. The third is the timeout variable to control how quickly the sliding function is called. The fourth is the speed of the accordion with 1 being the fastest. The last is optional and is the integer that corresponds to the section you would like to be expanded when the accordion is loaded.

This script has been tested working in IE6, IE7, Firefox, Opera, and Safari. Please send any bug reports or questions to michael@leigeber.com. Feel free to use the script for any personal or commercial projects.

Click here to download the original script.

Click here to download the script that collapses onmouseout.

This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”. The markup for the script is very simple as below…

<div class="menu">

<ul id="menu">

<li><a href="#">JavaScript</a></li>

<li><a href="#">Graphic Design</a></li>

<li><a href="#">HTML</a></li>

<li value="1"><a href="#">User Interface</a></li>

<li><a href="#">CSS</a></li>

</ul>

<div id="slide"></div>

</div>

In the above code the default menu selection is identified by the value=”1″ attribute on the appropriate list item. To initialize the script simply call the function as below…

menuSlider.init('menu','slide')

The first variable is the id of the unordered list and the second is the id of the slider div. This script has been tested in IE6, IE7, FireFox, Opera and Safari. Please send any bug reports to michael@leigeber.com. This code is free to use for any personal or commercial projects.

Click here to download the script.

The JW Image Rotator is a Flash image rotator which enables presenting photos in sequence, with fluid transitions between them.

It supports rotation of an RSS, XSPF or ASX playlists with JPG, GIF and PNG images, a wide range of flashvars for tweaking the behavior and appearance.

Besides the flashvars, one great feature of JW Image Rotator is its JavaScript API which gives the control of the rotator totally to you.

There is an online setup wizard which generates the embed file for you for an easy startup.

2. Brand Spanking New (www.brandspankingnew.net/archive/2006/12/hohoho.htm)

3. Greyscale (www.e-lusion.com/design/greyscale/)

4. Drunky Love (http://www.el73.be/drunkey-love/downloa

ds)

5. Strawbee (www.strawbee.com)

6. N Design (www.ndesign-studio.com)

7. Sweetie (www.sweetie.sublink.ca/)

8.Fast Icons (www.fasticon.com/freeware/)

9. ASP NET Icons (www.aspneticons.com/)

10. Two Tone Icons (www.2pt3.com/news/twotone-icons-for-free/)

11. Website Icons www.websiteicons.com/tab/FREE_Pixel_icons)

12. Pinvoke (www.pinvoke.com/)

13. BS-Markup (www.bs-markup.de/iconsets)

14. Glyph Lab (www.glyphlab.com/)

15. Website Icons (www.websiteicons.net)

and the rest…

16 Spheres Icons (http://mouserunner.com/Spheres_ColoCons1_Free_Icons.html)

17. Exploding Boy (http://www.exploding-boy.com/2005/09/13/explodingboy-pixel-icons/

18. Bitcons (http://somerandomdude.net/srd-projects/bitcons/)

19. Beauticons (http://www.beauticons.com.ar/icons.html)

20. Icon Kits (http://iconkits.com/signup/)

21. Yellow Icons (http://yellowicon.com/downloads/)

22. Studio Twenty Eight (http://www.studiotwentyeight.com/icons.htm)

23. Vista Icons (Vista Icons)

24. Icon Base (http://www.iconbase.com/)

25. Yegor Gilyov (http://yegor.gilyov.com/free/