Dec 10 2009

JQuery Part 4 – Intro to CSS Manipulation

JQuery is often used in websites to manipulate the CSS attributes of an HTML element upon the users request. For example, if a user wants to increase the size of the font immediately so that they can read your page, or you may just want to change up the CSS on the fly to make your page stand out a little more. All these things can be done in JQuery using the css() function and css manipulation techniques. Let’s get started by creating a basic page with a link and a paragraph with some links in it like so…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
		<script src="lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
 
		<title>JQuery CSS Manipulation</title>
 
	</head>
	<body>
		<a href="#">Click Me</a>
 
		<br>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, <a href="#">augue neque</a> tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, <a href="#">hendrerit</a> in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>
 
	</body>
</html>

As you can see it’s a basic HTML page that references the JQuery script. We have also added a link that says “click me” along with a paragraph of lorem ipsum text with some links in it. Alright, now onto creating the CSS for the page. For this example I will be putting the CSS in the header but if you want to put it in an external file by all means go ahead and reference it in the header.

<style type="text/css">		
p a
{
	color: red;
}
</style>

As you can see, I just added an attribute to make all the links within the paragraph tags initially turn up as red. You can add as many CSS elements here as you would like to style the links however you like but for the purpose of this demonstration you will just need the color red as an attribute. Next let’s add the JQuery and introduce the .css() function.

<script type="text/javascript">
	$(function()
	{
		$('a').click(function()
		{
			$('p a').css('color', 'blue');
		});
	});
</script>

As you can see the JQuery code is pretty straight forward for what we’re doing. Basically we’re starting out by checking the DOM to make sure that the file is ready to be manipulated. Then, we perform a click function anytime an anchor tag is pressed. Inside of that click function is where we actually manipulate the CSS and change the color of the anchor tags to blue instead of red like we originally set. The css() function accepts two parameters that we’ll be using. The first is the attribute that you would like to change and the second is the attribute that you want to change it to. So for our example, the attribute is the color and we’re going to change it to blue. If of course you want to change the color of the link that was originally pressed instead of every link inside the paragraph tags you could use the “this” function instead of specifying a specific tag.

That’s the basics to CSS manipulation using JQuery, of course the example shown here is only a very basic example and can be greatly expanded upon. This is what the final code should look like…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
		<script src="lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
 
		<title>JQuery Test</title>
 
		<style type="text/css">		
			p a
			{
				color: red;
			}
		</style>
 
		<script type="text/javascript">
			$(function()
			{
				$('a').click(function()
				{
					$('p a').css('color', 'blue');
				});
			});
		</script>
	</head>
	<body>
		<div id="box"></div>
		<a href="#">Click Me</a>
		<br />
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, <a href="#">augue neque</a> tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, <a href="#">hendrerit</a> in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.</p>
	</body>
</html>

2 comments   |  tags: , , , | posted in Tutorial, Web

Dec 9 2009

Intro to PHP – Intro to Sessions and Cookies

Cookies and Sessions are extremely useful to a PHP programmer, however they could be considerably confusing to a beginner. Cookies and sessions are used to store pieces of information for a period of time until it is destroyed. This information inside of a cookie or a session can be used to store things like log in information, URL information and much much more.

Cookies

Cookies are pieces of information stored on the client’s machine. The disadvantage here is that cookies can be disabled or ignored from the client’s end. So if you’re using cookies, try not to use them for anything that is crucial to the system functioning(this is what sessions are for… more on that later). The syntax for creating a cookie looks like this…

//A cookie can be equal to a string
$_COOKIE['nameOfCookie'] = 'What information you want to store here';
 
//or a cookie can be equal to a variable
$_COOKIE['nameOfCookie'] = $username;

According to PHP variable declaration rules, you can name the cookie whatever you would like as long as it doesn’t break any of the PHP rules. Data from created cookies can then be used anywhere you like just like any variable such as…

//print the value of the cookie
print($_COOKIE['nameOfCookie']);

Alternately, you can use the isset() method to check to see if a specific cookie has been set. This is more useful when using sessions but we’ll get to that later.

Sessions

Session differ from cookies in that they are stored on the server as opposed to the client. Sessions offer one major advantage over cookies, they cannot be disabled by the user, thus making sessions much more secure than cookies. When dealing with things like log in information and secure data, session are a much better choice than cookies. Sessions are declared using the same conventions as cookies…

//a session can be equal to a string
$_SESSION['nameOfSession'] = 'What information you want to store in the session';
 
//or a session can be equal to a variable
$_SESSION['nameOfSession'] = $username;

This will declare a session variable, however there is one key function that needs to be created prior to using a session variable. The session_start() function needs to be called before any data is sent from the server. Even if a spare white space is sent, the session_start() function will most likely send an error. Whenever you want to use a session variable in a PHP file/function, you must call the session_start() function at the very beginning of the page in order to use a session variable that has been created. This needs to occur even prior to sending the DOCTYPE to the client. To use a session variable the syntax is as follows…

//start the session
session_start();
 
//print the session variable
print($_SESSION['nameOfSession']);

The syntax is similar to using a cookie and alternatively you can use the isset() method to check if a session variable has been created or not. This becomes particularly useful when it comes to creating login systems that keeps users logged in using a session.

In full, you can use sessions or cookies if you like but keep in mind that sessions are stored on the server and cannot be disabled by a user, thus making them much more secure and reliable. In order to create a session, remember to call the session_start() method at the very start of the document or you may not be able to use the session variables.

2 comments   |  tags: , , | posted in Tutorial, Web

Nov 23 2009

How to become a google wave power user

With Google wave being released recently to a larger and larger user base, it’s becoming a better real time collaboration tool daily. With a larger user base, also comes more and more plugins, bots, and shortcuts to save you time. I’ll go over a few aspects of Google wave that will help decrease the time you spend and increase your results.

First Off, Google wave is a team collaboration tool. By itself, to be honest, Google wave is really kinda useless. However wen used in a team environment it can be an incredibly useful tool to increase productivity and communication. The first tip I’ll give comes with a warning, because it’s not an officially supported browser this method does crash quite a bit more often than say in safari or firefox. Using an application developed by Mozilla called Prism you can actually make Google wave a desktop application to use directly from your desktop. Although you still need a solid internet connection, it can facilitate having to open a browser any time you want to wave. If you’re running Windows, you can even get prism’s Google wave icon to update how many waves have new content on them.

Widgets/Bot’s

Google Syntax highlighter – If you’re a developer this is a must. Syntax highlighting can be one in a couple ways, but as of now I’ve found that the Google Syntax highlighter to be the most stable. It supports a variety of languages and seems to embed well in most waves. The only disadvantage I’ve seen so far is if you have a ton of code to embed, the wave will significantly slow down when editing.

Multi Lingual Bot –  This bot is pretty neat,  especially if you’re dealing with a team that speaks a variety of languages. Basically, all you have to do is add the multi lingual bot to any wave. Once you have the bot added to your wave, just specify the language of your liking using the bot commands, and then voila, watch the wave being translated to the language you chose earlier.

For more information on using widgets and bots, look here.

Organizing your waves

Searches – Google wave offers the ability to perform searches, and also to save the searches. Let’s say you’re working on a project and have a bunch of waves that you want to keep organized. Whenever you create a wave for your project,  just add the name of your project as a tag for that wave. Next perform, and save a search for that tag name and then all your wave’s with that tag will then show up under the search.

Folders – Folders are locations that you can add wave’s to to keep them organized. The only downside to folders is that you cannot dynamically add items to them like you can with searches. To add a wave to a folder,  first create the wave, open the wave and then click on the “…” icon at the top right. You should see a drop down list with “Move to” option. Once you select the “Move to” option, you should see a list of folders you created there.

Keyboard Shortcuts

Spacebar – If a wave that you’re apart of is extremely long an many different people are editing it in different locations then it is extremely difficult to track what changes are happening where. The spacebar helps with that. If you’re not currently editing a wave then you can press the spacebar to scroll through the changes/replies that were made to the wave.

Control – The control key is an extremely useful key in Google wave. By pressing the control key and clicking on a wave, you can open multiple waves at exactly the same time. You can do this as many times as you want, the waves will just keep tiling in the window. Control also has some specific keyboard shortcuts that do specific features when editing a wave.

The keyboard shortcuts help list can be found here.

Summary

Google wave is an extremely useful tool when it comes to real-time team collaboration. Using it more efficiently can not only help you, but also your team.  For more information on Google wave check out Google wave help.

4 comments   |  tags: , | posted in Tutorial, Web

Oct 31 2009

JQuery Part 3 – Intro to Functions

This is part 3 in a series of JQuery tutorials. I strongly recommend at least reading Part 1 before continuing with this tutorial. Part 2 is optional but would also be a great background before we get started. As for this tutorial, I will be going over creating an executing functions to make your code more efficient.

Often when writing JQuery code(especially for plugins) there are times when you need to execute the same block of code multiple times. Instead of writing them all out individually and making our code really terrible process wise, we can use functions and function calls to call the same block of code over and over.

Creating Functions

You can create a function in 2 different places. The first is in the same script tags, but not inside the document ready function. Or second, you could create a brand new script file and then reference that script file in your header. Inside this script file you could create your method and it would be able to be accessed by the main file.

To create a function, the syntax looks like this…

function nameOfFunction()
{
	//your code here
}

This tells the browser that there is a function called nameOfFunction that is not being passed any parameters. Passing parameters is something I’ll get into a little bit later. Now say you wanted to alert the user with a javascript pop-up box every time this function was run. You could add some code into the function to allow a dialog box to appear like so.

function nameOfFunction()
{
	alert("We are now alerting the user!");
}

Executing Functions

Now that we have a function created, we need to somehow call that function to execute. That’s where our javascript method calls come in. Let’s say we wanted to execute the previous function. The code would look like this.

$(document).ready(function(){
	nameOfFunction();
});

Of course this would call the function immediately after the page was ready. You can use a function call in JQuery in any function. So if you wanted to add it inside of a .click function you could do that as well. That’s all you need to do to execute functions in JQuery.

Passing Arguments to Functions

Let’s say you wanted a function to work with a piece of data from a form, but you didn’t want the function to retrieve that piece of data inside the function. You can use a piece of code called an argument to pass to the function. This allows you to pass values to a function so they can be used. To create a function with an argument then all you need to do is add the argument into the brackets in the function header. It looks like this.

function nameOfFunction(argument)
{
	//your code here
}

Now obviously since we have that argument in the argument ready to do something with it, we may also want to return a value back to the original function so that we can maybe display the result of a calculation or something like that. If we want to return a value all we have to do is insert a return value into our function.

function nameOfFunction(argument)
{
	var total = 10 + argument;
 
	return total;
}

This function will now accept a value, add 10 to that value and return it to the original function call. This way if we need to manipulate some data quite a few times, we could use a function to do that display the result.

Function Calls with Arguments

Now that we have a function made that’s accepting an argument and returning a value, we can use a function call and pass an argument to the function so it can do the calculation and we can then display the result. The function call looks something like this.

$(document).ready(function(){
	alert("The total is = " + nameOfFunction(10);
});

In our JQuery ready function we are now just displaying an alert. Inside the alert we are actually making the function call and passing a value of 10 to our function. The function is then going to add 10 to our passed argument and return a value of 20. The alert therefore is going to display – “The total is = 20″. And that’s all for basic functions and function calls.

1 comment   |  tags: , , , , | posted in Tutorial