Using JQuery with WordPress

[eastsidedev]

I am new to both JQuery and Javascript. I write mostly in PHP. I have
a wordpress installation, and would like to add a page with dynamic
areas. If I hover the mouse over area1, the text in area2 will change
and the image in area3 will change.

Typically, this is the function I would write for something like this:

$(document).ready(function(){
    $('#area1').moveover(function(){
         $('#area2').html('my new text.');
         $('#area3').html('<image src="image.jpg">');
    });

});

HTML code:

<div id="area1">Area1</div>
<div id="area2">Area2</div>
<div id="area2">Area2</div>

But this is woordpress, so, gather that step1 is activate JQuery, and
I do that by including the following in the head section of the
theme's header.php file:

<?php
        wp_enqueue_script('jquery');
?>

What's next? where does my function go? in the page itself, or inside
the header.php file?

--

You received this message because you are subscribed to the Google Groups "jQuery Development" group.
To post to this group, send email to jquery-dev@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.

[Eric Martin-3]

Here's something I wrote that will give you a place to start:
http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/

You'll want to make sure not to use $(document)..., because WordPress
calls jQuery.noConflict();.

To your other question, I suggest adding the code into an external js
file and including that file using the wp_enqueue_script function in
your functions.php file.

Check out my post and let me know if you still have questions/issues.

-Eric

On Oct 29, 7:24 am, EastSideDev <eastside...@...> wrote:

> I am new to both JQuery and Javascript. I write mostly in PHP. I have
> a wordpress installation, and would like to add a page with dynamic
> areas. If I hover the mouse over area1, the text in area2 will change
> and the image in area3 will change.
>
> Typically, this is the function I would write for something like this:
>
> $(document).ready(function(){
>     $('#area1').moveover(function(){
>          $('#area2').html('my new text.');
>          $('#area3').html('<image src="image.jpg">');
>     });
>
> });
>
> HTML code:
>
> <div id="area1">Area1</div>
> <div id="area2">Area2</div>
> <div id="area2">Area2</div>
>
> But this is woordpress, so, gather that step1 is activate JQuery, and
> I do that by including the following in the head section of the
> theme's header.php file:
>
> <?php
>         wp_enqueue_script('jquery');
> ?>
>
> What's next? where does my function go? in the page itself, or inside
> the header.php file?

--

You received this message because you are subscribed to the Google Groups "jQuery Development" group.
To post to this group, send email to jquery-dev@....
To unsubscribe from this group, send email to jquery-dev+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-dev?hl=en.