Post Top Ad

Post Top Ad

Monday, June 30, 2008

10:40 PM

Use Flickr’s Image Uploader On Your Website

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/

Friday, June 27, 2008

Thursday, June 26, 2008

10:37 PM

Free Web Development Icons From Icojoy

Icojoy has beautiful free icon sets including web development icon sets, pixel icon sets, rss icon sets & smiley icons.

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/

Wednesday, June 25, 2008

Tuesday, June 24, 2008

10:15 PM

Mootools Slideshow Script: BarackSlideshow

BarackSlideshow is a Mootools slideshow script with a simple & nice interface (which is very similar to the one in Barack Obama’s website & this is where the name comes from).


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.

Requirements: Mootools 1.2+, Assets component
Compatibility: All Major Browsers
Website: http://devthought.com/barackslideshow-an-elegant-lig...
Demo: http://devthought.com/wp-content/moogets/BarackSlide...

Saturday, June 21, 2008

11:15 PM

JavaScript Image Tools: Zoom-Magnify-Thumb

Magic Toolbox is a set of JavaScript image effect solutions.

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...

10:40 PM

Flash XML Accordion Menu: FameID Menu

FameID Menu is an advanced Flash accordion menu.

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...

Friday, June 20, 2008

10:39 PM

Handsome Flash - XML News Slider

This is a very good looking Flash news slider (AS3 code) which uses XML for fetching the data.

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/

9:59 PM

Beautiful Vector Resources From DaPino

DaPino is a blog that presents beautiful free vector images created by Pien.
You can find lots of different vector resources from birthday cards to price tags, badges, human figures & more.
This great design resource is updated regulary and you can find new vectors almost everyday.

Here are few examples from DaPino:

Vector love flowers:

Some vector design elements:
Vector wooden labels:

DaPino is definitely a must bookmark for every designer to find new things everyday for using them and to get inspired.
Website: http://www.dapino-colada.nl
10:45 AM

Open Source Web Application Firewall: ModSecurity


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

Thursday, June 19, 2008

10:32 PM

Photoshop plug-in


Exposure 2 is the new, even more feature-packed version of our award-winning Photoshop plug-in that gives digital photographs the look and feel of film. Whether you’re a fashion or wedding photographer, a designer or art director, with Exposure 2 you’ll have one-click access to the broadest range of film stocks and special effects settings available in any software package. That’s why Exposure 2 is the closest thing to film since film.

Exposure 2 is the new, even more feature-packed version of our award-winning Photoshop plug-in that gives digital photographs the look and feel of film. Whether you’re a fashion or wedding photographer, a designer or art director, with Exposure 2 you’ll have one-click access to the broadest range of film stocks and special effects settings available in any software package. That’s why Exposure 2 is the closest thing to film since film.

Pick a film, any film. When it comes to the variety of films you can simulate, Exposure 2 has no peer. You can match the look of popular film stocks like Portra, Velvia, Kodachrome, Polaroid, and TRI-X. We’ve even saved some films from extinction in Exposure 2, like Agfa Scala, GAF 500, and Kodak EES.
It all comes down to grain. Exposure 2 gives you the most realistic grain on the market, now with even more control over sharpness, color variation, and intensity throughout the tonal range. And since Exposure 2’s grain size automatically adjusts to your image size, you get consistent results across all of your cameras.

More effective effects. With over 300 presets, Exposure 2 has even more special effects settings than before, including push and cross processing, a vastly improved infrared simulator, and sophisticated color to black and white conversion.
So easy to use. Exposure 2 simplifies your workflow by collecting color, dynamic range, softness, and grain control into one easy-to-use plug-in. Correct a colorcast, soften a digital portrait, or tweak contrast with our powerful slider and curve controls. Or even define your signature look and save it as a one-click effect.

10:27 PM

Dreamweaver CS3 Bible



Learn to create dynamic, data-driven Web sites using the exciting enhancements in the Dreamweaver CS3 version. You get a thorough understanding of the basics and then progress to learning how to produce pages with pizzazz, connect to live databases, integrate with Flash and Photoshop, use advanced technologies like Spry and Ajax, incorporate Flash, Shockwave, QuickTime, and WAV files, import Photoshop files directly into Dreamweaver, and enjoy Web success.

To use this book, you need only two items: the Dreamweaver software and a desire to make cutting-edge Web pages. (If you don’t have Dreamweaver, you can download a trial copy from www.adobe.com.) From quick design prototyping to ongoing Web site management, Dreamweaver automates and simplifies much of a Webmaster’s workload. Dreamweaver is not only the first Web authoring tool to bring the ease of visual editing to an HTML-code–oriented world, it also brings a point-and-click interface to complex coding whether server-side or client-side. The Dreamweaver CS3 Bible is designed to help you master every nuance of the program.

Are you styling your pages and creating your layouts with CSS? Are you building multipage Web applications? Are you creating a straightforward layout with the visual editor? Do you need to extend Dreamweaver’s capabilities by building your own custom objects? With Dreamweaver and this book, you can weave your dreams into reality for the entire world to experience.

Dreamweaver CS3 Bible can take you from raw beginner to full-fledged professional if read cover to cover. However, you’re more likely to read each section as needed, taking the necessary information and coming back later. To facilitate this approach, Dreamweaver CS3 Bible is divided into seven major task-oriented parts. After you’re familiar with Dreamweaver, feel free to skip around the book, using it as a reference guide as you increase your own knowledge base.

TABLE OF CONTENT:
Part 1 - Laying the Groundwork in Dreamweaver CS3
Part 2 - Designing and Crafting Core Pages
Part 3 - Adding Advanced Design Features
Part 4 - Incorporating Dynamic Data
Part 5 - Including Multimedia Elements
Part 6 - Enhancing Productivity and Web Site Management
Part 7 - Extending Dreamweaver
Part 8 - Appendix

Wednesday, June 18, 2008

11:02 PM

Lightbox Scripts Comparison Matrix


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/

12:25 AM

Form Elements Images For Realistic Designing

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...

Tuesday, June 17, 2008

Monday, June 16, 2008

2:21 AM

Adobe Photoshop CS3: Top 100 Simplified Tips & Tricks


Adobe Photoshop CS3: Top 100 Simplified Tips & Tricks
Sept 11, 2007 | 256 Pages | PDF | 30.8 MB | RS

Photoshop: Top 100 Simplified Tips & Tricks
provides adventurous Photoshop users with a visual reference on how to use the bells and whistles found in the latest version of Photoshop. Broken out in 10 chapters, with 10 tasks per chapter, Photoshop: Top 100 Simplified Tips & Tricks covers 100 cool and useful tips and tricks that can be performed in the newest release of Photoshop. Full-color screen shots and numbered, step-by-step instructions show you how to take their Photoshop skills to new heights. Order the latest edition today and make your pictures pop.


2:01 AM

Digital Film Tools Light 3.5 For Photoshop

Light can be added to a scene where none existed before just as if you were adding light at the time of shooting. Realistic lighting and shadow is introduced using the entire pattern/ gobo library.

Features :

GAM PATTERN LIBRARY | Normally used in front of lights during photography, these same exact patterns can now be applied digitally to the entire image or inside a selection. There are 567 patterns to choose from including blendables, breakups, Christmas, cityscapes and towns, clouds, fences and openings, fire and water, flags, flowers, foliage, holidays and symbols, moons, natural elements, religion, signage, sky and stars, spirals, spotlights and pinspots, stones and brick, structures and sets, themes, trees, vignettes and windows

GAMCOLOR GELS | Photographers, cinematographers and lighting designers use colored filters or gels in front of lights. Whether they want to create a romantic moonlit setting or a vicious, angry fight, they have the colors they need to achieve the effect. Digital equivalents of the lighting gels created by GAMPRODUCTS, INC. can now be applied to your light source.The GamColor system divides the visible spectrum into nine color sections convenient to the lighting designer. It is a circular classification of colors by hue, referencing the primaries, secondaries and important subdivisions.

The GamColor gels are arranged according to this system, making it easy to locate any color in a logical manner. For detailed information about GAM Patterns and Gels, you can visit their website at www.gamonline.com.

MIST, FOG, GLOW | Light! can also simulate popular glass camera filters like Mist and Fog filters as well as glow effects. Fog is simulated by providing a soft, misty atmosphere over selected parts of the image.


12:06 AM

Open Source Coldfusion CMS: Sava


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/

Sunday, June 15, 2008

1:29 PM

Web 2.0 Generators

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.

I hope you enjoyed reading this article.
12:01 AM

Testing And Debugging Tools For IE

IETester is a free web browser allowing you to browse websites with the JavaScript & rendering engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

You can also find a very nice tool for Internet Explorer named Debug Bar which includes a toolbar and a development bar + a IE JavaScript debugger named Companion.js inside the same website.

Requirements: Windows Vista or Windows XP with IE7
Website: http://www.my-debugbar.com/wiki/IETester/HomePage

Saturday, June 14, 2008

1:10 AM

Sliding Top Menu With jQuery

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 .

Downlode:

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

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.

Friday, June 13, 2008

11:54 PM

Mootools Ajax Calendar (Vista-Like)

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.


The calendar and datepicker have several options for styling and formating them to fit your needs. All properties are optional and reside in a JavaScript object.

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...
11:54 PM

Free Online Radio Application: iRadeo


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

Thursday, June 12, 2008

11:39 PM

Quality Black And White Icons: bwpx.icns


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-...

1:25 PM

8 Ajax Lightbox Scripts

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.
12:54 PM

Free Glossy Blogging Icons Set for Bloggers

After weeks of development, we are happy to announce the release of “Blogging Icons Set” specifically designed for bloggers. There are total 12 shiny and modern icons for your blogs. It comes with 3 sizes, 24×24, 36×36 and 48×48 in png format. Blogging Icons Set is released under Creative Commons License, please feel free to use it on your personal and commercial projects. If you love them, please digg, stumble or link to this article. Spread it like wild fire now.


Download Blogging Icons Set Now
11:31 AM

Build your own PHP style sheet switcher

Want to have a style switcher that lets your site’s visitors choose a different style sheet? Want it to work even if there is no JavaScript support? The trick is to use a server-side language like PHP, which is what I use for my style switcher.

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.

10:10 AM

JW FLV MEDIA PLAYER 3.16

The JW FLV Media Player (built with Adobe's Flash) is an easy and flexible way to add video and audio to your website. It supports playback of any format the Adobe Flash Player can handle (FLV, but also MP3, H264, SWF, JPG, PNG and GIF). It also supports RTMP and HTTP (Lighttpd) streaming, RSS, XSPF and ASX playlists, a wide range of flashvars (variables), an extensive javascript API and accessibility features.

Download

You can download the player by clicking the button. It includes all the source files. A list of previous versions can be found below.
Down load click hear:


Documentation

The easiest way to get going with the FLV Media Player is by using the setup wizard. Select an example, set the file you want to play and copy-paste the embed code to your site! If you want to learn more, here's the complete documentation of the FLV Media Player:
  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.

Wednesday, June 11, 2008

11:05 PM

jQuery Coda Slider


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

Tuesday, June 10, 2008

10:52 PM

horizontal javascript accordion menu


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.

Monday, June 9, 2008

9:56 PM

sliding javascript menu highlight 1kb




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.

Sunday, June 8, 2008

10:40 PM

Flash Image Rotater: JW Image Rotator

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.

Flash Image Rotator

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.

9:26 AM

Top 25 Free Icon Resources for Web Designers