Week #1 Challenge: jQuery Effects

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

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

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

Replies To: Week #1 Challenge: jQuery Effects

#2 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1875
  • View blog
  • Posts: 20,284
  • Joined: 17-March 01

Re: Week #1 Challenge: jQuery Effects

Post icon  Posted 04 January 2010 - 10:35 AM

Posted Image Week #1: jQuery Effects

Posted Image


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:

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.
Was This Post Helpful? 2

#3 Jono20201  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 179
  • Joined: 07-July 09

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 10:36 AM

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

Was This Post Helpful? 0
  • +
  • -

#4 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1875
  • View blog
  • Posts: 20,284
  • Joined: 17-March 01

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 10:54 AM

Right on Jono, looking forward to what you come up with... do something cool and inspire those that haven't ever used jQuery :)
Was This Post Helpful? 0
  • +
  • -

#5 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1641
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 10:59 AM

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>


Was This Post Helpful? 0
  • +
  • -

#6 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1875
  • View blog
  • Posts: 20,284
  • Joined: 17-March 01

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 11:00 AM

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 :)
Was This Post Helpful? 0
  • +
  • -

#7 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1003
  • View blog
  • Posts: 3,562
  • Joined: 05-June 09

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 11:00 AM

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. :P
Was This Post Helpful? 0
  • +
  • -

#8 tashe  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 107
  • Joined: 10-March 09

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 11:09 AM

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 => :code:

Thanks,
PsychoCoder :)

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

Was This Post Helpful? 0
  • +
  • -

#9 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1875
  • View blog
  • Posts: 20,284
  • Joined: 17-March 01

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 11:11 AM

Nice accordion menu tashe! That's awesome!
Was This Post Helpful? 0
  • +
  • -

#10 nullsys  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 64
  • Joined: 29-January 09

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 12:30 PM

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
Was This Post Helpful? 0
  • +
  • -

#11 SixOfEleven  Icon User is offline

  • using Caffeine;
  • member icon

Reputation: 945
  • View blog
  • Posts: 6,342
  • Joined: 18-October 08

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 01:01 PM

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.
Was This Post Helpful? 0
  • +
  • -

#12 piman314  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 32
  • View blog
  • Posts: 169
  • Joined: 07-August 09

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 01:32 PM

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

Was This Post Helpful? 0
  • +
  • -

#13 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1875
  • View blog
  • Posts: 20,284
  • Joined: 17-March 01

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 01:34 PM

Nice work piman!
Was This Post Helpful? 0
  • +
  • -

#14 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 729
  • View blog
  • Posts: 8,642
  • Joined: 14-September 07

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 01:41 PM

These are pretty neat. If I get a few minutes I will have to whip something up.
Was This Post Helpful? 0
  • +
  • -

#15 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2873
  • View blog
  • Posts: 11,032
  • Joined: 15-July 08

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 01:44 PM

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.
Was This Post Helpful? 0
  • +
  • -

#16 Raynes  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 611
  • View blog
  • Posts: 2,815
  • Joined: 05-January 09

Re: Week #1 Challenge: jQuery Effects

Posted 04 January 2010 - 01:54 PM

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. :\
Was This Post Helpful? 0
  • +
  • -

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