Posts Tagged "resources"

Free Vectors — Social Networking Icons (10 Colors/2 Styles)

Included are 21 social networking icons, in 2 different styles, with 10 color variations total. So in short, it’s a lot of icons! One of the styles is more glossy/gradient-y, and one of the styles is flat. Also, the download includes both CS & CS3 files.

Read More

Streaks of Light: 40 High Resolution Photoshop Brushes

Today, I am releasing one of my favorite sets of brushes to date; a set of 40 high resolution Photoshop brushes for creating streaks of light. It seems like each set of light effect brushes I make get better and better. This set is really amazing and I hope that you enjoy them!

Read More

Free Texture Tuesday: Bokeh

A set of 5 bright and colorful high resolution bokeh textures.

Read More

Abstract 3D Renders Pack – 33 Free Images

This abstract render pack comes filled with 33 images of 3D abstract renders. All the images are in PNG format with transparent backgrounds. For the adventurers out there, we have also included two of the 3ds Max files that this pack was created with!

Read More

108 Mono Icons: Huge Set of Minimal Icons

There are 108 simple icons included in this set. The icons are avaliable in 32×32 px .png (transparent background) format.

Read More

330 Free Letter Pressed Icons

A collection of over a 100 letter pressed icons, in various letter pressed styles exclusive to Creative Nerds readers. The icons include three PSD files which are full of icons which you can drag and drop into your designs.

Read More

5 Free Tape Brushes

Tape is often used to hold things together or fix broken items. That being said, I don’t think these brushes will fix a bad design, but they will surely add a nice touch to hand drawn styles and anything else you find them useful for. Each brush measures around 2500 pixels.

Read More

HTML5 Visual Cheat Sheet (Reloaded)

This cheat sheet is essentially a simple visual grid that contains a list of all HTML tags and of their related attributes supported by HTML 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

Read More

Design Cartons Free Icon Set For Designers

Here are 5 high quality icons of boxes/cartons that you can use to announce the launch of a new application or on your portfolio websites. There is plenty of space to add your own flavor to the graphics like your name, important dates, blog names, app names etc.

Read More

Tipz — Free WordPress Theme

A free WordPress theme from Alex at Crazy Leaf Design featuring widget ready areas, 3 columns, 2 sidebars (right and left), featured post section with featured image custom field, integrated logo changer (text or image).

Read More

Free Vector Icons: Panda Social Network Icons

A free package containing 12 sweet panda animals, 128×128 pixels each, that have social network marks on their stomach. You’ll get 12 .png files and 1 vector (.ai) file in case you need to rescale them (in Adobe Illustrator format).

Read More

Free Sketching & Wireframing Kit

Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

Read More

18 Stained Brown Paper Textures

A large set of high resolution stained brown paper textures.

Read More

11 Free Scaffolding Grunge Vectors & How-To

This set of 11 Free Scaffolding Grunge Vectors was specifically created with large print designs in mind, but they can be used in web projects too. It’s a common technique to slightly destroy large type in ads and other print campaigns.

If you are looking for a powerful file manager ready to use in your web projects and simple to customize, take a look at this list with the best and free file manager currently in circulation. Some of these file managers support PHP only or javascript only or Ajax that will give you powerful tool to easily browse directories and files on the server, search, upload and download files, edit, copy, move, delete files and more.

If you know other interesting resources about this topic please leave a comment!

1. AjaXplorer

AjaXplorer is a free Ajax file manager with an easy-to-install file explorer for remotely managing files on a web server. Its “rich client” layout and actions make it accessible to any end-user for a variety of purposes: file management/sharing, photo gallery, code browsing, etc. Only PHP (4 or 5) is necessary, no database needed.

• Rename/Copy/Move/Delete/Download files or folders
• Upload multiple files and track status with progress bar (Flash required and no https)
• Create folders and empty files
• Edit Text files and code files (js, php, html, java, sql, perl), syntax is highlighted in the editor
• View Images online, preview images in the list, diaporama of a given folder
• Listen to MP3sonline without downloading them
• View Flash videos (FLV) online and full screen.
• Browse and Extract ZIP files online

2. fileNice

fileNice is a free php file browser, particularly useful if you have a ‘dump’ folder on your server where you regularly upload files and you want to be able to see what’s there.

3. File Thingie

File Thingie is a small web-based file manager written in PHP. It is intended for those who need to give others access to a part of their server’s file system when FTP is not practical. Through File Thingie you and your users get access to the most common functions:

• Simple — Just one file
• Upload multiple files at once
• Multiple users and user groups
• Create subdirectories
• Rename, move, delete and copy files and folders
• Search for file and folder names
• Control access to files based on black- or whitelists
• Edit text files
• Unzip files without downloading
• Easy customization of the CSS based layout
• Translate into your own language

4. MooTools based FileManager

A MooTools based File-Manager for the web that allows you to (pre)view, upload and modify files and folders via the browser. Features include:

• Browse through Files and Folders on your Server
• Rename, Delete, Move (Drag&Drop), Copy (Drag + hold CTRL) and Download Files
• View detailed Previews of Images, Text-Files, Compressed-Files or Audio Content
• Nice User Interface
• Upload Files via FancyUpload (integrated Feature)
• Option to automatically resize big Images when uploading
• Use it to select a File anywhere you need to specify one inside your Application’s Backend
• Use as a FileManager in TinyMCE

5. Relay

Relay is a wonderful piece of ajax code written with the aid of the prototype ajax toolkit. It does a wonderful job of uploading / downloading and managing files on your private server, let’s check out some of its features:

• drag-n-drop files and folders
• dynamic loading file structure
• upload progress bar
• thumbnail view, including pdf
• multiple users & accounts

6. Kae’s File Manager

KFM is an online file manager which can be used on its own, or as a plugin for a rich-text editor such as FCKeditor or TinyMCE. KFM is Open Source, and you are free to use it in any project, whether free or commercial. Let’s check out some of its features: drag-and-drop everything, icon-view, list-view, plugins, image manipulations, slideshows, easy installation and upgrades, syntax-highlighting text editor, search engine, tagging, multi-lingual. plugins for mp3 playback, video playback.

7. eXtplorer

eXtplorer is a web-based File Manager. You can use it to. Features include:

• browse directories & files on the server and
• edit, copy, move, delete files,
• search, upload and download files,
• create and extract archives,
• create new files and directories,
• change file permissions (chmod) and much more…

WordPress awesomeness lies in its fact that it can be customized to power any type of site you like! But what happens when you combine the power of javascript with WordPress, the possibilities are infinite. This article will share 10 great practices, examples & Plugins for using the most popular Javascript frameworks out there to spice up your WordPress theme.

1. Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+

Learn how to implement a Nice & CleanSliding Panel in WordPress 2.7+ using jQuery. If user didn’t log in or register yet, we will show the login and register forms in the sliding panel with a short Welcome Message:

2. jBreadCrumb

jBreadCrumb is a jQuery plugin for displaying breadcrumb navigations in a more flexible & smarter way. The length of a breadcrumb menu may be very long, jBreadCrumb is a great solution for this issue. It creates a collapsible interface that smartly decides the display method according to the amount and length of the elements.

Learn how to create this navigation technique, and display it on our posts, pages and categories archives in your WordPress theme. You can also use this great plugin or this interesting one to automatically create breadcrumbs in your blog.

3. Sliding Boxes and Captions with jQuery

The basic idea of the sliding box animations is very simple. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect. I can see this script works great for a CSS gallery, really interesting.

4. How To Create An Amazing jQuery Style Switcher

Add a nice style switcher using jQuery and PHP. The end result will be an unobtrusive & entirely degradable dynamic style switcher which will be quick and easy to implement.

5. Styling Buttons and Toolbars with the jQuery UI CSS Framework

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Creating a basic button is very simple with the jQuery UI CSS framework and styling it is really easy. All you need to do is add the default “clickable” state by assigning the class ui-state-default. We also want these to have rounded corners, so we added the optional ui-corner-all framework class which adds CSS3 corner-radius properties to all corners without the need for any images or extra markup.

6. MooTools Link Nudging

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Link nudging is the process of adjusting the padding on a link slightly to show a simple, tasteful “jump” when you place your mouse over a link. The effect is magnified when mousing on and off a link quickly.

7. jQuery (mb)Menu 1.5

This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.

There are many tutorials out there for creating a WordPress drop down menues. You might want to check here and there.

8. Fantastic News Ticker Newsvine-like using Mootools

This tutorial explains how to implement a News Ticker, with news vertical scrolling, using mootools. It’s very simple and quick to implement in your blog. I can see this very useful if you are having a news submission are on your website and want to display your user’s contributed links in a nice and fancy way in your sidebar.

9. Snazzy Archives

Snazzy Archives is a visualization plugin for your WordPress site featuring an unique way to display all your posts. You can select different layouts and special effects. Main features of Snazzy Archives are: Unique visual presentation of blog posts, Will work out of the box with all features, Posts are scanned for images and youtube videos and shown together with number of comments, Different editable layouts (HTML and CSS), Special effects using jQuery and more.

10. J Post Slider

Show your post in fancy jQuery box, rotating images, with show-up text box with post description. Mousover stop the animation, and user can click on post link anytime.

The User experience has dramatically improved over the past few years, resulting in rich and responsive user interface. AJAX, javascript and CSS are widely used to offer users the dynamic interaction that they have come to expect from advanced, sophisticated, professional solutions.

There’s a lot of powerful interactivity you can bring to your site to spice up just about any web page using one of the most powerful and modular javascript libraries—MooTools! It’s important to note that small and useful features can cleverly deal with hiding and showing important information in non-traditional ways.

Today, we will have a look at 20 creative techniques using MooTools javascript framework for rich UI in modern day websites.

1. Show/hide a nice Login Panel using Mootools 1.2

In this tutorial, we will see how to create a show/hide login panel on top of your page using Mootools 1.2.

2. MooGenda

MooGenda is a javascript calendar based on MooTools, that reads events from JSON requests. MooGenda supports double click on event to see the deafult event view, drag and drop event in month view, every change send a request to back end, to store when and what changed in the event.

Check out the demo here

3. Morph Effect on mouseenter/mouseleave with Mootools 1.2

In this tutorial, we will see how to add some amazing effects to an unordered list on mouseover with the Element Method: morph and to make the whole list item region clickable with Mootools 1.2. The goal is to take a boring unordered list and to turn it into something fun to click.

Check out the demo here

4. Create a Simple, Powerful Product Highlighter with MooTools

Create a flexible tool for highlighting your sites products or services using the MooTools javascript framework. Also, learn some of the many reasons why MooTools just might be the right javascript library for all of your future projects!

Check out the demo here

5. Jazz Up Your Forms With MooTools Pt. 1

A MooTools and contact forms with animated field highlighting, displaying/hiding instructions for each input field, live comment previewing and auto-resizing of both the comment preview and it’s corresponding textarea input.

Check out the demo here

6. Mootools CSS Styled Scrollbar

A small piece of javascript that creates a css styled scrollbar from the Mootools (version 1.2b2) Slider class. The example page shows three div elements with a styled horizontal and/or vertical scrollbars.

Check out the demo here

7. Delayed Image Preloading Using Mootools

There are possible scenarios that need image preloading. Most browsers only allow two concurrent requests at the same time to the same domain. When we do the image preloading on domready, it might hold up other resources that need to be loaded. Because we preload images that are not shown when the page loads, we can delay the preloading.

Array.each.delay(3000,this,[
	['foo.gif', 'bar.png','moo.png','tools.png', 'mootools.png'],
	function(src){var img = new Image();img.src = src;}
]);

8. Facebook-Style Modal Box Using MooTools

David Walsh took facebook’s imagery and CSS and combined it with MooTools’ awesome functionality to duplicate the effect of Facebook’s Modal box.

Check out the demo here

9. OmniGrid

The OmniGrid component is inspired by two similar components: FlexGrid jQuery and phatfusion:sortableTable and partly uses their source code.

Check out the demo here

10. MooTools Flashlight Effect

A nice neat effect inspired by the jQuery version found here.

Check out the demo here

11. FormCheck

FormCheck is a class that allows you to perform different tests on form to validate them before submission. FormCheck is lightweight, shiny and fast, supports skins (using CSS), 10 different languages, and shows errors as tips. It support basic validation (required, alpha, digit, alpanu, lenght, confirm…), regex validation (phone, email, url) and a lot of options that allow you to customize this class to fit exactly as you want.

Check out the demo here

12. Fancy Upload

FancyUpload is a file-input replacement which features an unobtrusive, multiple-file selection menu and queued upload with an animated progress bar. It is easy to setup, is server independent, completely styleable via CSS and XHTML and uses MooTools to work in all modern browsers.

Check out the demo here

13. AutoCompleter

This AutoCompleter script for MooTools provides the functionality for text suggestion and completion. It features different data-sources (local, JSON or XML), a variety of user interactions, custom formatting, multiple selection, animations and much more.

Check out the demo here

14. Fantastic News Ticker Newsvine-like using Mootools

This tutorial explains how to implement a Newsvine News Ticker, with news vertical scrolling, using mootools. It’s very simple and quick to implement in your web projects.

Check out the demo here

15. mParallax

mParallax is a MooTools implementation of the popular jQuery plugin: jParallax. “jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way”. You can create parallax effects while having the option to customize various settings.

Check out the demo here

16. BySlideMenu

BySlideMenu is a plugin for Mootools which allow you to easily create a beautiful accordion menu (sliding menu) on any element you want (ul/li, div, p …) using images and/or text. You have the option to create it vertically or horizontally, the container width/height can be adjusted automatically, Menu can be pinned or not, by mouseover or click and with Overflow support.

Check out the demos here

17. mooCSSChart

Create animated Bar Charts using the MooTools.

Check out the demos here

18. MavSelectBox

MavSelectBox is a simple-to-use form select replacement that allows for better customization. MavSelectBox mimics the GUI interactions of a normal select element as much as possible. Up and down arrows move the selection, tabbing to it and hitting alt+down shows the menu, tabbing to it and simply hitting up or down selects the next available option in that direction, focusing then start typing and the option that matches what you are typing is selected, enter selects, esc closes, and so on.

Check out the demos here

19. A Better Pagination

It is only a little script that can turn your ugly looking numbers into a nice looking Slider using MooTools. The script only contains a little fix for the Slider in mootools-more so the “knob” doesn’t jump around when clicking it and is also packed up a little example in PHP to see how you can integrate this script in your blog easily.

Check out the demos here

20. SlideItMoo

SlideItMoo is a MooTools 1.2 JavaScript plugin for sliding images, browser friendly and nicely degradable. All CSS styling is external. The plugin can slide the images from your photo gallery either by clicking the back – forward buttons or by mouse wheel. It supports continuous sliding when navigating, offers the possibility to set how the slider will slide ( from left or from right ) when used with the auto slide feature on, offers the possibility to give it the item width ( width of the slider’s items ) and let it display the elements according to that width and the visible items parameter.

Check out the demos here

Must Read Mootools Tutorials

– 30 Days of MooTools Tutorials

These tutorials will assume no previous Mootools or JavaScript experience, but will require basic knowledge of html and CSS.