WebDev3000 » JavaScript

Sudo Slider

Codrut Nistor — Fri, 23 Jul 2010 13:12:44 +0000

Since weekend is coming, I think that some CMS or shopping cart wouldn’t be a good idea. At least when I think about myself, I usually enjoy some light work during weekends, nothing special, as it happens with most of my friends. The web designers that I can call “friends” usually go in the woods during weekends, but when they don’t, they usually avoid work, that’s certain. If things are so boring for them and they end up facing some script, I know they would surely enjoy something like Sudo Slider…

But what is this thing called “Sudo Slider,” you will ask, right? Based on Easy Slider, Sudo Slider is a jQuery slider plugin packing quite a few interesting features. To make a longer story short, I think it’s enough to say that this piece of code will help you to display any HTML content via Ajax, displaying the items with fade or slide effects. Even better, you can use multiple sliders in one page and you get support for forward-back browsing, so you can easily bookmark every item.

Before giving Sudo Slider a try on your website, I think best thing to do is take a look at the demo. This 10kb plugin may be unobtrusive, but it’s surely faster to click the link above than make it work on your pages, right? That’s all, folks – have a nice weekend and be sure to enjoy Sudo Slider!

Compatibility: all major browsers

Bubble Engine

Codrut Nistor — Mon, 19 Jul 2010 09:33:11 +0000

Some say bubbles are useless when it comes to graphic effects for your site, but I disagree with that. Sometimes, they can be really funny, just like a bubble bath – somehow useless, but surely a lot of fun! Today, I’ll give you a hint about a free bubbles generator. Unfortunately, it only works with websites, because if it would have been able to turn a regular bathtub into one with bubbles, I wouldn’t be in front of my computer right now…

Bubble Engine comes at no charge, version 1.0 being released about two weeks ago and providing a pretty rich collection of adjustable settings, like the size, looks, position of the bubbles generated. While adding bubbles to a page can be pretty fun, you can also include BubbleMachines.js to your code and then get some draggable graphics able to create bubbles. Is this cool, or what? Cool or useless, I know what some friends of mine might say…

… but if you’re still wondering about this neat jQuery plugin (jQuery Easing is also required), I think you should go ahead and take a look at the Bubble Engine demo available here. That’s all, folks!

Compatibility: all major browsers with Java enabled, of course

Blockster

Codrut Nistor — Wed, 14 Jul 2010 14:26:04 +0000

Sometimes, I really want to kill the people behind sites with multimedia content. Fortunately, it’s about those sites with loud background music starting automatically, and no obvious Mute button. When it comes to slideshows and animated banners, I usually have nothing against them. Hey, I even enjoy such things, as long as I get to see some useful content around, too!

Blockster can help those working on a website to easily create featured content sliders that offer a wide range of transition effects. This is a free and really small piece of code, having only 2.6kb and requiring Javascript. To be honest, I have no idea about the license type, since there’s no such info available on the official page, but since code is available… I am sure you can email the author for details, in case you want to mess with it in some way!

Blockster is highly customizable, thanks to HTML/CSS code, just as you were probably expecting. The ZIP package includes the code available for the examples on the official page and… that’s all, I guess! Have fun with it and… in case you want to add some sound to your site (I know there’s no real connection with today’s subject), please don’t make it start automatically, all right? Thank you very much!

Moovie

Codrut Nistor — Mon, 12 Jul 2010 13:51:08 +0000

While this may not be something new at all, it surely ads a new alternative to those programmers looking for a HTML5/Javascript-based library offering all the features of a player… only that you don’t really need Flash, that’s the whole catch! The name of this library? Moovie!

To take a closer look at the demo and download this library still in its early development stage, please go here and have a look around. For now, basic functionality is almost complete, Moovie offering support for subtitles and playlists already, CSS-powered styling, play/pause/stop controls, control and progress bars like the ones YouTube has, and then some!

Released under the terms of the MIT License, Moovie requires MooTools and works with most major browsers without any special problems, but the demo currently has some issues in Google Chrome and Google Chrome-based browsers (Flock 3 beta, anyone?).

P.S. I guess you figured out this already considering the license type, but let me point it out clearly, just for the record: Moovie is completely free!

jMediaelement

Codrut Nistor — Mon, 21 Jun 2010 09:29:06 +0000

Could you live without sites like YouTube or Vimeo? I think I could, but that would surely be a pretty boring life! Sure, that won’t happen anytime soon, especially since it becomes easier with each day to add media elements to your website. Today, we’ll take a look at jMediaelement, an audio-video development kit built using HTML5 and jQuery.

jMediaelement, shortly known as “jme,” is covered by the terms of the terms of the GPL and MIT licenses, offering support for a wide range of media file formats, including OGG, MP4, FLV, and more. With its help, you can easily create media elements just by calling a function. While it offers support for all major browsers, jme can fallback to Flash and VLC plugin when facing some exotic Web browser…

Other than the above, you should also know that the player’s looks can be easily changed using CSS, and if you want to quickly check a demo, you should take a look at this page. That’s all, folks!

jTweetsAnywhere

Codrut Nistor — Thu, 10 Jun 2010 10:40:54 +0000

Twitter, Twitter, Twitter! No matter where I turn, it seems I can’t escape it. Oh, well, you know how they say… “If you can’t beat them, join them!” Today, I will do exactly that, so I’ll tell you a few words about another Twitter-related thing. Its name is jTweetsAnywhere and comes for free, as it usually happens with most of the stuff we talk about here.

This “thing” called jTweetsAnywhere is a jQuery Twitter widget able to make integration of Twitter services into your sites much easier. According to the official product page mentioned above, this piece of code allows you to display tweets from feeds and lists, show Twitter search results, integrate a customizable TweetBox or handle secure authentication with Twitter, all “with just a few lines of Javascript” and nothing more!

jTweetsAnywhere’s current version is 1.0.0 and it should work with all major browsers. It only requires jQuery, and it can automatically detect #hashtags, @usernames or URLs, linking them accordingly. For more about this goodie… go ahead and give it a try, it’s free!

Sexy.js

Codrut Nistor — Wed, 09 Jun 2010 07:38:05 +0000

Those who claim that intelligence is sexy may be right, after all. Why? I never thought about programming/code to be sexy, and I wasn’t expecting to see a jQuery library with such a smart branding as Sexy.js. Now, they only need a theme song… and I can’t suggest anything else but ZZ Top’s Legs, since I think it goes perfectly with the home page of this product!

Sexy.js is a chainable library that allows you to easily manage script dependencies and write “sexy” code. While I would really like to see a nice video presentation of this lightweight JavaScript library, all I could find was this slideshow. Don’t get me wrong, this slideshow is nicely put together, but this piece of code surely deserves more!

Dual licensed under the MIT or GPL v2 licenses, Sexy.js can easily turn “ugly” code into “sexy” one, providing enhanced sequential Ajax (Sajax) functionality and coming in two versions – as a jQuery plugin, or standalone. Obviously, there’s no special requirement for it, since all major browsers can easily handle JavaScript. For a demo, take a look at this page. Enjoy!

FlareVideo

Codrut Nistor — Fri, 04 Jun 2010 14:21:46 +0000

HTML5 is the way of the future… am I right? Right or not, I know it’s not the first time I say this, and I bet it’s not the last one, either. There are plenty of reasons to say this, and seeing video players like FlareVideo is one of them… so let’s take a quick look at this piece of code, shall we?

Completely free and even open source, FlareVideo can be easily customized using CSS, JS and HTML, but it comes with 3 themes in the package already. Oh, my, but I forgot something: this video player falls back to Flash when an incompatible browser is being used, and if you want a demo… just hit the Play button on the homepage of the product (see link above). By the way: I love that video!

Built using jQuery and jQuery UI, FlareVideo supports full screen display, autoplay, custom keyboard shortcuts, preloading/autobuffering and more. Sounds like a pretty good deal, don’t you think? I don’t know about developers, but I, as just another Internet user, would surely love to see more HTML5 players and as few Flash-based ones as possible.

Compatibility: according to its producer, FlareVideo works with Safari, Firefox and IE7+ (according to me, myself and I, it surely doesn’t work properly in Opera…)

AeroWindow

Codrut Nistor — Wed, 02 Jun 2010 07:23:47 +0000

The Aero-look has been around for ages, Vista only made it really popular (don’t tell me that more than 10% of those using Vista/7 now and enjoying the transparent interface and the effects coming with it ever used Stardock products or even heard of it – I’m not buying that!). Don’t get me wrong – I don’t have anything against it, but I think there was and still is too much hype around Windows’ looks… and now I will tell you a few words about a jQuery plugin built to help you use Aero-style popups on your websites!

AeroWindow allows you to easily create Aero-style popups and offers a lot of options for changing the appearance of the result, including window title, start position, standard and minimum size, animation effects or window status. I don’t know about regular websites, but this tool is surely an awesome addition to Web-based operating systems… or at least sites that try to emulate the look of Microsoft’s notorious Vista/7 software platforms!

Freely available under the terms of the GPL/MIT License, AeroWindow is compatible with all major browsers and is based on jQuery 1.4.2, the downloadable package containing all that you need to get started in no time. Sweet!

Projekktor

Codrut Nistor — Tue, 25 May 2010 17:40:35 +0000

HTML5 is the way of the future. Flash must die, at least when it comes to sites such as YouTube, Vimeo, and so on. If this will happen or not, that’s what remains to be seen, but until then, it’s my pleasure to tell you a few words about Projekktor, “a pure javascript driven HTML5 video experience” offered by Sascha Kluger under the terms of the GPL license.

Oh, my! It seems I already told you all there is to know about Projekktor, but it seems there’s more than the above. For example, think about Flash fallback when there’s no native H.264 support available, as well as excellent compatibility with most platforms and browsers you can think of!

If that’s not enough, add support for playlists, really easy integration (one .JS file, standard video/audio tags, and that’s all!), “no buffer” feature to save bandwidth, HTML/CSS customizable interface, and more. Feelin’ eager to give it a try? If not, maybe the multiple instances demo page will help you change your mind…

Compatibility: IE6-8, Firefox, Safari, Chrome, also working on iPhone and iPad!