Phillip Napieralski » jQuery http://blog.pnapieralski.com Programmer, Engineer, Researcher. Tue, 20 Dec 2011 16:41:18 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Clear Default Input Box Text on Click with jQuery http://blog.pnapieralski.com/jquery/clear-default-input-box-text-on-click-with-jquery/ http://blog.pnapieralski.com/jquery/clear-default-input-box-text-on-click-with-jquery/#comments Sun, 21 Feb 2010 07:06:28 +0000 Phillip Napieralski http://blog.pnapieralski.com/?p=27 Check out the demo You know those search boxes that say "search here" and you go to click them and the text goes away? It's a nice little feature and is really simple with jQuery.]]> Check out the demo

You know those search boxes that say “search here” and you go to click them and the text goes away? It’s a nice little feature and is really simple with jQuery.

Here is the simple script to take you through the ages:

The HTML

	<form>
		<input type="text" name="search" id="search_box" value="search here!" />
		<input type="submit" value="Search" />
	</form>

Here we simply create a form with a textbox with an id of “search_box”. This id will help us reference it later with jQuery. ALSO take note that the value attribute is set to search here!.

The jQuery

Now simply place the following in your <head> tags and call it good.

<script type="text/javascript">
  // Some simple jQuery to remove the default search value when the user clicks the box
  $(document).ready(function() {
	  	$search_box = $("#search_box");

	  	// If the user clicks the input box and the text is "search here!",
	  	//    set it to blank
		$search_box.click(function() {
			if( $search_box.attr("value") == "search here!" ) {

				// Set it to an empty string
				$search_box.attr("value", "");
			}
		});
  });
</script>

That’s it! Basically, we find the search box by its id with $(“#search_box”) and then clear its value attribute if the string we compared to is the default search string

]]> http://blog.pnapieralski.com/jquery/clear-default-input-box-text-on-click-with-jquery/feed/ 0 Design Your Site Around a jQuery UI Theme http://blog.pnapieralski.com/jquery/jquery-ui/design-your-site-around-a-jquery-ui-theme/ http://blog.pnapieralski.com/jquery/jquery-ui/design-your-site-around-a-jquery-ui-theme/#comments Sun, 31 Jan 2010 00:03:07 +0000 Phillip Napieralski http://blog.pnapieralski.com/?p=10 personal portfolio an overhaul. I started with a preset jQueryUI theme hosted by Google and the end results look pretty good!]]> I recently gave my personal portfolio an overhaul. I did it on a whim after looking at the various preconstructed google hosted jQuery UI themes.

Choosing a theme

I wanted to add jQuery to my portfolio for some time, but I always hit a wall when I tried to roll my own theme. I’m just incredibly inexperienced at “what looks good.” Lucky for me, google has a nice selection of quality jQueryUI themes that you can directly link to on your site.

Check out this blog post for an excellent list of themes to choose from.

Adding it to your website

I went with the Pepper Grinder theme for my portfolio. To add jQueryUI and the Pepper Grinder theme, I simply added the following lines between the <head> tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css" rel="stylesheet" type="text/css" />

Linking to the google hosted distributions has a serious advantage here: I’m saving bandwidth (not that it matters since DreamHost gives unlimited) and if someone comes to your profile after using these files from another website, it’s already cached!

Designing your website around the theme

I did almost zero work to get my website to match this theme. Here’s the key: the provided .css files also loads various .png files for the backgrounds used in the jQuery theme.

To find out what those files are, open up the .css file and do a search for “png.” At this point, I simply changed the background-image of each portion of my site until I got something that looked good (that’s pretty much it)!

Advice

A piece of advice I could give is to play with the jQuery theme quite a bit before delving into modifying your site. I loaded up the Pepper Grinder theme on my projects page and played with it for a good 30 minutes to get a feel for the theme. For example, I simply copied the link colors from the google hosted .css file to use on my nav bar.

UPDATE: I further redesigned my portfolio website. Check out my post on it.

]]> http://blog.pnapieralski.com/jquery/jquery-ui/design-your-site-around-a-jquery-ui-theme/feed/ 0 Clickable Table Rows with jQuery http://blog.pnapieralski.com/jquery/clickable-table-rows-with-jquery/ http://blog.pnapieralski.com/jquery/clickable-table-rows-with-jquery/#comments Wed, 27 Jan 2010 22:51:29 +0000 Phillip Napieralski http://blog.pnapieralski.com/?p=9 Check out the demo here! This is a quick tutorial that will help in a future project that I'm doing, which is a Magic: The Gathering deck building application.]]> Check out the demo here!

This tutorial hints at a project I’m working on. A deck building application for the Magic: The Gathering card game.

Highlighting Rows

In jQuery Selectors 2, I talked about how to highlight certain rows in a table. We can build off this to begin a full sized app (at least the frontend) with jQuery.

To recap briefly, we allow rows be clickable by using the following code:

$(document).ready(function() {
	$("tr").click(function(){
		// store our selection of the row that was clicked
		row = $(this);

		// toggle the "selected" class for the clicked row
		row.toggleClass("selected");
	});
});

Note first that the code is inside the $(document).ready(…) function. This will be the case for the code in the rest of this post.

Show Card Selections

How do we know what the user selected? Well, we can accomplish that task with the following code:

	// check for a button click
	$("#show_button").click(function(){
		var cards = "";

		// search through each row that has the "selected" class
		$("tr.selected").each(function() {
			// append the card name (which is between <th> tags) to our cards variable
			cards += $(this).find("th").html();
			cards += "\n";
		});

		// Simply alert the user what they selected for now
		alert("You selected:\n"+cards);
	});

There you have it. The next step is to replace the alert(“”) piece with a $.post(…) request to a php script with the selected cards.

Next Time

Lost on this tutorial? Try part 2

]]> http://blog.pnapieralski.com/jquery/clickable-table-rows-with-jquery/feed/ 1 jQuery Selectors 2 http://blog.pnapieralski.com/jquery/jquery-selectors-2/ http://blog.pnapieralski.com/jquery/jquery-selectors-2/#comments Tue, 26 Jan 2010 23:08:55 +0000 Phillip Napieralski http://blog.pnapieralski.com/?p=8 Check out the demo In this tutorial, I'll be getting just a little bit more advanced with selectors.]]> Check out the demo

In this tutorial, we’ll be getting just a little bit more advanced with the selectors.

Children AND highlighting rows

: odd, :first, :last

If we are displaying a large amount of data in a table, we can easily increase the readability by highlighting every other row. Let’s look at this simple table:

<table id="demo" border="1">
	<tr>
		<th>Llanowar Augur</th>
		<td>Creature - Elf Shaman, Sacrifice Llanowar Augur: Target creature gets +3/+3 and gains trample until end of turn.</td>
	</tr>
	<tr>
		<th>Llanowar Behemoth</th>
		<td>Creature - Elemental, Tap an untapped creature you control: Llanowar Behemoth gets +1/+1 until end of turn.</td>
	</tr>
	...
</table>

We can highlight every other row of this table by adding the following code inside the $(document).ready(function(){…}) area.

$("#demo tr:odd").addClass("highlight");

What does this do? It first finds the id #demo, then it finds all the odd numbered table rows (<tr>). The .addClass(…) method refers to a CSS class highlight. We could easily define this with something like the following between <style> tags:

.highlight { background-color: lightgrey; }

With that same table, we could change our jQuery from $(“#demo tr:odd”) to $(“#demo tr:first”) and similarly with :last to grab the first and the last rows in the table

:first-child, :last-child, (>)

Now, what if we had nested HTML tags and wanted to highlight only certain tags inside the initial tag. Consider the following HTML:

<div id="demo" style="border:1px solid black">
	<p>
		This is inside a <em>p</em> and also a PARENT of the #demo div
	</p>
	<p>
		This is also inside a <em>p</em>, but it's not the first-child!
	</p>
	<p>
		Okay... this is another <em>p</em> inside #demo
	</p>
	<p>
		This is the last child of the #demo div.
	</p>
	This is NOT inside it's own <em>p</em>, so it does not count as a child!
</div>

Now, if we wanted to highlight the first and last p tags inside the #demo DIV, we execute the following jQuery:

$("#demo p:first-child").addClass("highlight");
$("#demo p:last-child").addClass("highlight");

More interestingly, we can choose to highlight every child with the following code:

$("div#demo &gt; p").addClass("highlight");

Next Time

Lost? Try part 1.

Make use of these selectors in part 3.

]]> http://blog.pnapieralski.com/jquery/jquery-selectors-2/feed/ 2 jQuery Selectors 1 http://blog.pnapieralski.com/jquery/jquery-selectors-1/ http://blog.pnapieralski.com/jquery/jquery-selectors-1/#comments Tue, 26 Jan 2010 02:50:27 +0000 Phillip Napieralski http://blog.pnapieralski.com/?p=7 Check out the demo (it's very simple) I realized my previous post about a Happy Polack feature might be completely confusing if you don't know the following: jQuery, PHP or my database structure. I'm going to remedy this by having a multi part series about jQuery (followed by PHP and mySQL).]]> Check out the demo (it’s very simple)

I realized my previous post about a Happy Polack feature might be completely confusing if you don’t know the following:

  • jQuery
  • PHP
  • My database structure

I’m going to remedy this by having a multi part series about jQuery (followed by PHP and mySQL).

Introduction

For part 1 of the tutorial, I will be focusing on a few simple examples so that you can get a hold of the various “selectors” in jQuery. But first… let’s get jQuery setup.

Adding jQuery to Your Page

Simply add the following code between the <head> tags on your webpage (for later releases, change the 1.4 to the current release):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

I should note that it is a VERY good idea to link directly to google’s repository instead of hosting the jQuery framework on your server. I have excellent reasons for this (ask me).

ID This, CLASS That

The most common thing I use jQuery for is to find a certain object ID or CLASS on the webpage. Let’s write some simple HTML that we will modify easily with javascript.

<div id="some_picture">
     <img src="http://pnapieralski.com/images/me.jpg" />
      This is a sweet picture isn't it!?
</div>
<button id="some_button">That pic is wack</button>

I simply created a div with a picture and some text in it. I gave it the id of some_picture that we will reference later. I also created a button with an id of “some_button”.

Now we want to add some functionality. Let’s make it so that when we press the That pic is wack button, the image disappears. Simple enough, here’s the code (add it between the <head> tags):

<script type="text/javascript">
$(document).ready(function(){
     $("#some_button").click(function(){
          $("#some_picture").toggle("slow");
     })
});
</script>

Okay, let me explain. The $(document).ready(…) function tells us to execute the function in its parameter list after the webpage is done loading. NOTE: This piece is essential since the #some_button and #some_picture stuff is not loaded before this script since we put it in the <head> tags.

The $(“#some_button”) piece of code is selecting the button based on its id, which we assigned earlier. Then, we use the built-in jQuery function .click(…), which will execute the function supplied to it’s parameter list. Inside the function(){…} code, I placed code to toggle whether or not the div containing the picture is visible. Simply put, select the div with $(“#some_id”) and then call the toggle() function. Easy as that!

Now, suppose instead of an id, we had assigned the items a class instead. We can use jQuery to select it by doing $(“.some_pictures”).

Next Time

Make sure to check out part 2.

]]> http://blog.pnapieralski.com/jquery/jquery-selectors-1/feed/ 1