Archive for the ‘jQuery’ Category

The following is the best way to go about it. Add the following to the theme’s functions.php file:

if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.3.2');
   wp_enqueue_script('jquery');
}

Replace the URL with the location of what version of jQuery you want to use. The URL above (at the time of this writing) links to the latest version of jQuery on Google’s servers (v1.4) and has in the past linked to v1.3.2. Theoretically I would think it will continue to be the most latest version, until jQuery goes 2.0.

To set active page with playing jQuery

Posted: March 6, 2011 in jQuery
Tags:

I was struggling with this for a few, and finally solved it, so I thought I would share with everyone. I wanted to use a jQuery function to set the font color of the link representing the active page on a web site. After messing around with some different options, I came up with this:

$("#menu a").each(function() {
if(this.href == window.location) $(this).addClass("active-page");
}); 

Note: this is not something I ‘came up with’ exactly – I found it listed in a tutorial. I placed it in my javascript, and hurray! It worked. At least until I uploaded the code to my hosted site. When the site first loaded, none of the menu items were assigned the ‘active-page’ class. After clicking on any of them, however, it worked as expected. After being stumped for a few, I found a solution online that allowed setting the CSS for a menu link by assigning ID properties to the <body> tag in each web page. This worked, but was not desirable for a few reasons. The first is that it’s cumbersome, having to make changes to each file. Also, since I was using ASP.NET’s Master Page for my site template, I only had one body tag.

After fighting with it for 20 minutes or so, an alert statement showed me the error of my ways. On first load, ‘window.location’ was returning the base url of the web site (http://abc.com/). Once I clicked on an internal link, it returned one of the page urls (http://abc.com/home.php). So the script was running correctly, I just didn’t account for the different url on the site’s first load from an external link. I added a ‘homelink’ id to the home page’s menu item, and added this:

if(this.href == "http://abc.com/")
{
$('#homelink').addClass("active-page");
}

This way, on first load you’ll get the home page’s link set to the CSS you want to specify the active page. All other page loads are handled in jQuery’s each() function.

Learn jQuery-4 : Relationships

Posted: December 14, 2010 in jQuery
Tags:

The title of this lesson might sound a little goofy but all your queries will be answered in the next paragraph.

At first the difference between selectors and relationships might not be obvious. There is one very important thing to remeber. If we select an element using selectors all the commands after that selector will be applied to the element we selected. With relatoinships you change the element to where the actions are applied to on the fly. Lets look at a simple example.

<div>
<a>Link</a>
<p>Paragraph</p>
<span>
<form></form>
</span>
</div>

(more…)

Learn jQuery-3 : Filters

Posted: December 14, 2010 in jQuery
Tags:

This lesson will cover what filters are and what they do. For all users who read this well after this lesson was published, head over to http://api.jquery.com to view a full list of all filters that I may not mention in this lesson because this lesson was published when jQuery was at version 1.4.


1. Filter
s
Filters are nearly the same as selectors. But one big difference between them is that selectors come from CSS and filters are custommed made by the jQuery creators. Some filters however do the same as some selectors. Filters are just are sometimes easier to use. For more advanced Javascript developers, if you want to use all the selectors and filters that jQuery offers but don’t want to use the jQuery library try add Sizzle to your website. More information on Sizzle can be found at http://sizzlejs.com/.

Another good thing to know is that filters are more targeted for html forms (<form>). As you will see later on, these filters will probably be usually used when processing html forms.

:animated = This will selects all elements that are currently being animated. Animation (.animate()) will be covered in another lesson

:button = This will select all the buttons. This includes the element <button> but also <input type=”submit” />, <input type=”reset” /> and <input type=”button” />

:checkbox =  This will select checkboxes. <input type=”checkbox” />

:checked = This will select checkboxes and radio buttons that are checked

(more…)

Learn jQuery-2 : Selectors

Posted: December 7, 2010 in jQuery
Tags:

Selectors are very important and handy things to use. You might know them from CSS. But what jQuery does is take those selectors and tale them to a whole new level. Thre are quite a lot of them so this lesson will only cover frequently used selectors. You can find a full list of all the selectors at http://api.jquery.com

Parent, Child, Sibling ……… huh?

Before we actually take a look at the selectors you first need to know a few things. But if you know what a parent element of a child element is, head to the next section about the selectors. But if you have no clue what i’m talking about or you are still uneasy with those terms, i highly advice you to read this section.

Example Code:

<div>
<div>
<p><a></a></p>
</div>
<p>
<a></a>
<code></code>
</p>
</div>

This example doens’t contain any text. It only contains tags because that’s the thing we must focus on right now.
(more…)