Developer Snippets » ProtoType

Windows, Modals, LightBoxes and Tooltips for Prototype

admin — Tue, 05 Aug 2008 02:37:36 +0000

The Site LivePipe is very famous for its presentation of some of its high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each of its controls are well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. This site is actively maintained.

Event Oriented Programming:

It introduced a mechanism to create and observe events on any object, not just DOM Elements. This is used by all controls , and allows for fine grained control of your user interface.

As of now they have showcased so many controls like Tabs, Window, TextArea, SelectMultiple, Rating, ProgressBar, ScrollBar, ContextMenu. Just click and experience the world of good and efficient way of building widgets.

Just go through the Widgets which they have showcased perfectly and learn accordingly.

Recently they have showcased Window control which is awesome, this is Control.Window which is a fully programmable, multi purpose windowing toolkit for Prototype. It covers a wide variety of use cases and allows for a high degree of customization. It can attach to links to open the targets as windows, or can be filled with dynamic content. It includes support for stackable, draggable and resizable windows. Subclasses to handle Modal windows, LightBoxes and Tooltips are included.

We the Team won in Truveo Developer Challenge Contest – TechVideoBytes

admin — Fri, 01 Aug 2008 19:51:17 +0000

We are glad to announce that, we the Team (Developers Snippets – TechVideoBytes ) won a prize gift in Truveo Developer Challenge Contest and in this contest we stand in top 4th place. We would like to thank the Truveo Team for conducting this contest, this indeed helps us in developing good web applications and can show case the same to the entire Web World. We the Team is striving hard to showcase some useful stuff to the developer to develop their career in technology.

If you see, TechVideoBytes is completely a technology based website, which depicts the ease of highlighting video tutorials on various software tools and various programming languages. You can learn tools online without paying anything, yes! its absolutely free bucks. Just select your favorite keyword and on a click you can view the respective video playing on the other page, and on the page we are consolidating all the relative videos in respect to your keyword selected, if you would like know more about the TechVideoBytes just crawl into the website TechVideoBytes.

About the contest:
Here in this contest there are nine $10,000 first place winners, and the 20 $500 second place winners which are determined by the 5 categories of TopCoder Community Favorite. If you guys want to know more about this contest just jump into TopCoder

In the first place winners we stand in 4th place, and the categories includes Usage – 90, Innovation – 80, API – 80, AOL – 62, TC Rank – 94 and coming to over all Weighted Score is – 81.2

We are glad to bags this prize gift, and will strive hard to come up with other innovative web applications in coming future.

We had a crawl to all the websites which are listed in the prize winning list, we have many favorites websites which we liked the most is MapOfVideo , SVid , VideoBuzz the network of Wittysparks , VideoSearchBot . MapOfVideo has also got good features in the application which provided has got many other options by clicking on the respective spot and stands in 1st Position, SVid it has got featured all the categories in all aspects, which is awesome enough to see and stands in 2nd place, VideoBuzz has bagged in 14th position in the contest. This site has got good look and feel providing all the respective top videos, featured videos and upcoming videos related to Hollywood, Bollywood, Tollywood, Kollywood and more. It enjoys the same popularity and exposure of online bingo and other big-name websites, putting it on the verge of achieving an internet milestone. VideoSearchBot is an AIM bot for video search based on Truveo Video Search API. Just type the query and he will give you the video list with integrated links, which stands in 3rd position in $500 prize winner.

Finally! Kudos to all people who won prize gifts from Truveo.

Learn your favorite software in just a click – TechVideoBytes

admin — Fri, 18 Jul 2008 19:35:43 +0000

We the team at Developer Snippets (www.developersnippets.com ) glad to inform you that, we have launched a best online video search application where in which you can learn your favorite programming languages (or) can be familiar with upcoming designing tools (or) can view and listen what experts says in the online seminars and conferences (or) interviews with experts (or) useful advice from an expert and more can be viewed at one place.

Name of the application is Tech Video Bytes, and can be viewed at this location http://www.developersnippets.com/techvideobytes

Just click on the above link, this will take you to the awesome application where in which you have a liberty to search your favorite video and learn from the same at a single click.

Do you want to learn programming languages quickly and efficiently with out attending any private institutions by paying lot of bucks? By this application you can learn your favorite programming languages through Videos. And want to be familiar with designing tools like Adobe Photoshop, Adobe Flash, Adobe Aftereffects, 3D Studio Max, Maya and many more through this Video Search Application.

Do you want to listen to what experts says about the latest technologies and want to be in touch with latest technologies, yeah here is the right place to come in and search for your favorite video on particular seminar.

Best features ever to search your favorite video online:

Towards your left, we have placed a column for Categories, where in you can view many categories that we have listed as of now we have listed only few that we like most and useful for the developers and users. Just click on your favorite respective link, this will take you to the best filtered videos related to that link.For Example: If you click one Photoshop link in the left pane provided, it will show Photoshop related Video links with respective images in the center pane that is in the results pane. With Video Links and Images, description about the video is also provided. Just click on the respective video link you like, this will take you to the Video Page with your favorite video. In that way you can view the favorite video online without paying any bucks it�s all free!Below �All Categories � lists we have provided Related Channels and Related Tags , these sections will be automatically updated depending on your search results.Related Channels: This will show respective video channels
Related Tags: This will show up respective tags for your easy search.
Below the Header in the input box provided, enter your search criteria like for example, Enter Photoshop and click on the �Search Videos � button. This will filter all the search criteria and will displays all the respective results (that is Video Links, Respective Video Images and Descriptive text about the video).
Center Pane, This will depicts the search results. Above the search results, you can find your respective search criteria as a heading like if you enter �Photoshop � in the input box provided then it will display as �Photoshop � and below that number of the results found.
In a page we are showing only 15 video links, and if you want to navigate to the other results we have provided pagination functionality for your better navigation purposes.
Towards your right that is in the third column, we have placed �Featured Videos�, right now in the top we have displayed only Adobe related products and below that we have placed many featured videos this will be updated once in a week.In the featured video�s section, we have displayed the respective title of the Featured Video, below that respective image of the video and beside to that respective description and after that respective Category, Channel, Related Tags.
If you go to the video page (By clicking on the respective video links provided / the links which are filtered from the search criteria), the Video page will the respective video, as of now we have in the left pane we are listing all the respective Categories and will be adding other categories in upcoming days. And towards your right that right pane, under Featured Videos section, we have placed �Related Videos � depending on your search and below that respective Related Categories , Related Tags , and Related Channels depending on your search criteria will be automatically changes depending on your search criteria.

Above are the respective features which we have implemented as of now, we will be coming up with new features and new functionalities in the near future.

Place your Video for Free: If you want to place your video, we are glad to accept that but with one condition! Your video should be related to Technology, we mean related to Information Technology, which should be helpful to the end users. And even we promise that if the video is really helpful we will showcase that in the front page of Developer Snippets and as well in the Tech Video Bytes page. In this way you can promote your valuable website through our site.

To send in your respective videos, just draft a mail with all your details and video link (or) video which should be less than 10MB.

Just add �Video :<< Video Title>> | <> | <> � to mail SUBJECT line and sending in to vivekananda_ind@yahoo.com , by looking at the subject line. May have a chance to delete your mail if you have not mentioned the subject line properly as depicted above.

Here is a request from our Team; please let us know your valuable feedback about this application, and help us in growing. If you guys want to add more functionalities to the application, please do inform us and write into us at vivekananda_ind@yahoo.com

Link to the Site: http://www.developersnippets.com/techvideobytes

Awesome enough Slide Shows developed using jQuery, Ajax, Prototype.js, Ext.js, Lightbox JS, Mootools, YUI

admin — Sun, 01 Jul 2007 12:35:55 +0000

Hi Folks out there, Hmm… I am back again with some useful stuff where you guys can enjoy, I came up with some awesome slide shows which the web world is using. These slides shows are developed using Ajax, Prototype.js, jQuery, Ext.js, Lightbox JS v2.0, mootools v1.0,YUI, etc., I grabbed only 10 screen shots and listed some of the valuable sites where you can find valuable and awesome slide shows, so guys what are you waiting for come and enjoy with these scripts.

1. JonDesign’s SmoothGallery
(Web Site: http://smoothgallery.jondesign.net/showcase/manual-slideshow/ )

What is it ?
Using mootools v1.0, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading…) image galleries, slideshows, showcases and other cool stuff on your website…

Some of you might have heard of JonDesign’s SmoothSlideshow. SmoothGallery is its evolution.

So, what is so cool about it ?
Unlike other systems out there, JonDesign’s SmoothGallery is designed from the ground up to be standard compliant: You can feed it from any document, using custom css selectors.
And even better, this solutions is very lightweight: The javascript file is only 16kb.

2. huddletogether.com – Lightbox2
(WebSite: http://www.huddletogether.com/projects/lightbox2/ )

Overview

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

What’s New in Version 2
Image Sets: group related images and navigate through them with ease
Visual Effects: fancy pants transitions
Backwards Compatibility: yes!

3. ThickBox3
(WebSite: http://jquery.com/demo/thickbox/ )

ThickBox3 : ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal .

4. TripTracker slideshow
(WebSite: http://slideshow.triptracker.net/ )

The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature. To see the script in action , The viewer is free to use in personal or commercial web pages, provided that the script is not sold or exchanged for profit. An unbranded version of the slideshow, suitable also for resale, may be purchased for a one-time per-site license fee.

5. Couloir – JS slideshow:
(WebSite: http://www.couloir.org/js_slideshow/ )

This photo slideshow is a demonstration of Flash-like behavior implemented solely in Javascript, HTML, and CSS. The code is offered as-is — Couloir.org offers no technical support. However, you are permitted to use it on your own project so long as you do so according to the rules outlined in the Creative Commons ‘Attribution-ShareAlike 2.0′ License and the license terms contained in the associated, third-party APIs.

6. interface.evecon.ro
(WebSite:http://interface.eyecon.ro/demos/slideshow.html )

SlideShow

Creates an image slideshow. The slideshow can autoplay slides, each image can have caption, navigation links: next, prev, each slide. A page may have more then one slideshow, eachone working independently. Each slide can be bookmarked. The source images can be defined by JavaScript in slideshow options or by HTML placing images inside container.

7. Madb – SlideShow
(WebSite: http://www.madb.net/slideshow/ )

A flexible slideshow

This slideshow is based on YUI, Yahoo’s javascript library. I wanted to add a slideshow to the presentation site of MyOwnDB and hoped to find a simple widget that let me load slides on demand, and accepts HTML slides. As I didn’t immediately find what I wanted, I started to experiment. I learnt a lot, and the result is a slideshow that lets you

choose transition effect
easily develop new transition effects
define the slides in the page or choose to load on demand

8. flickrshow
(WebSite:http://www.flickrshow.com/ )

flickrshow provides you with the simplest way of displaying your Flickr photosets on your own website. It is simple to install, completely free and doesn’t require Flash or any server side programming knowledge. Generate your own code and install your own flickrshow now!

We developed flickrshow because it was a tool we needed. The focus is on simplicity and ease of use, so many features in more bloated software are not included. The following is a run down of all the things we did think were important.

Unobtrusive and compatible: we built flickrshow on top of Prototype so it will work with all modern browsers and won’t interfere with any other Javascript on your page.
Themeable to match your site: I like blue, you like green, he likes pink. You can alter the colour of flickrshow to match your site.

Can be used multiple times: it caused a number of headaches, but you can run as many slideshows on your site as you want, as long as your viewers can handle the loading times.

9. AJAX Feed API Slide Show Control
(WebSite:http://googleajaxsearchapi.blogspot.com/2007/05/ajax-feed-api-slide-show-control.html )

This afternoon we extended the AJAX Feed API with a new Slide Show Control . This control allows you to easily embed a slide show of images from PhotoBucket , Flickr , Picasa Web Albums , or any feed that uses the Media RSS extensions.

10. schillmania – SlideShow
(WebSite: http://www.schillmania.com/projects/35mm/demo/ )

There might be only one way to look at photos, but there are an infinite number of ways to organize and present them.

This DHTML-driven browser-based app provides viewing of photos sorted by collection. A few different CSS-driven "skins" are also available to choose from. Thumbnails are dynamically displayed allowing for quick visual searches within a collection, and XML/XSLT functionality provides for more dynamic data sources and ease of updates.

Sound effects are also added for fun where supported, and are fairly simple to modify.

This viewer is best suited for smaller collections of photos, although it could easily enough be split across multiple pages or sections on a web server; the idea is that all photos are accessible from one actual HTML page, but this could be split to lower the page weight and load time.

Development and testing has been done under IE 5.0, 5.5 and 6.0, Netscape 7, Mozilla Firefox and Safari.

As a general notice, this project is in flux and functionality may change as bugs are found and fixed and features are added.

Hmm….. Guys!!! As I have said, I have displayed only 10 – and the remaining which I have noted and listed are depicted below:

all out there!, Enjoy…..

Rockup the Web World!!!!