Komodo Media » JavaScript

View.js — A Simple, Lightweight, jQuery Photo Viewer

Rogie — Thu, 17 Nov 2011 14:36:09 +0000

Last week, I made and released View.js — a simple, lightweight, jQuery photo viewer for the web. View was created as an answer to all of those massive, bloated lightbox plugins with a load of buttons and styles. I wanted View to be simple, almost zero images and buttons and be customizable not through JavaScript, but through CSS. Thus, View was born.

Head on over to the View website and click on the thumbnails to give it a whirl. If you like it, snatch it up. It’s only ten bucks.

jQuery Feed Menus

Rogie — Sat, 04 Oct 2008 05:33:04 +0000

Download Example
Preview/Code
Tested in:
Safari 2/3 Mac/PC
Firefox 2/3 Mac/PC
Opera 9 Mac
Internet Explorer 7/8
Google Chrome
No Support For:
Internet Explorer 6

If you are feelin’ the love, spot me a coffee!

When feeds became popular, it worked to have one icon on your site to point your readers to your RSS or Atom feeds. As feeds are more prevalent in blogs and websites abroad, the presence of multiple feeds abound. I have a feed for my blog, the nerdlab, my bookmarks, my friend feed as well as my twitter updates. That’s a butt-ton of feeds.

Browsers have come up with a smart way of offering this content to users and it is usually place somewhere by the location bar as shown below:

Firefox 3 Feed Menu

Safari 3 Feed Menu

With the click of a button, you can view all of the feeds available in the of the document.

But still, it’s nice to offer users an alternate way to get at your feeds, so typically you will see a feed icon lurking around a site somewhere. At times, you will see a list of two, three or more links to different feeds offered on a site. Why not have an easy and standard way of offering your feeds via a nice, compact menu, just like in the location bar, but on your site? Why I ask? Why?

It’d be awesome to allow users to click your feed icon and be presented with a list of feeds to choose from. Hmmm, I want your twitter feed in Atom format or I’d like to subscribe to your blog feed in RSS format. Done.

The jQuery Feed Menu

Here’s how easy it is. I am going to plop one right here: . Go ahead click it. You know you want to. This feed menu was created easily by the following snippet of code:

var fm = new FeedMenu(); fm.write('#jquery_feed_menu_example_1');

Cool huh? That piece of code finds all of your feeds in the of your HTML document and makes them into a handy menu you can plop anywhere. Here are some more examples:

Atom Feeds

Atom Feeds:

Code:

var fm = new FeedMenu('link[type*=atom]'); fm.write('#jquery_feed_menu_example_2');

RSS Feeds

RSS Feeds:

Code:

var fm = new FeedMenu('link[type*=rss]'); fm.write('#jquery_feed_menu_example_3');

Different Theme Classes:

Classic Orange
Komodo Media v.4 Woodgrain
Komodo Media Azure

Transparent on Dark (for dark backgrounds)

Transparent on Light (for light backgrounds)

Code:

/* * @param 1: CSS link selector or array of JSON objects * @param 2: Class Name: null, wood, azure, trans_on_dark, trans_on_light /* var fm = new FeedMenu(null,'wood'); //2nd param is class fm.write('#jquery_feed_menu_example');

Last, something custom

Let’s say you don’t want the feed menu to find links for you. You want to provide them in code. Check this out:

And, here’s the custom code:

var oCustomLinks = [ { title:'RSS Feed', href:"http://feeds.feedburner.com/komodomedia" }, { title:'Subscribe with Bloglines', href:"http://www.bloglines.com/sub/http://feeds.feedburner.com/komodomedia" }, { title:'Subscribe with Google Reader', href:"http://www.google.com/reader/view/feed/http://feeds.feedburner.com/komodomedia" } ]; var fm = new FeedMenu(oCustomLinks); fm.write('#jquery_feed_menu_example_6');

You can download all of the files used here to use on your site. Feel free to modify and use this code how you see fit and if you use it, please drop a comment here to show me how you’ve used it.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

Javascript classes for n00bs

Rogie — Fri, 05 Sep 2008 02:49:08 +0000

Ok. Simple and sweet. I wish I would have known about this a few years ago. I’m talking about the idea of a JavaScript function that can be used like a class. Here’s what I want:

Simple class interface that I can instantiate with new Classname
Public functions/members
Private functions/members
Priveleged functions/members
Static functions/members

Lately I’ve been using JavaScript functions as class objects and utilizing private, priveleged and static members and functions to my hearts content. Let me share.

Disclaimer: I don’t consider myself a JavaScript guru, nor do I think that this is the best solution evar known to mankind. If you have a snooty comment to say, please don’t leave it here. If you have a piece of constructive criticism or have better methods, do tell. I’d love to hear what you use. If your JavaScript knowledge is more l33t, then by all means, humbly share.

A Basic Class & Instance

function MyClass () { //... } var oClass = new MyClass();

Public Member Variables & Functions

Public functions and variables are available to access on an instance of a class.
function MyClass () { //.. } //public member variable MyClass.prototype.publicVar = "My Public Variable"; //public member function MyClass.prototype.publicFunction = function () { alert( this.publicVar ); } //create an instance var oClass = new MyClass(); //run a member function oClass.publicFunction(); //Alert: "My Public Variable"

Private Member Variables & Functions

Private member functions and variables are hidden to outside code. Only public functions can access them.
function MyClass () { //reference to this var self = this; //private member variable var privateVar = "My Private Variable"; //public member variable this.publicVar = "My Public Variable"; //private member function var privateFunction = function () { self.publicVar += " Modified By A Private Fucntion"; alert( self.publicVar ); } } //create an instance var oClass = new MyClass(); //run a private member function oClass.privateFunction(); //private function is undefined //get a private member var alert( oClass.privateVar ); //private var is undefined

Static Member Variables & Functions

A static function or variable is available on the base class (or JavaScript) function, but is not available to the class instance.
function MyClass () { //... } //declare a static member MyClass.staticVar = "My static variable"; //declare a static function MyClass.staticFunction = function ( pInput ) { return new MyClass( MyClass.staticVar , pInput ); } //create an instance var oClass = new MyClass(); //run a static function (NO access to private or public) oClass.staticFunction( 9 ); //staticFunction is undefined on an instance //run a privileged member function on the class MyClass.privilegedFunction(); //The function runs

Priveleged Member Variables & Functions

A privileged member function has access to private variables, but is available publicly.
function MyClass () { //private member variable var privateVar = "My Private Variable"; //privileged member function this.privilegedFunction = function () { alert( privateVar ); } } //create an instance var oClass = new MyClass(); //run a privileged member function oClass.privilegedFunction(); //Output: alerts the value of the private var

These classes may come as news to you…or maybe you’ve known about them since you were a fetus. In either circumstance, they’ve been a big help to me.

Word up.

Using jQuery to save form details

Rogie — Tue, 01 Jul 2008 23:08:34 +0000

Ok, so I have a few loves in my life. In web technologies, my love rests in design, jQuery programming and JavaScript, CSS and XHTML. I love playing around with interfaces and front-end UI design and website design. Today, I’m gonna bust out a short post on how I used a snippet of jQuery code to remember my user data, i.e. Name, website, email address, etc. to help out your users a wee bit.

First, an example

Let’s create a text input that we want to be remembered. I’ll give the the every-so-appropriate name of fav_starbucks_drink Here it is:

Fav Starbucks drink o’ choice:

For all you n00bs out there, the XHTML code is:

Test this jQuery code out by entering in a value in the input and then refreshing the page.

jQuery Code:

Realize two things. You’ll need the jQuery cookie plugin as well as a link to jQuery itself. We are going to be using the cookie plugin to cookie or save the user’s data.

function remember( selector ){ $(selector).each( function(){ //if this item has been cookied, restore it var name = $(this).attr('name'); if( $.cookie( name ) ){ $(this).val( $.cookie(name) ); } //assign a change function to the item to cookie it $(this).change( function(){ $.cookie(name, $(this).val(), { path: '/', expires: 365 }); } ); } ); }

Restoring saved field values

Aight. Let’s just dive into explaining this hunk of code. First, you will notice the function declaration:
function remember( selector ){

The function parameter selector is a jQuery selector, which happens to be either a CSS3 selector that targets the desired inputs or a collection of jQuery objects.

$(selector).each( function{...

$.each is a sweet function that executes the function passed in as it’s argument for every object within the jQuery collection as created by the selector parameter. If you are lost at this point, let it suffice to say that we are going to loop through all of the input items as identified by their selectors.

Now, lets digest a bigger chunk. This next segment of code will perform the function of restoring any saved values. Now, hopefully this script is being ran on page load, so this restore segment will restore the field values on page load. Here’s that jazzy code now:

var name = $(this).attr('name'); if( $.cookie( name ) ){ $(this).val( $.cookie(name) ); }

First, a variable name is created and set to the attribute of name on the input item. What does that mean you ask? Well, basically we don’t know the selector that targeted this input, but we want to store the name of the form item as we aren’t guaranteed we will have an id. Cool now the name attribute of the input is stored in the var of name, so fittingly named.

Next, the code is if( $.cookie( name ) ). What’s that mean? Think of it like this: “Is there a cookie with this name”? Okay, so if we have cookied the value for this input, it’ll be in that cookie. Radness. Okay, if there is a cookie, set this input item’s value attribute to that value. Simple eh? By using the $.val() function, I can set the value if I pass a parameter or I can get a value by leaving params emtpy. Eazy peezy – set the value to the cookie with that name:

$(this).val( $.cookie(name) );

Ok, now we have code for all input items of type text and textareas to be set. We won’t cover checkboxes, radio’s and select lists on this post.

Creating functions to save field values on change

This block of code is uber simple. Check it:

$(this).change( function(){ $.cookie(name, $(this).val(), { path: '/', expires: 365 }); } );

Guess what $(this).change() does? That’s right, it creates an onchange function handler for the targeted input item. So whatever function we pass the change function will be ran when input item’s value is changed. Word.

Wow, this one is easy. Guess what, when this input item gets changed, cookie it. That’s it. In plain english, we are naming the cookie the name of the input item, we are assigning it the value of the input, it’s path is the root of the site and it expires 1 year from now. Rocking.

Last, lets run the code. Do that by calling the function, passing it the selector to target the item. Something like this will suffice:

remember( '[name=fav_starbucks_drink]' );

Ooh, check that out, I used an attribute selector, which since jQuery supports up to CSS3 selectors, will actually work on IE6. ;)

You could also run the code as soon as the document is ready by doing something like this:

$(document).ready( function(){ remember( '[name=fav_starbucks_drink]' ); } );

That’s it. This code could obviously be improved no doubt, including handlers for select, checkboxes, radios and more, but you get the gist. This script was uber easy to bust out. I heart jQuery. Do you?

CSS PNG Image Fix for IE

Rogie — Tue, 06 Nov 2007 06:49:16 +0000

We’ve all seen them, the hoards of PNG fixes for IE6. That is because IE6 is a bag of smashed buttholes. I’m serious. It is. That is why we (web designers of the new world) have to continually come up with creative ways to solve the PNG issue. In case you are lost, just realize that in IE6, PNG images with transparency do not show their transparent regions, so you have to use some crazy IE6 proprietary filters. Moving on.

Lately, in projects I have been using a modified CSS snippet I found out on the interwebs to automagically replace PNG images with their AlphaImageLoader equivalent in IE6. Check this out here and I’ll explain and give an example:

The CSS/Code

* html img, * html .png{ position:relative; behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')", this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''), this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')", this.runtimeStyle.backgroundImage = "none")),this.pngSet=true) ); }Update: This code changed to remove the behavior at runtime based on @Thierry’s suggestion.

For you purists out there, this is extremely hacky, so you may want to skip this whole entry entirely.

Update: : CSS Conditional comments for IE are a perfect way of hiding this hacky code from the good browsers. Here is a way to bring in the CSS for only IE 6 and below:

Ok, there won’t be much in the way of explanation here, but let me explain what this little bad-boy does.

The Selectors

* html img, * html .png

The selector portion of the CSS rule targets which XHTML tags/classes this rule will be applied to. At first glance, it looks like all img tags as well as all tags with a class of "png". You’ll notice the (star) html in front of both of these. Wait, there is no “anytag” preceding the html tag, so this won’t get applied! True. For all non-crappy (that is a pro term by the way) browsers, this rule won’t get applied. However, since IE6 is a pile, it thinks that there is a tag before the html tag, so it will apply this rule. Great! Now IE6 is the only browser that will use this rule.

The Rest of the Code Jargon

Honestly, the rest you really don’t want to mess with much, but it suffices to say that this expression does a few things:

If the tag is an IMG tag, the expression checks to see if it is a .PNG image. If so, it applies a CSS AlphaImageLoader filter to the IMG tag to load the PNG file as a background image. It then points the src attribute of the image to a transparent gif so that the image isn’t overlaying it’s own background. Voila! Note: This only works well for images not resized by the browser. Also, you’ll need a transparent gif 1px by 1px image on your server.
If the tag is not an IMG tag, then this expression takes the CSS given background image and shoves it into a background AlphaImageLoader filter. It then removes the real CSS background-image rule so that the background and the filter are not conflicting.

Pretty cool! Please note that this CSS expression is pretty generic. If you have some crazy CSS-ing to do, you might want to stick with using your own methods or apply the AlphaImageLoader filter manually.

Also, if you are a standards-compliant junkie and this brushes you wrong, remember that this is intended to help with the crud of browsers. Sometimes we have to break our own rules to do the job.

A Demo!

Let’s see a demo! See the goodness below:

My Image Tag:

My Generic Tag

Wish I could Play.

My Link Tag

Update: Links will need an additional rule of cursor: pointer; to restore the cursor. I’ll have to change that in the script to do that automatically

This is my link.

Web Development Tips #1

Rogie — Thu, 22 Mar 2007 17:00:37 +0000

Sometimes the simplest of solutions elude me. Blog entries and tutorials seem to be more well thought out, time-consuming projects that attack more complex issues or come up with more innovative solutions. Look at websites like A List Apart or Smashing Magazine.

Typically, I would love to come up with lengthy tips or tutorials as these people do, but often I end up with a wealth of drafts for ideas, but never get any real helpful content out to my readers. What I need is something more like a Tumblelog, which is more of a quick and dirty (not like that) stream of consciousness as a blog entry.

So, here I go, entry #1.

Dodging Cache Issues

I swear every time there is an issue with a client project or user on a website, it is a cache issue. You’ve seen it before. You are using the same image name or same stylesheet name and a users computer is caching it and causing issues with your new content.

A simple solution is just to rename the file. Thats easy right? Sometime yes. Sometimes it isn’t. We all may need to keep the same file names for a myriad of different reasons. Ok. Here’s mine.

Episode #1

I have a flash file that I update every couple of months. I don’t want to deal with renaming it, but I don’t want it to serve up the old version as cache. The solution is simple:

My code previously:

My NO-cache code:

Basically, I’m appending a query string to the file as if I am passing in variables. Since webservers see this as a different file, it will cache it as a new file name, specifically “myfile.swf?v1″. Also, this makes it easy for versions. Next time you export your file, it will be v2, v3, v4… and so on.

Episode #2

I have a webcam that transfers a camera shot via ftp to my webserver. But, it FTP’s the image to the same directory with the same filename every time. Yeah, I could write a PHP script to get the picture and serve it up as a different file name every time, but that’s way too hard for a simple issue.

Also, I used to use a META REFRESH to refresh the page to serve up a new image, but that is frowned upon and refreshes the entire page. So, naturally I am thinkin’ JavaScript.

So, I get this rad script all hooked up to call a function every couple of seconds to refresh the image…here she be:

function refreshImage(){ if( document.getElementById('webcam-image') ){ setInterval( function(){ var img = document.getElementById('webcam-image'); img.src = img.src; }, 4000 ); } }

I’ve wrote some code to run this function on page load. Basically, this code just resets the src attribute of the image every 4 seconds. However, because the image is cached, I have issues. The code works fine, but keeps serving up the same image, so the user doesn’t see a change.

So, to employ my NO-cache technique, I whip up the following code:

function refreshImage(){ if( document.getElementById('webcam-image') ){ setInterval( function(){ var img = document.getElementById('webcam-image'); if( !img.origSrc ) img.origSrc = img.src; img.src = img.origSrc + "?" + (Math.random()).toString(); }, 4000 ); } }

Here, I save the original src attribute in a variable called origSrc and then every 4 seconds (4000 ms), I set the src attribute back to it’s original url. However, the magic comes in the querystring. I didn’t want to mess with an incrementing number, so I am just using a random number, but that’s all I need. So, when this function is called the first time, lets say the random number is 0.30301759604092937 (a decimal number between 0 and 1), the image’s src attribute becomes src="live.jpg?0.30301759604092937. Four seconds later, the code is ran again and the source attribute becomes src="live.jpg?0.0826765920752568, thus always rendering a new NON-cached version of the image. Voila!

P.S. If this technique is way too obvious or if you already knew it, please feel free to say “I agree.” Comments that insult should be reserved for an infinite amount of time.

Standards-compliant New Window Links

Rogie — Wed, 31 Jan 2007 16:02:46 +0000

I ran across this article at SitePoint, which is very good. Basically, the concept is that while the target attribute is compliant in an XHTML Transitional world, it is exactly that. Transitional. Transitional doctypes allow us to go from deprecated doctypes to something more standard, such as XHTML Strict.

So, we either code according to the transitional spec now and change later or code in strict now and find a solution. I prefer the latter. So, at SitePoint they discussed and created a solution. Great. Basically, the rel attribute is the new standard and SitePoint created a JavaScript solution to make all links with the attribute of rel set to “external” open in an external or new window.

This short blurb only addresses modifying and using the prototype JavaScript foundation to rewrite the code. I rewrote the code and Voila! Here she be:

The Code

if (typeof $$ != "function" ) return; $$('a[rel=external]').each( function( lnk ){ lnk.setAttribute( "target", "_blank" ); } );
Feel free to rip me off and take this code! P.S. I’m using Prototype 1.5.0_rc0

Update on my life

Rogie — Sun, 27 Feb 2005 07:42:11 +0000

I recently was talking to one of my friends whitey about why none of my friends visit my website. He said, if I don’t get this wrong, something to the extent that I never update my website and I don’t really have anything interesting to say. Maybe I made the last part up. Anyway, I really do want people to visit this site and to be encouraged to comment, especially my friends which would include, but not be limited to (ed, ansotegui ( why you gotta play me like that, brassiere? huh d-cup? ), xsh ( aka josh, cheers….to WOW), tony, toni, erin, mike, thurston, chris, krysti, niloc, kylan, tyler, jesse, t-HAD, blah, blah, etc… Anyway, maybe this is a cry for attention, maybe not. But I have noticed that I sure don’t get a lot of feedback from the ol’ friends.

Onto new topics. Over the past 2 months or so, I have been very busy. I have been dumping a lot of my time into redesigning komodo media. I want komodo media to still be a blog and a fun site, but more than that I would like it to be much more professional. The new redesign but still in production can be viewed here. Please feel free to check it out in any browser as it takes shape and let me know what you think, be it bad or rad. I have put quite some time into this redesign so I quite love it and I hope you do too.

Other than the redesign, a little game called World of Warcraft has taken up just a wee bit o’ my time over the past month or so. Let’s just say that it is one of the most addicting games I have ever played. I play on the server Burning Legion with quite a few of the friends listed above. At this point, I play on the alliance as a human female paladin name Vondeutch. She’s a dark haired beauty with a real knack for spells and kickin bootay. Props to Ty and “the WHITENESS” for helpin me out and sending me a few gold here and there and the occasional piece of armor or weaponry. Check out a few shots of the loverly Vondeutch.

Moving to mediatemple.com. Yup. After almost a year of trying to host my website on my DSL line, and learning much in the process, I have decided to move my website to the shared hosting servers of mediatemple. Let me tell you that DSL sho aint a great way to host. It is very very slow and I do not like the headache. Also, funny thing is that from my bud eddy’s store ( mtmainnews.com) I cannot see this website and from my home, I cannot see mtmainnews.com. Very confusing and not so cool. So, I sure hope this hosting change works out well. The company seems solid and has won awards. Also, stopdesign.com is hosted on mediatemple’s servers and is a pretty prestigious site, so I figure what the hey… it better work. Plus, eliminating the headache of hosting and controlling my own email servers will now be on the pros. I’ll stick to what I do best, coding and design.

Eddy just had a birthday ( happy 28 eduardo!, i’m still gonna get you a gift ), mexican themed and was short but fun. Lots of good food and many friends. Eddy is a very blessed individual that has the gift of many many friends. Probably because he’s such a dang nice boy. Maybe. Yeah, I think thats it. Most all people showed up to the party in a flannel type shirt buttoned all the way to the top, senorita style clothing or with a blanket over them. However, there was this one guy that was apparently a little sexually disturbed or just really a frickin funny guy that decides to show up as a ghey mexican. He was a mexiCAN definitely and NOT a mexiCANT. Lets just say this dood showed up with a bowtied bandanna, cutoff wife beater tank, vikkis secret thong, ladies jeans and flip flops. Go figure.

Well enough for tonight, it is getting late. I guess this is one of the first real blog style posts that I have created. I’m proud of it. Maybe I’ll keep doing it. Hopefully. Well, off to sleep….or WOW ;)