jc-designs.net » jQuery

jQuery Mobile Review

jcDesigns — Thu, 28 Jul 2011 03:42:47 +0000

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!

Pages, nav bars, and buttons – this stuff is easy!

Not just those specifically, but everything in general. Pages though, couldn’t be any more simple because you can do it on one layout. Each different type of section is identified by the attribute ‘data-role’. A page has a data-role of page, a nav bar has a role of nav, footer has a role of footer, header – header, and it goes on from there. You could almost guess at most of them. So let’s say you have a mobile page, and you want a header, a nav bar, the content section, and a footer. Check out the simplicity of how you would write this:


 
	
		Home
	
 
        
		
			Home
			About
		
	
 
		
		Any idiot with an HTML editor can do this!	
	
 
	
		All your footer crap goes here. Like social icons that no one cares about.

For the second page (about in the above example) you would just copy the above html, and change the id of the page dive to ‘about’, and switch the ‘ui-btn-active’ class to the ‘about’ link in the nav, and you are good to go. Want more pages? Keep doing that. That is what makes this framework so nice. I don’t have to think about what I am doing. How about buttons? Piece of cake!

Contact us
Pricing
services

Or a list:

Favorite Movies

	Goonies
	Better Off Dead
	Interview with the Vampire

Theming jQuery Mobile

Theming also couldn’t get any better. There are five basic theme swatches, which is what the framework calls them. They are lettered a, b, c, d, and e. Certain data-roles default to specific swatches, like header and footer, which default to ‘a’. Others default to c. There is a hierarchy on how something defaults, but you don’t really care about this crap because you are going to style your own in any case.

Well besides adding the necessary script to get jQuery Mobile to work, there is also a CSS file you will link to. All of the required styles are in there. So let’s say you want your header to use swatch ‘b’ (which is blue), you would just have to add the data-theme attribute with the correct letter, like so:


     Home

Your header would now have the blue color with white text. But no one is going to use the that blue color, so you go into the style sheet, and find the class and change the color. You could create a whole new swatch theme by copying the necessary styles, and changing the letters within the class names to ‘f’. Be careful though because any button that is placed within a bar, such as the header, will automatically be assigned a swatch letter that matches its parent bar.

jQuery Mobile for the win!

My main point in showing you the things that I did above is that the entire framework is easy as hell to use, from basic html to methods for page transitions, to touch events. The documentation is really easy to read, gets to the point quickly, and gives great examples. This is one of the major reasons why I think Sencha Touch will be the number two framework. Anyone can create a nice looking mobile page with jQuery mobile, and get it done quickly.

This doesn’t mean that the framework only does simple things. It is up to you to use it and do some very cool stuff with it. I also just touched on the basics, so be aware that there are things you have to look out for. An example being that anchor tag linking doesn’t work because Mobile uses the hash tag to identify pages. Point being, go and actually read the documentation on each part you are working on so that you don’t run into problems later.

For the brief time I have used jQuery Mobile, I am already a huge fan.

Coupon Code: webmachine

How to Build a Horizontal jQuery Accordion

jcDesigns — Thu, 21 Jul 2011 14:29:21 +0000

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

First things first – the HTML

Let me first state that the there is an issue with IE7 with the HTML/CSS. The Javascript works fine, but the image is too far over. I will post the corrections for it later, I just wanted to get the post up for you since it has been a while since I have written anything.

Note: I am only showing one panel below, but I am using 4. You can see the all of them if you view the source in the demo


    
      
       Section 1 Header

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.

As you can see, there is not much there. If you looked at the demo, you will see what is going on in the above HTML. A wrapper (‘#accordion’), a div for each little pink section (.’pink’), a div for each individual panel (‘.panel’), and the content within – pretty easy stuff.

The styles

Again, not much going on with the styles. Below is the important stuff, which doesn’t include the classes that call the individual pink bar images.

#accordion {
	list-style:none;
	margin:30px 0;
	padding:0;
	height:270px;
	width:980px;
	margin:0 0 0 11px;
	border-top:2px solid #000000;
	border-bottom:2px solid #000000;
	overflow:hidden;
}
#accordion .panel {
	float:left;
	display:block;
	height:270px;
	width:44px;
	overflow:hidden;
	color:#666666;
	text-decoration:none;
	font-size:16px;
	line-height:1.5em
}
#accordion .panel.active {
	width:848px
}
.panelContent {
	padding:15px 15px 15px 55px;
	height:240px;
	width:778px;
}
.pink {
	width:42px;
	height:270px;
	float:left;
	background:url(../images/accordionSprite.png) no-repeat 4px 85px #f980a1;
	border-right:2px solid #ffffff;
	cursor:pointer
}
.last {
	border:none
}

Some things to note about the CSS. My total width is 980px. The reason the active panel (the one showing) is 848px is because there are 4 panels, 3 of which are closed and each of them have a total width of 44px. So 980 – (44 x 3) = 848px. It is 44px because the width is 42px plus a two pixel border. See, there is some math you have to do to get everything to fit correctly. Make sure you are paying attention to that when you are building your own.

jQuery please!

Now on to what you really wanted to see, right? I’ll explain what is happening below.

$(document).ready(function(){
 
    activePanel = $("#accordion div.panel:first");
    $(activePanel).addClass('active');
 
    $("#accordion").delegate('.panel', 'click', function(e){
        if( ! $(this).is('.active') ){
			$(activePanel).animate({width: "44px"}, 300);
			$(this).animate({width: "848px"}, 300);
			$('#accordion .panel').removeClass('active');
			$(this).addClass('active');
			activePanel = this;
		 };
    });
});

Once again, not a heck of a lot of code to get this thing going. The first two lines, after the document ready thing of course, is for getting the first panel within the wrapper (‘#accordion’), and giving it a class of ‘active’. All that class does is change the width from 44px to 848px. Whichever panel has the ‘active’ class is the one that is showing.

Next comes the click function, which I am using delegate() for so that there is only one event handler, rather than one for each panel. Then the script checks to see if the panel click is NOT the active one, and if it isn’t, animate the active one’s width down to 44px, with the animation time set to 300. Then animate the panel that was clicked, so that it’s width becomes 848px, at the same speed.

After that, it removes the ‘active’ class from all of the panels, and adds the class back to the one that was clicked. The last line then makes the ‘activePanel’ variable be the panel that was clicked.

One last note. I did have the following in place of the 300 speed, but it didn’t seem to need it, so I took it out. It clears the animation queue, but I think the accordion moves so fast that it doesn’t seem to matter if it is in the script.

$(activePanel).animate({width: "44px"}, {duration:300, queue:false});

$(this).animate({width: "848px"}, {duration:300, queue:false});

Conclusion
I am using this exact script in a freelance project I am working on (which I will show you guys when it's done), and I am pretty happy with it. Again, I have to change the HTML and CSS around because of IE7's issue, but the script itself works great in 7 or 8. Didn't check IE6 because I don't really care anymore unless someone specifically asks for it to be supported.
Let me know what you think, and leave a comment!


Coupon Code: webmachine

jQuery Fly Out Menu Update, And Web Development Goodies

jcDesigns — Wed, 18 May 2011 18:56:52 +0000

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

jQuery Fly Out Menu Update

New story now, still with me? A couple of days ago I received an really cool email from a guy that searched for “jquery fly-out menu” and got to my post here. He thanked me a lot for the menu, but was having problems with it in IE7 and 8 after doing some modifications to it. I had already tested it in those browsers and there were no problems. Unless of course you bring the width in so that the sub menus appear above the main menu. The problem is that in IE7/8, they appear below the other main nav li’s. I thought it would be a simple fix, but after 2 hours last night, I was getting really pissed. I solved it through random guessing and some head slapping.

That menu puts a position: relative on all the ‘li’ within the menu. Works fine if you don’t screw with my code because of the way I animate it. The solution? Couldn’t have been easier. Remove the relative position off of the ‘li’s and create a class that adds it back on hover (using jquery), and removes it on roll off. You can see the updated code on A Simple jQuery Fly Out Menu post. Soooo…”fixed” the menu, and I got to see someone use my menu on their site. Was very cool. He also noted that I was the only developer to actually help him, and that this was the 5th menu he’d tried. Also cool was the fact that his boss was excited to put me on paid retainer to help out when needed.

Recent Web Development Goodies – FF and Webkit are going nuts!

Let’s start off with CSS3 -moz-crisp-edges, and -webkit-mask. Smashing Magazine had a pretty good article about The Future of CSS: Experimental CSS Properties. It talked about some cool new stuff, and the first one I liked was -moz-crisp-edges. This is cool if you are doing responsive design, where the images scale as your window size shrinks/expands. It avoids blurry edges on the image as it is being manipulated by the browser. The CSS looks like this:

html  { image-rendering: -moz-crisp-edges; }        /* all images, videos, background-images */
img   { -ms-interpolation-mode: nearest-neighbor; } /* all images, IE */

You can read more about it and a few other properties on Mozilla’s image rendering documents.

The second one I liked was -webkit-mask. Basically it allows you to mask an image using an element with a CSS3 gradient applied to it, or a semi-transparent png. Very cool, and I can see myself using something like that with the gradient, but if I was going to go through the trouble of making a png to mask it, I might as well just create the entire thing in Photoshop. Here is what the CSS would look like:

.element2 {
	background: url(img/image.jpg) repeat;
	-webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

CSS3 Gradient lines under links

I don’t know about you guys, but I build a LOT of different kinds of navigations. A very common thing I see come across my desk is to use a line between the links, or under them to show they are being hovered over. I’ve been using images to get the effect going, but this cool cat wrote some nice styles to do it with just CSS. He’s got a version that does not use pseudo-elements too! Read it and thank me for passing this on to you. Oh, and scroll down on his page and check out the link about adding depth to a website. Easy, simple, and I can’t believe I haven’t seen more of that.

CSS Regions – Ask and ye shall receive!

A while back I wrote about wishing you could create shapes using CSS. Weird ass shapes, like polygons, circles or whatever. Well gues what? Adobe, of all people obviously reads my blog, and because they respect me sooooo much, decided that was a GREAT idea. It’s called CSS Regions. There are a TON of different properties invovled, but here is a list from their site about it:

Story threading — allows content to flow in multiple disjointed boxes expressed in CSS and HTML, making it possible to express more complex, magazine-style threaded layouts, including pull quotes and sidebars.
Region styling — allows content to be styled based on the region it flows into. For example, the first few lines that fit into the first region of an article may be displayed with a different color or font, or headers flowing in a particular region may have a different background color or size. Region styling is not currently implemented in the CSS Regions prototype.
Arbitrary content shapes and exclusions — allows content to fit into arbitrary shapes (not just rectangular boxes) or to flow around complex shapes.

You can download demos of it here and see some samples. The below CSS example is from a section of a pie chart, so this one line will make one piece of pie:

.slice4 .region {
-webkit-wrap-shape: polygon(217px, 225px 217px, 225px 217px, 0px 179px, 3px 143px, 12px 110px, 26px 80px, 46px 53px, 70px 31px, 98px 13px, 131px 0px, 167px 217px, 225px 217px, 225px )
}

Ok, I know I wished for it, but I really don’t want to plot all that out. This is one of those “cool” things, but totally impractical. Can’t see myself ever doing that even if it was supported by all modern browsers. Who knows though. Never say never.

They are good discussion pieces, but would you use them?

Honestly, these are all pretty neat. I would use the gradient lines and the -moz-crisp-edges, but the the shapes in CSS Regions…not so much. The documents talk about other things that might be useful, but I dislike things that only work in one browser.

What do you guys think?

Coupon Code: webmachine

Tutorial On Using setInterval To Make A jQuery Rotator

jcDesigns — Thu, 21 Apr 2011 14:43:14 +0000

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.

The HTML you need

There is not a lot to this, but seeing the structure will help. The only difference between this and the actual HTML I used is that there are eight content divs, where I am only showing one below. You can view all of the HTML in the demo.


	
		
		
		
		
		
		
		
		
	
        
		
			
			
				Websites
				Content 1 goes here

The jQuery using setInterval

I’ll show you all of the jQuery I used, and then go through it line by line to explain what is going on.

$(document).ready(function() {
	var wheels = $('.wheelIcon');
        var content = $('.wheelContent');
 
	$('#wheel').delegate('div', 'click', function(){
		stopRotation();
		//change the background-position on x-axis so that they become blue icons
		wheels.removeClass('imageChange');
		$(this).addClass('imageChange');
 
 
		//Show or hide the content divs based on which icon is clicked
			$('.wheelContent').fadeOut().delay(500);
			$('.wheelContent').eq($(this).index()).fadeIn();	
	});
 
	function rotation() {
		rotateIcon = setInterval(nextIcon, 4000);
	}
 
	i = 0;
 
	function nextIcon() {
		wheels.removeClass('imageChange');
		$(wheels[i]).addClass('imageChange');
		$(content).fadeOut(1000).hide();
		$(content[i]).fadeIn();	
		if (i<7) {
			i++;	
		} else {
			i = 0;
		}
	};
 
	function stopRotation() {
		clearInterval(rotateIcon);
	}
 
	nextIcon();
	rotation();
});

Well, starting with the first line of the actual script, I’m declaring a variable for all the divs with the class ‘wheelIcon’. That way I am not typing so much later. Same thing with all the content divs. The next block deals with adding/removing a class, so that the icon changes from gray to blue when clicked. It is doing more than that of course.

$('#wheel').delegate('div', 'click', function(){
		stopRotation();
		//change the background-position on x-axis so that they become blue icons
		wheels.removeClass('imageChange');
		$(this).addClass('imageChange');
 
 
		//Show or hide the content divs based on which icon is clicked
			$('.wheelContent').fadeOut().delay(500);
			$('.wheelContent').eq($(this).index()).fadeIn();	
	});

I’m using delegate() so that there isn’t a ton of event handler’s flying around. It places the handler on the div with the id of ‘wheel’, and if any of the divs within it are clicked, it runs the function. One handler rather than eight. The next line is calling the function ‘stopRotation’ which clears the interval, but I’ll get to that.

So an icon is clicked, stops the rotation, and we get to the next couple of lines. It removes the class ‘imageChange’ from ALL of the icon divs, and adds it back on to the one that was clicked. The last piece in this section does kind of the same thing, but with the content divs. It fades out ALL the content divs, and fades in the one whose index value is equal to the index value of the icon that was clicked. Now on to the fun!

The home stretch – setInterval

function rotation() {
		rotateIcon = setInterval(nextIcon, 4000);
	}
 
	i = 0;
 
	function nextIcon() {
		wheels.removeClass('imageChange');
		$(wheels[i]).addClass('imageChange');
		$(content).fadeOut(1000).hide();
		$(content[i]).fadeIn();	
		if (i<7) {
			i++;	
		} else {
			i = 0;
		}
	};
 
	function stopRotation() {
		clearInterval(rotateIcon);
	}
 
	nextIcon();
	rotation();

I created three functions here. One to start the timed rotation, one to do what it should during the interval, and one to stop the rotation. The first starts it, and it is pretty simple. I gave it a name of ‘rotation’, and set a variable to setInterval with the parameters of another function, and a time period of 4 seconds. I set a variable of ‘i’ to ’0′, which I will use in the function I am passing into the setInterval.

The function ‘nextIcon’ does a lot of what the click event does. I remove the class ‘imageChange’ from every icon, the add it to the icon with an index value of ‘i’, which is zero the first time around. That means the first icon is blue right off the bat. I then fade out all the content divs, and fade in the one that has an index also equal to ‘i’, which at the start is again, zero.

if (i<7) {
i++;	
} else {
i = 0;
}

The above says if i is less than zero, add 1 to it, otherwise set ‘i’ back to zero. That keeps the rotation going after it gets finished. Just to note, I have eight content divs, but we are going by index value, which starts at 0, rather than 1.

The last section is the function that stops the rotation. All it does is clear the interval that is set in the rotation function.

Finally, I call the ‘nextIcon’ function to get it going, and then the ‘rotation’ function to set the interval.

Final thoughts on setInterval

I had always wanted to know how to do what I did with this little project, and it was cool to learn how to do it. I was surprised at how uncomplicated it actually is. The only hard part was doing a bit of ‘googling’ to figure some things out. Hopefully this little tutorial saves you some time and taught you something.

If you have used setInterval before, show us what you did!

Coupon Code: webmachine

jQuery Portfolio Content Gallery

jcDesigns — Fri, 01 Apr 2011 22:08:21 +0000

Been very busy

First, 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

The nuts and bolts

I wanted my portfolio page to be simple, and I think I achieved that. Content for the first port image is already loaded, and when you click on an image, the arrow slides and the content switches to match the image. Here is the HTML I used:


     
     
          
          
          
          
          
     


     
          Test Content 1
     
 
          Test Content 2
     
 
          Test Content 3
     
 
          Test Content 4
     
 
          Test Content 5

The CSS doesn’t really matter for this, other than the margin for the arrow is set to 0, because that is what I change using a jQuery animation. Let’s take a look at that, and then I’ll explain what I did to achieve it.

var slides = $('.slide');
var contentWidth = $('.slide').width();
var currentPosition = 0;
 
slides.click(function (e) {
	currentPosition = $(this).index();
 
	//Move the arrow thing move to the right, the 42 is the margin between the slide divs
	$('#portArrow').animate({
		'marginLeft' :  (contentWidth + 42 ) * (currentPosition)
		}, 200);
 
	//Show or hide the 4 items below based on which slide is clicked
	$('.portContent').fadeOut().delay(500);
	$('.portContent').eq($(this).index()).fadeIn();	
});

What is jQuery doing there?

See? Very few lines of jQuery were needed to get this to work. The first line is just a variable to reference all the list-items with the class “slide”. Which technically you could ditch, because I only call it once. I left it in there because at the time, I didn’t really know what I was going to be doing. The second line is another variable used for the width of each individual

. The final variable is to track the position of of the arrow, which is set to ’0′.

Then we come to the click event attached to the li’s. The currentPosition variable’s value changes to be the index number of whatever

is clicked. If you click on the second image it equals 1, if you click on the third image, it equals 2, and so on and so forth. Once an li is clicked, the animation kicks in.

The arrow (which is a div with an id of ‘portArrow’) is moved (left or right) a total of the li’s width, plus 42, which is the margin between each

, and then multiplied by the current position. That number becomes the arrow’s left margin. If you click on the first image, you get (168 + 42) * 0, which is 0, so the arrow’s left margin is set to 0, and the arrow moves to the left. Unless of course the arrow was already on the first image.

The last part deals with the content underneath. This line just fades out whatever content is showing, and gives a delay of 1/2 a second, before going to the next part:

$('.portContent').fadeOut().delay(500);

The last line:

$('.portContent').eq($(this).index()).fadeIn();

This says, out of the div’s with a class of ‘portContent’, fade in the one that’s index matches the index of the

that was clicked. Got it? Good.

Extra credit question

Now for a question for any experienced jQuery users. You will see that the little cog next to my logo is rotating. All that is, is an image sprite with 3 images, being shifted over. Unfortunately, I had to use a plugin for that. The plugin (Spritely) is cool, but I wanted to avoid it if possible, and do it myself. I came close by chaining multiple animations with very fast speeds, but I didn’t want it to go as fast as it was. I then tried chaining three .css() methods with delays in between inside a loop, but that didn’t work. Kind of looked like this (off the top of my head…not exact):

for (i=0;i<50000;i++) {
$('#intCog').css('backgroundPosition', '-60px 0').delay(100)
     .css('backgroundPosition', '-120px 0').delay(100)
     .css('backgroundPosition', '0 0').delay(100)
 
};

Obviously, this didn’t work, and I knew why right after I wrote it. It’s going to set to 0 0, but my thought was that it would step through it rather than slide through it like an animation would.

The question: How do you change a value, like above, without the sliding like the animation has? I needed it to change to the value, not slide to the new position. I could have made 3 copies and faded them in and out, but that seemed ridiculous. All I can think of is maybe 3 chained animations and some hide/show methods like:

.hide().animation(background position change).show().hide().animation(background position change).show().hide() and so forth…really fast.

Help me out!

Coupon Code: webmachine

A Simple jQuery Fly-Out Menu

jcDesigns — Tue, 04 Jan 2011 23:25:25 +0000

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

Now that you have seen what it is supposed to do, let’s jump in. The HTML first:

  
    
      Home
        
        
          About This Template Here
          Flash
          jQuery
        
      
      Blog
        
        
          About This Template Here
          Flash
          jQuery
            
              About This Template Here
              Flash
              jQuery
            
          
        
      
      About
        
        
          About This Template Here
          Flash
          jQuery
        
      
      Porfolio
      Contact

Fairly easy stuff there. It is a simple list with a byline under each item, and the first few list items have the fly out. Here is the CSS involved:

ul {
	margin: 0;
	padding: 0;
}
#nav {
	width: 330px;
	float: left;
	margin: 50px 0 0;
}
#navList li {
	list-style: none;
	margin: 0 0 10px;
	float: left;
}
 
.addPosition {
position:relative;
}
 
#navList a {
	text-decoration: none;
	color: #ffffff;
	background-color: #333;
	padding: 5px;
	display: block;
	width: 250px;
}
#navList a:hover {
	background-color: #06F;
}
#navList ul, #navList ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 280px;
	background-color: #333;
}
.listTab {
	z-index: 100;
}
#navList .listTab li {
	margin: 0;
}
#navList .listTab a, #navList .listTab a:hover {
	width: 250px;
}
#navList .listTab a {
	padding: 5px 5px 5px 10px;
}
#navList li:hover ul ul, #navList li:hover ul ul ul, #navList li:hover ul ul ul ul {
	display: none;
}
#navList li:hover ul, #navList li li:hover ul, #navList li li li:hover ul, #navList li li li li:hover ul {
	display: block;
}

The really important stuff in the CSS is where position relative is being used (the li’s), because the fly-out ‘ul’ is positioned absolutely to them. Other than that, the display none and block on the ‘uls’. Everything else is just CSS to make the menu look pretty.

Here is the jQuery:

$(document).ready(function($) {
		//Menu animation						
		$('#navList ul').css({display: "none"}); //Fix Opera
 
		$('#navList li').hover(function() {  
                $(this).addClass('addPosition');
		$(this).find('a').stop().animate({'width' : "280"});
   		$(this).find('ul:first').css({visibility : "visible", display : "none"}).show(400);
 
  		}, function() {
    		$(this).find('ul:first').css({visibility : "hidden"}).hide(400);
   		$(this).find('a').stop().animate({'width' : "250"});
                $(this).removeClass('addPosition');
			});
		});

Ok, I will admit that the first line I got from someone else. I have no idea what the hell that fixes, as I am unfamiliar with Opera (along with 3 billion other developers). It seems odd to me because my first CSS puts it at display: none anyways, but I’ve seen this before so I left it in.

NOTE: Found out Opera doesn’t hide the menus fast enough, that is why that is there.

The second line is where it all starts. The fly-out is just a hover function in jQuery. Simple yet effective. That is what I live for. I babble…the li(s) of the main ‘ul’ get the hover function. The third line says “Find the link of the ‘li’ you hovered on, stop any animation if there is any, and animate it so that the width grows to 250 pixels.”

The next line says find the first ul of the rolled over li, make it visible and set the display to none, then show it (which sets the display to block) over 4 miliseconds. I know it seems nuts to have the visibility to visible and yet display it to none, but with out the visible part, the fly-out would only show the first time then never appear again. It will work without the display set to none, but it looks like the show() works better when it is written in. I believe this has to do with show() changing the display, not the visibility.

The off hover section, does the exact opposite. The visibility is set to hidden, and the hide, which takes place again over 4 miliseconds, sets the display back to none. The final line stops any animation on the link, and then shrinks the width back to 250 pixels.

And there you have it!

A few lines of jQuery and you have a fly out menu. Most of the CSS is for styling. I have used some CSS3 here that won’t work in IE obviously, but the actual menu functions except for IE6 (see note above).

Coupon Code: webmachine

Wijmo And Headjs Reviews

jcDesigns — Mon, 13 Dec 2010 21:44:42 +0000

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.

That last line is pretty good, because it grabbed my attention and made me think, “Ok, I’m willing to see if you can back that claim up.” I then started looking at their demo page and I’ll be damned if some of it wasn’t cool. I like their calendar and graphs, which would be something I would use. There are a ton of other widget thingies included, too, like a drop-down menu, accordion, form styling, a grid, and some other things that I didn’t really care about. What impressed me was how many things they were showing you can use.

I then downloaded it, and checked to see the size of the js file because I couldn’t find that anywhere. Usually things like this like to boast how light/small they are in the weight department. It was fairly easy to guess why they didn’t…it weighs in at a huge by large 215k! And that is the minified version! “Ok, let’s see what else is going on before you start judging,” I thought to myself.

I then check the docs page for starting your first Wijmo project, and opened up the sample index page. It doesn’t say what is specifically required, so I will assume it needs all of these scripts:

<script type="text/javascript" src="../jQuery/jquery-1.4.2.js">script>
<script type="text/javascript" src="../jQuery/ui/jquery.ui.core.js">script>
<script type="text/javascript" src="../jQuery/ui/jquery.ui.widget.js">script>
<script type="text/javascript" src="../jQuery/ui/jquery.ui.position.js">script>
<script type="text/javascript" src="../jQuery/ui/jquery.effects.core.js">script>
<script type="text/javascript" src="../jQuery/ui/jquery.effects.blind.js">script>
<script type="text/javascript" src="../jQuery/ui/jquery.effects.slide.js">script>
<script type="text/javascript" src="../jQuery/ui/jquery.effects.scale.js">script>
<script type="text/javascript" src="../jQuery/glob/jquery.glob.js">script>
<script type="text/javascript" src="../jQuery/glob/globinfo/jquery.glob.all.js">script>
<script type="text/javascript" src="../../jquery.wijmo.wijpopup.js">script>
<script type="text/javascript" src="../../jquery.wijmo.wijcalendar.js">script>

HOLY CRAP! That is 12 scripts! On the sample page included with the download there are 8! I did a swift calculation and we are looking at around 560k just for the one with 8. That seems too extreme, right? Well, I had to see what the test page was doing and ran it Firefox. Well, it is running all of the open widgets (you only get half the widgets in the open version, and all of them in the licensed one – couldn’t find price). I then started eliminating scripts to see what would happen.

Two things popped out at me. If you want to use the graphs, you need at least 6 of those scripts: jQuery, jQueryUI, jQuery.glob (whatever the ‘f’ that is), rapheal.js, the open wijmo, and the complete wijmo scripts. On top of that, raphael.js is a separate library. Which seems totally odd to require two different libraries to get a widget to work. Then it looks like there are some required stylesheets. All in all, that is a ton of http requests.

It does look like you can use only the widget script that you need, but you will still have to have a few others included to get them to work. Just after browsing though all that, I can’t say that this is a good option at all. If I were going to use a widget like what Wijmo offers, I would use jQuery Tools instead. Smaller and by the looks way easier to use.

Thoughts?

UPDATE: Wijmo has officially been released. Wijmo Complete has an introductory price of $499.

It’s all in your head!

I’ve seen Head JS mentioned a few times, and my supervisor was the one that actually sent me a link to see what I thought. While it is not ready to be used in production, it is close and very cool. Basically, it loads all of your scripts in parallel so there is no page blocking. They claim that this will make your page load 100-400% times faster, and if you look at their test page, it does seem to do that. It does a lot more than that, and only weighs 2.3k. One thing I don’t like is that it says “the only script in your head,” which to me, is not true unless they want you to write all of your extra js into the head.js file itself. Which may be the case. Anyway, calling your other js files in head is easy:

head.ready("jquery", function() {
	$('#container').hide().fadeIn(3000);							  
});
 
head.js(
	{jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.1"},
	{ui: "https://github.com/headjs/www/raw/master/content/test/jquery-ui.js"}
);

You will see two things going on above. The first part is just a stupid function using jQuery, and the second part is where you call the files. You’ll notice that the word jquery is in front of the first call. They allow you to give labels to the files so that instead of putting a url to the file itself, people in production will be able to just call ‘jquery’ and it will use it. Obviously the labels can be anything, but it really makes it a lot easier to know which script to use. I am going to assume because of what they show on their website, that you can use multiple libraries without any worry about conflicts.

On top of that, Head JS comes with a bunch of other stuff to make your life easier, such as: a CSS Modernizer, HTML5 enabler, a Screen Size detector, Dynamic CSS, a CSS Router (so you can target specific pages), a Browser detector, and Javascript Feature detection. That is a lot of stuff crammed into 2.3k. I can see Head JS becoming widely used once they get everything finalized.

UPDATE: DOCTYPE just did a video explaining this better than I ever could. I recommend watching it to learn more!

Ending thoughts

I think I have wrote enough about Wijmo, but Head JS looks extremely promising. Once they have a stable release I will be curious to see if the HTML5 Boilerplate will incorporate it. I read that the creator has looked into it, but said it isn’t ready yet to be included. Curious to see what the final outcome of that will be.

Some things you find out there are cool, while others suck. Either way, it is fun to find out. Let me know your thoughts on either of these, because I am very curious to read other points of view.

Coupon Code: webmachine

Another Simple jQuery Gallery Idea

jcDesigns — Tue, 09 Nov 2010 03:50:48 +0000

Lock and Load that HTML

A co-worker had asked me for some help the other day on the jQuery running his gallery. Of course, I was more than happy to help. He ran into other issues later (which he cleared up) involving a plugin, but that doesn’t really matter in this demo/tutorial. What he wanted was to have a navigation at the top, each item pertaining to a different part of his portfolio (websites, flash work, graphic design…). Each section though had a ton of information that would increase the page load significantly if they were all loaded on the page at the same time. That ruled out putting a simple hide/show on some divs. My thought was, why don’t we put the HTML into separate files, and load them when a user clicks on one of the nav items. You can check out the gist of what was trying to be accomplished by check out the demo below.

View Demo

function imageGroup () {
		$('#holder').load('imageGroup1.html')
		$('.image1').addClass('active');
	};
	imageGroup();
	$(function () {
		$('#container a').click(function(e) {
			e.preventDefault();
			$('#container a').removeClass('active');
			$(this).addClass('active');
		});
		$('.image1').click(function(){$('#holder').load('imageGroup1.html');});
		$('.image2').click(function(){$('#holder').load('imageGroup2.html');});
	});

What its doing – and keeping it simple

I’m sure there is a much more efficient way of writing the jQuery, but I was going for something simple he would be able to add to, and understand what was going on. What is going on you ask? Great question, and if you didn’t ask this article would be over.

The first two lines deal with loading content right off the bat. So I created a function which loads the HTML from the page ‘imageGroup1.html’. Just so you know what is going on, the two external HTML pages only contain images (that’s it, no html tag, no body, nothing but the img’s). You can obviously include whatever you want in those those. The second line of the first function then adds the active class to the first ‘a’ tag, which has the class ‘active’ on it. This gives the first nav item the roll-over state on page load, which you can see in the demo. Looking at the code above, you see the line ‘imageGroup();’ which calls the function, because without it, those first lines don’t do anything. They will wait for a call that will never happen.

After that is an anonymous function (no need to name it for what we are doing here) that controls the switching of the class ‘active’ between nav items, and the loading of HTML from different pages. First is the click event on all the ‘a’ tags within the nav list. We prevent the default action of what ‘a’ tags normally do, then remove the ‘active’ class from all of them, and add it again to the specific one clicked. That moves the ‘active’ class to whatever nav item was clicked last.

Next comes the actual loading of the external HTML. This is probably where a better method could be used, but we are not dealing with anything complicated here so I kept it simple. I am guessing a case switch could be used if we were dealing with a large number of items being loaded. Each of the ‘a’ tags in the nav has a specific class, and when they are clicked, a specific HTML page gets loaded into a div with an id of ‘holder’. So if the first nav item is clicked, ‘imageGroup1.html’ gets loaded into ‘holder’, and if the second is clicked, ‘imageGroup2.html’ is loaded. That is all there is to it to this gallery.

Final Words

This is just a basic demo, so there is minimal styling going on, but think about what you can do with that. My co-worker added fancybox to it, to add some pop-ups when the images were clicked. You can add whatever the hell you want to this, like description text, fades, animations…whatever. Have fun with it, and let me know what you think!

Coupon Code: webmachine

Thinking Outside The Box With jQuery

jcDesigns — Wed, 22 Sep 2010 02:59:48 +0000

Is it waves ahead of Flash?

NOTE: Stick through to the end of the article, and I’ll give you a cool link for a reward!
No, but it can still do a lot of cool crap. Today I was noodling around and somehow this idea popped into my head. Normally, at my current place of employment, we build animations using Flash. Butterflies fluttering around, fades and what-not, hell I even did a water ripple effect once. I thought, what if we could do some of the simple banners that are just plain fades and use jQuery instead of Flash to do everything. My initial idea was, what if a client has a photo of a beach, and he wants the stupid water to move. Could I do something in jQuery instead of having to rely on Flash?

The set up

My HTML for the demo is easy: a container div, 1 div with the original image, and 2 additional divs with only the water section of the image. 3 divs, 2 seperate images. The images are pretty large, because in this demo I was going for a rough effect rather than bringing the size down.

The jQuery is rather simple, too. Two animations in a loop…1 on each of the ‘just water’ images. The first animation moves it left and back, while the second moves it down and up. Here it is for you to look at:

function waves () {
		for(i=0; i<1000; i++) {
			$('#two').animate({
				'top' : +15,
				'opacity' : .2
			},2000).animate({
				'top' : -2,
				'opacity' : 1
			},2000);
			$('#three').animate({
				'left' : -5,
				'opacity' : .2
			},2000).animate({
				'left' : 0,
				'opacity' : .6
			},2000);			
		};				
	};
	waves();

I’m sure there is a better way to do that, but I am going for getting you thinking right now, not prettiness. I will assume you at least know enough about jQuery to understand what I am doing there, because there isn’t anything tricky or awesome going on.

View Demo

Thrillsville, but who really cares?

The demo is more to show that you can do things you normally wouldn’t with jQuery. Sure you can build a cool slider, or drop down, or form validation, etc. The next time you have to do some little bit of animation though, maybe you will think about using jQuery instead of Flash. For instance, the butterfly thing I mentioned. All I did was create a movie clip in Flash that had different states of wing flappage. You could very easily do that with jQuery by doing a simple animation like my waves, only use an image sprite. Shift the sprite over every fraction of a second and you would have the same effect going.

After creating this moving water bit, I know I’ll be thinking outside the box, and see if maybe jQuery will fit the bill more easily. Please take note that I am not against Flash at all. I like using it, and there will be times where that is the only route to get a specific thing accomplished. I’m not on some crusade to get rid of it. All this was for, was to get you to think about the possibilities if you have jQuery at your disposal.

Now onto your reward! Check out this link, when you get there you’ll know what to do. Can’t use it in IE though, but I think they’ll get to that someday.

Coupon Code: webmachine

Actually Knowing What You Are Doing – jQuery Addition

jcDesigns — Tue, 21 Sep 2010 03:30:10 +0000

THAT’S why we do that

There are times that we learn to do something in web development, and we do them without really knowing the reason why we do it. For instance. I learned a couple of things today about jQuery. The first thing was about return false; versus preventDefault (which I learned here). Now, I know the difference. The return false; kills event bubbling. That’s great, right? We don’t want that crap going up through the DOM. But what if you did? An example would be if you wanted to prevent a link from actually doing what the browser expects a link to do, AND have the parent div do something as well.

Example – here is the html:


This is a test link.
This is the div that should be hidden

Here is the CSS:

#myDiv {
	width: 500px;
	height: 500px;
	background: none #999999;
	margin: 30px auto;
}
.redHighlight {
	color: #ff0000;
	font-weight: bold;
}

And lastly, the jQuery:

$(document).ready(function() {
$('#myDiv a').click(function() {		   
$('.myClass').addClass('redHighlight');
return false;
});
$('#myDiv').click(function()  {
$('.myClass').hide();
});
});

This took me some time fiddling with a demo to see if what the above linked article was saying was true. The above code, will do two things: add the class ‘redHighlight’ to .myClass if you click the ‘a’ tag while preventing the link to go to Google, and 2) if you click the parent of the ‘a’ tag, ‘#myDiv’, it will hide the div with the class ‘myClass’.

HERE though is what I learned. IF you click on the ‘a’ tag, it WILL add the class ‘redHighlight’. What it won’t do, is hide the div ‘.myClass’, even though it is within ‘#myDiv’. This is because the return false; prevents the click event to bubble up to its parent, therefore the click that is supposed to hide ‘myClass’ never fires. View the demo below to see what I am talking about, but click on the link, then refresh and click on the gray box.

View Demo

NOW change return false; to preventDefault, so it looks like this:

$(document).ready(function() {
$('#myDiv a').click(function(e) {
e.preventDefault();
$('.myClass').addClass('redHighlight');
});
$('#myDiv').click(function()  {
$('.myClass').hide();
});
});

View Demo

View the above demo, and again, click on the link to see what happens, refresh and click on the surrounding gray box. You will see the difference. The first demo changes the color, the second demo hides the the ‘myClass’ div. Why does it happen differently with preventDefault? Because the bubbling effect goes up to the parent div. Meaning the click event bubbles up to the parent div ‘myDiv’ and fires off the event to hide the div ‘myClass’.

PRETTY DAMN AWESOME! I knew before what event propagation meant, but I never really understood the effect it would have. Now I do because of the linked article. So remember…return false will kill event bubbling, prevents the default behavior, and stops callback execution and returns immediately when called. The preventDefault() only prevents the default behavior.

Caching the location of your selection

The second thing I learned doesn’t actually effect how I write my code. This is more of a “I didn’t know that..” type of thing. Do you know why you use variables when you are writing jQuery? If you answered “Because it is easier to write the variable name than writing the damn thing out everytime”…well you are right. BUT there is another reason. When you write a variable like:

var awesome = $('#pfarmFlavorBlastedGoldfish');

You are caching the location of that selection. If you wrote it out each time you needed it, like so:

$('#pfarmFlavorBlastedGoldfish').hide();
$('#pfarmFlavorBlastedGoldfish').show();
$('#pfarmFlavorBlastedGoldfish').eatthehelloutthem();

Yes I am eating these addicting things…but anyway, the above is repeatedly querying the DOM and creating multiple jQuery objects.

Final words

Sometimes we do things just because we read how to do them, but not the actual WHY we are doing it a certain way. I love learning the reasons behind things that I do, such as the two examples I’ve written about tonight. It strengthens my knowledge of the subject, in this case jQuery, and makes it easier to explain to someone else why it is I am doing something.

A VERY big shout out to Doug Neiner at Fuel Your Coding for that article. It taught me a lot. And a thanks to net.tutsplus.com for a bunch of helpful hints.

Coupon Code: webmachine