CSSRockstars

Archive for the ‘Goodies’ Category

Fotonotes is a collection of scripts for annotating images. Simply, it lets you add notes over images.

JavaScript Text On Images

With the help of a PHP file (supports PHP4 & PHP5), every note added to the images are stored in JPEG headers in XML format.

There is a very nice example on the website which you can try the code.

Download package includes classes for alternate storage strategies like databases.

  • Tags:
  • Filed under: Gallery
  • 0 Comments
  • inputEx is a javascript framework, built on the top of YUI, for creating forms and form objects.

    It uses no html (opposite of unobtrusive libraries): all the fields and forms are configured using JSON. It provides a very efficient abstraction for building interactive web applications.

    JavaScript Forms

    inputEx features:

    • json configuration for each field
    • complex data structures (list/objects/tree/list of urls/objects of objects etc…)
    • composition between the fields (for “meta”-fields such as InPlaceEdit,List,Tree,Pair,…)
    • javascript object mapping for greater interactivity
    • a common “updated” event to handle different browsers and different field interactions

    Fireworks.js is a JavaScript file which helps you create configurable fireworks effects in your website.

    Besides using it, it is also a nice example of JavaScript effects and script fired sounds to get inspired.

    JavaScript Fireworks

    This JavaScript uses SoundManager for script triggered sounds and supports different types of fireworks effects including the "exploding-disappearing" and "random explosions".

    Image processing is needed in almost every web application like creating watermarks, uploading & resizing avatars, cropping them & similar tasks.

    Asido is a feature-rich image processing class for PHP that fits to any environment like GD2, Magick Wand and Image Magick. It supports both PHP4 & PHP5 (newer versions support only PHP5).

    An example of adding a watermark to an image:

    PHP Image Watermark

    And the code:

    <?php
    include(’./../../asido/dev/class.asido.php’);
    asido::driver(’gd’);
    $i1 = asido::image(
          ‘the-source-image.jpg’,
          ‘filename-with-which-you-want-to-save-the-result.png’
    );
    asido::watermark($i1, ‘put-the-watermark-image-here.png’);
    $i1->save(ASIDO_OVERWRITE_ENABLED);
    ?>

    It is really simple and clear.

    Asido can:

    • resize
    • watermark
    • rotate
    • copy
    • crop
    • grayscale
    • convert

    images with ease. To develop faster, Asido is worth a try.

    There are lots of JavaScript color pickers which work great but there are few which are similar to the Photoshop’s color picker.

    This JavaScript color picker has HSB and RGB options, uses Prototype and compatible with all major browsers.

    JavaScript Color Picker

    This script can be a solution for users who are looking for an advanced color picker in their applications.

    JSGallery is a very nice AJAX image gallery built with Mootools.

    Look & effects of the script is configurable. It supports browsing with keyboard between images and also pages.

    Mootools Image Gallery

    Features of this AJAX gallery:

    • nice transitions for page change, image select, etc.
    • supports easy to build no-script version
    • preloads images with separate indicators (optional)
    • a bunch of options to change the default styles and bevaviours
    • visibility of prev/next handles is controlled by mouse distance
    • use the arrow keys to go to previous/next image
    • use number keys to go to a certain page (beginning with 1)
    • prevents too fast change of images (ugly effect interruption)

    There are several options for creating rounded corners like: with one image, four images, javascript and plain CSS (and more).

    Ask The CSS Guy puts the CSS rounded corners used in Google Analytics under scrutiny.

    CSS Rounded Corners

    The technique works by leaving a 1px notch in every corner which creates the rounded corner effect .

    This is definitely a nice way of creating rounded corners as it is always more flexible working with CSS rather than static images.

    Few posts ago, we had mentioned SoundManager (WRD post link), a JavaScript API for controlling Flash sounds.

    MooSound is a very similar API for MooTools (thanks to Ruslan for suggesting the resource).

    MooSound Flash Sound API

    MooSound’s poweful features let you reach almost every aspect of the flash sounds like:

    • start, stop, pause
    • ID3 information
    • Filesize
    • Loaded Bytes
    • Duration
    • Position
    • Setting the volume
    • Setting the pan
    • Jump to feature

    API is very well documented and a demo can be found at the homepage.

    Scrollovers is a way to quickly and easily add flair to your web pages, giving your users an experience they weren’t expecting.

    It is simply a JavaScript that helps creating rollover image-like links with text .

    Mouse Over Text Link

    How to use Scrollovers?

    Insert the scrollovers.js file to your web pages and create your links like this:

    <a href="[YOUR PAGE HERE]" class="scrollover" type="scrollover">[YOUR TEXT HERE]</a>

    And the last add the styles with the color palette of your preference like below:

    <style>
       a.scrollover {color: #557AFF;}
       a.scrollover em:first-line {color: #FF5B3C;}
    </style>

    And that’s it. 

    Mindquarry is a brilliant open source application to organize teams in means of documents, ideas and tasks. Shortly, their collaboration.

    This team collaboration application can be reached both from the browsers and from a desktop application.

    Document Management

    The strongest part of the application is document management.  It uses Subversion for document versioning and backup, supports file syncronization, collaborative editing and has notification system for the updates made within the documents.

    Document Management

    Wiki

    You can create wikis, assigns them to teams or tasks to manage the ideas and information. Updates made to the wiki content can be viewed within the activity timeline, pdf output can be generated and more.

    Wiki

    Team Management

    Teams are holding the user groups together. They can be assigned to tasks, have their own wikis and permission groups on documents, tasks..

    Team Management

    Task Management

    Mindquarry has a handy task management module where tasks can be created, assigned to users, priority levels and their status can be set.

    Task Management

    To mention, this is not a project management module and does not have milestones, resources, costs or chart features. It simply allows users to assign and control tasks (for a chance to win a great project management software license check the OneProject Project 8 giveaway).

    Conclusion

    If you are working in teams, need to share and work on documents together I believe Mindquarry can be a perfect fit as you will be able to:

    • Work on the same docs, have them versionned and backed up.
    • Create your own information or idea libraries with the wiki feature.
    • Assign tasks to each other.

    Application requires Apache, Java and Subversion to be installed. Desktop application has Windows, Mac and Linux versions which makes everything much better.

    Tip: Mindquarry has a XAMPP download in the downloads section that automatically installs Apache, Subversion and Perl to prepare the application environment.

    feed-holder
    FeedBurner
    • Gooey Templates
    • Krop
    • slice'n dice
    • Website Magazine
    • DNS Pinger
    • Advertise Here