jQuery with PHP in Wordpress

Question

I am trying to add a jQuery animation into my Wordpress posts.

The animation works fine, but what is hard is how to do it for each individual post. Meaning, each post is assigned a separate ID (e.g. post-xxxx) and the only way of knowing the post ID (that I know of) is through Wordpress' the_ID() function.

I have my jQuery running in script tags in the index PHP file. How would I go about doing this? My only good idea was to add an onclick HTML listener to the DIV tag for the post and then use the this reference in the jQuery code but it never executed (not sure if my code was wrong).

Here is the code for that thing I tried:

<script>
    function('test') {
        $(this).animate({
            height: '+=350'
        }, {
            duration: 500
        });

        $('.review-thumb').animate({
            opacity: 0
        }, {
            duration: 500
        });
    },
</script>

With this being my HTML tag:

<div onclick="test" class="post number-<?php echo $number; ?> colour-<?php echo $colour; ?>" id="post-<?php the_ID(); ?>">

The website theme can be found at http://vusavusa.com/blog/?theme=vusavusa2. Please excuse the messiness of content right now.

And what is your question?

Philipp
– Philipp

2013-02-04 23:45:38 +00:00
Commented Feb 4, 2013 at 23:45 — Philipp
– Philipp, Commented Feb 4, 2013 at 23:45

Dennis Rongo · Accepted Answer · 2013-02-05 01:22:37Z

2

You can do something like this assuming that all the Posts starts with post- identifier. The selector below will grab all inputs that has an id that starts with post-.

$('input[id^="post-"]').animate({ height: '+=350' }, { duration: 500 });

The concept can be adapted to whatever you're trying to do such as:

/** Assign an animation to each element */
$('input[id^="post-"]').click(function() {
    $(this).animate({ height: '+=350' }, { duration: 500 });
    return false;
});

Another option is to use slideToggle to animate to expand your Post into a full view. your full view will be preloaded but is hidden by default and will have a class of post-full.

CSS:

.post-full { display: none; }

JS:

$(function() { 
    $('[id^="post-"]').click(function() {
        $(this).find('.post-full').slideToggle(500, function(){});
        return false;
    });
});

edited Feb 5, 2013 at 1:22

answered Feb 4, 2013 at 23:54

Dennis Rongo

4,6111 gold badge28 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

Daniel van der Merwe Over a year ago

Hi, thanks for the quick response! I tried that and it doesn't seem to do anything. I have it live right now on my website link, so you can see.

Dennis Rongo Over a year ago

You need to remove that onclick="test" and add what I have above somewhere you your JS file.

Daniel van der Merwe Over a year ago

Sorry, I noticed that too. I did that, and your code is in the website. Line 430 on page source.

maiorano84 Over a year ago

Well I'll be damned... I didn't realize jQuery could target elements that way. +1 for you, good sir.

Daniel van der Merwe Over a year ago

Anything more to add anyone?

|

Chris · Accepted Answer · 2013-02-04 23:52:21Z

0

Why don't you add a class (e.g. "postClass") and use $('.postClass')

answered Feb 4, 2013 at 23:52

Chris

4,37410 gold badges47 silver badges87 bronze badges

1 Comment

Daniel van der Merwe Over a year ago

Then every box would animate when you click just one of them.

Collectives™ on Stack Overflow

jQuery with PHP in Wordpress

2 Answers 2

18 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

18 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related