jQuery Basics Tutorial

July 10th, 2010 -- No Comments

jQuery is an upcoming/hot thing right now when it comes to web development. To me jQuery is slowly taking over flash. There are lots of things I can do in jQuery that I would have programmed in flash for. Before you kill the messenger there are things out there that flash can do that jQuery can’t. So let me post the source code for the tutorial and below that you can watch in video as I explain.

<html>
	<head>
    	<title>jQuery Basics Tutorial</title>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
        	$(document).ready(function() {
        		$('#employees tbody tr:odd').addClass('alternaterow');
        		$('#employees tbody tr:odd').removeClass('alternaterow');
 
        		$('#hideButton').click(function() {
        			$('#employees').hide();
        		});
 
        		$('#toggleButton').click(function() {
        			$('#employees').toggle();
        		})
        	});
        </script>
        <style type="text/css">
        	.alternaterow
        	{
        		background-color: #ccc;
        	}
        </style>
    </head>
    <body>
        <input type="button" id="hideButton" value="Hide Table" />
        <input type="button" id="toggleButton" value="Hide / Show" />
        <table id="employees">
        	<tr>
            	<td>
                	John
                </td>
                <td>
                	Smith
                </td>
                <td>
                	Developer
                </td>
            </tr>
            <tr>
            	<td>
                	Greg
                </td>
                <td>
                	Smith
                </td>
                <td>
                	Owner
                </td>
            </tr>
            <tr>
            	<td>
                	Michelle
                </td>
                <td>
                	Smith
                </td>
                <td>
                	Web Developer
                </td>
            </tr>
            <tr>
            	<td>
                	Scott
                </td>
                <td>
                	Smith
                </td>
                <td>
                	IT Administrator
                </td>
            </tr>
            <tr>
            	<td>
                	Michelle
                </td>
                <td>
                	Smith
                </td>
                <td>
                	Web Developer
                </td>
            </tr>
        </table>
    </body>
</html>

Categories: Tutorials, jQuery

New site design

July 9th, 2010 -- No Comments

So with me the past few days learning jQuery, I thought I would redesign my site again. This time I have used jQuery in a few places to showcase some of my new things that I have learned. My twitter feed on the right sidebar is being loaded by jQuery. On the bottom of the page you see the link that says back to top, that link when click will slowly slide you back to the top of the page instead of just reloading the whole page. Even after this post I will still be adding more to it.

In the next few days I am hoping to write a tutorial on the basics of jQuery. So keep an eye out for that.