Saw this and I was amazed:
All done with CSS And JavaScript. The implementation is also brilliantly simple. And it all fits in 1.5KB. What’s to lose?
By the way, you can’t tell by the image, but the image under that 
travel menu; it moves with the mouse hover. Check it out: Facny Menu.
Popularity: 4%
If you're new here, you may want to subscribe to my Full RSS feed. Thanks for visiting!
Recently I stumbled upon a site that I haven’t been to for a while: CSOWeb.org. The design is nice and clean: a header image, with some gradients and colors that work together. But wait, where are all the links? 95% of the links on the sites are http://csoweb.org/#. What the hell? Everything is done behind the scenes in JavaScript in OnClick() scripts.
Sometime later I read a post on the Future of the Web about JavaScript only links. The first comment on the page is usually everyone’ argument for these links.”But…but…what about GMail, and Google Web Toolkit?!?!?”. Good argument, I guess. Everyone loves Google and everyone tries to emulate them. There’s no problem in that as long as we understand what’s going on. Magic word: AJAX. AJAX makes heavy use of JavaScript for obvious reasons. If we’re populating a page from a database using AJAX, then JavaScript is the only option. This leads us into the discussion of appropriate uses of Ajax. Don’t take me back there man.
I’m not sure what to make of this: Automated JavaScript Vertical Flip Image Reflection. It adds reflections to images using JavaScript. But, am I missing something here, or has it already been done? It seems to do basically the same thing with less flexibility and it doesn’t work in IE.
The only other difference that I can notice is that this is works on a page-wide basis, whereas the other script is on a per-image basis. Here are some examples.
Popularity: 4%
Introduction
Back when I was doing my internship we had a major problem we were trying to solve. The project involved creating a web based terminal emulator using AJAX. Well, it was a little bit more specific than that. It was basically duplicating a specific application in the browser window.
Problem
Sounds all well and good except that this application made heavy use of F Keys, e.g. (F10, F5, F1, etc). Needless to say this would not really be viable in a browser since F1 would call up help, F5 would refresh and F10 would send the cursor to the menu. We had already written a nice enough key handler that worked rather well, with the exception of these F Keys.
JavaScript Solution
After a lot of hacking around I found a way to stop the browser from calling up and propagating those events. My code was, for lack of a better word, nasty; but it did work. It involved a lot of IE/Mozilla workarounds. I recently came across some cleaner code, so here you go:
Popularity: 6%
Yes again, I'm late. I'm sorry folks, but here we go.
Once again we bring together JavaScript and CSS to produce amazing results. Notice the header at the top of this website (assuming that I haven't impulsively changed my theme again)? Nice basic reflection, right? It's commonly known as the Wet Floor effect. I can just hear the Photoshop folks now, "what's so impressive about that?". Well seeing that I lack a lot in the Photoshop field it took me about 30 minutes to get this to look even reasonably good. But I did not have to go through all that trouble.
Reflections.js provides a simple method for web developers to do this. I haven't had too much experience with this other than just basic demos but I am again amazed at the power of JavaScript and CSS. You include the JavaScript and for each image you want to add a reflection to you add:
. That's it. It almost seems too simple doesn't it?
Popularity: 9%
Yes, I know I'm a bit late with this, but I still had to give you the run down.
Originally created by Lokesh Dhakar
Lightbox JS 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.
Have you ever gone to a website and seen this nice lil' thing they do when you click on a thumbnail and it pops up a larger image in the same browser window? That's LightBox. I've seen it before and I haven't given it a lot of thought. I just naturally assumed that it would take too much time to implement, so I left it alone. Oh was I wrong.
Popularity: 11%
I'm not sure how many of you actually gave thought to creating your own Image Gallery, I know I haven't. If I needed one I'd just use a prepackaged one. But that was because my application always needed an entire gallery. But if you just need to through up some pictures a CSS Image Gallery is the way to go.
Why CSS? CSS is light and clean and it's HTML standard. Some of these methods require a tad bit of JavaScript.
Please note, however, that you need to have all of your images ready to go. You need your thumbnails, your display images and your large images. These are not scripts, they are Do It Yourself galleries so they don't create thumbnails for you or anything like that.
Alex at YouNeed2See Technology has a nice list of these galleries. Go check it out.
Popularity: 5%
Paypal's website payments is perfect for small sites. You have a few products you want to sell so you don't want to install a full blown shopping cart or anything. So we use Paypal a great solution but with a few limitations:
Dave writes:
The problem with Paypal buttons is that you are very limited in customisation options for your product. You're provided with the option of up to two, yes two form fields within which you can store specifics about a product. So you could store, for instance, size of product in one field, and colour of product in another. But if you have more than two product options you're basically screwed. Although there is an answer ...Javascript. Using Javascript you can grab the Paypal button's form as it's being submitted, modify the form fields and then send it on it's way.
Dave spells out every bit of code you need and the explanations. He even has links to the source code for these. It's worth checking out. It's an interesting idea that I haven't seen done before.
Popularity: 3%
Pages (2): « Previous Entries 1 [2]
Filed under: