Archive for the ‘Javascript’ Category

Build A Simple jQuery Questionnaire Tutorial

Wednesday, July 3rd, 2013
Build A Simple jQuery Questionnaire Tutorial

Nothing is ever simple

Recently I had to create what we termed a “wizard.” Basically a set of questions that showed different results depending on the answers. I quickly realized that while the questions themselves were simple, setting them up was not. You have to do a bunch of things, check to see if anything is actually checked (because I used radio buttons), and if not throw an error. If there isn’t an error, which answer did they give, because the results changed depending on what the value was. A whole ton of stuff came up that I didn’t think about until I got into it. Oh, and I never realized that you could put form inputs outside of a form element. You can, and I did. As you will see below. While that doesn’t really pertain to anything, it was something I learned along the way. On to the questionnaire!

The setup

Below you can see the basic HTML for the first question, which by the way is the only one I’ll dive into. There were more, but they were more of the same. First I have the actual question, then two radio buttons to choose from for an answer.

Both inputs have the same name so they are related, but the actual text answer is different, with the value relating to it. If you choose electric guitars, the answer (or value) should reflect that. If the answer is acoustic, well…you get the idea. Right after that is the ‘Next’ button, which would in theory bring you to the next question in the process. Finally, you have the error message, which should be displayed none in the CSS. We don’t want to tell them they are wrong right off the bat, do we?
(more…)

jQuery – Creating Elements Part II: HTML5 Data Attributes

Friday, July 13th, 2012
jQuery – Creating Elements Part II: HTML5 Data Attributes

Just when I think HTML5 sucks…

It still annoys the crap out of me, but there are some cool things in there. I just hate when people throw that word around like “We want to redo this flash to be HTML5.” What the hell does that mean exactly? And if you ask them, they have absolutely no idea. Its just a buzz word they are throwing around trying not to sound like they are out of touch. On a current project that I am working on, I came across a problem I needed to solve.

I needed to load videos on a page using the HTML5 video tag, with a flash fall back. The problem though is that there were about ten of them on the page, and the browser was reading the source tags and loading them. If this were just one video, this wouldn’t be a problem, but there were more and it was slowing things down.

The Solution

Which was to load the video on the fly when the flyout was triggered, but I needed to figure out how to get the right video to go with it. This is how I solved it.

As usual we’ll start with the HTML. First we have the link that will open the modal window. You don’t need to see the javascript that actually controls the modal, cause you can figure that out on your own. DO pay attention to the attributes on them.

(more…)

jQuery – Creating Elements Part I: Using The each() Function

Wednesday, June 27th, 2012
jQuery – Creating Elements Part I: Using The each() Function

Generating a list

I’m working on a project that required an unordered list. Who the hell cares, right? Well the list was the navigation for a timeline slider. Each block of content on the timeline needed its own list item to move the slider’s position so that the block was centered. The problem though was I didn’t know how many blocks there would be, and I wasn’t sure who would be making the changes later, if there were any. So here is a way to create a list, based on the number of other elements and their ‘rel’ attributes.

I know that barely makes sense, but you will understand once you see what I’m doing. Take a look at the demo…

View Demo

(more…)

A Simple jQuery Photo Gallery

Thursday, December 29th, 2011
A Simple jQuery Photo Gallery

Simple is best

I haven’t done anything on jQuery in a while, so I thought I would write about another simple photo gallery I had to write. Nothing complicated, and easy to add to or edit. I’m basically writing some jQuery to automatically write the large image source attribute, and the thumbnail’s CSS background property, then throwing in some simple effects. For those of you that are just learning jQuery, you will hopefully learn something and be able to modify this little script to suit your needs. So lets get started. Take a look at the demo first though, so you can see what is going on.

View Demo
(more…)

jQuery Mobile Review

Thursday, July 28th, 2011
jQuery Mobile Review

Great things come in small packages

A project I’m working on had me looking into how to create a nice looking mobile site. Two very popular frameworks came to mind: jQuery Mobile, and Sencha Touch. The back-end guy I’m working with on this project recommended Sencha Touch, so I took a look at that first. Let me just say that if you haven’t worked with Ext.js and it’s panel component, or are not even familiar with that library, you are going to have one hell of a time. It is not all that easy to use, and the limited amount of tutorials on how to use it suck beyond belief. After a couple of hours fiddling with it, I decided to say screw it, and went over to jQuery Mobile. The difference? I got a site up and running in roughly a half hour with no problems themeing. jQuery Mobile wins in ease of use hands down.

This isn’t to say that Sencha Touch is bad, because it sure looks good, but it isn’t as intuitive as Mobile. This isn’t really about Touch though…it’s about Mobile. So let’s get into it!

jQuery Mobile logo

(more…)