Posts Tagged ‘jQuery’

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

A Simple jQuery Fly-Out Menu

Tuesday, January 4th, 2011
A Simple jQuery Fly-Out Menu

I haven’t made a post about jQuery in a while

Which is what made me decide to write my first post of 2011 on it. First, thank you to the people who commented here on The Web Machine in 2010. Also thanks to the over 730 RSS subscribers I have and the 25 or so followers on Twitter. This blog has been up for about a year now, and I look forward to this one. I hate all of you comment spammers though! So huge thanks to Akismet.

Anyway…a while ago I had thought about creating WordPress themes and try my hand at selling them, but it soon became apparent that the market was saturated. I don’t feel like wasting my time right now on putting effort into that. On one of those themes though, while I am not happy with the look, I created a fly-out menu using jQuery that I really liked. I thought I would share that with you since it takes less than 8 lines of code. So take a look at the demo, and then we’ll jump right in.

UPDATE 5/17/11: Removed the position:relative from the li style. It now gets the position:relative in the hover function in jQuery by adding/removing a class ‘addPosition’. This fixes the submenu appearing underneath the main menu in IE7/8. This was only noticable if you started changing the position of the submenu to be overlapping the main menu. My code here assumes you don’t do that, but with the fix it works great in IE7/8.

NOTE: In IE6, only the first level of the fly-out works. The second is cut off, but since most of us our on our way to not supporting it, I didn’t care. If you have the simple solution to fix that, let me know.

Original:
View Demo

More stripped down version (asked for in comments and the CSS now shown in sample code below):
View Demo

(more…)

Wijmo And Headjs Reviews

Monday, December 13th, 2010
Wijmo And Headjs Reviews

Undiscovered frontier

I love seeing new things being created to make web developers’ lives easier. Some suck, and some rock. Of course I am not the final judge. Usually I find these either from receiving a tweet or a list that shows all the stuff we, in theory, should be aware of. Two that I was intrigued by recently are Wijmo, a jQuery UI Widgets kit, and Head JS, which claims that it will be the only script you need in your head tag. Let’s get started, shall we?

Apparently Wijmo is from outer space

Aside from an attempt at humor, Wijmo makes a really bold claim:

There’s is a new highly volatile element for creating websites and web apps on earth. We call the new element “Wijmo”. Wijmo is a complete kit of over 30 jQuery UI Widgets. It is an extremely dangerous mixture of jQuery, CSS3, SVG, and HTML5 that when combined become an unstoppable force on the web.

(more…)