Week #1 Challenge: jQuery Effects

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

  • (7 Pages)
  • +
  • « First
  • 5
  • 6
  • 7

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

#91 ladyinblack  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 9
  • View blog
  • Posts: 419
  • Joined: 08-April 09

Re: Week #1 Challenge: jQuery Effects

Posted 10 March 2010 - 05:28 AM

I've been working with this for a while and came up with nothing too special.

This was done for a calendar.

$(document).ready(function()
{
    $(".marpanel1").hide();
    $(".marpanel2").hide();
    $(".marpanel3").hide();
    $(".aprpanel1").hide();
    $(".aprpanel2").hide();
    $(".aprpanel3").hide();
    $(".aprpanel4").hide();
    $(".links").mouseover(function()
    {
        $(this).css("background-color", "yellow");
    });
    $(".links").mouseout(function()
    {
        $(this).css("background-color", "#F0F8FF");
    });
    $("#mar11").mouseover(function()
    {
        $(".marpanel1").show();
    });
    $("#mar11").mouseout(function()
    {
        $(".marpanel1").hide();
    });

    $("#mar24").mouseover(function()
    {
        $(".marpanel2").show();
    });
    $("#mar24").mouseout(function()
    {
        $(".marpanel2").hide();
    });

    $("#mar26").mouseover(function()
    {
        $(".marpanel3").show();
    });
    $("#mar26").mouseout(function()
    {
        $(".marpanel3").hide();
    });

    $("#apr2").mouseover(function()
    {
        $(".aprpanel1").show();
    });
    $("#apr2").mouseout(function()
    {
        $(".aprpanel1").hide();
    });
    $("#apr5").mouseover(function()
    {
	  $(".aprpanel2").show();
    });
    $("#apr5").mouseout(function()
    {
	  $(".aprpanel2").hide();
    });
    $("#apr10").mouseover(function()
    {
	  $(".aprpanel3").show();
    });
    $("#apr10").mouseout(function()
    {
	  $(".aprpanel3").hide();
    });
    $("#apr24").mouseover(function()
    {
	  $(".aprpanel4").show();
    });
    $("#apr24").mouseout(function()
    {
	  $(".aprpanel4").hide();
    });
});


This can be seen in action at www.ssrr.co.za

Ronica

This post has been edited by ladyinblack: 10 March 2010 - 05:31 AM

Was This Post Helpful? 0
  • +
  • -

#92 purply2009  Icon User is offline

  • New D.I.C Head

Reputation: -2
  • View blog
  • Posts: 1
  • Joined: 19-March 10

Re: Week #1 Challenge: jQuery Effects

Posted 19 March 2010 - 01:24 PM

i want to just make a game thats big i dont care about this stuff
Was This Post Helpful? -2
  • +
  • -

#93 PsychoCoder  Icon User is offline

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

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

Re: Week #1 Challenge: jQuery Effects

Posted 19 March 2010 - 02:41 PM

@purply2009 Is there a reason you posted that statement in this thread? I'm pretty sure no one cares if you dont care for this stuff. If you've got nothing to add to a thread then try not posting crap at all then :)
Was This Post Helpful? 0
  • +
  • -

#94 Louie2113  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 20-March 10

Re: Week #1 Challenge: jQuery Effects

Posted 27 March 2010 - 03:06 PM

I made a page that has some buttons that animate a div. My first look at Jquery so i've gone for simple, although I had some trouble with resizing a button (button width error).


       $(document).ready(function(){
        
            $('#incWidth').click(function(){
                $('#myDiv').animate({ width:"+=50px" }, 1000, function() {});
            });
            
            $('#incHeight').click(function(){
                $('#myDiv').animate({ height:"+=50px" }, 1000, function() {});
            });
            
            $('#movLeft').click(function(){
                $('#myDiv').animate({ left:"-=50px" }, 1000, function() {});
            });
            
            $('#movRight').click(function(){
                $('#myDiv').animate({ left:"+=50px" }, 1000, function() {});
            });
            
            $('#movUp').click(function(){
                $('#myDiv').animate({ top:"-=50px" }, 1000, function() {});
            });
            
            $('#movDown').click(function(){
                $('#myDiv').animate({ top:"+=50px" }, 1000, function() {});
            });

        });


Louie
Was This Post Helpful? 0
  • +
  • -

#95 xTorvos  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 60
  • View blog
  • Posts: 271
  • Joined: 23-October 09

Re: Week #1 Challenge: jQuery Effects

Posted 16 April 2010 - 10:53 PM

I wanted to get in on the action for the 52woc so I decided to finally do something with my website. I scrapped what I had and began anew. Now you can view it here. I did some simple JQuery color effects and form validation (the contact form actually got me to playing around with PHP as well).

Check it out and let me know what you think.
Was This Post Helpful? 0
  • +
  • -

#96 Banfa  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 83
  • View blog
  • Posts: 109
  • Joined: 07-June 10

Re: Week #1 Challenge: jQuery Effects

Posted 11 June 2010 - 05:23 PM

Here you go :D

I have a couple of old css/javascript games I wrote for IE5/Netscape Navigator that could do with an update and this looks like it might help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>eArt</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style type="text/css">
html, body {
    margin: 50px 50px;
    padding: 0;
    background-color: #444;
}

#Pic {
    position: relative;
    margin: 0 auto;
    width: 300px;
    height: 480px;
    border: 5px solid black;
    background-color: white;
    display:none;
}

#Text {
    position: relative;
    margin: 0;
    padding-top: 100px;
    font-size: 10em;
    text-align: center;
    display:none;
}

#B1 {/* Blue */
    position: absolute;
    background-color: #0069d9;
    width: 300px;
    height: 20px;
    top: 326px;
    left: 0;
    display:none;
}

#B2 {/* Green */
    position: absolute;
    background-color: #00d904;
    width: 216px;
    height: 134px;
    top: 346px;
    left: 0;
    display:none;
}

#B3 {/* Pink */
    position: absolute;
    background-color: #d900d5;
    width: 84px;
    height: 134px;
    top: 346px;
    left: 216px;
    display:none;
}

#B4 {/* Orange */
    position: absolute;
    background-color: #d97000;
    width: 0px;
    height: 0px;
    top: 163px;
    left: 198px;
    opacity: 0;
}

</style>
</head>
<body>

<div id="Pic">
  <div id="B1"></div>
  <div id="B2"></div>
  <div id="B3"></div>
  <div id="B4"></div>
</div>
<div id="Text">The End</div>



<script type="text/javascript">
var ix;
var speed = 2000;
var wait = speed * 0.8;

$("#Pic").delay(speed).fadeIn(speed,
  function() { $("#B1").slideDown(speed,
    function() { $('#B4').animate({top:0,left:96,width:204,height:326,opacity:1}, speed*1.5,
      function() { $('#B2').show(speed,
        function() { $('#B3').delay(speed).show(1,
          function() { $("#Pic").delay(speed*5).slideUp(speed*4,
            function() { $("#Text").delay(speed).show(1);
            });
          });
        });
      });
    });
  });

</script>


</body>
</html>

Was This Post Helpful? 2
  • +
  • -

#97 Whitellama  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 16-May 10

Re: Week #1 Challenge: jQuery Effects

Posted 21 June 2010 - 04:05 PM

I just read through the code of the first post after doing the w3school tutorials and I have a question. Why didn't you just use the toggleslide or was it slidetoggle function? It seems simpler to me...
Was This Post Helpful? 0
  • +
  • -

#98 Banfa  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 83
  • View blog
  • Posts: 109
  • Joined: 07-June 10

Re: Week #1 Challenge: jQuery Effects

Posted 22 June 2010 - 03:32 AM

slideToggle takes exactly the same parameters as slideUp and slideDown so calling it is no more or less complex than calling those 2 functions.

What is different is that the result of slideUp and slideDown are not dependent on the initial state, they change the page to a specific state in a specific way after calling them you can say what the final state of the page is with no other information required.

slideToggle toggles the state of the page, the result is dependent on the starting state, after calling you can not say what the final state of the page is without knowing what the initial state of it was.

Personally I prefer the more absolute "make it like this" commands to the relative "change this part of the page to its opposite" commands.
Was This Post Helpful? 0
  • +
  • -

#99 Whitellama  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 16-May 10

Re: Week #1 Challenge: jQuery Effects

Posted 22 June 2010 - 10:48 AM

Yeah I get what your saying Banfa I just thought it would be easier to use slideToggle since you would expect the menu to start hidden. Sorry for my sort of obscure post, I had less than a minute to write it before I had to go. That was a nice explanation. Here's my script:

<html>

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
 $("p:first").hide();
 $("button").click(function(){
  $("p:first").show();
  $("p:first").append(" SPAM");
 });
});

</script>
</head>

<body>

<p></p>
<button type="button">Click me for spam.</button>

</body>

</html>


Every time you click the button the word 'SPAM' appears. The more you click the button, the more spam appears. :bananaman:
Was This Post Helpful? 0
  • +
  • -

#100 Banfa  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 83
  • View blog
  • Posts: 109
  • Joined: 07-June 10

Re: Week #1 Challenge: jQuery Effects

Posted 22 June 2010 - 03:05 PM

View PostWhitellama, on 22 June 2010 - 04:48 PM, said:

I just thought it would be easier to use slideToggle since you would expect the menu to start hidden.
lol well you might think that but with my 20-something years experience I would have to say you might be 100% sure of the what the preconditions are but if you can write your code in a way that is not dependent on that knowledge it will in the long run be more robust and more likely to stay working when things go wrong, and things always go wrong :D
Was This Post Helpful? 0
  • +
  • -

#101 maffelu  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 36
  • View blog
  • Posts: 185
  • Joined: 21-August 08

Re: Week #1 Challenge: jQuery Effects

Posted 21 July 2010 - 10:57 PM

Gah! I entered a game here I did when the contest started. That game however wasn't too good. I want to enter an even better jQuery game I did. One that is actually fun to play.

I call it Flooder, it's a puzzle game. It works, it is a challange and it has a highscore, so you can play against others. Much better than the first game I wrote in panic :whistling:

Here's how it looks:
Attached Image

here's the link:
Link to Flooder!
Was This Post Helpful? 0
  • +
  • -

#102 bacNupe10  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 9
  • Joined: 11-August 08

Re: Week #1 Challenge: jQuery Effects

Posted 01 September 2010 - 02:48 PM

View PostBanfa, on 11 June 2010 - 04:23 PM, said:

Here you go :D

I have a couple of old css/javascript games I wrote for IE5/Netscape Navigator that could do with an update and this looks like it might help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>eArt</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style type="text/css">
html, body {
    margin: 50px 50px;
    padding: 0;
    background-color: #444;
}

#Pic {
    position: relative;
    margin: 0 auto;
    width: 300px;
    height: 480px;
    border: 5px solid black;
    background-color: white;
    display:none;
}

#Text {
    position: relative;
    margin: 0;
    padding-top: 100px;
    font-size: 10em;
    text-align: center;
    display:none;
}

#B1 {/* Blue */
    position: absolute;
    background-color: #0069d9;
    width: 300px;
    height: 20px;
    top: 326px;
    left: 0;
    display:none;
}

#B2 {/* Green */
    position: absolute;
    background-color: #00d904;
    width: 216px;
    height: 134px;
    top: 346px;
    left: 0;
    display:none;
}

#B3 {/* Pink */
    position: absolute;
    background-color: #d900d5;
    width: 84px;
    height: 134px;
    top: 346px;
    left: 216px;
    display:none;
}

#B4 {/* Orange */
    position: absolute;
    background-color: #d97000;
    width: 0px;
    height: 0px;
    top: 163px;
    left: 198px;
    opacity: 0;
}

</style>
</head>
<body>

<div id="Pic">
  <div id="B1"></div>
  <div id="B2"></div>
  <div id="B3"></div>
  <div id="B4"></div>
</div>
<div id="Text">The End</div>



<script type="text/javascript">
var ix;
var speed = 2000;
var wait = speed * 0.8;

$("#Pic").delay(speed).fadeIn(speed,
  function() { $("#B1").slideDown(speed,
    function() { $('#B4').animate({top:0,left:96,width:204,height:326,opacity:1}, speed*1.5,
      function() { $('#B2').show(speed,
        function() { $('#B3').delay(speed).show(1,
          function() { $("#Pic").delay(speed*5).slideUp(speed*4,
            function() { $("#Text").delay(speed).show(1);
            });
          });
        });
      });
    });
  });

</script>


</body>
</html>


Pretty cool effects!!! :clap:
Was This Post Helpful? 0
  • +
  • -

#103 Xtron  Icon User is offline

  • New D.I.C Head

Reputation: 9
  • View blog
  • Posts: 28
  • Joined: 20-May 09

Re: Week #1 Challenge: jQuery Effects

Posted 04 November 2010 - 09:28 PM

Nice, I've just been getting into jQuery and other Ajax functions. Very interesting and useful. This motivates me more now =]
Was This Post Helpful? 0
  • +
  • -

#104 lionaneesh  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 01-April 10

Re: Week #1 Challenge: jQuery Effects

Posted 06 September 2011 - 12:50 PM

Result of just 2 hours of Coding and Reading :-

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<!-- Always use open and close script tags instead of <script src="script" /> , It have some issues with IE !-->
<script src="scripts/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
	$("td").attr("name", "languages");
	php = $("img[name=php]");
	php.css({'width':70,'height':70});
	php.mouseover(
					function() 
					{
						php.stop(true,true).animate({width:120,height:120});
					});
	php.mouseout(function() {php.stop(true,true).animate({width:70,height:70});});
	python = $("img[name=python]");
	python.css({'width':70,'height':70});
	python.mouseover(
					function() 
					{
						python.stop(true,true).animate({width:120,height:120});
					});
	python.mouseout(function() {python.stop(true,true).animate({width:70,height:70});});python = $("img[name=python]");
	
	jquery = $("img[name=jquery]");
	jquery.css({'width':70,'height':70});
	jquery.mouseover(
					function() 
					{
						jquery.stop(true,true).animate({width:120,height:120});
					});
	jquery.mouseout(function() {jquery.stop(true,true).animate({width:70,height:70});});
});
</script>




<title>Jquery -- Sample</title>
</head>
<body>
<div align="center" name="languages">

<h1>Languages</h1>
	<table>
	<tr>
		<td>
			<a href="http://php.net">
				<img src="http://www.readwriteweb.com/hack/images/php_logo_0211.jpg" name="php">
			</a>
		</td>
		<td>
			<a href="http://python.org">
				<img src="http://imagecdn.maketecheasier.com/2009/03/280px-python_logo-150x150.png" name="python">
			</a>
		</td>
		<td>
			<a href="http://jquery.org">
				<img src="http://www.braindraintechnologies.com/blog/wp-content/uploads/2010/12/jquery-logo1-150x150.png" name="jquery">
			</a>
		</td>
	</tr>
	</table>
</div>
</body>

</html>


Its a quite basic one , But maybe i'll work on more!

Thanks to Challenge Setter , Got me interested in another new thing! JQUERY Looks Clean!

This post has been edited by lionaneesh: 06 September 2011 - 12:54 PM

Was This Post Helpful? 0
  • +
  • -

#105 lionaneesh  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 01-April 10

Re: Week #1 Challenge: jQuery Effects

Posted 06 September 2011 - 01:00 PM

View PostBanfa, on 11 June 2010 - 05:23 PM, said:

Here you go :D

I have a couple of old css/javascript games I wrote for IE5/Netscape Navigator that could do with an update and this looks like it might help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>eArt</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style type="text/css">
html, body {
    margin: 50px 50px;
    padding: 0;
    background-color: #444;
}

#Pic {
    position: relative;
    margin: 0 auto;
    width: 300px;
    height: 480px;
    border: 5px solid black;
    background-color: white;
    display:none;
}

#Text {
    position: relative;
    margin: 0;
    padding-top: 100px;
    font-size: 10em;
    text-align: center;
    display:none;
}

#B1 {/* Blue */
    position: absolute;
    background-color: #0069d9;
    width: 300px;
    height: 20px;
    top: 326px;
    left: 0;
    display:none;
}

#B2 {/* Green */
    position: absolute;
    background-color: #00d904;
    width: 216px;
    height: 134px;
    top: 346px;
    left: 0;
    display:none;
}

#B3 {/* Pink */
    position: absolute;
    background-color: #d900d5;
    width: 84px;
    height: 134px;
    top: 346px;
    left: 216px;
    display:none;
}

#B4 {/* Orange */
    position: absolute;
    background-color: #d97000;
    width: 0px;
    height: 0px;
    top: 163px;
    left: 198px;
    opacity: 0;
}

</style>
</head>
<body>

<div id="Pic">
  <div id="B1"></div>
  <div id="B2"></div>
  <div id="B3"></div>
  <div id="B4"></div>
</div>
<div id="Text">The End</div>



<script type="text/javascript">
var ix;
var speed = 2000;
var wait = speed * 0.8;

$("#Pic").delay(speed).fadeIn(speed,
  function() { $("#B1").slideDown(speed,
    function() { $('#B4').animate({top:0,left:96,width:204,height:326,opacity:1}, speed*1.5,
      function() { $('#B2').show(speed,
        function() { $('#B3').delay(speed).show(1,
          function() { $("#Pic").delay(speed*5).slideUp(speed*4,
            function() { $("#Text").delay(speed).show(1);
            });
          });
        });
      });
    });
  });

</script>


</body>
</html>


Pretty Cool effects! Maybe i'll make one like that soon :D
Was This Post Helpful? 0
  • +
  • -
  • (7 Pages)
  • +
  • « First
  • 5
  • 6
  • 7