Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

November 26, 2007

none

jQuery: Select what you want – part 2

by in jQuery,Web Development on November 26, 2007 @ 11:28 pm

Table of contents for Select anything

  1. jQuery: Select what you want – part 1
  2. jQuery: Select what you want – part 2

In my first post about jQuery Selectors call Select what you want, I went over some basic selectors that I use on a daily basis within a web based training framework I put together using jQuery. What I would like to cover are some of the situations I have ran into over the past year while using jQuery are my frameworks backbone.

Some of the selections we will cover are searching for links with an specific extension, images, images that wrapped in a link, links and definition lists.

Let me give you some background on the process. We have a content writer who supplies us with with a storyboard for the content and flow. We then create a separate Html page for each page within that storyboard. Each one of these pages is brought into the main page using the .load method for jQuery. All the selections are being done in the callback of the .load method, like:

  1. $(".textArea").empty().load(URL, function(){
  2.     // selection calls
  3. });

The following will be the functional request that the writer asks for. Note the “this” in my selector calls is referring to textArea. Also note that these will not be optimized calls, for instance, if I were going to check for images or links multiple times for different things, I would do something like:

  1. var $img = $("img", this);
  2. var $a = $("a", this);

But for the purpose of this post, I will code as if there is only one thing we are looking for and most of these will be very simple selections.

Functional request: Have smaller image open a bigger image in a jqModal box

The Html
  1. <a href="path/to/big" class="jqModal"><img src="path/to/small"/></a>
The JavaScript
  1. $("a.jqModal:has( img )", this).click(function(){
  2.     // jqModal code
  3. });

Functional request: Have a “how-to” open in a jqModal iframed box

The Html
  1. <a href="path/to/howto" class="jqModalFramed">How to link text</a>
The JavaScript
  1. $("a.jqModalFramed", this).click(function(){
  2.     // jqModal code
  3. });

Functional request: Have pdfs alert before opening

The Html
  1. <a href="thePdf.pdf">View PDF</a>
The JavaScript
  1. $("a[href$='.pdf'", this).click(function(){
  2.     // prompt box code
  3. });

Functional request: Have glossary of words and when those words a clicked, show it’s definition

The Html
  1. <dl>
  2.     <dt>Word</dt>
  3.     <dd>Definition</dd>
  4. </dl>
The JavaScript
  1. $('dl', this).find('DT')
  2. .toggle(function(){
  3.     $(this).addClass('open').removeClass('closed').nextUntil('DT').show();
  4. },function(){
  5.     $(this).removeClass('open').addClass('closed').nextUntil('DT').hide();
  6. })
  7. .addClass('closed')
  8. .nextUntil('DT')
  9. .hide();

Functional request: Have have a group of radio buttons and when clicked, have them show a response

The Html
  1. <input type="radio" name="answer1"/>
  2. <p class="answer answer1">Text</p>
The JavaScript
  1. $("input[type=radio]",this).click(function(){
  2.     $('.answer').hide();  // these are p tags that contain the answers
  3.     var current = $(this).attr('name');
  4.     $('.'+current).show().highlightFade('yellow');
  5. });

Functional request: Have external links prompt that they are going outside of site

The Html
  1. <a href="epa.gov/radiation/">View PDF</a>
The JavaScript
  1. $("a").filter(function() {
  2.        return this.href.match(/.com|.gov|.edu/);
  3. }).click(function(){
  4.     // prompt box code
  5. });
The Final Word

Each project comes with different requirements; the requirements above were only a small part of the requirements for the most recent project but the rest of the list was pretty simple stuff. Feel free to post question or corrections.

back to beginning of this post back to skip to links
Tags: ,

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

Comments are closed.


Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

72 queries. 0.309 seconds. Powered by WordPress visitor stats