So you’re all grown up and want Rounded Corners on your site. There’s just one small problem: the normal rounded corners implementation comes with tons of divs used for styles and you’ve got your fellow web developers screaming down your neck about web semantics.

So what’s this funky semantics thing? Basically, we’re looking for a separation of styles and data. We want to keep all the styles in the CSS style sheets and all the data in the XHTML files. Now, I’ve been known to be flexible on this a bit, however it is a great idea with a purpose and in this case, it actually helps us out a ton.

Ignore Me – Take The Easy Way Out

There are two jQuery plugins that can do this instantly, aptly named jQuery Corners and jQuery Corner. Yeah, I know totally different, right? They vary slightly in terms of their capabilities (anti-aliasing, background images, etc.). So if you’re not up to the heavy lifting or your requirements are very light (just basic rounding) these plugins more than fit the bill.

Classic Rounded Corners

Now, if you’re looking for something that regular borders and the plugins above can’t manage, take a look classic implementation of rounded corners. We’re using images to make things look exactly like we want them to.

Essentially, we’re wrapping (if you think visually, it’s more layering actually) tons of divs in order to apply different background images. All these divs are needed because you can only apply one background image to an HTML element.

So a basic run down is that we need four (4) divs for the corners (top left, top right, bottom left, bottom right) and four (4) more for the sides (top, bottom, left, right). This allows us to add the four images in appropriate positions. Please note that all these divs gives us the option of having rounded divs that can be freely resized.

As mentioned about, the problem is that these are eight (8) huge divs, which are not very semantic; not to mention they add useless code to the HTML download.

Some things to note:

• Side Divs First – Top, Bottom, Right, and Left divs must be on the outside of the corners. If not the effect may not come out right. I think it has something to do with transparency, but somethings are easier to fix than to diagnose.
• Check Transparancy – Keep in mind that if your images are PNG you might need to apply some of the horrendous IE 6 hacks.
• Padding and Margins – I don’t think the original article mentioned, however since we are layering divs, they shouldnt’ have any margins. Divs don’t usually do, but depending on your current styles, you might need to reset.
• Perfect Slices – Doesn’t really need much explanation, but your images need to be sliced perfectly so that everything lines up right.

Dynamic Divs

Now, this is where the beauty of jQuery comes in. This is a modification of this tutorial. We’re going to use javascript to inject these divs where we need them.

This is the markup we are aiming for:

<div class="rounded">
	<div class="t">
		<div class="r">
			<div class="b">
			 	<div class="l">
					<div class="tl">
						<div class="tr">
							<div class="br">
								<div class="bl inner">
									Stuff in here
									should appear
									perfectly rounded
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

I know, messy right? Although the original article mentions wrapping these around your main div, but it works perfectly fine by putting them inside. Also, it enables us to do some fun stuff later on. Since all these guys have no padding, the inner class is needed to apply needed padding for contents. You could just apply these styles to bl however, I don’t want to have to remember which one of these is the inner one.

Here’s out basic CSS

.t  {background: url(t.png) 0 0 repeat-x;}
.b  {background: url(b.png) 0 100% repeat-x}
.l  {background: url(l.png) 0 0 repeat-y;}
.r  {background: url(r.png) 100% 0 repeat-y;}
.bl {background: url(bl.png) 0 100% no-repeat;}
.br {background: url(br.png) 100% 100% no-repeat;}
.tl {background: url(tl.png) 0 0 no-repeat;}
.tr {background: url(tr.png) 100% 0 no-repeat;}

Notice we’re repeating the images used for the sides, so slice accordingly.

With jQuery, this is the only HTML that you need:

<div class="rounded">
	Stuff in here
	should appear
	perfectly rounded
</div>

Now, isn’t that much nicer?

Now, here’s the magical jQuery code:

$(document).ready(function() {
	$(".rounded").wrapInner('<div class="t"><div class="r"><div class="b"><div class="l"><div class="tl"><div class="tr"><div class="br"><div class="bl inner"></div></div></div></div></div></div></div></div>');
});

Now, I might have made a typo, so you may need to check. The wrapInner( ) function does exactly what it says (sort of): it wraps your content with those nested divs, but on the inside.

Um, yeah, that’s about it. Cool huh?

Yes, It’s Extensible

Now you can use this and apply it to tons of different rounded corners on your site. Simply add the rounded class to the div in question. eg:

<div class="widget rounded">
	New stuff here
</div>

Then you modify your CSS to apply the new images:

.widget .t  {background: url(widget-t.png);}
.widget .b  {background: url(widget-b.png);}
.widget .l  {background: url(widget-l.png);}
.widget .r  {background: url(widget-r.png);}
.widget .bl {background: url(widget-bl.png);}
.widget .br {background: url(widget-br.png);}
.widget .tl {background: url(widget-tl.png);}
.widget .tr {background: url(widget-tr.png);}

Now you see why we’re wrapping inside the div, instead of outside. That way, we can target different images for different divs on the site, without changing any javascript calls. Cool huh?

Now technically, we don’t need the images on the original divs, however I haven’t found a clean (shorthand) way of applying background positions and repeats without an image URL.

Hope you enjoyed and hope it works.

• The Lazy Developer’s Way to Rounded Corners in CSS – Rounded Corner Generators
• Create 3 Column CSS Layouts Like A CSS God!
• Nifty Corners: Rounded Corners Without Images
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• Wordpress Widgets

Introduction

Before I even start, let me state that I’m a JQuery fan. Ever since I’ve started with JavaScript frameworks I’ve weighed the pros and cons, and trust me there are a lot. You’ll always find people arguing Prototype, JQuery or MooTools. I went with JQuery because it could do all that I wanted with the least amount of bloat. I’m sorry, Prototype may do a hell of a lot, but I don’t think that I could make enough use or that 100 KB to justify it. Plus, Prototype can’t even handle basics on its own without having to piggy back off of script.aculo.us and it’s effects library.

Speed

Now with every new version of a Framework that comes out, this argument comes up again and again. Finally, we have something to put the arguments to rest.

In my personal testing, I’ve found that JQuery 1.21 leads the pack, but only in Internet Explorer. In Firefox it comes in dead last. Does this discourage me? Maybe a lil’ bit. Am I going to stop using JQuery and switch to Prototype? I think not.

What Do You Need?

It all depends on your uses for said framework. From the looks of it, Mootools looks more like a full fledged programming language. With all the definitions of new objects, etc. If, for some reason I’m needing to build an application in JavaScript then I’ll revisit it. But until now, the most JavaScript that I’ll be doing is so simple effects on elements (shows, hides, slides, class changes, etc) and a couple Ajax requests.

For this I don’t think I should suffer the 120 KB that Prototype has to offer, even though it’s blazing fast in Firefox. With that said, even if I hate Internet Explorer, it is still, by far, the most popular browser out there. So I take comfort in the fact that the majority of my audience is getting the speed benefits of JQuery.

• Give Me 15 Minutes and I’ll Make You A jQuery Expert
• 5 Ways To Annoy Your Audience
• Prepackaged Prototype and Script.aculo.us – Ready For Download
• I Hate Internet Explorer 6.0 Even More
• Stop Hating On PHP And Learn To Code Better

Well we now have this same luxury for Prototype and its Script.aculo.us library read for download.

Enjoy folks.

Get $100 in FREE Links.

• JQuery, Prototype, and MooTools Benchmark – SlickSpeed
• Comparing Lightbox Scripts
• Give Me 15 Minutes and I’ll Make You A jQuery Expert
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• Making Sure Your Javascript Doesn’t Rise When Baking

I’ve always wondered why no one has included something like this for Javascript, since that’s usually the bigger culprit when we’re talking about document size. I’ve tried using Minify in the past. However, it took a lot to get it working right. And I really hate hacking stuff just to work with CakePHP. That, coupled with the fact that I’m a lazy bastard, meant that I gave up the Minify train rather quickly.

Mark Story To The Rescue – JSMIN Javascript Helper

At the time, I hadn’t heard about the JSMIN library, which does pretty much the same thing the Minify does, but without the CSS. Luckily, Mr. Story had some vision after his Christmas festivities and cake up with a JSMin Helper for CakePHP. This helper works by Minifying the chosen Javascript. This involves stripping unnecessary characters (line breaks, comments, spaces, etc) from the .JS file.

It also includes functionality to cache the resulting files. What more can you ask for?

Usage:

// Using the link:
echo $jsmin->link('myJS');
// Link with array of files:
echo $jsmin->link(array('file1', 'file2', 'file3'));
// Using a codeblock:
echo $jsmin->codeBlock("alert('javascript');");

The only slight caveat is that PHP 5.0 is required for the JSMin library, but who still runs PHP 4 anyway?

Mr. Mark, we thank you.

• CakePHP Contact Form – Quick and Dirty
• CakePHP Auth Component – Will You Remember Me Tomorrow?
• Give Me 15 Minutes and I’ll Make You A jQuery Expert
• Cute CakePHP Trick of the Day – GenerateList Empty Slot In List
• Bindable Behavior Now In CakePHP Core

In the spirit of rapid web development, I’ve stumbled upon jQuery. Here’s a testimonial from a jQuery user:

You start with 10 lines of jQuery that would have been 20 lines of tedious DOM JavaScript. By the time you are done it’s down to two or three lines and it couldn’t get any shorter unless it read your mind.”

In my experience it’s been more like five (5) lines of jQuery.

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

I’ve found jQuery great for the following reasons:

• Simple Ajax in a breeze
• Search for elements in the DOM is made easy
• The helper function [ $() ] is a pleasure to use
• Most importantly: it handles cross browser compatibility.

Here We Go – Tutorials Galore

Your first step will be to Download jQuery 1.2.1 and include it in the head of your web page. After this you need to start reading some tutorials. Don’t worry, it’s going to take 15 minutes tops for you to start writing usable code:

• Visual jQuery – This is by far, my number one resource. It consolidates the API in a visual form, making easy to navigate.
• 15 Minutes of jQuery – Great for beginners
• jQuery for JavaScript programmers – Interesting tips on how to debug.
• Tutorials:How jQuery Works – Another beginner tutorial
• Tutorials:Getting Started with jQuery – Getting Started (for beginners)
• Tutorials:Live Examples of jQuery – This is what worked for me. Sometimes you just have to see it in action.

Why I Use jQuery

jQuery is fast, small, and easy to learn. It’s the core for many of the simpler Ajax I use in my web pages. Since I’m using CakePHP, there’s also Prototype, but that’s another story. I really don’t like having to learn a new language when I’m trying to do something simple. I don’t want to go delving into DOM and all that stuff just to dynamically add a class onto an element in the form. If I was a JavaScript programmer, it may not be a big deal for me. But, to me, there’s nothing worse than writing bad code to get something done, just because you don’t understand what’s going on. That’s why frameworks are what I live by.

Don’t wait, get started with jQuery today.

• JQuery, Prototype, and MooTools Benchmark – SlickSpeed
• A Bit On Open Source And Some Baz Background
• Ajax Activity Indicators
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• To Suck or Not to Suck, That is Question for JavaScript

General

1. Doug Boude presents DEMYSTIFYING JSON posted at Doug Boude (rhymes with ‘loud’)
2. sylv3rblade presents Stages of Software Development posted at Atma Xplorer, saying, “My take on the process of software development”
3. prakash presents A2Z Informative-Technology, Software, Internet, Tips, Ideas posted at A2Z Informative, saying, “Identifying the color code of an image on the screen is not an easy task. Usually it involves a multi step process and is time consuming. But this tool is able to find out HTML, RGB or HEX color of any pixel on the screen with just a single mouse click. This little tool is very useful for webmasters.”
4. Thorsten Ott presents Sourcebench – freelancer sites reviews posted at Sourcebench – building a better web.
5. Scott H presents 15 Web Sites College Students Can’t Live Without posted at College and Finance, saying, “Not specifically about design, but has a great list of web sites students love, including StumbleUpon which, in terms of developing a web site, can be quite useful.”
6. Raj Sheelvant presents Attention HR: Young workers demand Web 2.0 posted at IT Strategy, saying, “Why Web 2.0 infrastructure in corporations important to attract young talent”
7. aquariphile presents Choosing Between YUI CSS & Blueprint » By Don Albrecht » article » Ajax Bestiary posted at Ajax Bestiary, saying, “With all the recent hype surrounding the Blueprint CSS framework, The powerful YUI framework has been lost in the noise. Both frameworks are powerful, but, which framework is right for your project?”
8. edithyeung presents Want More Traffic? Find Out Here? posted at Edith Yeung.Com: Dream. Think. Act..
9. Amanda Harris presents Creating A Website For Your Charity posted at iBakeSale Blog.

Javascript

1. Doug Boude presents Client-Side Interactivity without Ajax posted at Doug Boude (rhymes with ‘loud’), saying, “this post has a Coldfusion approach to an Ajax alternative…”

That concludes this edition. Submit your blog article to the next edition of Web Development 2.0 using our carnival submission form. Past posts and future hosts can be found on our blog carnival index page.

Technorati tags: Web Development 2.0, blog carnival.

• Web Development 2.0 Carnival – September 24, 2007
• Web Development 2.0 Carnival – November 21, 2008
• Web Development 2.0 Carnival – December 26, 2008
• Websites on Wide Screen – How The Other Half Lives
• Another “What Is Ajax” Introduction

I has finally occurred to me that I should have gotten my own domain name a long time ago. Really, I don’t know what I was waiting for, but it was about time. Since my focus is Web 2.0, WebDevelopment2.com was an obvious choice. I’ve already written about moving wordpress to a different domain, so moving to this domain was walk in the park. I loaded up PhpMyAdmin and exported my database. Pulled up Notepad++ and did a search and replace for my old URL to the new one. Saved the file, zipped it back up, and uploaded it to the server. Since I usually deal with large databases, I didn’t even bother trying to load into PhpMyAdmin. Bigdump is now my favorite database importer for MySQL.

Finally, I loaded up the .htaccess file on the old domain name and slapped in a RewriteRule with a 301 redirect to WebDevelopment2.com. And Viola, here we have Wordpress blog perfectly redirected, without losing a single inbound link. Sure, the Page Rank on the domain name is 0 (for now), but with a name like Web Development, it won’t be for long.

New Focus

I must admit, that when I started this blog I was only vaguely interested in web development and web design. My interests usually hop about like that. I started this blog when AJAX hit the scene. It was the next hottest thing and the birth of Web 2.0. However, coding AJAX, although not difficult, was tedious. And we all know, I don’t like tedium.

Lately, things have gotten a bit more serious, with respect to my interests in web development. But, I’m no less lazy. As a result, my focus (and hence the focus of this blog) is going to shift slightly. Many of you will not notice, but those of you who have been paying attention will see that something has changed. I’ve come to learn the beauty of web development frameworks, such as CakePHP for PHP (duh), Protoype and JQuery for Javascript and AJAX, and even Blueprint for CSS. Don’t worry, if you haven’t heard of any of these, you soon will. Being as lazy as I am, the DRY (Do not Repeat Yourself)Â principle naturally has you gravitating towards frameworks. If someone else; not just someone else, but an entire team of people, work on product for months and even years, I tend to think that they’ve done a better job than I ever code.

This is the new focus of my blog and I hope I don’t lose any of you guys and can bring greater quality and relevance to the things you read here.

• Moving Wordpress To A Different Domain
• Your Choice of Web Development Framework Doesn’t Matter
• Comment Relish Plugin + High CPU Usage – Fixed The Right Way
• Do We Not Understand What Bias Means?
• Here’s a Quick Way to Use Multiple Local Roots With WAMP

Happy July 4th to all you guys.

Source: Accessible expanding and collapsing menu [456 Berea Street]

• The Secret of Cancelling and Stopping Events using JavaScript
• Web 2.0 Buttons On The Fly
• Very Fancy Menus – CSS And JavaScript
• How To Make PayPerPost and Google Adsense Play Nice – MightyAdsense Plugin Hack
• CakePHP 1.2 Beta Released Fresh Out of The Oven – Happy New Year

How It Works

First of all, stop freaking out. We’re not exactly stealing your browser’s history. We’re doing a bit of guessing. It can only be run against a defined list of sites. This means that you can only check whether someone has visited a site, say Disney.com, but you can’t ask their browser for a list of the sites they’ve visited. That information is still kept confidential by the browser.

What we do is use some JavaScript to check the color of the links on a page. Ahhh, I see the lil’ light bulb going on over your head right now. Yep folks, that’s all. Nothing fancy. So rest at ease, your browser history is safe for the most part.

SpyJax: Go check it out, and figure out how to stop it, or at least limit the way people use it on you.

• JavaScript Only Links, Why? Someone Tell Me Why, Please
• What Has Your Domain Been Up To
• Web Development 2.0 Carnival – September 8, 2007
• Automate MySQL Database Backup With WebCron – No Cron Jobs? No Problem – Part 1
• Nifty Corners: Rounded Corners Without Images

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.

• LightBox, LightBox2 and LightBox Plus
• JavaScript Reflection – Wet Floor Effect
• Incredible Expanding Menu
• LinkMania: December 3, 2006
• More JavaScript Reflections – Automated JavaScript Vertical Flip Image Reflection

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.

Why We Shouldn’t Use JavaScript Links

Bottom line is you shouldn’t be using JavaScript and AJAX where they don’t belong. Although certain specific elements on this page may require (benefit from rather) Ajax, there is no excuse for having a JavaScript link to the About Us page on a website. You run into obvious problem with SEO on the page obviously, since the only indexable page the really exists is the first instance of www.csoweb.org. Everything else is done on that website and the page is dynamically generated through JavaScript. So we actually get loathe by the Google search engine for trying to imitate them, that’s funny.

You piss off most of your visitors. Some people bookmarks specific web pages and not only the home page. It’s really annoying when you try to bookmark a web page and everything points back to the home page.

Just my two cents I guess.

Why JavaScript Links ?

• FeedBurner + Google search cache = Instant Blog Back Up
• How To Make PayPerPost and Google Adsense Play Nice – MightyAdsense Plugin Hack
• Website Promotion with DiscountClick
• PayPerPost’s Answer To The Google PageRank Issue – Real Rank
• Link Tracking with Ajax

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.

• LightBox, LightBox2 and LightBox Plus
• JavaScript Reflection – Wet Floor Effect
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• Comparing Lightbox Scripts
• Optmize Images for the Web

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:

function stopEvent(e) {
    if (!e) e = window.event;
    if (e.stopPropagation) {
        e.stopPropagation();
    } else {
        e.cancelBubble = true;
    }
}

and

function cancelEvent(e) {
    if (!e) e = window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

Explanation
stopEvent, well stops the event. Seriously, it stops the event from being called by other background elements. Many elements may use the same event called by just one. So stopping it here ensures that it doesn’t propagate to the background elements. cancelEvent squashes the browser’s default behavior.

source Ajax Cookbook

[tags]ajax, browser, firefox, ie, javascript[/tags]

• Debugging Ajax
• AJAX Client Engine (ACE) – Problems
• JavaScript Only Links, Why? Someone Tell Me Why, Please
• Enter AJAX
• Should Ajax Be Independent of the Server?

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:

class="reflect"

. That’s it. It almost seems too simple doesn’t it?

• More JavaScript Reflections – Automated JavaScript Vertical Flip Image Reflection
• SEO Inc – Search Engine Optimization Company
• Very Fancy Menus – CSS And JavaScript
• Optmize Images for the Web
• Give Me 15 Minutes and I’ll Make You A jQuery Expert

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.

In the HEAD section of your HTML code.

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

	<script type="text/javascript" src="lightbox.js"></script>

To use it, simple add rel=”lightbox” to any “a” tag linking to an image file:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

As you can see, you can have pure text in the link tag or a thumbnail image like most people do. Yep, that’s it. Your website is covered with a grayish transparent background image and looks as if it’s disabled. There is an animated GIF (can be any AJAX-like indicator you wish) that pops up while the image is loaded, then Voila. Very sweet lil’ script. Of course it’s backwards compatible with browsers with JavaScript disabled. It’s just an “a” tag after all. There is also support for the transparent PNG file in IE 6. Do check out LightBox JS.

There are variations of this script. Lightbox JS v2.0 has a more AJAX-y feel to it. The image box pops up and closes in a nice fluid motion. It includes one more JavaScript include for this though. They also added image grouping, where you can go from one image to the next while the pop up is still enabled.

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Over this past weekend is when I had my first experience with the LightBox script. I tried using version 2 for a particular application and one problem I had was what happened when images were two large for the screen. Well, it loads the entire image like you tell it to and the user then needs to scroll throughout the page to view the image. Some may simply say, create you images to an acceptable size, but the application I was using didn’t offer than flexibility. The images I would be serving came from the user. And only God knows what users have in mind for your application. Enter LightBox Plus. This loads the image and fits it into the appropriate screen size and adds a resize feature to enable the full size of the image. When you resize is activated the user can then use the mouse wheel to zoom in and out.

Behold, the marvels of JavaScript and CSS. We are definitely taking huge step into Web 2.0.

• Comparing Lightbox Scripts
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• Optmize Images for the Web
• WYBISYG – What You Bake Is What You Get – CakePHP + FCKEditor
• Top 10 CSS Image Galleries – DIY

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.

• LightBox, LightBox2 and LightBox Plus
• 6 Places to Use Ajax
• Google Picasa Typo
• See How Easily You Can Increase Page Load Time 10 Fold With jQuery
• WYBISYG – What You Bake Is What You Get – CakePHP + FCKEditor

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.

• Why My Wordpress 2.7 Install “Failed”
• JavaScript, XMLHttpRequest (Ajax) Cheat Sheet
• Ajax Activity Indicators
• CakePHP Contact Form – Quick and Dirty
• Ten Reasons to Learn C (not C++)