jc-designs.net » Javascript

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

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

Adding Scripts, CSS, And Extras – When Is It Too Much?

jcDesigns — Thu, 09 Sep 2010 02:40:58 +0000

Let’s stick that in there too!

Ok, I will admit that this topic just popped into my head, mainly because of what I was doing at work, and then thinking of the HTML5 Boilerplate. I’m using that as a starting point to illustrate what I am talking about, not bashing it. I think the template is awesome and I am using it in my personal projects.

Let’s say we are using it to start a new site. It has a lot of awesome things in it to compensate for a ton of stuff. It has jQuery, a ready to go script page for your js, a nicely organized style sheet, dd-belatedpng.js for png support in IE6, Google Analytics code, Modernizer 1.5 js for HTML5 tag support in browsers that don’t actually support HTML5…and a few other things I can’t remember at the moment. For argument’s sake though, let’s just pretend that is it.

Now you start adding in your stuff

The blank js file for your code is already taken care of, so you don’t have to add that. But maybe you are adding a piece of Flash, which naturally leads you to throwing swfobject in. Ohhh, and that neat Nivo slider on there too! Hmmm….ok, downloaded and now added the plugin to your page.

That should be it right? Oh crap! Since we are being extra cool and tricky, we’ll need some sort of lightbox plugin, so insert that over there. THAT should be about it…oh…you are right, we want to use some sort of easing for that bit of jQuery you were planning, better put that in its correct spot. Done? Maybe?

Is there such a thing as too much

This is just the kind of stuff that I can think of adding that might make sense. You could probably take a few of those off if we are being reasonable. I’m a reasonable kind of guy. Now take into account a customer who thinks they know what the #@$% they are doing and says “I saw this piece of utter crap on this other site, and I want mine to do that to. Oh, and the twitter-y posting thing on the sidebar thinga-ma-jigger, ya I want that also. Ohhhh, you know what would also be the cat’s meow? That other piece of stupid I can barely describe to you in regular English, but is nearly impossible without you seeing my hand movements!”

Now that was sort of for comic relief, but I think you get the point. Go back to before the made up customer bit. Is there a point where it is just too much being added? Where does it stop? The HTML5 boilerplate is awesome the way it is. I can add my own jQuery functions without adding another request, it takes care of a lot of old browser issues (which for some reason I am very opposed to letting go for some idiot reason), and basically is my dream starting template. There are going to be a ton of people adding on to it though. Tons more scripts, and what-not…PLUS things we haven’t even heard of yet to be inserted into the page later.

I don’t want to use the word, but all I can think of is bloated. A word I use to describe certain IDE’s I have tried that have too many feaures. But honestly, do we actually need to use all that crap? For all the headaches we can think of in web development, IE, with all its versions, really adds to this “bloat”. If you dropped everything but IE9, when it comes out of course, you could probably drop the modernizer js, the png fix, no more PIE, and the other crap we need to make the lesser versions work. This is BEFORE we actually do ANY kind of design and layout work, too!

I’m not trying to tell you what to add or not to add to your websites to make it awesome. I’m just trying to make you stop and think for a minute, and maybe answer my question in the comments (they would be very welcome!). So…..where, if there is such a thing, is the cut off point, where we just say “This is getting ridiculous! No more clutter!” Maybe we aren’t there yet, but it just seems like we are getting close to that line with every new bit of cool we add.

I’ll leave you with a musical quote that has nothing to do with this topic, because I am listening to Children of Bodom right now (favorite band at the moment): “Waiting for you I want to just tell you, if you want peace, prepare for war!”

Coupon Code: webmachine

Creating a simple jQuery Gallery

jcDesigns — Thu, 12 Aug 2010 04:14:27 +0000

Thinking it through

I can’t claim anything new with this, but I would like to show you how to use jQuery to build a very simple image gallery. This one really hit home on how important it is to think your way through what you want jQuery to do BEFORE you start writing the code. You will find that you get into trouble if you don’t.

Click here to see the demo.

Binary Solo!

Ten points if you can comment and tell me what HBO show that heading is from. Anyway, on to the code! I will leave out the css because it is really irrelevant. You can style your gallery however you want. This is just for demo purposes.

Here is the HTML:

As you can see, each ‘a’ tag is wrapped around an image. The image tag’s source is the thumbnail, while the href of the ‘a’ tag is the src of the large photo. If you look at the demo link above, you will see what it is supposed to do. Click on the thumbnails and you will see the Large image swap out for the matching thumbnail image.

Now here is the first part of the jQuery code, I’ll do it in 3 sections:

$('#simple a').click(function(evt) {
		 evt.preventDefault();
	     var imgPath = $(this).attr('href');
		 var oldImage = $('#photo img');
		 if (imgPath == oldImage.attr('src')) { 
		 	return;
		 } else {
       $('.selected').removeClass('selected');		
			 $(this).addClass('selected');

Starting with line 1 -

Get all the ‘a’ tags with in the div that has an id of ‘simple’
Prevent the default action of the ‘a’ tag – if you don’t do this, it just loads a page with just the large image
Create variable that is equal to the href of the ‘a’ tag
Create a variable equal to the image in the div with an id of #photo (gets the large img)
If the ‘a’ tag’s href is equal to the large image source don’t do anything – means you just clicked the thumbnail that matches the large image
Otherwise do this (the else line)
Find the ‘a’ tag with the class selected on it, remove the class
And add it to the one the user clicked (‘selected’ class gets placed on the ‘a’ tag clicked)

So far so good? On to the next chunk:

 var newImage = $(' + imgPath +'">');
			 newImage.hide();
			 $('#photo').prepend(newImage);
			 oldImage.fadeOut(1000,function(){
		     $(this).remove();
				});
 
			 newImage.fadeIn(1000);
		 }
	});

Create a new image set to a variable, where it’s source is equal to the href of the ‘a’ tag clicked
Hide this new image
Prepend the new image to the div with an id of ‘photo’ (meaning you created html that is an image tag with a source attribute, and you are now placing it as the first child of ‘photo’).
Fade out the old image, and when it is done, use a call back function to remove it – so the large image that was showing fades, then gets removed from the DOM
Fade in the new image you created

And finally:

$('#simple a:eq(0)').click();

This last line is basically saying “Let’s pretend that the 1st ‘a’ tag has already been clicked, which is why you see the large green image. If you didn’t have that line, there would be no large image showing when the document loaded.

And there you have it!

Now of course you can add all sorts of crap to make it even more flashy, but then…it wouldn’t be a “simple” gallery, now would it. If you have any questions, let me know!

Coupon Code: webmachine