0

At the moment I have a website that grabs the 12 most recent posts from a category, and displays them as a link to their permalink, with the post thumbnail image as the link image.

You can see a working example here: http://mathewhood.com/sitefiles/

What I want to do, is somehow add functionality into my loop that will allow me to make it so that when you click on one of these list elements, it will display the_content(); for each element.

I found this - http://gsgd.co.uk/sandbox/jquery/easing/ Which I think may provide the functionality that I want (ideally jswing in and out), but I am struggling at implementing it! If anyone knows how I could make this happen please answer this and receive your well deserved up-votes!

http://jsfiddle.net/XzJgU/ - Here is my current loop so far, any help will be greatly appreciated!!!!!!!!!

Improve this question

5 Answers 5

Reset to default
2

Here is my solution to your problem. I'm giving an example on how to implement jquery Easing.

EDIT revised my post, please View revised sample here Hope it helps.

$('.thumbs').click(function(e){
    e.preventDefault();
    var contents = $(this).closest('.recentPost').find('.caption').html();
    var $container = $('#theContainer').html(contents);
    $container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:100}, {duration: 1000, easing: 'easeInOutCirc'});
    $container.click(function(){
        $container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
        $container.fadeOut('slow');
        $container.html('');
    });
});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

That is the functionality that I want, except I need the content to be generated from the wordpress loop I linked above. Do you know how I could make it sit in that loop, and have the content hidden at first, and then become visible?
@Mathew please check out the revised sample I created for you. I hope it helps.
@Mathew I think the sample of Jasper works fine for you all you need is to understand how the contents are manipulated.
Hey sorry mate was on lunch, I will check it out now. I looked at your jsfiddle quickly, is there a way to make it so that when you click another one, the div reduces size to 0 and then begins to animate out again?
Okay, I have tried it out and once again have had no luck :( I am not sure if I am calling something wrong or what the deal is but yeah.. it just seems to be doing nothing :( Here is a js fiddle with all of my code and I will leave the live preview the same... I am sure it is something simple I am missing but I just can't see it :( jsfiddle.net/TeJKG - My current complete code mathewhood.com/sitefiles - My live preview
1

Something like that should work - http://jsfiddle.net/XzJgU/5/. It renders the content for each post in the loop, hidden by default using CSS. When a post is clicked, it moves its content to #displayed-post, making it visible. When another post is clicked, its moves back to its original container and the new post content is moved there.

Improve this answer

2 Comments

Hey, I just tried implementing this, but it doesn't seem to do anything at all :o mathewhood.com/sitefiles
It seems like you already removed it? Can you put it back up? I haven't actually ran that code, and I didn't really expect that to work as-is... just gave a general idea of how that could work. Have you tried debugging it? Seeing what exactly doesn't work? Is the event callback being called? Does it find the element with the post contents? Does it find the element it should move the contents to? Is the append() call failing? Are there any errors in the console?
1

I'm not entirely clear on how you want this to work - are you looking for a PHP solution or a JavaScript one or perhaps a mix of the two. I've got two suggestions on how you might make it work. Also, note that the jQuery library you're referring only adds easing options to jQuery - i.e. it only deals with animation and not with the business logic and behaviour of your code.

  1. Using ajax
    This should work in this case since you're not making cross-domain requests. Essentially, you'd intercept the click to the link, figure out where it's pointing and then make a GET request to that page. You'd then filter out the appropriate HTML from the response and put it into your page. Something like this:

    $('.recentPost a').click(function(){
    $.get($(this).attr('href'), function(data){
        //make a get request to the page the link linked to
        //and extract the blog content div
        $("placeholder").html($(data).filter(".blogRight"));
    });
    return false; //cancel the browser's default action on click to keep user on page
});

    where you'd have a <div id="placeholder" /> in your HTML page where you'd like the content to appear.

  2. Using PHP + JavaScript
    Instead of fetching the content on demand, you'd generate it when the page loads but keep it hidden. You'd again intercept clicks but this time you'd find and display the appropriate, existing div on the page.

    So your generated page would look something like this:

    <div id="contentWrap">
        <div class="hidden-featured-content" id="content-f12">
            <div>Your content here</div>
        </div>
        <div class="hidden-featured-content" id="content-f11">
            <div>Your content here</div>
        </div>

        <div id="newBanner"></div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=35" id="link-f12"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
                <div class="captionTitle">Hello World 12!</div>
                <p></p>
            </div></a>
        </div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=32" id="link-f11"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
                <div class="captionTitle">Hello World 11!</div>
                <p></p>
            </div></a>
        </div>
     ...

    You could then use something like to toggle the appropriate content

    $('.recentPost a').click(function(){
    if($(this).attr('id')){
        var x = /link-(.*)/.exec($(this).attr('id')); //figure out which content- div to display
        $('.displayed').hide().removeClass('displayed'); //hide already displayed content
        $('#content-' + x[1]).show().addClass('displayed'); //show content and mark it as displayed
        return false;
    }
});
Improve this answer

2 Comments

I have zero experience with aJax so I think the PHP+JS solution would be easier for myself. The answer above yours has the idea that I am trying to get but the functionality isn't quite there.
@Mathew I've just put together some quick-and-dirty sample code that might help. It doesn't deal with the PHP part of generating the content divs, but it seems like that's something you're comfortable doing.
1

There are a number of ways to achieve this. The most efficient would probably be a full ajax solution but that would require a Wordpress plugin and some advanced scripting.

The most straightforward solution would be to add a box for dynamic content, output the content for each post in a hidden DIV under it's permalink/image, then use javascript to move content from the hidden DIVs to the dynamic content box when a permalink is clicked. I've worked up some code at http://jsfiddle.net/HF9Pr/.

Improve this answer

Comments

1

Try this:

<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

<style type="text/css"> 
div.panel,p.flip
{
width: 203px;
margin: 0px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
background: #c1e0fb;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
}
div.panel
{
height: 288px;
display: none;
border-top: 1px dashed #aaa;
}
p.flip
{
border-top: 1px dashed #aaa;
border-bottom: 1px dashed #aaa;
}
</style>
</head>

<body>

<div class="panel">
<b>sclughslru</b>
<br><br>
ertljhvij3p
<br><br>
<b>veuywihtp</b>
<br><br>
ghdjhrntnd
<br><br>
<b>ehv3rtv</b>
<br><br>
vt4k4kb76kb5
<br><br>
<b>edb3jrr3n54</b>
<br><br>
skcehgkheone
</div>

<p class="flip"><img src="https://dl-web.dropbox.com/get/Pictures/Other/up-down.jpg?w=f17ee285" style="width: 12px; height: 10px; margin-right: 10px;" />Information</p>

</body>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.