Posts Tagged ‘Javascript’

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 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…)

How to Build a Horizontal jQuery Accordion

Thursday, July 21st, 2011
How to Build a Horizontal jQuery Accordion

Sliders, accordions oh my!

If you search for jQuery slider, you will find tons of posts and articles on how to do so. There are plenty of ways of building one, and I haven’t really seen any two that were exactly the same. Hell, even I wrote on how to build a jQuery slider, using the slider on this blog as an example. You know what is quite difficult to find though? Tutorials on horizontal accordions. I had a hell of a time figuring out how, because most of the articles are about using a plugin. Which, if you have read any of my posts in the past, you will know that I like to do things myself most of the time. I only found one that was super helpful, and it was buried a few pages in. The only problem is that it was using an unordered list, and I needed it to use divs. Luckily for me it was easy to change, and if you care to view the original tutorial over at Design Chemical (written by a guy named Lee I believe), please do so and tell him he rocks. Take a look at the demo first so you can see what the end result looks like.

View Demo

(more…)

Tutorial On Using setInterval To Make A jQuery Rotator

Thursday, April 21st, 2011
Tutorial On Using setInterval To Make A jQuery Rotator

A combination of things

I was tasked last week with building…well, I don’t know what the hell to call it, but at work we named it “the wheel.” Basically, it is a circle with a bunch of gray icons around it. I needed to get them to change to blue, show a larger graphic with additional content, and change to the next icon after a certain amount of time. When one of the icons is clicked though, the animation has to stop, and show whatever content goes with that icon. I used setInterval to accomplish the rotation through the icons, and pretty much the same jQuery I used on the Portfolio Content Gallery I wrote about. You’ll get a better idea of what I am talking about if you see it. I sped up the rotation so you don’t have to wait as long.

View Demo

I’m still learning Javascript/jQuery, and I have never used setInterval before, so this was a lesson for me as well. Turns out it is actually pretty easy, but I thought I would show you how to accomplish this so you don’t have to do any ridiculous searches like I did.

(more…)

jQuery Portfolio Content Gallery

Friday, April 1st, 2011
jQuery Portfolio Content Gallery

Been very busy

Portfolio imageFirst, apologies to my subscribers for not writing a lot recently, but I have been working some overtime, and redesigning my website’s interior pages. But I was working on my portfolio page and thought I would share what I have done. All in all, it is not overly complicated, but I like that it is clean and simple. You’ll also get to see the beginnings of my redesign of my interior pages (just keep in mind that it is not finished yet). Take a look at my new portfolio page so far:

View Demo
(more…)