LinkPost – April 2009
It's that time again... Another month has gone by, another post to tell you what you may have missed.
This month I decided to actually group the links into categories to make it easier to find what you are interested in (go me!). The offerings of links this month include two CMS options that aren't WordPress, fonts, fonts, and you guessed it more fonts, some free themes, some jQuery offerings, Web-Server testing and security links, Some adobe AIR goodness, and more. So get your ctrl-click (command-click for you mac'ies), or for you talents mouse users, your middle-click ready.
Print This Post
Time for more jQuery goodness
No, it's not what you think. I'm not posting some grand tutorial on how to re-animate the dead with jQuery... at least not yet. What I am going to do is post a few things that I either stumbled into, or had to figure out for myself while using jQuery.
1st - Sometimes you may find yourself writing huge functions, or the like, in which you continually use the selector " $(this) ". There's nothing wrong with that, I use it all the time. However something you really should keep in mind is that every time you call that selector, you are throwing more drag on the cpu/browser/rendering of your site. How do you alleviate this problem? simple, just set the $(this) selector into a variable.
/* how not to code */ $(document).ready(function(){ $(this).doSomething(); $(this).click(function(){ $(this).runMore(); }); $(this).yepEvenMore(); }); /* how you should code */ $(document).ready(function(){ var $this = $(this); $this.doSomething(); $this.click(function(){ $this.runMore(); }); $this.yepEvenMore(); }); |
2nd - This really should be a no-brainer, but after spending over 15 minutes trying to get the selector to work (and browsing several jQuery sites, checking my cheat sheets, etc.) I finally found the answer to using a selector within a selector. I believe the answer came from the jQuery google-group. It was as simple as the following example.
$("#left label[for=" + $this.attr("id") + "]").addClass('active'); |
You can see that I had a div with an id of 'left' and I wanted a particular label inside that div to have a class of 'active' applied to it. This worked with a click event (not shown).
3rd - What happens when you have some images that when clicked you want to change the value of a form? Say for example that you have some logo's of credit cards that when clicked on you want to change a select box in your form to show the value of that credit card? The solution for this one I couldn't find anywhere on the interweb, so I spent plenty of time figuring this one out. It works, and I'm fairly happy with it. NOTE: you must be using jQuery 1.3+ to make this work, the changes made in this version of jQuery allow you to do this type of selector.
$("#payment-type-ful img").click(function(){ var card = $(this).attr('alt'); $("#policyId").val(card); }); |
Yep, there's a div with an id of 'payment-type-ful' and I need any images under it, and when clicked on I set up a variable called 'card' that is set to the alternate text of the clicked-on image. I then select the input select and set the current value to 'card'. Simple? oh yeah, easy, absolutely.
That sums up a few quick little jQuery gems that I've been using recently. As per usual, if you have any questions, comments, or tips of your own, feel free to throw them in the comments, thanks!
Print This Post
Quickpost: nyroModal – another jQuery plug-in to keep an eye on
Over the last week or three Internal Apps had a problem where they wanted to display a page, but have a window appear with new contract terms visible. They also needed a scroll bar, buttons to accept/decline, print, and close the pop-up. They also needed a little twist, if the user declined the new contract, or closed the pop-window, the page should send them back to the log in page.
I thought about the problems, and I was thinking recommending to them FancyBox (our old standby for modal windows), but I had just read on another site about nyroModal. I recommended that they try it out (since it's jQuery you have all those great callback functions - that would cover the page redirection etc. - and those oh-so-tasty visual effects that would provide them with exactly what they had envisioned), and within a day they had a perfect set up. So if you find that you need a modal box (for whatever reason), I suggest you give nyroModal a try. We ourselves won't be dumping FancyBox anytime soon, but it is nice to have another option.
Print This Post
Form Contorls – And some jQuery solutions
I was researching a little Twitter meets jQuery and I stumbled on this blog post. While it was helpful, and I may consider using the plugin, it was what the developer had 'tweeted' about that caught my eye and caused this post to exist. You see he had posted two links to form controls. The first link was ideas/new controls, and the second was the jQuery solution to those form controls. Since our interal apps department made the switch finally started using jQuery -as it was pointed out how easy it makes things and how it can improve their existing code (smaller, better, faster)- last week from in addition to prototype to jQuery, I thought they would get a little added bonus out of this post (since they use a ton of form controls).
So first up, a link to a nice form controls gallery (it even posts which js libs can accomplish such feats)
And secondly a link to the jQuery solutions to each of the form control interfaces
Between those two pages, you can dress up any page, form, or what-have-you to do almost anything you want. And it will look like the fresh-burnination* doing it.
Another short and sweet post.
---------------------------------
*fresh-burnination is a tribute to strongbad, and the Men In Black, with a little CW (WB) mockery thrown in. It is derived from the "new hotness", strongbad style, or the "fresh burnination".
Print This Post
Web Developer Training – jQuery
And now for our quarterly Web Developer Training (because monthly just wasn't happening). This quarters training is on the infamous (and my personal favorite js framework) jQuery. After recieving some requests for a training session on it, I finally got one put together and hope that it benefits everyone in some way. Also this training is sampling my new training template (not that the old team awesome template wasn't good enough, it just... well it wasn't as cool as this one 
) If you have any questions etc. throw them in the comments. Enjoy!
Web Developer Training - jQuery
Print This Post
Brillar Resurrected and perfected.
Remember long ago when Sid, and Remo and I (and Bryce but he probably doesn't remember this cuz he is in infernal apps) started and there was this javascript function called Brillar? Well nobody seemed to understand the brillar function but we had to use it over and over again for image swapping, and I was just getting to the point that I almost knew how to use it without cheating. But then Phil killed it with jQuery and we have all partied since.
WELL THE PARTY IS OVER! Recently I've needed to do a rollover effect on some Input images and wasn't sure exactly how to do it with jQuery, come to think of it I am not sure how to do much with jQuery, so I turned back the clock and resurrected the Brillar function. only now it's hotter, better, more dynamic smaller and yes hotter. In fact it's so hot Phil and I renamed it to "BrillarCaliente".
Now instead of passing Two or three (can't remember for sure but it was a lot) parameters in your onmouseover/onmouseout calls, you only need to pass one.
onmouseover="javascript:BrillarCaliente(this);" onmouseout="javascript:BrillarCaliente(this);" |
The rest is in the Javascript function, thus making it easier to change what images/path's are to be used.
<script type="text/javascript"> function BrillarCaliente(image){ var hostpath = '<c:out value="${standardUrlPrefix}${jspStoreImgDir}" escapeXml="true" />'; var id = image.id; var source = document.getElementById(id).src; if(source == hostpath+'sml-addcart.gif'){ document.getElementById(id).src = hostpath+'sml-addcart-on.gif'; } else { document.getElementById(id).src = hostpath+'sml-addcart.gif'; } } </script> |
Ok so maybe it's not perfect but it's whole lot better than it was. The only thing I don't love is that I had to set up the "id" var in order to set up the "source" var, if there is a way around it I'd love to know.
Now for those of you who are reformists and love jQuery, I'm quite confident that this is doable in jQ with about 3 lines of code. Either way is better than what we used to do.
Alternativley if you wanted to make this more dynamic you could do the following:
onmouseover="javascript:BrillarCaliente(this, 'newimage.jpg');" onmouseout="javascript:BrillarCaliente(this, 'oldimage.jpg');" |
<script type="text/javascript"> function BrillarCaliente(image, swapImage){ var hostpath = '<c:out value="${standardUrlPrefix}${jspStoreImgDir}" escapeXml="true" />'; var id = image.id; var source = document.getElementById(id).src; if(source == hostpath+'sml-addcart.gif'){ document.getElementById(id).src = hostpath+swapImage; } else { document.getElementById(id).src = hostpath+swapImage; } } </script> |
note the extra param passed through to the function, I haven't actually tested it but it should work.
Print This Post
The E-Com WebTop
It's been a while since the last post, but never fear, we just got really busy (ask Dustin about Team Failure...). Anyway, for those on the intranet who have heard of the WebTop, it got a serious upgrade last week (and many serious tune-ups this week). For those of you who haven't heard of the WebTop, you are in for a real treat. The delightful little web-app is hosted on myboxnumber:81. What does the WebTop do? Let's take a very brief screenshot tour of the goodness that can be found inside it (it'll be only a few pics because the webtop *should* be self-explanitory...ish).
(above)This is the WebTop, unless you know what the top nav is for, DONT CLICK IT. It is a "One-Click Regen®" bar. If you need to regenerate the static-homepage of a given site, click there and it will open the static homepage of the logo you clicked in a new window/tab. Also notice the clock in the corner (Dustin requested that 
). Oh and in case you're wondering the blurry on the top right is the news box, it displays a news feed.
(above)This is the menu (notice that it may or may not resembled popular OS interface designs (wink-wink). Also note that as of yesterday the feature of rolling over one of the menu options now enables the sub-menu to appear (Thank Drew for that, before that you had to click).
The webtop was built using jQuery for all the heavy lifting and gimp for the imagry. Note that it is running a ton of pngs, so don't even try to use IE6 with it. In fact, just dump IE altogether and use Firefox, Safari, or even Chrome (runs it like a champ). If you have any additions, suggestions, comments, or questions please email/IM/comment about it to me so I can implement/answer your changes/questions.
Print This Post
Web Developer Training: Compression
I may be jumping the gun here, but I thought I'd post the training a day early. Yes that's right, I have another training session that may be of interest. This one has to do with gzip/deflate and various js compression engines (JSMin, PACKER, and YUI). I may have thrown some other things in there, but I wrote most of this last week, so I can't really remember .
Let me know if there are bugs to be fixed, or if you have anything you'd like to add.
Web Developer Training: Compression
Print This Post
jQuery pngFix
One of the greatest jQuery plug-ins that I have stumbled on has been the pngFix plugin. This fantastic piece of code takes your png images and applies the AlphaImageFilter logic to make ie6 actually display them with the correct transparency (not that nasty gray-ish stuff) When I found it, I was ecstatic, when I first tried it I was overjoyed! Then I tried to develop with it.
While this may be uncommon for most users, it has a severe bug. In fact the bug was mentioned on the creator's blog in the comments by one unfortunate user (Dj) who ran into the same thing I did. The problem arises when you use a png as a clickable object, or even as a background where your clickable object is going to be. As near as I can tell, when the pngFix executes, it grabs all the png files on the page and runs then through the image filter and then slams them back down on the page. On top of all of your links... on top of everything. I tried changing the z-index of my links, I tried changing the png image from a background to an img-tag. Nothing worked. I had almost given up hope (as there was no answer posted on the blog) when I found another site that mentioned the problem. Someone in there (Elbert Oh) had commented that they had found a possible solution and pointed users towards this site for examples.
By using the example site, I ended up with a working solution (this will be deployed in the new ProForm site)
Here is an example of the solution (with the correct code in place)
Here is the header image that will link back to the homepage
Seems simple enough right? Here's the css that I used.
#logo { margin-left: 531px; height: 90px; background: url('images/logo.png') no-repeat scroll 0px 3px; } #logo a { display: block; width: 459px; height: 90px; position: relative; z-index: 1; } #logo a span { display: none; } |
What you should be able to see here is that I set the logo appear on the right side of the page (hence the fatty margin-left). Then I set the height of the object, and finally pointed it to the png image that I'm using as a background (that without the fix would be picked up, filtered, and then slammed back down on top of my clickable area).
I made the link take up the entire image area by making the display a block and setting the width and height to the same dimensions as the image. Then there's the real magic of making this work. setting the position to relative, and then setting the z-index to 1. ((POSSIBLE BS ALERT)) Somehow the positioning gets tweaked when the transparency filter is applied and that is part of the reason for the links becoming unclickable. By setting the position to relative, and then setting the z-index to 1, it forces the image to stay where it is and leaves the links clickable. That may not be what is actually happening, but I think that's what's going on...
Anyway with those small changes, the site* is now working with clickable links and png images in ie6, ie7, Firefox 2, Firefox 3, Safari 3.1, and Opera 9.5 .
*The development site on my local server, not the actual ProForm.com as we have not launched the new site yet
Print This Post
Aptana: an IDE for JS/AJAX developers
One of the things that I really like when I develop is a good IDE. Now I don't usually use all the extra bells and whistles but I like auto-complete, error checking, and a solid testing engine/server.
When I first jumped on the java train, I used a community version of SunOne Studio. It was nice, it only crashed when you didn't want it too, and was the right price (for educational purposes). Later when I took more java classes I used JBuilder, for a about a week. I'm not saying JBuilder is bad, it's just not as free as Eclipse (my current favorite IDE for all my java needs).
Anyway to shorten the story, I use eclipse (or a variant like EasyEclipse) for my java and php development, but I had not found an IDE that supported prototype and jQuery (and by support I mean the previously mentioned features, you know, auto-complete, error checking, etc). That all changed when I somehow stumbled onto aptana studio.
Aptana is a fantastic IDE that is based on Eclipse, but features a built-in rendering engine/server, support for all the popular javascript libs (prototype, jQuery, mooTools, mochikit, Dojo...) and is brimming with scripts, snippets, and helper libraries. They have even developed an interesting technology called "jaxer" (which stands for ajax-server). I haven't played with Jaxer yet, but it sounds like it can do some fascinating things. There are also plug-ins for iPhone development, AIR support, and PHP development.
What I mostly use Aptana for is testing new web 2.0 pages. For example, on one of our sites we redesigned the press release page. Development on that site is done in WebSphere 5.6.1, which means I have to dig out a VM and do my work in there... which is lag-tastic (especially the test server). With Aptana, I can test everything cleanly up front and see what I'm going to get (with a quick page mock-up) before I attempt to code the whole thing in the VM. If you're bored, give it a try, it's a fairly hefty download, but it's worth playing with it.
Aptana comes in two flavors, Community and Pro. There is a comparison chart on the aptana studio download page.
Print This Post