Posts Tagged ‘jQuery’

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

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

jQuery Fly Out Menu Update, And Web Development Goodies

Wednesday, May 18th, 2011
jQuery Fly Out Menu Update, And Web Development Goodies

JC Designs update

I know it has been like a week and a half since I last posted, but my life has been busy. Very busy. Today started out crazy, with a person in the UK wanting 63 psd files sliced and built. Ya, you read that right….63! I thought to myself “Self, this could be some good money.” All had the same outer shell, but the content areas were insanely packed with forms, icons, lists, navs…seriously a ton of work. Was for a online gaming company. You know how she found me? Googled “how to slice a psd” and I showed up on the bottom of one of the pages, she came here, clicked contact…and there you go. The problem? Budget was $1200 and needed it in 2 weeks. I actually felt bad turning that down, but there is no way I was going to go through that stress, and that amount of work for $1200. I was think at the least 5-6k.

Anyway, here is the list of goodies I’ll comment on later:

  • CSS3 -moz-crisp-edges, and -webkit-mask
  • CSS3 Gradient lines under links
  • CSS Regions

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