Week #1 Challenge: jQuery Effects

Go ahead... try it... it's easier than you think!

  • (7 Pages)
  • +
  • 1
  • 2
  • 3
  • 4
  • 5
  • Last »

104 Replies - 56478 Views - Last Post: 06 September 2011 - 01:00 PM

#31 Project 2501   User is offline

  • import awesome as Project_2501
  • member icon

Reputation: 9
  • View blog
  • Posts: 1,565
  • Joined: 14-December 08

Re: Week #1 Challenge: jQuery Effects

Posted 06 January 2010 - 12:46 AM

Basic, I know, but I think it's decent for using jquery for just over a half hour.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script>
			$(document).ready(function(){
				$("#fade").click(function(){
					$("#fade").fadeOut("slow");	
					});
				});
		</script>
	</head>
	<body>
		<input id="fade" type="button" value="Goodbye, World.">
	</body>
</html>



Edit: Certainly will be using it more often in the future. Maybe I'll get around to posting something more fancy.

This post has been edited by Project 2501: 06 January 2010 - 12:53 AM

Was This Post Helpful? 0
  • +
  • -

#32 brianarn   User is offline

  • New D.I.C Head

Reputation: 11
  • View blog
  • Posts: 27
  • Joined: 02-October 09

Re: Week #1 Challenge: jQuery Effects

Posted 06 January 2010 - 07:28 AM

I got to keep my job through a round of layoffs because I was flexible and able to work in both web development and desktop. It's useful to be a diverse coder. :)

@baavgai, I'm with you in that I often don't like to use libraries unless they're my own, but jQuery is one exception I'm willing to make. The code is clean, has taught me a good deal, and is consistently getting better. jQuery UI is a bit more rough around the edges, but jQuery works quite well and does things pretty much exactly how I'd like 'em done. Having worked with a few of the JS libraries out there, jQuery is the one I find myself enjoying to use, over and over.
Was This Post Helpful? 0
  • +
  • -

#33 dedou   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 35
  • Joined: 07-September 09

Re: Week #1 Challenge: jQuery Effects

Posted 06 January 2010 - 08:50 AM

I'll give it a go, although I know nothing about jQuery effects.
Was This Post Helpful? 0
  • +
  • -

#34 Moshambi   User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Week #1 Challenge: jQuery Effects

Posted 06 January 2010 - 09:55 AM

I have worked a tiny bit with jQuery in the past. A problem I always had was getting elements to have effects in succession rather than all at once. So for this challenge I tried to figure out how to do this and came up with the following solution. I doubt this is the best way to do it but hey it's a start and I will DEFINITELY be learning as much as I can about jQuery now.

Anyway, my code makes 3 black boxes that fade in one at a time when the page is loaded. Simple.

Code:

<html>
<head>
	<title>Simple fade in</title>
	
	<style type="text/css">
	
		.fadeIn
		{
			width: 200px;
			height: 200px;
			background-color: #000000;
			float: left;
			display: none;
			margin: 20px;
		}
	
	</style>
	
	<script type="text/javascript" src="jquery.js"></script>
	
	<script type="text/javascript">
	
		function controlledFade(i)
		{
			$(".fadeIn:hidden:first").fadeIn(2000);
			
			if(i < 3)
			{
				i++;
				setTimeout("controlledFade(" + i + ")", 1000);
			}
		}
		
		$(document).ready(function() {
			controlledFade(0);
		});
			
		
		
	</script>
	
</head>

<body>
	
	<div class="fadeIn"></div>
	<div class="fadeIn"></div>
	<div class="fadeIn"></div>

</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#35 skyhawk133   User is offline

  • Head DIC Head
  • member icon

Reputation: 1963
  • View blog
  • Posts: 20,421
  • Joined: 17-March 01

Re: Week #1 Challenge: jQuery Effects

Posted 06 January 2010 - 10:22 AM

Nice Moshambi. I'm not sure if that's the best way or not either, but glad you gave it a try!

This is awesome guys! So happy to see everyone stepping out of their comfort zones a bit and at least giving it a shot. That's the spirit of this challenge. And brianarn is right, being flexible is really important in an employers eyes.

Some of you will go in to interviews after this challenge and be asked "have you ever worked with jQuery" and you'll be able to say "Yeh! I haven't used it much, but tried it out and it's a great tool!"
Was This Post Helpful? 0
  • +
  • -

#36 ayman_mastermind   User is offline

  • human.setType("geek");
  • member icon

Reputation: 127
  • View blog
  • Posts: 1,860
  • Joined: 12-December 08

Re: Week #1 Challenge: jQuery Effects

Posted 06 January 2010 - 11:06 AM

@skyhawk133, can I have more than one entry in the challenge? I am working currently on a simple image viewer in JQuery, can I share it here too? Thanks :)
Was This Post Helpful? 0
  • +
  • -

#37 NeoTifa   User is offline

  • NeoTifa Codebreaker, the Scourge of Devtester
  • member icon





Reputation: 4480
  • View blog
  • Posts: 19,047
  • Joined: 24-September 08

Re: Week #1 Challenge: jQuery Effects

Posted 06 January 2010 - 11:23 AM

I'd really like to participate but I've got a crazy school schedule. I'll browse the thread every now and again, but don't expect too much participation from me. :( Nice examples guys.
Was This Post Helpful? 0
  • +
  • -

#38 skyhawk133   User is offline

  • Head DIC Head
  • member icon

Reputation: 1963
  • View blog
  • Posts: 20,421
  • Joined: 17-March 01

Re: Week #1 Challenge: jQuery Effects

Posted 06 January 2010 - 11:29 AM

ayman, share all you want! It's not a contest or competition or anything, just a personal challenge, so show us what you've done!
Was This Post Helpful? 0
  • +
  • -

#39 baavgai   User is offline

  • Dreaming Coder
  • member icon


Reputation: 7433
  • View blog
  • Posts: 15,409
  • Joined: 16-October 07

Re: Week #1 Challenge: jQuery Effects

Posted 06 January 2010 - 12:33 PM

View PostMoshambi, on 6 Jan, 2010 - 10:55 AM, said:

Anyway, my code makes 3 black boxes that fade in one at a time when the page is loaded. Simple.


That's quite cool.

Rather than passing a number about, you can just keep going until they're done:
function controlledFade() {
	var i = $(".fadeIn:hidden").length;
	if (i>0) {
		$(".fadeIn:hidden:first").fadeIn(2000);
		if (i>1) { setTimeout("controlledFade()", 1000); }
	}
}
$(document).ready(function() { controlledFade(); });



To avoid the recursion, since you're forking a process anyway, this also worked:
function controlledFade() {
	var len = $(".fadeIn:hidden").length;
	for(var i=0; i<len; i++) {
		setTimeout('$(".fadeIn:hidden:first").fadeIn(2000)', i*1000);
	}
}




View Postskyhawk133, on 6 Jan, 2010 - 11:22 AM, said:

So happy to see everyone stepping out of their comfort zones a bit and at least giving it a shot.


Until you say "and now for the VB6 / COBOL challenge," I'm with you. ;)
Was This Post Helpful? 0
  • +
  • -

#40 1cookie   User is offline

  • D.I.C Regular

Reputation: -5
  • View blog
  • Posts: 338
  • Joined: 19-October 06

Re: Week #1 Challenge: jQuery Effects

Posted 07 January 2010 - 07:55 AM

I'm a lazy ass... :)

gallery
Was This Post Helpful? 0
  • +
  • -

#41 ShaneK   User is offline

  • require_once("brain.php"); //Fatal error :/
  • member icon

Reputation: 240
  • View blog
  • Posts: 1,224
  • Joined: 10-May 09

Re: Week #1 Challenge: jQuery Effects

Posted 07 January 2010 - 09:58 AM

I suppose it would be pointless to add a link to something I've completed long ago (no personal challenge in something you've already done). I'll work on something for TibiaLottery when I get home.

For now, this is what I've already done with jQuery on TibiaLottery, random dice roller using AJAX:
http://tibialottery.com/dice/

Yours,
Shane~

This post has been edited by ShaneK: 07 January 2010 - 09:59 AM

Was This Post Helpful? 0
  • +
  • -

#42 Moshambi   User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Week #1 Challenge: jQuery Effects

Posted 07 January 2010 - 10:06 AM

View Postbaavgai, on 6 Jan, 2010 - 12:33 PM, said:

View PostMoshambi, on 6 Jan, 2010 - 10:55 AM, said:

Anyway, my code makes 3 black boxes that fade in one at a time when the page is loaded. Simple.


That's quite cool.

Rather than passing a number about, you can just keep going until they're done:
function controlledFade() {
	var i = $(".fadeIn:hidden").length;
	if (i>0) {
		$(".fadeIn:hidden:first").fadeIn(2000);
		if (i>1) { setTimeout("controlledFade()", 1000); }
	}
}
$(document).ready(function() { controlledFade(); });



To avoid the recursion, since you're forking a process anyway, this also worked:
function controlledFade() {
	var len = $(".fadeIn:hidden").length;
	for(var i=0; i<len; i++) {
		setTimeout('$(".fadeIn:hidden:first").fadeIn(2000)', i*1000);
	}
}




View Postskyhawk133, on 6 Jan, 2010 - 11:22 AM, said:

So happy to see everyone stepping out of their comfort zones a bit and at least giving it a shot.


Until you say "and now for the VB6 / COBOL challenge," I'm with you. ;)



Ya I thought about running it through a for loop as well. Thanks for your input. Since that post I hav seen in the documentation a few things about counting all of certain items ( I think each(), and eq()?) I am looking into how to use these more but I think it would help so that the values don't have to be hardcoded in, as in my example.
Was This Post Helpful? 0
  • +
  • -

#43 brianarn   User is offline

  • New D.I.C Head

Reputation: 11
  • View blog
  • Posts: 27
  • Joined: 02-October 09

Re: Week #1 Challenge: jQuery Effects

Posted 07 January 2010 - 10:49 AM

I like the look of
function controlledFade() {
	var len = $(".fadeIn:hidden").length;
	for(var i=0; i<len; i++) {
		setTimeout('$(".fadeIn:hidden:first").fadeIn(2000)', i*1000);
	}
}
- but let's make it just a tad more jQuery-ish:

function controlledFade() {
	$(".fadeIn:hidden").each(function(i){
		setTimeout('$(".fadeIn:hidden:first").fadeIn(2000)', i*1000);
	});
}


You can use .each to iterate over an element list like you would a for loop, and if the function reference takes an argument, the first one is the index of that item in the list. It also binds the "this" keyword to the element in question, if you wanted to do something special to it or with it directly, rather than having to index into another call of jQuery.

A quick aside regarding looping this way: If you wanted to break out, like you would in a for loop, well -- you can't just call break, since you're not in a for loop. However, jQuery looks at the return of each call, and if you explicitly return false in your function, it acts like a break would.

There's still some room for tweaking. This call is doing some decently complex selecting (as each timeout is checking for the first hidden element with a class of fadeIn), when we have a direct reference to our element already ready for us as we're setting up the call. Also, the function argument to jQuery.each can take a second argument, creating an alias to the element for us, meaning we can pretty easily write an anonymous function inside of the setTimeout (kind of like there in the jQuery.each call) that preserves scope -- which is good, as setTimeout taking a string argument always executes that call in global scope and can set up some potential for problems depending on how your code is written.

Anyhow, here's some really verbosely commented JS that should have the same effect, but without having to re-search the DOM every time for elements based on the selector, improving efficiency.

function controlledFade() {
	$(".fadeIn:hidden").each(function(i,el){
		// At this level, the special 'this' variable is defined as
		// the DOM element -- but because there's a second argument of 'el',
		// It's also defined as the element, or in code:
		// this == el
		setTimeout(
			function(){
				// At *this* level, the meaning of 'this' is redefined (and would be null),
				// but because we had 'el' coming in, it exists at this level.
				// Javascript scope is kinda funky, but interesting.
				// Anyhow, this != el, but el is still defined, so we can just wrap
				// jQuery around it:
				$(el).fadeIn(2000);
			}, // setTimeout function reference
			i * 1000
		); // setTimeout
	}); // $(".fadeIn:hidden").each(...)
} // controlledFade


The setTimeout call looks kind of funky - I broke it into a couple of lines so I could easily track pieces. I also realize that because it legitimately would end in a string of ");});}" that it'd be worth some extra comments to indicate "This piece ends that part" -- which indent dictates, but as code gets larger, that's easily lost, and I like me some little closing comments.

I don't know that I'd call it "the preferred way" to do this sort of thing in jQuery. Really, the best way is the one that makes sense. This option I'm presenting here is simply some potential optimizations. Another route could be to use the callback argument to the fadeIn function -- except that doesn't get executed until the end of the first call, and since these are two second fades at one second intervals, I don't think that'd work. If you don't mind it fully completing before the second one starts, it'd be another option.

I hope these thoughts are welcome. I've really fallen in love with JS and jQuery and like to share. :)
Was This Post Helpful? 1
  • +
  • -

#44 Moshambi   User is offline

  • D.I.C Regular
  • member icon

Reputation: 8
  • View blog
  • Posts: 280
  • Joined: 20-November 07

Re: Week #1 Challenge: jQuery Effects

Posted 07 January 2010 - 10:53 AM

Hmmm...that's cool. Thanks for sharing your insight.
Was This Post Helpful? 0
  • +
  • -

#45 baavgai   User is offline

  • Dreaming Coder
  • member icon


Reputation: 7433
  • View blog
  • Posts: 15,409
  • Joined: 16-October 07

Re: Week #1 Challenge: jQuery Effects

Posted 07 January 2010 - 11:53 AM

View Postbrianarn, on 7 Jan, 2010 - 11:49 AM, said:

I hope these thoughts are welcome.


Excellent. Thanks.

The iterator thing seems a little quirky, but I was certainly wondering how I could get a handle on the element.
Was This Post Helpful? 0
  • +
  • -

  • (7 Pages)
  • +
  • 1
  • 2
  • 3
  • 4
  • 5
  • Last »