[skyhawk133]

Week #1: jQuery Effects




Challenge: Try out jQuery by using one or more of the jQuery Effects.


jQuery is a lightweight Javascript library to make manipulating the DOM and implementing events, AJAX, and various effects and animations easier. 20% of the 10,000 biggest web sites use jQuery and Microsoft has adopted jQuery in it's latest release of Visual Studio for handling AJAX events.

jQuery is a fun, easy to use library with a TON of really cool examples and implementations out there. Even if you're not a web developer or have a web site of your own, I encourage you to at least open a text editor (notepad, editplus, notepad++) and try a couple of the samples just to familiarize yourself with it.

The Effects API within jQuery lets you do things like fade in/fade out elements on a web page, slide up/slide down, show/hide, and *drumroll* animate elements (hear that game developers).

To kick off the challenge, I completed this last night by adding the slideUp/slideDown effect to the Dream.In.Code member panel. You can see it in action right now, just hover over the "My Profile" to see it slide down. This was done in under 15 lines of jQuery!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript"> 
	$(document).ready(function(){
	$(".myprofile").mouseenter(function(){
		if ($("div:outer").is(":hidden")) {
			$(".outer").slideDown("fast");
		}
	});
	$(".outer").mouseleave(function(){
	if ($("div:outer").is(":visible")) {
		$(".outer").slideUp("fast");
	}
	});
	});
	</script>

Ideas: For those of you who don't know what to do with jQuery, here's some ideas:

• Drop Down Menus
  
• Slide Show
  
• Fade In/Fade Out Tool Tips
  
• Fade-In Lightbox (Google Lightbox for examples)
  
• Image Gallery
  
• Fancy Form Validation
  
• Tabbed Navigation
  
• Accordion Text
  
• Animation

Resources:

• jQuery Web Site
  
• Effects Documentation
  
• jQuery Examples
  
• 50 Awesome jQuery Examples

We also have a jQuery forum and Snippets area as well as a couplejQuery Tutorials if you're interested.

How To Get Started:
All you need is a text editor (notepad, editplus, notepad++, etc) and the jQuery library which you can download for free from the http://www.jQuery.com site. Try the jQuery tutorials at W3Schools to make sure everything is working and then experiment with using effects on a DIV or other element on your own site, or just mess around in a test file.

Submit Your Challenge:
When you've completed the challenge, reply to this thread with a .zip/link/code/etc. of what you did.

Getting Help:
Post questions in our jQuery Forum.

[Jono20201]

This will be easy, I know jQuery.

EDIT: Also, nice update to the members panel.

This post has been edited by Jono20201: 04 January 2010 - 10:38 AM

[skyhawk133]

Right on Jono, looking forward to what you come up with... do something cool and inspire those that haven't ever used jQuery

[PsychoCoder]

This is what I've come up with (on a clients site). Go here and click a link under Skin Care Categories. The data is being loaded via jQuery when you change categories (the image rollovers are done with jQuery but wasn't done for this challenge).

Are we allowed to have more than one submission Chris?

EDIT: Here's all it took with jQuery to accomplish this

<script type="text/javascript">
	 var $j = jQuery.noConflict();
		$j(document).ready( function()
		{
			IMG.ImageRollover.init();
			
			/* Initialize Tabs */
		$j("#NavTabs").tabs("#TabPanes > div", { effect: 'fade' });

			/* Now add a click event to each tab */			
		$j("div.navi a").each(function(i) 
		{ 
				  /* Show the proper panel when tab is clicked */
		   $j(this).html('Tab ' + (i+1)); 
		 }); 
		 
			 /* add rounded corners with jQuery
		 $j("#skinCareNavBox").corners("5px 5px");
		});
	</script>

[skyhawk133]

Definitely Richard!

I know the code is in the source, but can you give people a little glimpse at what it took to do that... pretty easy I know

[RudiVisser]

Not really an entry for this competition, but something I knocked up at 4am one morning (as a quick test to "type" out HTML) is @ http://www.rudiv.se/new/

It was cool when I did it.

[tashe]

I just started using a bit of JQuery couple of weeks ago for my accordion menu for a school project. This is the code:

<script type="text/javascript"> 
	$(function() {
		$('.accordion .items').hide();
		$('.accordion .heading').click(function() {
			$(this).next('.items').slideDown('fast').siblings('.items').slideUp('fast');
		});
	});
</script>


<div class="accordion"> 
	<div class="heading" runat="server" id="proektHeading"><a href="#">Project</a></div> 
	<ul class="items"> 
		<li><a href="ProektNov.aspx">New</a></li>
	</ul> 
	<div class="heading" runat="server" id="resursiHeading"><a href="#">Resource</a></div> 
	<ul class="items"> 
		<li runat="server" id="dodadiResurs"><a href="DodadiResurs.aspx">New</a></li>
	</ul>   
</div>

I used a custom css.
You can try it at:
http://student.labs....1554/index.aspx

The only thing it lacks it doesn't stay open between page loads.

Cool library nevertheless.

Admin Edit: Please use code tags when posting your code. Code tags are used like so =>

Thanks,
PsychoCoder

This post has been edited by PsychoCoder: 04 January 2010 - 11:10 AM

[skyhawk133]

Nice accordion menu tashe! That's awesome!

[nullsys]

I wanted to submit an example for Form Processing.
http://www.landofthe...com/support.php

The JQuery validates user input clientside, then uses JQuery's Ajax functions to send the data to serverside scripting to validate there (incase someone accesses the php file directly).
Upon processing, the JQuery adds some fading styles to display messages back to the user without having to "refresh" the whole page.

Also, you will notice a "human detection" button.
This is simply a <textarea> on the form with a common name.
This area must be clicked before sending the form. Since this is not a DIV or a standard CAPTCHA it should confuse most automatic bots. It also allows for easier and speedier submissions as no text needs to be entered, just a simple click.
This should ensure most bot attempts do not get through.

Its beta atm, but more advanced techniques will be added later.
Of course, Javascript is required to use the form, but I think its a great feature

[SixOfEleven]

This is definitely something that I am going to try. I'm planning a new site at the moment so I might as well incorporate some jQuery into it. I'm thinking of maybe a dropdown menu and a slide show. I'm interested to see what other DIC Heads are going to come up with.

[piman314]

added some jquery to my site on the games page. just made the thumbnails get bigger when you mouse over them.

codez:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	$("td").attr("align", "center");
	mc = $("img[name=mc]");
	mc.css({'width':75,'height':75});
	mc.mouseover(function() {mc.animate({width:150,height:150});});
	mc.mouseout(function() {mc.animate({width:75,height:75});});
	cs = $("img[name=cs]");
	cs.css({'width':75,'height':75});
	cs.mouseover(function() {cs.animate({width:150,height:150});});
	cs.mouseout(function() {cs.animate({width:75,height:75});});
});
</script>
<div align=center><h1>Games</h1>
	<table><tr>
		<td>
			<a href="http://piman314.co.cc?s=games&game=MicrobeChain">
				<img src="images/8.jpg" name="mc"><br />
				Microbe Chain
			</a>
		<td>
			<a href="http://piman314.co.cc?s=games&game=ColorSplash">
				<img src="images/7.jpg" name="cs"><br />
				Color Splash
			</a>
	</table>
</div>

This post has been edited by piman314: 04 January 2010 - 01:35 PM

[skyhawk133]

Nice work piman!

[Nykc]

These are pretty neat. If I get a few minutes I will have to whip something up.

[Dogstopper]

If I wanna do this, I have to learn it. I'm going through the basic tutorials now and hopefully I'll have something sometime this week.

[Raynes]

I think I'm going to skip this one. I don't believe I'll be able to keep interested long enough to complete one of those tutorials. :\